Water caustics shader: light on shallow water
Clear shallow water over a sandy bed, its ripples focusing the sun into moving nets of light. Drawn live in your browser by a WebGPU program, a frame at a time.
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
“Clear, shallow water over a pale sandy bed on a sunny day. A breeze ruffles the surface so it glitters, and the light focused by the little waves dances over the bottom in bright, moving nets.”
How it is drawn
Caustics are the bright nets on the bottom of a pool. Each little wave is a lens: where the curved surface bends sunlight towards the same place, the light gathers into a bright line, and between the lines it spreads thin and the sand is darker.
The program builds the surface from 64 trains of waves, from metre-long swells to two-centimetre ripples, each moving at the speed real water gives its length over the bed’s depth. Every frame it refracts the sun through a fine mesh laid over the surface and moves each triangle to where its light lands on the bed: a triangle that shrinks carries the same light into less area, so it shines brighter. Red, green and blue bend by slightly different amounts, so the nets’ edges take a little colour.
Each pixel then follows its own ray. Off the surface it reflects the sky, and where still finer ripples turn a facet towards the sun, it glitters; through the surface it is bent onto the sand and pebbles, lit by the nets and tinted by the water it crosses. Every wave fits a whole number of cycles into the loop, so the film repeats without a seam.
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.