4 ms·
I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app https://real-glass.vercel.app -
by explosion-s 1y ago
I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind
- davidmurdoch 1y agoImpressive!
- cycomanic 1y agoCool this looks like it even has dispersion, i.e. colors separate at the edge of the glass element.
- lagrange77 1y agohttps://en.wikipedia.org/wiki/Chromatic_aberration https://en.wikipedia.org/wiki/Chromatic_aberration ?
- cycomanic 1y agoYes chromatic abberation is caused by dispersion.
- lagrange77 1y agoDamn, outnerded.
- Lorin 1y agoWhat is causing the ghosting/delay when moving the glass over text?
- kaptainscarlet 1y agoprobably shaders are compiling and initialising on every drag movement
- IshKebab 1y agoLooks nice! It's too slow to actually use though. Op's is much smoother.
- thisOtterBeGood 1y agoNot over here. As far as I understand Op's solution does not utilize a gpu.
- freehorse 1y agoI actually see gpu utilisation in OP's website when I move things (m3 pro), but this other solution shows much less gpu utilisation (prob more efficient?).
- qzio 1y agoIt's the opposite on my macbook pro/chrome computer... the OP is unusable, but the webGL version is super smooth
- kaptainscarlet 1y agoit's extremely quick on my M3 Mac too.
- kubeio 1y agoI considered WebGL, and I agree—a shader is more performant for real-time effects. But WebGL comes with drawbacks: - You need JS code running before anything shows up. - Shaders can’t directly manipulate the DOM render. To make refraction work, you’d have to re-render everything into a canvas—which isn’t really “the web” anymore. With the SVG/CSS approach, you can pre-render the displacement map (at build time or on the backend) and get the refraction visible on the very first frame. Plus, it integrates cleanly with existing, traditional UIs. That said, this approach could definitely be improved. Ideally we’d have shader-like features in the SVG Filter spec (there was a proposal, but it seems abandoned). There are some matrix operations available in SVG Filters, but they’re limited—and for my first blog post I wanted to focus more on pedagogy, art, and technique than heavy optimization.
- kkkqkqkqkqlqlql 1y agoI'm on mobile and your site works much better than the WebGL one.