Web 端即時全域光照：深入探討基於 Surfel 的渲染技術
追求即時全域光照 (GI) 長期以來一直是視覺保真度與計算成本之間的博弈。雖然路徑追蹤 (path tracing) 為光線模擬提供了金標準，但其每像素需要數千條光線的需求，使得它在即時應用中（特別是在開放式網頁上）速度慢得令人望而卻步。然而，WebGPU 的出現正在改變這一局面，使得構建以往僅屬於原生 AAA 引擎領域的重度計算渲染管線成為可能。
解決此問題的一個極具前景的方法是使用 surfels (表面元素)。透過將光照計算與螢幕解析度解耦，surfels 允許開發者對相對較少數量的表面貼片進行著色，以近似全域光照，並隨著時間緩存這些工作，從而在即使在低階硬體上也能實現平滑的即時性能。
理解 Surfels
一個 surfel 是一個在 3D 空間中漂浮的扁平圓盤，由其位置、法線 (orientation) 和半徑定義。引擎不再為螢幕上的每個像素計算光照，而是為這些離散的表面元素計算光照。其主要優勢在於效率：著色 50,000 個 surfels 比著色 200 萬個像素要便宜得多，但它卻能提供令人信服的近似效果，模擬光線如何在場景中彈跳。
渲染管線：從幾何到像素
實現基於 surfel 的 GI 系統需要複雜的多階段管線。一個生產級的實現涉及十幾次計算傳遞 (compute passes) 來管理這些元素的生命週期以及它們所攜帶的光照。
1. Surfelization (Surfel 化)
第一步是將基於三角形的幾何轉換為 surfels。這個過程涉及渲染 G-buffer (包含法線、深度和 albedo) 並分析螢幕空間以識別何處缺少 surfels 或密度過高。透過競爭性分配過程，系統會生成新的 surfels 以覆蓋幾何體，並銷毀不再需要的 surfels。
2. 空間網格 (The Spatial Grid)
為了避免將每個 surfel 與其他所有 surfel 進行比對的暴力計算成本，系統使用了以相機為中心的級聯 3D 空間索引。此網格將空間劃分為多解析度的立方體單元：相機附近的精細單元用於高精度，而較遠處的較粗糙單元則用於節省記憶體。
構建此結構涉及多次計算傳遞：清除計數器、計算每個單元中的 surfel 引用數、執行分段前綴和掃描 (segmented prefix-sum scan) 以建立連續的寫入範圍，最後將 surfel 索引放入組合緩衝區中。這使得引擎能夠在 $O(1)$ 時間內查詢相關的 surfels。
3. 積分器與光線追蹤 (The Integrator and Ray Tracing)
由於 WebGPU 缺乏原生的硬體光線追蹤支援，管線利用 three-mesh-bvh 透過計算著色器來模擬光線追蹤。積分器的任務是透過向場景射出光線來確定每個 surfel 的輻射強度 (irradiance)。
為了在計算著色器中高效處理材質，系統使用了一個 2D 陣列貼圖 (diffuseArrayTex)，其中每一層代表一種材質的漫反射顏色。當光線擊中幾何體時，BVH 會提供一個材質 ID，讓著色器能從陣列中採樣正確的顏色。
4. 引導光照 (Guiding the Light)
均勻地對半球進行採樣是低效的，因為大多數光線會擊中黑暗區域或虛空。為了優化這一點，每個 surfel 維護一個 8x8 的權重網格，使用 hemi-oct-square 映射來代表 64 個方向性分箱 (directional bins)。
隨著時間推移，surfel 會學習哪些方向是明亮的。積分器接著使用混合機率密度函數 (PDF) 來進行採樣：
- 引導採樣 (Guided sampling): 利用已知的明亮區域。
- 餘弦採樣 (Cosine sampling): 探索半球以發現新的光源。
5. 時間穩定性與降噪 (Temporal Stability and Denoising)
原始採樣會產生顯著的雜訊。為了在不引入巨大延遲的情況下穩定圖像，管線採用了 多尺度平均估計器 (Multi-Scale Mean Estimator, MSME)。與簡單的指數移動平均 (EMA) 不同，MSME 同時追蹤短期和長期平均值。它可以對實際的光照變化做出快速反應，同時忽略高變異數的雜訊 (fireflies)，從而提供穩定且具響應性的結果。
6. 使用徑向深度解決光線洩漏 (Solving Light Leaks with Radial Depth)
surfels 的一個常見問題是「光線洩漏」，即位於薄牆一側的 surfel 與另一側的像素共享光照。為了對抗這一點，每個 surfel 都配備了徑向深度圖集 (radial depth atlas)——本質上是一個以 4x4 像素圖塊形式儲存的 360 度深度相機。
透過使用 動量陰影貼圖 (Moment Shadow Mapping, MSM)，系統會記錄到周圍幾何體的距離。當像素查詢 surfel 的光照時，surfel 會檢查其深度圖；如果幾何體阻擋了路徑，光照就會被阻擋，從而有效地消除大部分洩漏。
7. 解析傳遞 (The Resolve Pass)
最後一個階段是解析傳遞，將輻射強度從 surfels 轉移到螢幕像素。對於每個像素，引擎會查詢空間網格以尋找鄰近的 surfels，並根據以下因素進行混合：
距離: 較近的 surfels 有更大的影響力。
方向: 與像素方向相同的 surfels 會獲得更高的權重。
年齡與信心值: 新的、帶雜訊的 surfels 會逐漸淡入。
遮擋: 檢查徑向深度圖集以確保 surfel 是可見於該像素的。
技術限制與權衡 (Technical Constraints and Trade-offs)
在網頁上構建此技術會帶來獨特的挑戰。Chrome 中的一個顯著限制是每個計算傳遞 (compute pass) 有 10 個儲存緩衝區 (storage buffers) 的硬性限制，這迫使開發者必須合併緩衝區，或使用讀寫浮點儲存貼圖 (read-write float storage textures，這可能缺乏跨瀏覽器相容性)。
此外，由於缺乏硬體加速的光線追蹤，這意味著雖然系統性能優異，但目前尚無法支援高度動態的幾何體或複雜的鏡面反射。目前的實現重點在於靜態幾何體與漫反射間接反射。
結論
在 WebGPU 上成功實現基於 surfel 的 GI 管線，證明了瀏覽器不再僅限於簡單的著色 (rasterization)。透過綜合 AAA 級研究的技術——例如來自 EA SEED 的技術——並利用巧妙的空間數據結構，我們可以在網頁上，甚至是在行動裝置上，實現物理上合理的即時光照，並建立起開放式網頁圖形學高保真度、計算驅動的新時代基礎。