Most liquid glass implementations in the web are using feDisplacementMap to simulate the glass, but what if we actually use a 3D piece of glass to do it?
This approach takes a copy of the page and puts it inside a 3d context (three.js) to then simulates the page scroll to seem like a 1:1 copy of the paint layer of the browser. The post goes through the two approaches and shows a demo of liquid glass.
The implementation of glass is rather basic, but with the access to the whole paint layer, anything else can be added to it (PR welcome!)
It does kind of need changes to the browser to implement properly.
My implementation is more of a trick to "make it work" but it's absolutely not something doable or usable in reality.
There is no way (for now) to make something like it with pure web technologies, I was initially hoping that with the Houdini API it would be possible, but it seems not. It would be a really cool addition though
This approach takes a copy of the page and puts it inside a 3d context (three.js) to then simulates the page scroll to seem like a 1:1 copy of the paint layer of the browser. The post goes through the two approaches and shows a demo of liquid glass.
The implementation of glass is rather basic, but with the access to the whole paint layer, anything else can be added to it (PR welcome!)