Vegaウェブアプリで利用できるWebGLサポート
Vega WebViewには、OpenGL ES 3.0 Chromiumを搭載したWebGL 2.0サポートが含まれており、WebGL GLSL ES 3.00（OpenGL ES GLSL ES 3.0 Chromium）によるシェーディング機能を備えています。Vega WebViewはWASM（WebAssembly）をサポートしています。Vega WebViewは現在、WebGPUをサポートしていません。 デバイスでWebViewアプリを読み込む際に、ソースURIとしてhttps://webglreport.com/?v=2（英語のみ）を指定すると、追加の詳細情報を確認できます。サポートされている拡張機能
以下は、WebGLでサポートされている拡張機能の一覧です。- EXT_color_buffer_float（英語のみ）
- EXT_color_buffer_half_float（英語のみ）
- EXT_disjoint_timer_query_webgl2（英語のみ）
- EXT_float_blend（英語のみ）
- EXT_texture_filter_anisotropic（英語のみ）
- EXT_texture_norm16（英語のみ）
- OES_texture_float_linear（英語のみ）
- WEBGL_compressed_texture_astc（英語のみ）
- WEBGL_compressed_texture_etc（英語のみ）
- WEBGL_compressed_texture_etc1（英語のみ）
- WEBGL_debug_renderer_info（英語のみ）
- WEBGL_debug_shaders（英語のみ）
- WEBGL_lose_context（英語のみ）
- WEBGL_multi_draw（英語のみ）
VegaでWebGLを使用するための戦略
これらの戦略は、パフォーマンスを高めるためにWebGLライブラリを使用するゲーム、TVアプリ、生産性向上アプリに適用されます。DOM/HTMLのレンダリングとメモリ管理の方法はブラウザによって管理されるのに対して、WebGLは直接実装する必要があります。次の一般的なガイドラインに従ってください。- 複雑な計算を簡素化し、メモリを効率的に管理します。JSとC/C++間の変換はできるだけ直接的にします。
- テクスチャ、アセット、オブジェクトのサイズを削減または制限します。
- ハードウェア用に最適化された既存のブラウザ設定、GPUオプション、ブラウザツール、ライブラリを再利用します。または、アプリに合わせて細かく調整できるブラウザ設定のみを再利用することもできます。
キャンバスへのビデオ表示の回避
ビデオ用のPixiJS API（英語のみ）などを使用してWebGLにビデオを追加することは避けます。代わりに、HTMLのvideo要素や、その他のウェブベースのビデオプレーヤーライブラリを使用します。VegaはプライベートGPUバッファーを使用してビデオを直接再生するので、ビデオフレームがWebGLテクスチャとして抽出されることはありません。ドローコールの削減
テクスチャアトラス、頂点バッファーオブジェクト（VBO）、インデックスバッファーオブジェクト（IBO）、インスタンス化などの手法を使用して、複数のオブジェクトを1回のドローコール（バッチ処理）にまとめます。インスタンス化とは、同じオブジェクトの複数のインスタンスをレンダリングすることです。OpenGL ESでは、1フレームあたりのドローコール数を500回未満にしてください。 描画の実行は、setTimeoutとuseEffectではなくrequestAnimationFrameから行います。useEffectやuseMemoを使用する場合は、requestAnimationFrameが使用する値を更新することで、描画されるオブジェクトを変更します。可能であれば、描画したオブジェクトや描画に使用した方程式をキャッシュして、その処理にかかる時間を短縮します。
テクスチャの最適化
テクスチャのサイズを必要最小限の解像度に変更します。圧縮テクスチャ形式（DXTやETCなど）を使用し、ミップマップを取り入れます。テクスチャアトラスを使用することでも、ドローコールとメモリ使用量を削減できます。複雑なアルゴリズムの簡素化
- 可能な場合は、
highp floatではなくhalfやfloatなどの低精度のデータ型を使用します。 - シェーダーの複雑さと、必要となる計算の回数を最小限に抑えます。
powやsinなどのリソース負荷の高い関数の代わりに、ルックアップテクスチャを使用します。- ライトとシャドウが多すぎると、パフォーマンスに影響を及ぼします。ベイクされたライティング（事前レンダリング）を使用するか、リアルタイムライティングを簡素化することを検討してください。
カリングとLODの実装
可能な場合は、LOD、視錐台、オクルージョンカリングのようなアルゴリズムを使用します。滑らかさを向上させるために、詳細レベルを下げ、不可視のオブジェクトは描画しないようにします。相対LODは、表示するポリゴンが多いときに、ポリゴンの品質を下げることで高負荷に対応します。効率的なメモリ管理
- テクスチャ、バッファー、プログラムなどの不要になったWebGLオブジェクトは廃棄します。
- メモリの使用状況を注意深く管理して、不要な割り当てと割り当て解除を防ぎます。
- 可能な場合は、クラスではなく構造体（TypeScriptインターフェイス）を使用します。
- 頻繁に使用されるメソッド内では、クラスの再インスタンス化、文字列の連結、計算量の多い方程式を実行しないようにします。
- メモリを事前に割り当て、リストの代わりに配列を使用し、可能な場合はポインターや参照のような共有リソースを使用します。
- オブジェクトプーリングを実装してメモリの断片化を抑えます。
ファイル管理
- スプライトやその他の画像アセットをできるだけ再利用して、ファイルの読み込み時間を短縮します。
- ライブラリ内の既存のアセットバンドルシステム、圧縮やバンドルを行うゲームシステムを活用します。
- ファイルの読み込みには、非同期処理または並列処理を使用します。
- MP3やOGGなどの圧縮オーディオ形式を使用します。同じオーディオを繰り返し再生する場合は、読み込むファイルの数が多くなりすぎないようにします。
- サウンドエフェクト（SFX）用のオーディオファイルを連結して、読み込み時間とメモリ使用量を最適化します。
-
サウンドエフェクトごとに個別のオーディオファイルを使用するのではなく、時間を指定する方法でオーディオを再生することを検討します。
ハードウェアアクセラレーション
ハードウェアアクセラレーションはデフォルトでオンになっています。ブラウザでハードウェアアクセラレーションをトリガーするために使用されるCSSによって、パフォーマンスが向上することはほとんどありません。powerPreference設定が「high-performance」の場合、エネルギー効率よりもパフォーマンスを優先するようにブラウザに指示します。アンチエイリアスのようなほかの設定によっても、レンダリング時のGPU処理が削減されます。アプリによっては、アンチエイリアスを無効にしても表示上はそれほど気にならない可能性があります。低速のデバイスでもfailIfMajorPerformanceCaveat: falseを使用するオプションは、結果が遅くてもコードを同じように実行する場合に便利です。
状態変更の最小化とブロッキング呼び出しの回避
- 状態の変更回数を最小限に抑えます。これらを最小限に抑えるには、異なるシェーダープログラム、テクスチャユニット、レンダリングターゲットを切り替える方法などがあります。
getError()やgetParameter()などのブロッキング呼び出しはパフォーマンスに影響するため、メインスレッドで実行しないようにします。requestAnimationFrameを使用しないときはgl.flush()を使用して、ブラウザでWebGLコマンドがより迅速に実行されるようにします。
