← All works

WebGPU Forward+ and Clustered Deferred Shading

  • Rendering
  • TypeScript
  • WebGPU
  • WGSL
  • Compute shaders

Forward+ and clustered deferred shading in WebGPU. The scene is the Sponza atrium with a large number of moving point lights, and the project compares the shading methods at high resolution with thousands of lights.

In a 4K scene with 5,000 randomly moving lights, naive forward shading reaches about 3 frames per second, while clustered deferred shading stays above 100.

  • Three pipelines: forward, clustered forward (Forward+) and clustered deferred
  • A compute shader splits the view frustum into clusters, logarithmically along depth, and assigns lights to them
  • Optional bloom post-process
  • Compressed G-buffer

The live demo needs a browser with WebGPU.

G-buffer

Frame time at 4K

LightsNaiveClustered forwardClustered deferred
25618.8 ms1.6 ms0.5 ms
51234.4 ms3.4 ms1.1 ms
1,02471.4 ms7.0 ms2.3 ms
2,048142.8 ms14.2 ms4.1 ms
4,096273.6 ms27.7 ms8.2 ms
8,192550.8 ms52.6 ms15.1 ms