FBM (Fractal Brownian Motion)
A single layer of Value Noise looks too smooth and lacks detail. FBM stacks multiple noise layers on top of each other — each layer doubles the frequency and halves the amplitude:
Let's look at what fbm does inside.
Stacking octaves
fbm loops 4 times, adding one layer per iteration:
Layer 1 (a=0.5): broad shapes, contributes 50% Layer 2 (a=0.25): medium detail, contributes 25% Layer 3 (a=0.125): small bumps, contributes 12.5% Layer 4 (a=0.0625): fine texture, contributes 6.25%
The result has both large-scale variation and fine-grained detail — like a realistic terrain.
Why "fractal"
Each layer has a fixed relationship to the previous one (frequency ×2, amplitude ×0.5). This self-similar structure is what makes it fractal. Zoom into any region and you will see detail that resembles the whole — just like a coastline or a mountain range.
Try changing it
| Change | Effect |
|---|---|
6.0 → 2.0 | Lower base frequency, gentler undulation |
i < 4 → i < 8 | More layers, richer detail (slower) |
a *= 0.5 → a *= 0.7 | High-frequency layers contribute more, rougher texture |
p *= 2.0 → p *= 1.5 | Slower frequency growth, layers are closer in scale |
Exercise
Inside main, use fbm(vUv * 6.0) to compute fractal noise and output it as a grayscale image.
Answer Breakdown
Replace n = 0.0 with n = fbm(vUv * 6.0).
vUv * 6.0— controls the base frequency (coarseness of the first layer)fbm(...)— sums 4 octaves, returning a layered 0–1 grayscale valuevec3(n)— grayscale output
The starter has n = 0.0, so the canvas is black. After the change, you can see both broad tonal variation and fine surface detail layered on top — far richer than single-layer valueNoise.
Try changing the loop count from 4 to 2 and notice how the fine detail disappears.