WebGPU Clustered Forward Shading Multi-Light Architecture
Breaking through traditional light-count limits in browser graphics by building 3D frustum clusters and compute-driven light assignment buffers in WGSL.
Traditional forward rendering suffers from performance degradation when scaling up the number of dynamic light sources, as each mesh vertex or fragment must evaluate every light loop. Clustered forward shading solves this by subdividing the camera frustum into a 3D grid of sub-cells and assigning lights via compute shaders.
1. Frustum Subdivision and 3D Grid Construction
Dividing camera view space into logarithmic depth slices and 2D screen tiles creates a structured 3D grid of AABBs (Axis-Aligned Bounding Boxes) stored in GPU buffers for rapid spatial indexing.
2. Compute Shader Light Culling and Assignment
Dispatching a WebGPU compute pass tests light bounding spheres against cluster frustums in parallel, populating global index lists and counter buffers without CPU interruption.
3. Fragment Shader Light Index Lookup
During the final rendering pass, fragment shaders compute their corresponding cluster coordinate based on screen position and depth, fetching only the specific subset of active lights influencing that cluster.