GLSL Learning

GLSL shader example

Clouds (fBm)

Drifting procedural clouds made by stacking octaves of noise with fractal Brownian motion (fBm).

Live example

Edit the code and the preview updates as you type.

How it works

One layer of noise looks like soft blobs, but real clouds have detail at every scale: big shapes, smaller puffs on them, and wisps on those. Fractal Brownian motion (fBm) builds that by adding several layers of noise, called octaves:

  • Each octave multiplies the coordinates by 2 (st *= 2.0), so its features are half the size.
  • Each octave multiplies the strength by 0.5 (amplitude *= 0.5), so small details never overpower the big shapes.

With 6 octaves, the first layer contributes 50% of the result, the next 25%, then 12.5%, and so on.

smoothstep(0.45, 0.8, n) then decides what counts as cloud: below 0.45 is clear sky, above 0.8 is solid white, and in between is the soft fluffy edge.

Try changing it

ChangeResult
i < 6 to i < 2Blurry blobs with no fine detail
smoothstep(0.45, 0.8, n) to smoothstep(0.3, 0.6, n)An overcast sky with much more cloud
amplitude *= 0.5 to amplitude *= 0.7Rougher, grainier clouds
u_time * 0.08 to u_time * 0.4Wind picks up

Built-in functions used

floor()fract()mix()smoothstep()sin()dot()

Learn it step by step