WebGL-Tile-Based-Forward-Plus-Renderer
WebGL-Tile-Based-Forward-Plus-Renderer copied to clipboard
shrekshao
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
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
lightAccumulationpass - [ ] 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
shrekshao