Weather Pixels

What it is

A voxel weather dome: a field of instanced cubes whose heights are driven by a moving pressure field, with cloud masks carving dark sunken gaps and, where you tap, squall cells rolling through as low-pressure dimples. A day loops from dawn through noon to dusk and into a storm, with lightning flashing down a column and decaying across the field.

A 56x56 grid — 3,136 cubes — draws in a single call through GPU instancing, so the whole sky animates per-frame without the draw-call cost that many separate meshes would carry. Tap the sky and a squall is injected at that spot: a travelling low-pressure gaussian that pulls a region of cubes down into a churning dimple and decays as it drifts.

GPU instancing is what makes the scale possible: one cube geometry is uploaded once, and a per-instance matrix and colour buffer position and tint every copy, so the whole field is one draw call instead of 3,136. The height field itself is layered noise — a slow pressure term, a faster cloud mask subtracted from it, and, where you have tapped, a squall added as a travelling gaussian dip — evaluated per cube per frame and written straight into that instance buffer.

The colour grade does as much work as the geometry. The palette moves through dawn, noon, dusk and storm on the same loop as the height field, so the field reads as one sky changing rather than as cubes moving under fixed lighting — and lightning is a per-column emissive pulse rather than a light source, which keeps it a single draw call even at the moment it flashes.

How to use it

• Drag to orbit the dome.
• Tap the sky to summon a squall.
• Watch a full day loop from dawn to storm.

More experiments

• Ferrofluid — webgl, three.js, r3f
• Rocky — webgl, three.js, r3f
• Eiffel Tower — webgl, three.js, r3f

See every experiment