Configure your React Native Application

if it not there, add libRNWebGL.a in the Linked Libraries of your project target (and remove the potential libGPUImage.a if it not needed). There is a "bug" with react-native link.

on Android:

react-native-webgl is implemented with some C++ bricks and react-native link react-native-webgl is not enough to install and configure your project for Android:

android/local.properties: Make sure you have an up-to-date Android NDK (needed to compile the Native C++ code) and that it's properly configured in ANDROID_NDK env or in local.properties file (e.g. ndk.dir=/usr/local/share/android-ndk).

android/build.gradle: If it's not already there, add gradle-download-taskbuildscript dependency: classpath 'de.undercouch:gradle-download-task:3.1.2' . If you don't do this, you will likely have :downloadJSCHeaders not working.

android/app/build.gradle: Make sure you have minSdkVersion 17 or higher

Difference with web's WebGL

"RN" Extension

The first noticeable difference is the addition of an extension, called "RN" that you can get with gl.getExtension("RN"). It returns an object with a few functions:

endFrame(): the mandatory call to get anything drawn on screen. It's the way to tell the current implementation everything is finished for the current frame. (we might later introduce better way)

loadTexture(config): It is a way to load a Texture with a configuration object. For the config object format see Section Texture Config Formats.This function returns a Promise of { texture, width, height } where texture is the actual WebGLTexture instance you can use in a gl.bindTexture and width and height is the texture dimension.

unloadTexture(texture): It is a way to unload a Texture with the texture object that was returned from a previous loadTexture call. This must be invoked when a texture is no longer required and when it can be removed, in order to avoid memory leaks. This is especially important when using your preferred library (such as three.js), as not only the objects created by your preferred library will need to be disposed, but the texture object itself needs to be unloaded. For an example of how to safely remove all references to textures, see this memory leak issue discussion.

Texture Config Formats

The texture formats are provided in an extensible and loosely-coupled way via adding more "Loaders" to the project. (as soon as they are linked, they will get discovered by RNWebGL via the RN bridge).

This library comes with one built-in loader: the Image Loader. More loaders can come via libraries like react-native-webgl-camera and react-native-webgl-video. Feel free to implement your own.