Liquid Glass on Windows, and why Liquox has no frost

Liquox is Apple's Liquid Glass rebuilt as an OpenGL material for Windows, in Python with ModernGL. It was called winliqglass until it was renamed, and the old address on caissonai.co redirects to the new one.

Most attempts at glass in a user interface reach for backdrop blur, and that is where they go wrong. Heavy blur makes a render read as fogged plastic. Liquox sets frost to zero by default and lets the rim do the work: a hairline highlight, a narrow bevel and a clear interior you can read through.

Glass shapes from Liquox over a ruled grid — A frame rendered headless by Liquox over a ruled grid. The interiors stay clear; the grid lines bend at each rim and split into colour where the glass is thickest.

The grid behind the shapes makes the behaviour easy to read. Inside each shape the lines carry straight on. At the edge they bend outward, compress into a band, and separate into red, green and blue, which is the fringe you see on real glass held against a window.

What the shader does

Lensing: A circular thickness profile over a narrow band of the signed distance field bends light outward at the rim. It is strong enough that the distant background folds into visible compression rings, while the interior stays clear.
Spectral edge: Eight wavelength taps are recombined through a narrow RGB response. The chromatic part of the residual is amplified on its own, so the fringe saturates without ringing on high-contrast edges.
Light pipe: A filleted edge traps light, couples it in near the silhouette and carries it around the outline, separating the wavelengths a little more at every bend.
Two passes: Knobs and toolbar glass sample the scene beneath them, so a slider thumb refracts the track it sits on instead of floating over a flat overlay.

Shapes that merge

Every shape is a signed distance field, and neighbouring shapes are joined with a smooth minimum instead of a hard one. When two pieces of glass are dragged together they flow into one body with a continuous rim, rather than overlapping as two separate lenses.

Rounded rectangles are superellipses. A plain rounded rectangle joins a straight edge to a circular arc, and the curvature jumps at the point where they meet, which shows up as a visible step in the reflection. A superellipse ramps its curvature up out of the straight edge, so the highlight runs around the corner without a break.

Recording

Scripted sessions render straight to MP4 without opening a window, and a single frame can be rendered headless to a PNG. The image in this post was made that way, over a background generated for it, so every pixel of glass in it is the shader's own output.

The Liquox project page has a small lens you can move over a grid in the browser.

Written by Caisson AI. Questions or corrections go to hello@caissonai.co.