expo-gl - Amazon Vega Docs

@amazon-devices/expo-gl provides GLView that acts as an OpenGL ES render target and provides a GLContext. On the mounting of a GLView, an OpenGL ES context is created. You should receive an 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, for example gl.clearColor. The library doesn’t natively provide a way to render an image for every frame, therefore other JS functions must be used for it, like 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 that are usable without a GLView for headless rendering. To learn more, see the documentation for createContextAsync and takeSnapshotAsync. This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library 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.1",
    "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

See the documentation page for information about this library and API reference: 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`	Called when the OpenGL ES context is created. The function is passed a single argument `gl` that extends a `WebGLRenderingContext` interface.

Methods

Method	Description	Supported
`createContextAsync`	Creates a headless context, which is devoid of an underlying view. This method is useful for headless rendering or in case you want to keep only one context per application and share it between multiple components.	✅ Yes
`destroyContextAsync`	Destroys the given context.	✅ Yes
`takeSnapshotAsync`	Takes a snapshot of the framebuffer and saves it as a file to the app’s cache directory.	✅ Yes
`destroyObjectAsync`	Destroys a given `WebGLObject`, for example a texture.	✅ Yes
`takeSnapshotAsync`	Same as the static `takeSnapshotAsync()`, but uses a WebGL context that’s associated with the view on which the method is called.	✅ Yes
`createCameraTextureAsync`	Not supported by `@amazon-devices/expo-gl`. Expo documentation: https://docs.expo.dev/versions/latest/sdk/gl-view/#component-methods	❌ No
`startARSessionAsync`	Not supported by `@amazon-devices/expo-gl`. Deprecated from Expo AR API.	❌ No

Supported versions

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

Supported Third-Party Libraries and Services.

​Installation

​Examples

​API reference

​Components

​GLView props

​Methods

​Supported versions

​Related topics