expo-gl

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

@amazon-devices/expo-glはGLViewを提供します。これはOpenGL ESのレンダリングターゲットとして動作し、GLContextを提供します。

GLViewをマウントすると、OpenGL ESコンテキストが作成されます。GLViewには、glオブジェクトを受け取るonContextCreate関数を指定する必要があります。このglオブジェクトが、OpenGLとやり取りする中核的な手段となります。expo-glは、JSIを使用して、webgl APIのメソッドに対応するメソッドをglオブジェクト上に作成します。たとえば、gl.clearColorのようなメソッドが作成されます。フレームごとに画像をレンダリングする方法はネイティブには提供されないため、そのような動作にはほかのJS関数（setIntervalなど）を使用する必要があります。GLViewの描画バッファーは、endFrameEXPメソッドが呼び出された各フレームでビューのコンテンツとして表示されます。EXPというサフィックスを持つメソッドはexpo-glの拡張機能です。

ExpoGLには、ヘッドレスレンダリング用に静的メソッド（GLViewなしで使用可能）も用意されています。createContextAsyncとtakeSnapshotAsyncのドキュメントを参照してください。

このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは、アプリが実行時にリンクする自動リンクライブラリとしてデプロイされます。ライブラリとVega向けReact Nativeとの互換性は、ライブラリがターゲットとしているVega向けReact Nativeバージョンとの間でのみ保証されます。

インストール
例
APIリファレンス
- コンポーネント
  - GLViewのプロパティ
- メソッド
実装の詳細
サポートされているバージョン
関連リソース

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

クリップボードにコピーしました。

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

npm installコマンドを使用して、依存関係を再インストールします。

例

クリップボードにコピーしました。

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 暗黙的なany
function onContextCreate(gl) {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 1, 1, 1);

  // 頂点シェーダー（図形と位置）を作成します。
  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);

  // フラグメントシェーダー（色）を作成します。
  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);

  // プログラムにまとめてリンクします。
  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リファレンス

このライブラリの情報、APIリファレンス、その他の詳細については、 Expo公式ドキュメントのexpo-glのページ（英語のみ）を参照してください。

コンポーネント

コンポーネント	説明
`GLView`	OpenGL ESのレンダリングターゲットとして動作するビュー。マウント時にOpenGL ESコンテキストが作成されます。その描画バッファーが、フレームごとにビューのコンテンツとして表示されます。

GLViewのプロパティ

プロパティ	説明
`enableExperimentalWorkletSupport`	Reanimatedワークレットスレッドで実行されているコードからglオブジェクトとやり取りできるようにするためのサポートを有効にします。
`onContextCreate`	OpenGL ESコンテキストが作成されたときに呼び出される関数。この関数には、単一の引数として、`WebGLRenderingContext`インターフェイスを継承する`gl`が渡されます。

メソッド

メソッド	メソッドタイプ	説明
`createContextAsync`	静的メソッド	基盤となるビューのないヘッドレスコンテキストを作成する命令型API。ヘッドレスレンダリングを行う場合や、アプリごとにコンテキストを1つだけ保持して複数のコンポーネント間で共有する場合に役立ちます。
`destroyContextAsync`	静的メソッド	指定されたコンテキストを破棄します。
`takeSnapshotAsync`	静的メソッド	フレームバッファのスナップショットを取得し、アプリのキャッシュディレクトリにファイルとして保存します。
`destroyObjectAsync`	コンポーネントメソッド	指定された`WebGLObject`（テクスチャなど）を破棄します。
`takeSnapshotAsync`	コンポーネントメソッド	静的メソッドの`takeSnapshotAsync()`と同じですが、メソッドが呼び出されたビューに関連付けられているWebGLコンテキストを使用します。

実装の詳細

Vegaの@amazon-devices/expo-glライブラリでは、createCameraTextureAsyncメソッドとstartARSessionAsyncメソッドはサポートされません。

サポートされているバージョン

パッケージのバージョン	ベース	@amazon-devices/react-native-kepler version
2.0.x	13.4.0	2.0.x