GLSL shader example
Value Noise
Smooth 2D noise in GLSL: random values on a grid, blended with smoothstep-style interpolation.
Live example
Edit the code and the preview updates as you type.
How it works
Random numbers alone give hard-edged blocks. Noise keeps the randomness but makes it smooth, which is what natural things like clouds, terrain and marble look like.
Value noise does it in two steps:
- Put a random value on every grid corner, using
random(i)on the corner's whole-number coordinates. - For a pixel inside a cell, blend the four corner values based on where the pixel sits.
fis that position: from 0% (left or bottom edge) to 100% (right or top edge).
The blend uses f * f * (3.0 - 2.0 * f) instead of f directly. This is the smoothstep curve. A straight-line blend would leave visible creases along the grid lines; the curve slows down near each corner so neighboring cells join without a seam.
Try changing it
| Change | Result |
|---|---|
uv * 8.0 to uv * 3.0 | Large, soft blobs |
vec2 u = f * f * (3.0 - 2.0 * f) to vec2 u = f | Linear blending: notice the diamond-shaped grid artifacts |
vec3(n) to vec3(step(0.5, n)) | Random black and white islands |
vec3(n) to mix(vec3(0.1, 0.2, 0.5), vec3(0.9, 0.95, 1.0), n) | Blue tinted noise |