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コンテキストが作成されます。GLViewには、glオブジェクトを受け取るonContextCreate関数を指定する必要があります。このglオブジェクトが、OpenGLとやり取りする中核的な手段となります。expo-glは、JSIを使用して、webgl APIのメソッドに対応するメソッドをglオブジェクト上に作成します。たとえば、gl.clearColorのようなメソッドが作成されます。このライブラリは、フレームごとに画像をレンダリングする方法をネイティブには提供しないため、そのような動作にはsetIntervalなどのほかのJS関数を使用する必要があります。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.1",
     "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`	基盤となるビューのないヘッドレスコンテキストを作成します。このメソッドは、ヘッドレスレンダリングを行う場合や、アプリごとにコンテキストを1つだけ保持して複数のコンポーネント間で共有する場合に役立ちます。	✅ はい
`destroyContextAsync`	指定されたコンテキストを破棄します。	✅ はい
`takeSnapshotAsync`	フレームバッファのスナップショットを取得し、アプリのキャッシュディレクトリにファイルとして保存します。	✅ はい
`destroyObjectAsync`	指定された`WebGLObject`（テクスチャなど）を破棄します。	✅ はい
`takeSnapshotAsync`	静的メソッドの`takeSnapshotAsync()`と同じですが、メソッドが呼び出されたビューに関連付けられているWebGLコンテキストを使用します。	✅ はい
`createCameraTextureAsync`	`@amazon-devices/expo-gl`ではサポートされていません。Expoドキュメント：https://docs.expo.dev/versions/latest/sdk/gl-view/#component-methods	❌いいえ
`startARSessionAsync`	`@amazon-devices/expo-gl`ではサポートされていません。Expo AR APIで非推奨になりました。	❌いいえ

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

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

サポート対象のサードパーティのライブラリとサービス

Last updated: 2025年9月30日