PlayCanvasエンジン 1.62にWebGPUの初期サポートが登場！

こちらは、2023年3月31日に公開された以下のドキュメントを翻訳したものとなります。
Initial WebGPU support lands in PlayCanvas Engine 1.62!

---

WebGPUは、ウェブでの3Dグラフィックの処理方法に革新をもたらす最先端の技術です。WebGLの後継として、WebGPUは複雑な3Dグラフィックやシミュレーションに対してより高速かつ効率的なレンダリング機能を提供します。

PlayCanvasはこの新技術を最前線で把握し、プラットフォームにWebGPUサポートを追加するよう取り組んできました。

WebGPUによって、今後ウェブ上に没入感やインタラクティブ性をさらに高めた3D体験が登場すると期待されています。

PlayCanvas WebGPUクラスターエリアライトデモ

WebGLエンジンのリファクタリング

WebGPUサポートを追加するには、既存のWebGLエンジンで多くのリファクタリング作業が必要でした。後方互換性を保ちつつアーキテクチャの詳細な変化を実装するには、細心の注意を払わなければなりませんでした。

• WebGPUサポートを実現するには、WebGLとWebGPUで共有可能なグラフィック技術を明確に分離する必要がありました。これには、WebGL固有のコードを別のクラス群に抽出するための大幅なリファクタリング作業が含まれました。
• 高度なマテリアルプロパティやライティングモードを実装するGLSLシェーダーを生成するために、PlayCanvasはシェーダーチャンクのコレクションを使用します。これは、ユーザーが定義するカスタムシェーダーチャンクについても同様です。しかし、WebGPUはWGSL言語を採用しているため、PlayCanvasチームは glslang と tint WASM モジュールを使用して、Uniformバッファのサポートやその他の修正を加えつつこれらのシェーダーを動的に変換しました。
• PlayCanvasには明示的なレンダリングパスがなかったので、レンダリングプロセスが厳密で拡張しづらくなっていました。FrameGraphの実装によってこれを解決し、レンダリング処理を一連のレンダリングパスや依存関係、関連ターゲットとして記述できるようになりました。結果的にさらに柔軟で高性能なアーキテクチャが作成されました。
• WebGLがレンダリングステートやシェーダーをカスタムAPIで設定するのに対し、WebGPUはこれらをすべてレンダリングパイプラインで指定します。両方のAPIを最適なパフォーマンスでサポートするため、PlayCanvasチームはレンダリングステートを比較および設定しやすいスタンドアローンのオブジェクトにリファクタリングしなければなりませんでした。
• WebGPUプラットフォームのサポートに向けて、UniformをUniformバッファに整理するため大幅なリファクタリングが必要でした。
• WebGPUデバイスの非同期作成を容易にするため、グラフィックデバイスを作成する非同期APIを新たに導入しました。これは、WebGPU採用に必要となる主要な変更点です。

これからやるべきこと

• 主な目標は、WebGPUの実装をWebGLの実装と同等にすることです。この目標に向けて大きく進歩していますが、まだ不足している機能があります。また、詳細な部分でクリーンアップや修正が必要です。
• リリース済み/パブリッシュ済みの両方のアプリケーションでエディター環境を組み込む必要があります。現状、エディター環境ではWebGLしか使用できません。
• 主な目標はWebGPUの利用をWebGLと完全に同等にすることです。ただし現在は初期段階として、一部の概念の基本的な実装をおこない実用的な実装としています。この実装を拡張して、パフォーマンス面の目標を達成する必要があります。
• ディベロッパーはWebGPUによって、GPU上でさらに効率的なデータ並列処理をおこなえるCompute Shaderを利用できるようになります。この機能では、CPUでの実行が難しかった複雑なアルゴリズムやシミュレーションのパフォーマンスを大幅に向上できます。Compute Shaderを利用すると高度なパーティクルシステム、ポストプロセスやグローバルイルミネーション技術などの新しいビジュアル機能を次のレベルへと引き上げることが可能です。

エンジンサンプル

WebGPUの早期プレリリースとして、WebGPUを使用する複数のエンジンサンプルをアップデートしました。https://playcanvas.github.ioからアクセスいただけます。WebGPUを使用するには、Chrome Canaryブラウザが必要です。「chrome://flags/#enable-unsafe-webgpu」フラグを有効にしてください。

PlayCanvasサンプルブラウザ

ぜひフォーラムにご意見をお寄せください！

帰属

Barbo作成の「Oldsmobile Cutlass Supreme Sedan ’71」はCreative Commons Attributionにライセンスされています。