Threejs WebGPU Post Processing with React Three Fiber
· 1:41 · Projects · three.js, react-three-fiber, webgpu, tsl, source-code, post-processing, webgl, r3f
Watch on YouTube · Subscribe to the channel
I'm experimenting with some react three fiber with webGPU. We no longer need an EffectComposer to use post-processing effects in . Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday .
Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines!
Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.
Related projects
- Star Wars Darth Vader — SSR demo with React Three Fiber & WebGPU