Clouds & smoke (2D)

How it works

Clouds, smoke, steam and dust share one trait: soft shapes with detail at every size, a big puff made of smaller puffs made of wisps. That is exactly what fBm produces, a sum of noise octaves where each layer is half the size and half the strength of the one before. Every 2D cloud shader is that sum, turned into a shape and moved.

The recipe has four parts:

1. Density. An fBm of the coordinate gives a smooth value around 0.5 everywhere, higher where layers happen to agree.
2. Shape. A smoothstep around a threshold turns the density into coverage: below it is clear sky, above it is cloud, and the width of the smoothstep is how soft the edges are. Lowering the threshold adds clouds; raising it leaves a few scattered puffs.
3. Motion. Sliding the coordinate with time makes the wind. On its own that looks like a picture being dragged across the screen, so a domain warp that moves at a different speed makes the shapes churn and change while they travel.
4. Color. mix the cloud colors over the background by the coverage, and shade by the density so thick cores look darker than thin, sunlit edges.

The same four parts make smoke in a sprite (a radial mask instead of a sky, rising instead of drifting), fog banks low on the screen, or an aurora with the coverage stretched into bands. What changes between them is the threshold, the direction of motion and the palette, not the noise.

Where it stops

This is a flat picture of clouds: there is no depth, no light passing through and no parallax as the camera moves. For a sky behind a 2D game, a skybox texture or a cheap background it is enough, and at a fraction of the cost of volumetric clouds, which march a ray through a 3D density field and light every sample.