Noise Threshold
Smooth noise is a continuous grayscale field. Adding a threshold with step snaps it into a sharp black-and-white image:
Let's break it down.
What step does
step(edge, x) is a simple gate:
xis less thanedge→ returns 0.0 (black)xis greater than or equal toedge→ returns 1.0 (white)
Think of it as a knife: edge sets where the cut happens. Pixels whose noise value falls below the cut go black; those above go white.
With edge = 0.5, any region where the noise is above 50% becomes white, everything below becomes black.
Why threshold noise
Thresholding a grid or a geometric shape produces clean, geometric boundaries. Thresholding noise produces organic, irregular outlines — like natural patterns found in patches of lichen, splashed paint, or reflections on water.
Try changing it
| Change | Effect |
|---|---|
0.5 → 0.3 | More white (anything above 30% is white) |
0.5 → 0.8 | Less white, scattered spots appear |
step → smoothstep(0.45, 0.55, n) | Soft edge instead of a hard cutoff |
10.0 → 4.0 | Larger blobs, like cloud outlines |
Exercise
Inside main, apply step(0.5, n) to the result of valueNoise(vUv * 10.0) and output a black-and-white image.
Answer Breakdown
Replace m = 0.0 with m = step(0.5, n).
valueNoise(vUv * 10.0)— generates fine smooth noisestep(0.5, n)— noise >= 50% becomes white (1.0), below that becomes black (0.0)vec3(m)— black-and-white output
The starter has m = 0.0, making everything black. Adding step splits the canvas into two regions — the boundary between them traces the natural contour of the noise field.
Try raising the threshold from 0.5 to 0.7 and watch the white regions shrink.