Liquid glass guide

Overview

Liquid glass lays your picture under a sheet of moving water.

Soft pink, violet, teal and gold circles on a dark ground, rippled by rain drops
The sample picture a few seconds after the page opens, with the rain on.

The water is a grid of heights, one for every pixel of the simulation. Each step, every point is pulled by its neighbours, so a push spreads out as a ripple. That rule is the wave equation.

Where the water tilts, the picture under it looks shifted. That is refraction: light bends as it passes through a sloped surface, like a straw that looks broken in a glass.

Each colour can bend a slightly different amount, so edges split into red and blue fringes. That is dispersion.

Where the surface curves, it gathers light into bright, wavy lines and leaves darker gaps between them, like the floor of a pool on a sunny day. Those lines are caustics.

All of it runs on your GPU: one shader moves the water, and another draws the picture through it. You can save the frame as a PNG or copy it.

Open Liquid glass Start here

In this guide

  1. StartWhat you need, your first ripples, and how to keep the picture.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the presets that made them.
  4. HelpWhat to do when something goes wrong.

It runs in your browser with WebGL 2. Nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.