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.
About Domain Warping
Domain warping is a procedural texture technique in which the input coordinates of a noise function are displaced by the output of another noise evaluation before sampling. Concretely, instead of sampling f(p) you sample f(p + a·f(p + b·f(p))), feeding the field back into its own coordinates. The result transforms a simple fractal Brownian motion (fBm) field into swirling, marble-like, cloud-like patterns that appear far more complex and organic than the underlying noise alone.
Domain warping is widely used in procedural generation for video games, visual effects, and generative art to create convincing terrain heightmaps, marble materials, lava flows, and atmospheric cloud renders without any hand-authored textures.
Frequently Asked Questions
What is domain warping in procedural graphics?
Domain warping is the practice of distorting the input coordinates of a noise or texture function using another noise field before evaluating it. Instead of looking up noise at position p, you look it up at p plus an offset that itself comes from noise, causing the field to fold and swirl into organic patterns. The key insight is that by applying this recursively you amplify complexity without increasing the base noise resolution.
How do I use the controls in this simulation?
Use the Warp Strength slider to control how far coordinates are displaced — zero gives plain fBm, higher values produce stronger curling and marbling. The Octaves slider adds or removes detail layers to the underlying fBm noise. The Passes toggle switches between one warp iteration and two nested iterations, with two passes producing much richer turbulence. Toggle between Warped and Plain fBm views to see exactly what the warping adds.
What visual change does increasing warp strength produce?
At low warp strength (0–1) the field looks like gently rippled fBm. As strength rises toward 3–5, flowing marble veins and cloud-like swirls appear. At very high strength (6–8) the field becomes heavily distorted with tight curls and near-turbulent flow. There is no single threshold at which the effect kicks in — it transitions smoothly, which is why real-time sliders are so useful for exploring the parameter space.
What is the mathematics behind the f(p + f(p + f(p))) formula?
The formula represents two layers of coordinate distortion. The innermost f(p) is a standard fBm evaluation that produces a 2D offset vector. That vector is scaled by a strength factor and added to p to create a warped coordinate, which is fed into a second fBm to produce a second offset vector. The outermost f then evaluates at p plus this doubly-warped offset. Each layer is governed by the fBm formula: sum over octaves of amplitude_i * noise(frequency_i * p), where amplitude halves and frequency doubles each octave.
Where is domain warping used in real-world production?
Domain-warped noise is the foundation of countless procedural materials in production VFX and game engines. Cloud shaders in film rendering (used in titles from major studios) rely on iterated domain warping to achieve realistic turbulence. Terrain generators use it for river canyon erosion patterns. In game engines like Unreal and Unity, domain-warped fBm is a default building block for material graph nodes that produce water, lava, smoke, and rock surface detail.
Is domain warping the same as turbulence noise?
No, though they are related. Turbulence noise takes the absolute value of signed noise at each octave before summing, creating ridge-like creases. Domain warping is a coordinate-space distortion applied before or around the noise evaluation rather than a modification of the summation. The two techniques can be combined: you can domain-warp turbulence noise, or apply turbulence to a domain-warped field, producing yet more complex patterns.
Who introduced domain warping and when was it popularised?
The general idea of coordinate distortion in procedural textures predates modern usage, appearing in Ken Perlin's original 1985 SIGGRAPH paper on procedural textures as a form of coordinate perturbation. However, domain warping using fBm feeding itself was systematically explored and popularised by Inigo Quilez in his 2002–2013 articles and ShaderToy experiments, which became definitive references for procedural artists. His formulation of q = fBm(p), r = fBm(p + q), result = fBm(p + r) is now the canonical recipe.
What other phenomena or simulations are related to domain warping?
Domain warping is closely related to flow fields, where a noise field defines velocity vectors that particles follow over time. It also connects to curl noise, which derives divergence-free flow from a potential noise field to simulate fluid-like particle movement. Worley (cellular) noise can be domain-warped for cracked rock or organic cell patterns. More broadly, domain warping is a special case of displacement mapping, used throughout computer graphics to add surface detail without increasing geometry resolution.
How is domain warping used in shader programming today?
In modern GLSL and HLSL shaders, domain warping is implemented in a handful of lines: sample a vec2 offset from two fBm calls with offset seed coordinates (e.g. fBm(p + vec2(0.0, 5.2)) for x, fBm(p + vec2(1.3, 8.7)) for y), scale by strength, then evaluate a final fBm at the warped position. GPU execution makes even two-pass warping real-time at full screen resolution. Shader platforms like Shadertoy and node-based material editors in game engines expose these parameters as artist-friendly controls.
What are current research directions extending domain warping?
Researchers are exploring differentiable domain warping for neural texture synthesis, where gradient-based optimisation learns warp fields that match target appearance statistics. Another active area is physics-informed warping, where the displacement field is constrained to satisfy fluid equations (Navier-Stokes or Euler), producing textures that are not just visually plausible but physically consistent. Sparse neural representations such as NeRF and 3D Gaussian Splatting also use learnable coordinate deformations that are conceptually extensions of domain warping applied to volumetric radiance fields.