WebGPU Forward+ & Deferred Renderer
Source code and implementation details are available at GitHub:
This project includes three rendering methods: Naive(Foward), Forward+, and Deferred shading. Naive shading is the most straightfoward one, where every light affects every pixel. Forward+ shading accelerates it by dividing the view into small 3D clusters so that each pixel only uses the lights in its own cluster. Deferred shading goes a step further by first saving surface information like color and normal into textures, then using those to apply lighting in a second pass.
Features
Forward+
Forward+ renderer improves lighting efficiency by dividing the view frustum into a 3D grid of clusters. The screen is first divided into tiles, which are then sliced by depth using logarithmic spacing. Each cluster keeps track of which lights influence it, allowing each fragment to only compute lighting from relevant lights instead of all lights in the scene. This reduces redundant calculations and improves rendering performance compared to the naive approach.
Deferred
The Deferred renderer extends the Forward+ approach by separating rendering into two distinct passes. In the first pass, geometric information including position, normal, and color is stored into G-buffers. In the second pass, lighting is computed using the data from these buffers along with the clustered light information. This decoupled process avoids performing complex lighting calculations during the geometry pass, allowing for efficient rendering of scenes with a large number of lights and objects.
