Screen Space Global Illumination in Threejs via WebGPU and React Three Fiber
· 1:27 · Projects · three.js, react-three-fiber, webgpu, post-processing
Watch on YouTube · Subscribe to the channel
This is my first public experiment using Three.js WebGPU through React Three Fiber.
To kick things off, I decided to play with the new SSGI node — a feature that allows light to bounce off on-screen objects, creating beautiful and realistic global illumination effects.
The results are stunning, reaching a level of quality close to baked lighting renders.
However, baking comes with a major downside: file size. A scene like this would require baked lighting for every single object, increasing memory usage and resulting in roughly 40 MB of assets. Not to mention, once baked, the lighting can’t be changed dynamically.
What’s truly impressive is that everything you see in this project weighs less than 9 MB — that’s smaller than a single PNG of this entire scene.
The SSGI node will officially be released with Three.js r181, so you might encounter a few bugs or differences compared to the final version. Please keep that in mind while exploring the demo.
If you enjoy it, share it with your friends — this is the future of Three.js, and it’s coming very soon.
Links from the video
Related projects
- Lumen Decor Studio 1 — SSGI interior visualization with WebGPU