Light Culling based on Compute Shader

[xiaoiver]

问题背景

Deferred Shading 延迟渲染分成两个阶段：

1. 几何处理阶段：渲染所有的几何/颜色数据到 G-buffer
2. 光照处理阶段：使用 G-buffer 计算场景的光照，类似后处理

用伪代码表示：

// g-buffer pass
foreach visible mesh {
  write material properties to g-buffer;
}
 
// light accumulation pass
foreach light {
  compute light by reading g-buffer;
  accumulate in framebuffer;
}

延迟着色技术的最大的优势就是将光源的数目和场景中物体的数目在复杂度层面上完全分开，能够在渲染拥有成百上千光源的场景的同时依然保持很高的帧率，给我们渲染拥有大量光源的场景提供了很多可能性。

当然也存在一些问题：

• MSAA 就无法配合延迟渲染使用了。当然基于 post-processing 后处理完成的几何反走样技术例如 MLAA/SMAA 和 FXAA 还是可以使用的。
• 内存开销较大。
• 读写 G-buffer 的内存带宽用量是性能瓶颈。
• 对透明物体的渲染存在问题。在这点上需要结合正向渲染进行渲染。

其中 Tile-Based Deferred Rendering 尝试解决第三点。

Tile-Based Deferred Rendering

思路其实不局限于延迟渲染，在正向渲染中同样可以应用（从原论文标题就可以看出来），而且在正向渲染中还可以使用我们之前介绍过的 MSAA 这样的反走样技术。

Tiled Forward Shading has many of the advantages of deferred shading, e.g.
scene management and light management is decoupled. At the same time, unlike traditional deferred and tiled deferred shading, Full Screen Anti Aliasing and
transparency is trivially supported.

分块延迟渲染的主要**则是把屏幕分拆成细小的栅格，例如每 32 × 32 像素作为一个分块（tile）。然后计算每个分块会受到哪些光源影响，把那些光源的索引储存在分块的光源列表里。最后，逐个分块进行着色，对每像素读取 G-buffer 和光源列表及相关的光源信息。因此，G-buffer的数据只会被读取1次且仅1次，写入 color buffer也是1次且仅1次，大幅降低内存带宽用量。

在分块时使用了 Compute Shader

具体步骤如下：

1. Render the (opaque) geometry into the G-Buffers.
2. Construct a screen space grid, covering the frame buffer, with some fixed tile
   size, t = (x, y), e.g. 32 × 32 pixels.
3. For each light: find the screen space extents of the light volume and append the
   light ID to each affected grid cell.
4. For each fragment in the frame buffer, with location f = (x, y).
   (a) sample the G-Buffers at f.
   (b) accumulate light contributions from all lights in tile at ⌊f /t⌋
   (c) output total light contributions to frame buffer at f.

Light Culling

参考资料

http://www.cse.chalmers.se/~uffe/tiled_shading_preprint.pdf
http://diaryofagraphicsprogrammer.blogspot.com/2012/04/tile-based-deferred-and-forward.html
WebGL2 实现：https://github.com/tiansijie/Tile_Based_WebGL_DeferredShader
WebGPU 实现：https://github.com/shrekshao/webgpu-deferred-renderer