Soap bubble shader with thin-film interference
Soap bubbles drifting through warm backlight, colours swirling over their skins until one thins to black and bursts. Drawn live in your browser by a WebGPU program.
Drawn live on your graphics card as you watch. This program was written by hand for this site; the Agent did not make it.
The request
“A few soap bubbles drift slowly through warm backlight against a dark background. Colours swirl over their skins as the film flows and thins; near the top it goes dark just before one of them bursts.”
How it is drawn
A soap film is a few hundred nanometres thick. Light reflects from both its outer and its inner face, and the two reflections interfere: at each thickness some wavelengths reinforce and others cancel, so the film’s colour depends on how thick it is and the angle it is seen at. Where it grows much thinner than a wavelength of light, the reflections cancel and the film looks black, as it does just before a bubble bursts.
The colours are worked out, not painted. For 81 wavelengths the program sums the film’s reflectance, for both polarisations at every angle, through the eye’s colour-matching curves into a table of colour by thickness and angle.
The thickness itself flows. Each bubble keeps a map of its film over the whole sphere from frame to frame: gravity drains it thin at the top and thick at the bottom, and slow eddies stir it, thinner film rising and thicker sinking, into the marbled swirls real bubbles show. Each pixel follows its ray through every face it crosses, so a bubble shows the window behind you twice, once upright and once upside down. In the last second and a half every film eases back to how it began, so the film loops.
What runs it
It is a picture program: a JavaScript module that draws the picture with WebGPU (external website, opens in a new tab), the same kind of program the editor’s Picture Program effect runs. It plays here the way the editor plays one, in the picture sandbox (opens in a new tab): a page on another origin with no access to this page, your storage or the network, told which frame to draw.
It keeps no clock and uses no chance, so a frame comes out the same however it is reached, and its last frame leads back into its first. On a device too slow for it, its still stays in place; where there is no WebGPU, the stage says so.
Make your own
In the editor, a Shader, Simulation or Picture Program effect takes a program you write or paste (opens in a new tab), checks it and tries it on your computer before it enters the project. The settings a program declares become properties you keyframe on the timeline; this piece declares none, but yours can.
The Agent (opens in a new tab) can also write a program from a request like the one above, as a draft you review. That belongs to the Agent subscription, which opens soon; writing your own is free.