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

Fractal noise (fBm)

You will build: Write fbm() with 5 octaves (amp 0.5 → halved each time, frequency doubled each time) and display fbm(uv × float2(6, 4.5)).

The picture produced by the shader in the lesson "Fractal noise (fBm)"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

Last lesson you added three layers by hand. Fractal noise (fBm) is the same thing written as a loop, so you can have any number of layers without copy and paste. Every time round the loop:

  • add this layer: v += amp * vnoise(p)
  • make the next layer twice as detailed: p = p * 2.0 + offset
  • make the next layer half as strong: amp *= 0.5

Loops are allowed in shaders when they have a small fixed count; each pixel runs the loop on its own.

float fbm(float2 p)         // needs hash() and vnoise() declared above it
{
    float v = 0.0;           // the running total
    float amp = 0.5;         // strength of the current layer
    for (int i = 0; i < 5; i++)
    {
        v += amp * vnoise(p);                 // add this layer
        p = p * 2.0 + float2(13.7, 7.1);      // twice as detailed (and a new offset)
        amp *= 0.5;                           // half as strong
    }
    return v;
}

This is the most useful building block for natural effects (clouds, fire, terrain). You will use it in the arcade.

The numbers you need

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

Octaves
5
Offset per octave
p = p * 2.0 + float2(13.7, 7.1)
Scale
float2(6.0, 4.5)

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