Smoke shader: incense smoke in a beam of light
Incense smoke rising in a thin ribbon, breaking into curls and glowing only where it crosses a shaft of warm light. 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
“In a dark room a stick of incense smoulders. Its smoke rises in a thin ribbon, breaks into slow curls, and glows only where it crosses a single shaft of warm light; above and below the light it is barely there.”
How it is drawn
Incense smoke rises smooth while the hot air is slow, then breaks into curls as it climbs and turns. It is only seen where light scatters off it, so in a dark room with one shaft of light it glows there and is barely there above and below.
The air is a 3D fluid on a grid the host keeps between frames: the velocity carried along itself, vorticity confinement to keep the curls turning, a pressure solve so the air neither gathers nor empties, and smoke and heat carried along with a correction that keeps them sharp. Heat lifts, smoke weighs, and a slow draft sways the ribbon.
What you see is several hundred thousand tracer particles let go from the ember and carried by that air, so they stretch into the fine filaments real smoke makes. The light is marched through the grid’s smoke from the window, so the plume shadows itself and the haze beyond it, and the smoke is brightest looking towards the light. In its last second the film fades into its first frame, so it 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.