Skip to content

レンダリングパイプライン (Rendering) ​

PlutoEngine のレンダラは、WebGPU を利用したハードウェアインスタンシングによる超大規模描画(30万体以上)に特化したアーキテクチャです。createGraphicsDevice(canvas) により、モダンな WebGPU パイプラインが初期化されます。

アーキテクチャの概要 ​

CPU(JavaScript/TypeScript側)の役割は、SoA(Structure of Arrays)形式のバッファをゼロアロケーションで GPU へストリーミングすることに特化しています。

  1. データ同期 (Write-Through) CPU上の Float32Array アリーナから変更のあった領域(Dirtyなバイト列)を、中間バッファへのパッキングを経由せずに、writeBuffer で GPU へ直接同期(ライトスルー)します。これにより CPU 側のパッキング負荷がゼロになります。
  2. GPU Texture2DArray スプライトテクスチャは TextureManager が管理する GPU Texture2DArray としてアップロードされます。これにより、異なるテクスチャを持つスプライトを描画する際にもバインド切り替えを発生させず、1ドローコールでの一括描画を可能にします。
  3. ハードウェアインスタンシング 単一のクアッドメッシュ(4頂点)に対してインスタンスアトリビュートをバインドし、WebGPU の drawIndexed(6, activeCount) を1回呼び出すことで、30万体以上のスプライトを一括描画します。

WebGPU バックエンドの最適化 (30万体対応) ​

WebGPU バックエンドでは、以前の 150,000 体クラッシュ限界(ブラウザ/GPU 間の IPC キュー過負荷)を克服するため、以下の最適化が適用されています:

  • ライトスルー同期 (Write-Through): 従来のパッキングループを排除し、アリーナの変更を直接 GPU に転送。
  • writeBuffer 転送の適正サイズ化: 固定の全バッファ転送を廃止し、実際に変更されたデータのみを GPU キューへ転送。IPC 過負荷を根絶し、30万体の極限負荷でも滑らかに動作します。

メリット ​

  • 描画コールの極小化: 30万体以上のエンティティを単一ドローコールで描画。
  • ゼロアロケーションとの統合: アリーナの Float32Array を追加コピーなしにそのまま GPU へストリーミング。
  • 最高峰のスケーラビリティ: WebGPU による次世代の描画性能。