Grass wind shader: a meadow at golden hour
Tall grass and wildflowers running up a hill to a lone tree in low golden sun, as waves of wind roll through the grass towards you. 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
“Look out low through tall grass and wildflowers, up a long hill to a lone tree against a low golden sun. The wind sends waves rolling through the grass towards you, and the light shines through the blades.”
How it is drawn
Wind over grass shows as bands: a gust lays the blades over as it passes, turning their lighter faces up, and the band rolls on across the field. Grass lit from behind glows where the sun shines through the thin blades.
Every blade, flower, leaf and branch is made on the graphics card from its number. Blades grow in clumps, each tapered, curved and rounded across its width, with a lit edge and a shaded one, dark at the root and lime at the tip where the low sun shines through. Near blades are drawn with more segments than far ones, and up the hill the clumps thin into tufts.
The blades are planted once, when the program is set up; each frame only the wind bends them. The wind is a function of place and time, wide bands travelling towards you over long swells and a fine flutter, and every part of it repeats every ten seconds, so the film loops without keeping anything from one frame to the next.
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.