Clouds
Raw noise gives you a continuous grayscale field. To get cloud shapes, use smoothstep to brighten high-density regions and suppress low-density ones:
What FBM noise looks like
The canvas uses FBM (Fractal Brownian Motion) — four layers of value noise stacked together, each with half the amplitude and double the frequency of the previous. The result is a field of values between 0 and 1 that has large, slow undulations and fine surface detail, much like the density distribution of real clouds.
smoothstep as a threshold
smoothstep(0.5, 0.75, n) applies a smooth cutoff to the noise value n:
n < 0.5: returns 0 (sky — no cloud)0.5 < n < 0.75: transitions smoothly from 0 to 1 (cloud edge, semi-transparent)n > 0.75: returns 1 (cloud core, pure white)
Only the higher-density regions of the noise field become white cloud. Low-density areas remain sky blue.
mix blends cloud over sky
When c is 0 the output is sky blue; when c is 1 it is white. Intermediate values create soft cloud edges.
Try changing it
| Change | Effect |
|---|---|
smoothstep(0.5, 0.75, n) → smoothstep(0.6, 0.8, n) | Sparser clouds, only highest-density areas remain |
smoothstep(0.5, 0.75, n) → smoothstep(0.3, 0.6, n) | More cloud coverage, fills more of the sky |
vUv * 5.0 → vUv * 10.0 | Higher noise frequency, smaller fragmented clouds |
u_time * 0.05 → u_time * 0.2 | Clouds drift faster |
Exercise
Replace float c = 0.0; with a smoothstep that extracts cloud shapes from the noise value n, so white clouds appear against the blue sky.
Answer Breakdown
Starting state: c = 0.0 means no cloud — the entire canvas shows the sky blue background.
The fix: smoothstep(0.5, 0.75, n) maps the high-density regions of the FBM noise (above 0.5) to nonzero c values, which mix(sky, cloud, c) then renders as white. The two edge values (0.5 and 0.75) control the density threshold and the softness of the cloud border.
Try replacing smoothstep with step(0.6, n) to compare the hard-cut edge with the smooth transition.