Nested domain warping of fBm

Domain-Warped Nebula

Fractal noise folded through itself twice becomes slow, marbled clouds of colour; move the pointer to stir a swirl into them.

Parameters

Seed – Saved in the address bar, so a link reproduces this variation. Keys on the canvas: Space, R, N, F.

How it works

The base is fBm: up to seven octaves of value noise with a quintic fade, each octave rotated by a fixed 2x2 matrix, doubled in frequency and halved in amplitude. On its own fBm looks like soft clouds.

Domain warping feeds noise into the coordinates of noise. The shader computes q = (fbm(p), fbm(p + o1)), then r = (fbm(p + k q + o2), fbm(p + k q + o3)), then the final f = fbm(p + k r), where k is Warp strength and the offsets decorrelate the channels. Each layer gets its own slow time drift, so the field evolves without repeating.

Colour uses the intermediate vectors, not just f: f^2 mixes the two base colours, |q| brings in the third, r.y the fourth, and a narrow band around f = 0.55 adds bright veins where the warp is strongest. A second evaluation offset diagonally gives the slope of f along the light direction, a cheap bump light that makes the folds look embossed. The result is tone-mapped with 1 - exp(-x) and vignetted.

Five fBm calls per sample, two samples per pixel and five octaves make about 50 noise lookups per pixel, so the canvas renders at Resolution scale (0.6 of device pixels by default). The pointer rotates the domain around itself with a gaussian falloff; pressing doubles the swirl.

Octaves, Warp strength, Zoom out, Evolution speed and Palette are uniforms and change live.

  • fBm
  • domain warping
  • value noise
  • GLSL
  • procedural

Source

/assets/demos/webgl/domain-warp.js

More WebGL / GLSL demos