Domain Warping in GLSL: Distorting Noise to Create Organic Worlds

Imagine looking at your reflection in perfectly still water.

Everything appears smooth.

Now throw a pebble into the water.

The reflection twists.

Lines bend.

Shapes stretch.

Nothing actually changes.

Only the coordinates become distorted.

That is exactly what domain warping does.

Instead of changing the noise itself, we change the coordinates before sampling the noise.

The result is one of the most powerful techniques in procedural graphics.

What Is Domain Warping?

Normally we sample noise like this.

float n = fbm(vUv);

The UV coordinates go directly into the noise function.

Now imagine moving those coordinates first.

vec2 uv = vUv + offset;

float n = fbm(uv);

The noise hasn't changed.

Only the place where we're reading it has changed.

This simple idea creates flowing and twisting patterns.

Creating the Offset

The offset usually comes from another noise function.

vec2 offset;

offset.x = fbm(vUv);

offset.y = fbm(vUv + 5.0);

Notice that the second sample uses a different input.

This prevents both directions from looking identical.

Applying the Warp

Once we have the offset, simply add it.

vec2 uv = vUv + offset * 0.2;

The multiplication controls the strength.

Small values produce gentle curves.

Large values create dramatic distortion.

Sampling the Final Noise

Now read the warped coordinates.

float n = fbm(uv);

Instead of smooth blobs, the texture begins to swirl and stretch.

The patterns suddenly feel alive.

Complete Shader

#ifdef GL_ES
precision mediump float;
#endif

uniform float uTime;
varying vec2 vUv;

void main(){

    vec2 offset;

    offset.x = fbm(vUv);

    offset.y = fbm(vUv + 5.0);

    vec2 uv = vUv + offset * 0.2;

    float n = fbm(uv);

    gl_FragColor = vec4(vec3(n),1.0);

}

The code is only a little longer than ordinary FBM, but the result is dramatically different.

Animating the Warp

Move the coordinates over time.

offset.x = fbm(

vUv +

uTime * 0.1

);

Do the same for the Y direction.

offset.y = fbm(

vUv +

5.0 +

uTime * 0.1

);

The texture now appears to flow continuously.

Perfect for smoke, lava, and magical effects.

Controlling the Warp Strength

A small multiplier.

offset * 0.05

Produces subtle movement.

A stronger multiplier.

offset * 0.4

Creates dramatic twisting patterns.

Experimenting with this value completely changes the appearance.

Warping Colors

You can also use warped noise to mix colors.

vec3 color = mix(

vec3(0.1,0.2,0.6),

vec3(0.9,0.9,1.0),

n

);

The color transitions now follow the warped texture.

The result resembles flowing water or drifting clouds.

Layering Multiple Warps

Nothing limits us to one warp.

The output of one warped noise field can become the input for another.

Each layer bends the next one.

This creates highly detailed procedural textures used in modern games and animated films.

Where Is Domain Warping Used?

Domain warping appears in many advanced shaders.

• Flowing rivers.
• Smoke.
• Fire.
• Clouds.
• Marble.
• Lava.
• Nebulas.
• Water.
• Terrain.
• Magical effects.

Many textures that appear hand painted are actually generated with domain warping.

Try These Experiments

Increase the warp strength.

Decrease the warp strength.

Animate the warp.

Apply different color gradients.

Combine warped noise with procedural circles.

Use warped coordinates to animate a tiled pattern.

Observe how changing only the coordinates completely transforms the final image.

A Small Challenge

Can you create these effects?

• Flowing lava.
• Moving clouds.
• A magical portal.
• An underwater background.
• A swirling galaxy.

Each one begins with the same domain warping technique.

What We Learned

Today we learned that procedural noise becomes much more interesting when we distort the coordinates before sampling it.

Rather than changing the texture itself, we bend the space it is generated from.

This simple concept creates swirling, flowing, and organic patterns that would be difficult to achieve in any other way.

Domain warping is one of the most powerful tools in procedural shader programming.

Posted Using INLEO