Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. 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.show more

Here is a GIST of my WebGPUPostProcessing component, in case you need it.

📢It is live! @figma design to @MUI_hq or @AntDesignUI "Whether your design is well organized or a bit chaotic, using standard components or none, Anima takes it all and translates it into high-quality #MUI or #AntDesign code."-->

Some stills 📸

@0xca0a Was literally planning on messing with R3F + post processing tonight! This saves a ton of time!

@0xca0a This looks great, Anderson!! Looking forward to learning more about this technique. Do you think that it will have the same benefits in terms of performance as the pmndrs postprocessing library?

Thanks mate! It is much, much better. The performance is outrageously good. Being able to have access to the depth of the scene, for example, within one single pass, is something that would never be possible without WebGPU, not to mention a bunch of other things like Backdrop, etc. It is a completely different way to interact with 3D scenes like never before. The TSL composition possibilities are almost endless.

@0xca0a wow .. are threejs webgpu and tsl nodes a new thing? Haven’t heard about them yet.

@0xca0a Yes hehe. This is the new theeejs version optimized for webgpu api. You can. Read more about it here:

@0xca0a Amazing Anderson ❤️

@0xca0a we do not need react to be always in a weird way mentioned at the front of our beloved webgl/webgpu library ThreeJS #threejs

@0xca0a This is amazing man! I'm watching this on a loop and discover a new beautiful detail every time.

@0xca0a Thank you my friend. I hope you like end result 🤗