expo-gl - Amazon Vega Docs

@amazon-devices/expo-gl provides GLView that acts as an OpenGL ES render target and provides a GLContext. On mounting of GLView, an OpenGL ES context is created. It should receive a onContextCreate function, which takes a gl object. This gl object is the core way of interacting with OpenGL - with the use of JSI, expo-gl creates methods on the gl object that correspond to webgl API methods, e.g. gl.clearColor. It doesn’t natively provide a way to render an image every frame and other JS functions must be used for it (e.g. setInterval). GLView’s drawing buffer is presented as the contents of the View every frame indicated by calling the endFrameEXP method. Methods suffixed with EXP are expo-gl’s extensions. ExpoGL also provides static methods (i.e. usable without a GLView) for headless rendering - see documentation for createContextAsync and takeSnapshotAsync. This is a system-deployed library and is available to React Native for Vega apps without a separate installation process. It is deployed as an autolinking library which your app links to at runtime. Compatibility is guaranteed only between the library and the version of React Native for Vega for which it is built.

Installation

Add the JavaScript library dependency in the package.json file.

"dependencies": {
    ...
    "@amazon-devices/expo-gl": "~2.0.0",
    "react": "~18.2.0",
    ...
    },
    ...
"overrides": {
    "react": "~18.2.0"
    },

Reinstall dependencies using npm install command.

Examples

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {GLView} from '@amazon-devices/expo-gl';

export const App = () => {
  return (
    <View style={styles.container}>
      <GLView style={styles.gl} onContextCreate={onContextCreate} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  gl: {
    width: 300,
    height: 300,
  },
});

// @ts-ignore Implicit any
function onContextCreate(gl) {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 1, 1, 1);

  // Create vertex shader (shape & position)
  const vert = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(
    vert,
    `
    void main(void) {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 150.0;
    }
  `,
  );
  gl.compileShader(vert);

  // Create fragment shader (color)
  const frag = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(
    frag,
    `
    void main(void) {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  `,
  );
  gl.compileShader(frag);

  // Link together into a program
  const program = gl.createProgram();
  gl.attachShader(program, vert);
  gl.attachShader(program, frag);
  gl.linkProgram(program);
  gl.useProgram(program);

  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);

  gl.flush();
  gl.endFrameEXP();
}

API reference

Check out the dedicated documentation page for info about this library, API reference and more: Official Expo documentation for expo-gl.

Components

Component	Description
`GLView`	A View that acts as an OpenGL ES render target. On mounting, an OpenGL ES context is created. Its drawing buffer is presented as the contents of the View every frame

GLView props

Prop	Description
`enableExperimentalWorkletSupport`	Enables support for interacting with a gl object from code running on the Reanimated worklet thread
`onContextCreate`	A function that will be called when the OpenGL ES context is created. The function is passed a single argument `gl` that extends a `WebGLRenderingContext` interface

Methods

Method	Method type	Description
`createContextAsync`	Static method	Imperative API that creates headless context which is devoid of underlying view. It’s useful for headless rendering or in case you want to keep just one context per application and share it between multiple components
`destroyContextAsync`	Static method	Destroys given context
`takeSnapshotAsync`	Static method	Takes a snapshot of the framebuffer and saves it as a file to app’s cache directory
`destroyObjectAsync`	Component method	Destroys given `WebGLObject`, e.g. a texture
`takeSnapshotAsync`	Component method	Same as static `takeSnapshotAsync()`, but uses WebGL context that is associated with the view on which the method is called

Implementation details

The @amazon-devices/expo-gl library on Vega doesn’t support the following methods: createCameraTextureAsync and startARSessionAsync.

Supported versions

Package Version	Based On	@amazon-devices/react-native-kepler version
2.0.x	13.4.0	2.0.x

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.

​Installation

​Examples

​API reference

​Components

​GLView props

​Methods

​Implementation details

​Supported versions

​Additional resources