Domain Warp

15 / 15
Learn procedural noise building blocks and common stylizations.

Domain warping uses noise to distort the coordinate before sampling noise again. The result is a swirling, organic form that no single noise layer can produce on its own:

Let's break it down.


The idea: warp first, then sample

Normal noise samples at coordinate p: fbm(p).

Domain warping adds one step: use two independent fbm calls to compute an offset vector w, then sample at the displaced coordinate p + w:

w.x and w.y are the X and Y offsets. The different biases (3.1 and 7.7) keep them independent so they don't mirror each other. Each pixel's sampling location gets pushed by the noise field itself, producing curling, spiral-like shapes.


What 1.2 does

w * 1.2 scales how far the coordinate gets pushed. A larger value means more dramatic curling; near zero the result degrades back to plain fbm.


Try changing it

ChangeEffect
1.23.0Much stronger warping, large spiral forms
1.20.2Subtle warp, barely different from plain fbm
3.1 and 7.71.0 and 2.0Offsets less independent, may produce symmetric artifacts
Wrap the final fbm in a second warpDouble domain warp, highly complex organic shapes

Exercise

Inside main, construct an offset vector w from two fbm calls, then sample fbm(p + w * 1.2) for the final output.

Answer Breakdown

Replace float n = fbm(p) with two lines: compute w first, then use the warped coordinate.

  • fbm(p + 3.1) and fbm(p + 7.7) — two independent noise fields, one for each axis of displacement
  • p + w * 1.2 — the displaced coordinate fed into the final fbm sample
  • 1.2 — warp strength, controls how far each point is pushed

The starter samples fbm(p) directly — smooth fractal noise with no curl. Adding w bends the sampling grid with the noise field itself, producing the swirling organic look.

Try changing 1.2 to 4.0 and watch the warping become dramatically more intense.

GLSL Code Editor

Correct Code Preview

Current Code Preview