Web 端实时全局光照：深入探讨基于 Surfel 的渲染
追求实时全局光照 (GI) 长期以来一直是视觉保真度与计算成本之间的博弈。虽然路径追踪为光照模拟提供了金标准，但其每像素数千条光线的需求使得它在实时应用中（尤其是在开放网络环境下）速度慢得令人难以接受。然而，WebGPU 的出现正在改变这一格局，使得构建计算密集型渲染管线成为可能，而这在以前是原生 AAA 引擎的专属领域。
解决这一问题的一个极具前景的方法是使用 surfels（表面元素）。通过将光照计算与屏幕分辨率解耦，surfels 允许开发者对相对较少数量的表面贴片进行着色，以近似全局光照，并通过随时间缓存这些工作来实现在较低端硬件上也能获得平滑的实时性能。
理解 Surfels
一个 surfel 是一个在 3D 空间中漂浮的扁平圆盘，由其位置、法线（方向）和半径定义。引擎不再为屏幕上的每个像素计算光照，而是为这些离散的表面元素计算光照。其主要优势在于效率：对 50,000 个 surfels 进行着色比对 200 万个像素进行着色要便宜得多，但它仍能提供光线在场景中弹跳的令人信服的近似效果。
渲染管线：从几何体到像素
实现基于 surfel 的 GI 系统需要一个复杂的、多阶段的管线。一个生产级别的实现涉及十几个计算通道 (compute passes) 来管理这些元素的生命周期及其携带的光照。
1. Surfelization
第一步是将基于三角形的几何体转换为 surfels。这个过程涉及渲染 G-buffer（包含法线、深度和反照率）并分析屏幕空间以识别何处缺少 surfels 或 surfels 过于密集。通过一个竞争性分配过程，系统会生成新的 surfels 来覆盖几何体，并销毁不再需要的 surfels。
2. 空间网格 (The Spatial Grid)
为了避免将每个 surfel 与其他所有 surfel 进行对比的暴力计算成本，系统使用了一个以相机为中心的级联 3D 空间索引。该网格将空间划分为多分辨率的立方体单元：相机附近的单元较细，以保证高精度；远离相机的单元较粗，以节省内存。
构建此结构涉及多个计算通道：清除计数器、统计每个单元的 surfel 引用数、执行分段前缀和扫描 (segmented prefix-sum scan) 以创建连续的写入范围，最后将 surfel 索引放入一个组合缓冲区 (combined buffer) 中。这使得引擎能够以 $O(1)$ 的时间复杂度查询相关的 surfels。
3. 积分器与光线追踪 (The Integrator and Ray Tracing)
由于 WebGPU 缺乏原生的硬件光线追踪支持，该管线利用 three-mesh-bvh 通过计算着色器来模拟光线追踪。积分器的任务是通过向场景中射出光线来确定每个 surfel 的辐照度。
为了在计算着色器中高效处理材质，系统使用了一个 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)
原始采样会产生显著的噪声。为了在不引入巨大延迟的情况下稳定图像，该管线采用了 多尺度均值估计器 (MSME)。与简单的指数移动平均 (EMA) 不同，MSME 同时追踪短期和长期平均值。它可以快速响应实际的光照变化，同时忽略高方差的噪声（如“萤火虫”现象），从而提供稳定且响应迅速的结果。
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)
在 Web 端构建此类系统会带来独特的挑战。Chrome 中的一个显著限制是每个计算通道有 10 个存储缓冲区的硬性限制，这迫使开发者必须合并缓冲区，或者使用读写浮点存储纹理 (read-write float storage textures，这可能缺乏跨浏览器兼容性)。
此外，由于缺乏硬件加速的光线追踪，这意味着虽然系统性能出色，支持高度动态的几何体或复杂的镜面反射仍然困难。目前的实现侧重于静态几何体和漫反射间反射。
结论
在 WebGPU 中成功实现基于 surfel 的 GI 管线证明了浏览器不再局限于简单的光栅化。通过综合 AAA 研究的技术（例如来自 EA SEED 的技术）并利用巧妙的空间数据结构，在网页上、甚至在移动设备上实现物理上合理的实时光照是可能的。虽然限制仍然存在，但为开放网络上高保真度、计算驱动的图形学新时代奠定了基础。