Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

expo-gl

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

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

GLViewがマウントされると、OpenGL ESコンテキストが作成されます。glオブジェクトを受け取るonContextCreate関数を渡します。このglオブジェクトはOpenGLと対話するための主要な方法です。expo-glはJSIを使用して、WebGL APIメソッドに対応するメソッド（gl.clearColorなど）をglオブジェクト上に作成します。ライブラリには、フレームごとに画像をレンダリングする組み込みの方法が用意されていないため、他のJS関数（setIntervalなど）を使用する必要があります。endFrameEXPメソッドを呼び出すと、GLViewの描画バッファーがフレームごとにビューの内容として表示されます。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バージョン
2.0.x	13.4.0	2.0.x

その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。

Last updated: 2025年9月30日