HomeGenerative Art & Algorithmic PatternsDomain Warping — Folding Noise into Flow

🌀 Domain Warping — Folding Noise into Flow

Domain warping feeds noise back into its own coordinates — f(p + f(p + f(p))) — turning plain fBm into swirling, marbled, cloud-like fields. Tune warp strength and octaves to sculpt organic flow.

Generative Art & Algorithmic Patterns3DModerate60 FPS
domain-warping ↗ Open standalone

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.

⚙ Under the hood

Domain warping feeds noise back into its own coordinates — f(p + f(p + f(p))) — turning plain fBm into swirling, marbled, cloud-like fields. Tune warp strength and octaves to sculpt organic flow.

domain warpingfBmPerlin noiseproceduralCanvas 2D

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)