WebGPU Forward+ and Clustered Deferred Shading
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.
-
Random lights moving through the scene
G-buffer
Frame time at 4K
| Lights | Naive | Clustered forward | Clustered deferred |
|---|---|---|---|
| 256 | 18.8 ms | 1.6 ms | 0.5 ms |
| 512 | 34.4 ms | 3.4 ms | 1.1 ms |
| 1,024 | 71.4 ms | 7.0 ms | 2.3 ms |
| 2,048 | 142.8 ms | 14.2 ms | 4.1 ms |
| 4,096 | 273.6 ms | 27.7 ms | 8.2 ms |
| 8,192 | 550.8 ms | 52.6 ms | 15.1 ms |





