Noise · lesson 5 of 6 · Intermediate · about 5 min

Noise on noise: add layers by hand

You will build: Show three layers of noise added together as grey.

The picture produced by the shader in the lesson "Noise on noise: add layers by hand"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

One layer of noise is smooth but boring: all the blobs are the same size. Real clouds, rock and flames have big shapes plus smaller details plus tiny details.

You can fake that by adding the same noise at different sizes:

  • Layer 1: normal size, strong (x 0.5).
  • Layer 2: twice as small (multiply the position by 2), half as strong (x 0.25).
  • Layer 3: four times as small, quarter as strong (x 0.125).

Each layer has half the strength and twice the detail of the one before. Adding a different offset to each layer stops them lining up.

float2 p = uv * float2(4.0, 3.0);
float n = 0.5 * vnoise(p);
n += 0.25 * vnoise(p * 2.0 + float2(13.7, 7.1));
n += 0.125 * vnoise(p * 4.0 + float2(27.4, 14.2));

Next lesson puts this in a loop. First do it by hand so you can see what the loop will do.

The numbers you need

Everything the picture depends on is given, so the challenge is the code, not guessing.

Space
p = uv * float2(4.0, 3.0)
Layer 1
0.5 * vnoise(p)
Layer 2
0.25 * vnoise(p * 2.0 + float2(13.7, 7.1))
Layer 3
0.125 * vnoise(p * 4.0 + float2(27.4, 14.2))
Output
grey = the sum

Try it in your own language

The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.

Start coding