expo-gl - Amazon Vega Docs

@amazon-devices/expo-gl provides a GLView that acts as an OpenGL ES render target and provides a GLContext. When GLView mounts, it creates an OpenGL ES context. Pass an onContextCreate function that receives a gl object. This gl object is the primary way to interact with OpenGL. Using JSI, expo-gl creates methods on the gl object that correspond to WebGL API methods, such as gl.clearColor. The library doesn’t provide a built-in way to render an image every frame, so you must use other JS functions (such as setInterval). The GLView drawing buffer presents as the contents of the View every frame when you call the endFrameEXP method. Methods suffixed with EXP are expo-gl extensions. ExpoGL also provides static methods (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

Known issues and limitations

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

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

​Installation

​Examples

​API reference

​Components

​GLView props

​Methods

​Known issues and limitations

​Supported versions

​Related topics