WebGPU Mesh Transmission Material for React Three Fiber
· 2:46 · Components · three.js, react-three-fiber, webgpu, tsl, shaders, tutorial, r3f
Watch on YouTube · Subscribe to the channel
Finally got the famous MeshTransmissionMaterial working in WebGPU
Live demo:
I’ve been experimenting with WebGPU and TSL for a while, and one milestone I really wanted to reach was bringing the Drei MeshTransmissionMaterial to the new pipeline without losing any of the features that make it so impressive. Today I finally got it working.
In my opinion, this is still the most realistic real-time glass material available for React Three Fiber.
What makes it special is that it goes far beyond a standard transmission material. It supports physically based transmission parameters such as thickness, roughness, IOR and attenuation, while also adding advanced effects like chromatic aberration, anisotropic blur and distortion that create a much more convincing glass appearance. The original implementation was designed to capture refraction from the rendered scene itself, which is one of the reasons it looks so much more believable than a…
( )
The exciting part is that this version now runs with WebGPU + TSL and preserves all the original capabilities.
For anyone learning TSL, this is a fantastic study case because it touches many advanced rendering topics at once:
Links from the video
Related projects
- Advanced Glass — Coming soon for WebGPU