Volumetric fog

Same ruined hall, same sun, same frame. Left: the usual height fog, one grey layer. Right: the fog is stored in 1.8 million cells, each lit and shadowed on its own, so light shafts appear.

The problem

Most game fog is a formula on distance and height. It knows nothing about light, so fog behind a pillar is as bright as fog in the sun, there are no shafts through windows, and a lamp doesn't glow in the haze around it.

How it works

The source (Vapor, a Unity project) fills a 3D grid shaped like the camera frustum: 160 x 88 cells across the screen, 128 slices deep, packed close to the camera (slice depth goes with the 4th power).

Each frame:

1. Density: every cell gets a fog amount from a height gradient times 3 octaves of moving noise.
2. Light: every cell checks the sun's shadow map and applies a phase function, so fog looking toward the sun glows more. Point lights add a falloff term without shadows.
3. Scatter: light times density. The result is 20% this frame, 80% last frame's value at the same world point, and each cell samples at a small random depth offset every frame.
4. Integrate: walk the slices front to back, adding scattered light and multiplying transmittance.
5. Apply: each pixel reads the cell at its depth: color x transmittance + scattered light.

What I hit

The source writes the 3D grid from compute shaders, and the integrate step is one thread walking 128 slices in a loop. WebGL2 has neither. I packed the grid into one 2560 x 704 texture (16 x 8 tiles) and replaced the loop with a parallel prefix scan: combining two runs of fog is just add-then-multiply, so 7 passes of doubling strides give every slice its running total.

The temporal blend needs history. My video is rendered in parallel chunks, so each chunk replays 24 frames first or it starts noisy.

My build

three.js 0.170, WebGL2. 1,802,240 cells. Per frame: a 1024 px depth map from the sun, one scatter pass, 8 integration passes, one composite. Grid depth runs from 0.3 m to 42.3 m; the last slice is 1.3 m thick, the inset slice sits 8.7 m out. Extinction 0.055 per m, my value.

Trade-offs

• Shafts, fog shadows and lamp glow come from one system
• Any number of lights writes into the same grid
• Cells are about 12 x 12 px at 1080p, so shaft edges are soft and can step
• The temporal blend smears when the sun or camera moves fast
• Point lights don't cast fog shadows in the source
• I rendered on a software GPU, so no timings

When to use it

Interiors with windows, forests, dusty or smoky scenes where light direction matters. For open terrain with distant haze, height fog is enough.