Noise Texture
This example combines multiple noise techniques — fractal layering, time animation, and a blue-to-white color map — to produce a slowly drifting cloud-like texture:
Let's break down each part.
Fractal layering
The loop runs 4 times, adding one noise layer per iteration. amplitude starts at 0.5 and halves each time; frequency starts at 1.0 and doubles. The accumulated result contains both broad undulation and fine-grained detail at the same time.
Time offset for flow
+ u_time * 0.1 shifts the sampling coordinate forward every frame, creating a slow, continuous drift animation.
Color mapping
fractalNoise is mapped through a three-stop gradient from deep blue to light blue to white:
Values below 40% blend between the two blues; values above 40% blend up toward white, giving the bright areas a soft cloud-like appearance.
Try changing it
| Change | Effect |
|---|---|
u_time * 0.1 → u_time * 0.5 | Faster drift |
Loop count 4 → 6 | More octaves, richer surface detail |
color1 → vec3(0.8, 0.3, 0.1) | Warm red lava style |
Both 0.4 thresholds → 0.6 | Larger white area, more cloud coverage |
Exercise
The example outputs an animated, drifting blue-and-white noise texture. It combines fractal layering, time animation, and a two-segment color map. Without changing the code structure, replace the color scheme from blue-white to warm colors (such as orange-yellow-white) so it looks like flowing lava.
Answer Breakdown
Only the three color variables need to change — everything else stays the same.
color1— dark areas (low noise values) → deep redcolor2— midrange transition → orangecolor3— bright areas (high noise values) → pale yellow-white
The original blue-white palette makes bright regions read as clouds. Swapping to warm colors turns the same bright-and-dark structure into a lava flow.
Try changing u_time * 0.1 to vec2(u_time * 0.15, u_time * 0.05) to make the flow move diagonally.