Where WebGL Meets Liquid Glass
Most liquid glass effects on the web use DOM cloning. They copy HTML elements, distort them, add blur, and place them under a glass layer.
This method fails with WebGL. A DOM clone cannot copy pixels from a live canvas. A canvas is a framebuffer that changes every frame.
To make liquid glass work on a canvas, you have two choices. You can capture the canvas every frame, which is expensive. Or, you can move the glass effect into the WebGL pipeline itself.
I built an experiment to test the second approach. I needed a background with motion to show the effect. I took inspiration from an interactive water ripple demo by Konmari.
I built my own version with realistic ripple physics and floating flowers.
The result is a WebGL water scene with a liquid glass panel. This panel refracts the live canvas underneath it.
How it works:
- The water uses a height-field ripple simulation.
- Pointer movement creates waves on a grid.
- A WebGL shader turns those waves into light and distortion.
- Flowers on a 2D canvas help show the refraction clearly.
The glass panel does not clone the DOM. Instead, it samples pixels.
The render flow follows these steps:
- Render the WebGL water.
- Render the 2D flowers.
- Combine both into one hidden source canvas.
- Use the glass shader to sample that source canvas.
The shader estimates a soft edge normal. It uses this to bend the source texture. I added a tint and chromatic split to make the material feel thick.
The goal is not perfect physics. The goal is to make the panel feel like a real material sitting above a moving scene.
This works because the scene is already pixels. A full solution for the whole web is harder. Real websites use text, video, and scrolling.
I am watching this area closely. Performance will be the biggest challenge for future solutions.
Demo: https://ripple.carsonye.com/ Repo: https://github.com/Whynotmetoo/water-ripples
Source: https://dev.to/_carson_ye_/where-webgl-meets-liquid-glass-401l