Apple Liquid Glass using WebGL Threejs React Three Fiber
· 1:53 · Projects · three.js, react-three-fiber, shaders, source-code, webgl, glsl, creativecoding, ios26
Watch on YouTube · Subscribe to the channel
I added some options to the Liquid Glass demo using . Since it's a real mesh, you can play around with the roughness and thickness parameters to get different distortion effects on the edges.
You can try it out here:
Although beautiful, it's known that using meshes to achieve the effect degrades performance. I'll work on another solution soon that uses shaders and a single draw call to distort the image based on UV distortion, without using meshes, which should result in better performance. However, my example should at least help you understand how this type of effect works in WebGL. It's a small project, but full of little tricks and tips that can help.
What I did here was inspired by the work of many others who have already done similar effects. Especially the work of Paul Henschel (React Three Fiber Creator), who did something similar a long time ago. You can see his version here:
I'm cleaning up the source code. It will be available to my newsletter subscribers soon, so be sure to subscribe at