Noise in shaders: value noise, fBm and what they are for

Natural things are not perfectly regular: clouds, rock, wood grain, flames and water all look random but smooth. Shaders get that look from noise. There is no random() function on a GPU, so noise is built from a few lines of math.

Step 1: a hash, or randomness without random()

A hash function turns any input into a number that looks random but is always the same for the same input. A classic version uses a chaotic sine: frac(sin(dot(p, float2(127.1, 311.7))) * 43758.5453). Give it a pixel's position and you get a random-looking grey value. Newer hashes avoid sin(), because the sine of a large number is slightly different on different graphics cards. Learn the first idea in Randomness without random().

Step 2: value noise, smooth randomness

A hash alone is TV static: every pixel is independent. Value noise puts one random value on every corner of a grid and blends smoothly between them. Pixels close together get similar values, so you get soft blobs. The blend uses a curve (f * f * (3 - 2 * f), the same shape as smoothstep) so the grid lines do not show. Build it in two small steps in blend two values and soften the corners, then see the finished value noise.

Step 3: fBm, noise on noise

One layer of noise looks like cotton wool. Add a second layer at twice the frequency and half the strength, then a third, and so on. This is fractal Brownian motion (fBm): big shapes carry smaller details, and the result looks like clouds or mountains. It is a loop of a few lines. See adding layers by hand and the loop in Fractal noise (fBm).

float fbm(float2 p)
{
    float v = 0.0;
    float amp = 0.5;
    for (int i = 0; i < 5; i++)
    {
        v += amp * vnoise(p);     // add a layer
        p = p * 2.0;              // twice as detailed...
        amp *= 0.5;               // ...and half as strong
    }
    return v;
}

What noise is used for

• Clouds and smoke: threshold the noise, or use it as the density of a volume.
• Terrain and islands: treat the value as a height and color by height.
• Marble and wood: put noise inside a sine so the lines wobble.
• Fire: scroll the noise upwards and fade it with height.
• Domain warping: use noise to bend the coordinates of more noise for swirling, smoky looks.

Try it yourself with the challenges, or go straight to the advanced lessons that use noise: clouds, fire and snow.