Web上でのリアルタイム・グローバル・イルミネーション：サーフェルベース・レンダリングの深掘り
リアルタイム・グローバル・イルミネーション（GI）の追求は、長らく視覚的な忠実度と計算コストの間の戦いでした。パス・トレーシングは光のシミュレーションにおけるゴールドスタンダードを提供しますが、ピクセルごとに数千本のレイを必要とするため、リアルタイム・アプリケーション、特にオープンなWeb上では、実行速度が極端に遅くなってしまいます。しかし、WebGPUの登場により、状況は変わりつつあります。以前はネイティブのAAAエンジンのみの領域であった、計算負荷の高いレンダリング・パイプラインの構築が可能になっています。
この問題に対する有望なアプローチの一つが、surfels（サーフェル：表面要素）の使用です。ライティング計算を画面解像度から切り離すことで、サーフェルは比較的少数の表面パッチをシェーディングし、その計算結果を時間の経過とともにキャッシュすることで、低スペックなハードウェアでも滑らかでリアルタイムなパフォーマンスを実現します。
サーフェルの理解
サーフェルは、位置、法線（向き）、および半径によって定義される、3D空間に浮かぶ平らなディスクです。画面上のすべてのピクセルに対して光を計算する代わりに、エンジンはこれらの離散的な表面要素に対して光を計算します。主な利点は効率性です。50,000個のサーフェルをシェーディングすることは、200万個のピクセルをシェーディングすることよりも大幅に安価ですが、シーン全体の光の跳ね返りを説得力のある形で近似することができます。
レンダリング・パイプライン：ジオメトリからピクセルへ
サーフェルベースのGIシステムを実装するには、高度なマルチステージ・パイプラインが必要です。プロダクション・レディな実装には、これらの要素とその要素が持つ光を管理するために、12以上のコンピュート・パスが含まれます。
1. Surfelization（サーフェル化）
最初のステップは、三角形ベースのジオメトリをサーフェルに変換することです。このプロセスには、G-buffer（法線、深度、およびアルベドを含む）のレンダリングと、サーフェルが不足している、あるいは過剰に密集している箇所を特定するためのスクリーン・スペースの分析が含まれます。競争的な割り当てプロセスを通じて、システムはジオメトリをカバーするために新しいサーフェルを生成し、不要になったものは破棄します。
2. 空間グリッド
すべてのサーフェルを総当たりで比較するコストを避けるため、カメラ中心の階層的な3D空間インデックスが使用されます。このグリッドは、空間をマルチレゾリューションな立方体セルに分割します。カメラに近い場所には高精度な細かいセルを、遠くにはメモリを節約するために粗いセルを配置します。
この構造を構築するには、いくつかのコンピュート・パスが必要です。カウンターのクリア、セルごとのサーフェル参照数のカウント、連続した書き込み範囲を作成するためのセグメント化されたprefix-sumスキャン、そして最後にサーフェル・インデックスを結合されたバッファにスロットリングすることです。これにより、エンジンは$O(1)$の時間で関連するサーフェルをクエリできます。
3. インテグレーターとレイ・トレーシング
WebGPUにはネイティブなハードウェア・レイ・トレーシングのサポートが欠けているため、パイプラインはthree-mesh-bvhを利用して、コンピュート・シェーダーを介してレイ・トレーシングをエミュレートします。インテグレーターの役割は、シーン内にレイを飛ばすことで、各サーフェルに対する放射照度（irradiance）を決定することです。
コンピュート・シェーダー内で材料を効率的に扱うために、システムは2D配列テクスチャ（diffuseArrayTex）を使用します。各レイヤーは材料の拡散色（diffuse color）を表します。レイがジオメトリに当たったとき、BVHは材料IDを提供し、シェーダーは配列から正しい色をサンプルすることになります。
4. 光の誘導
半球を均一にサンプリングすることは、ほとんどのレイが暗い領域や空（void）に当たってしまうため、非効率的です。これを最適化するために、各サーフェルは、hemi-oct-squareマッピングを使用して、64個の方向性ビン（directional bins）を表す8x8の重みグリッドを保持します。
時間の経過とともに、サーフェルはどの方向が明るいかを学習します。インテグレーターは、次に、混合された確率密度関数（PDF）を使用してサンプリングを行います：
- Guided sampling（誘導サンプリング）: 知られている明るい領域を活用する。
- Cosine sampling（コサイン・サンプリング）: 半球を探索して新しい光源を特定する。
5. 時間的安定性とデノイジング
生のサンプリング結果は、かなりのノイズが生じます。画像に大きな遅延を導入することなく画像を安定化させるために、パイプラインは**Multi-Scale Mean Estimator (MSME)**を採用しています。単純な指数移動平均（EMA）とは異なり、MSMEは短期的な平均と長期的な平均の両方を追跡します。これにより、高分散なノイズ（fireflies）を無視しつつ、実際の照明変化には素早く反応できるため、、安定かつレスポンスの良い結果を提供します。
6. 放射状の深度によるライト・リークの解決
サーフェルベースのGI手法における一般的な問題は、「ライト・リーク（光の漏れ）」です。これは、薄い壁の片側のサーフェルが、反対側のピクセルに対して光を共有してしまう現象です。これに対抗するため、各サーフェルには放射状の深度アトラス（radial depth atlas）が備わっています。これは、本質的には4x4ピクセル・タイルとして保存された360度全方位の深度カメラのようなものです。
**Moment Shadow Mapping (MSM)**を使用することで、システムは周囲のジオメトリへの距離を記録します。ピクセルがサーフェルから光をクエリする際、サーフェルは自身の深度マップをチェックします。もしジオメトリが経路を遮断している場合、光は遮断され、ライト・リークの大部分を効果的に排除できます。
7. Resolve Pass（リゾルブ・パス)
最終段階はリゾルブ・パスであり、これは放射照度をサーフェルから画面ピクセルへ転送する工程です。すべてのピクセルに対して、エンジンは空間グリッドをクエリして隣接するサーフェルを検索し、以下の要素に基づいてそれらの寄与分をブレンドします：
- Distance（距離）: 近いサーフェルほど、影響力が大きくなります。
- Orientation（向き）: ピクセルと同じ方向を向いているサーフェルは、より高い重み付けがなされます。
- Age & Confidence（経過時間と信頼度）: 新しい、ノイズの多いサーフェルは、徐々にフェードインさせます。
- Occlusion（オクルージョン）: 放射状の深度アトラスをチェックして、サーフェルがピクセルから見て可視であるかを確認します。
技術的制約とトレードオフ
これをWeb上で構築することは、独自の課題をもたらします。Chromeにおける顕著な制限は、1つのコンピュート・パスにつき10個のストレージ・バッファ（storage buffers）のハード・リミットがあることで、開発者はバッファを結合するか、あるいは（ブラウザ間の互換性がない可能性がある）リード・ライト・フロート・ストレージ・テクスチャ（read-write float storage textures）を使用する必要があります。
さらに、ハードウェア・アクセラレーションによるレイ・トレーシングの欠続欠如は、システムがパフォーマンスは高いものの、まだ高度に動的なジオメトリや複雑な鏡面反射（specular reflections）をサポートできないことを意味します。現在の実装は、静的なジオメトリと拡散反射（diffuse inter-reflections）に焦点を当てています。
結論
WebGPUにおけるサーフェルベースのGIパイプラインの構築に成功したことは、ブラウザがもはや単純なラスタライズに限定されないことを示しています。EA SEEDのようなAAA研究の技術を統合し、巧妙な空間データ構造を活用することで、Webページ上、さらにはモバイルデバイス上でも、物理的に妥当なリアルタイム・ライティングを実現することが可能です。制限は依然として残っていますが、高精度で計算駆動型のグラフィックスが、オープンなWeb上で展開される新しい時代の基盤が整いました。