Info & Theory
Domain warping distorts the input of a noise
function with more noise. Instead of f(p) you
evaluate f(p + offset) where the offset is itself
noise.
fBm — the raw material
Fractional Brownian motion sums octaves of value noise: each octave doubles frequency and halves amplitude, giving cloud-like detail across scales.
Folding it back
The signature recipe is
f(p + a·f(p + b·f(p))) — noise feeding its own
coordinates. One pass bends the field; a second pass
warps the already-warped coordinates into turbulent flow.
The controls
Warp strength— how far coordinates are pushed.Octaves— fineness of the fBm detail.Passes— one or two nested warps.
Plain vs warped
Toggle the Plain fBm view to see the undistorted field, then back to Warped — the difference is the whole point of the technique, popularised by Inigo Quílez.
Frequently asked questions
What is domain warping?
Domain warping is a technique where, before sampling a noise function, you distort its input coordinates using more noise. Instead of f(p) you evaluate f(p + offset(p)), and the offset itself comes from noise — folding the field into swirls and flow.
What is fBm noise?
fBm (fractional Brownian motion) sums several octaves of a base noise: each octave doubles the frequency and halves the amplitude. The result is a natural, cloud-like field with detail at many scales, the standard input for domain warping.
What does the formula f(p + f(p + f(p))) mean?
It is domain warping applied twice. The innermost f(p) bends the coordinates, the result feeds the next layer, and the outer f sees doubly-warped input. Each nested pass adds more elaborate swirling structure to the texture.
What does warp strength control?
Warp strength scales how far the noise offset pushes each coordinate. At zero strength you see plain fBm; as you increase it the field folds, stretches and curls into marble and flow patterns.
What do the octaves do?
More octaves add finer detail to the underlying fBm: extra layers of higher-frequency, lower-amplitude noise. Few octaves give soft blobs; many give crisp, intricate texture, at a higher rendering cost.
What is the difference between one and two warp passes?
One pass warps the coordinates once; two passes warp the already-warped coordinates again. A second pass greatly increases the apparent complexity and the sense of turbulent flow, mimicking the famous Inigo Quílez example.
Why compare plain fBm with the warped result?
The plain view shows the raw fBm field, and the warped view shows the same field after its coordinates are distorted. Toggling between them makes the effect of domain warping immediately obvious.
Is this real noise or a lookup texture?
It is computed live in JavaScript using a small value-noise function with a hashed gradient table, summed over octaves — no images or libraries. Every pixel is evaluated from the warping formula directly.
Who popularised domain warping?
The technique is classic in procedural graphics and was famously demonstrated by Inigo Quílez, whose article on warping fBm with itself is a standard reference for marble, clouds and flow-like textures.
What is the animation doing?
When animation is on, a slowly changing offset is added to the warp coordinates so the swirling field drifts and flows over time, like slow-moving clouds or liquid marble.