plumpmath / webgl-tile-based-forward-plus-renderer

WebGL-Tile-Based-Forward-Plus-Renderer using glTF model

WebGL Tiled Forward Plus Shading

ScreenShots

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)

Credits

• Three.js by @mrdoob and contributors
• stats.js by @mrdoob and contributors
• webgl-debug by Khronos Group Inc.
• glMatrix by @toji and contributors
• minimal-gltf-loader by @shrekshao