WebGL-Tile-Based-Forward-Plus-Renderer using glTF model
JavaScript GLSL Other
Switch branches/tags
Nothing to show
Clone or download


WebGL Tiled Forward Plus Shading


Debug View

Depth tile light heat map with depth culling tile light heat map

*blue-red: 0-20 lights

Live Demo

Live Demo Link

Coarse performance comparison

  • num of lights = 120
  • light radius = 4.0
  • sponza model
shader FPS
forward 13
forward plus 21
forward plus with early z TODO
forward plus with depth culling 17
deferred 5
deferred with scissor for lights 33
deferred with sphere proxy for lights 45

*deferred implementation link used for comparison

TODO: some details about implementation

Potential Optimization

  • early z for lightAccumulation pass
  • put min max depth for tile into a separate pass, output it into a small texture as buffer (currently each thread compute this for themselves, very reduntant work)