Value noise was a huge improvement over random pixels.
Instead of abrupt jumps, neighboring values blended together.
Even so, every grid cell still had a slight square appearance.
To solve this problem, computer graphics researchers came up with another idea.
Instead of storing random values at the corners, why not store random directions?
That simple change led to a much smoother form of procedural noise called gradient noise.
Imagine a square divided into four corners.
Each corner stores a random number.
As you move across the square, those numbers blend together.
The blending is smooth, but the corners still influence the final result in a noticeable way.
This is why large value noise patterns sometimes reveal a faint grid.
Instead of assigning a random number to every corner, assign a random direction.
Each corner now contains a small arrow.
Some arrows point upward.
Some point sideways.
Others point diagonally.
The arrows never change.
Only the way they influence nearby pixels changes.
Each grid corner generates a direction.
A simple example might look like this.
vec2 gradient = vec2(
cos(angle),
sin(angle)
);
Instead of storing brightness, each corner stores a unit vector.
Just as we did with value noise, we first determine our position inside the current grid cell.
vec2 cell = floor(vUv * 8.0);
vec2 local = fract(vUv * 8.0);
The grid remains exactly the same.
Only the corner information changes.
Each corner now measures how well its direction matches the pixel.
This is done using the dot product.
float influence =
dot(
gradient,
local
);
Instead of blending random brightness values, we're blending directional influence.
This creates much smoother transitions.
The four corner influences are blended exactly as before.
float bottom = mix(a, b, local.x);
float top = mix(c, d, local.x);
float noise = mix(bottom, top, local.y);
The interpolation stays the same.
Only the values being blended are different.
We'll also continue using the smoothing function.
local = local * local *
(3.0 - 2.0 * local);
This softens the transitions near every edge.
Imagine walking across rolling hills.
Value noise feels like walking over small plateaus.
Gradient noise feels like walking across gentle slopes.
The changes become more continuous.
The grid becomes much harder to notice.
This is why gradient noise became the foundation for many later algorithms.
A complete gradient noise implementation is longer than value noise because each corner needs its own direction vector.
A simplified version begins like this.
vec2 cell = floor(vUv * 8.0);
vec2 local = fract(vUv * 8.0);
local = local * local *
(3.0 - 2.0 * local);
Next, each corner generates a gradient direction instead of a random value.
Those directional influences are then blended together.
Although the mathematics becomes longer, the overall idea stays surprisingly simple.
Gradient noise works beautifully with color gradients.
vec3 color = mix(
vec3(0.15,0.25,0.6),
vec3(0.9,0.95,1.0),
noise
);
The smooth transitions make the result resemble soft clouds or mist.
The coordinates can still move over time.
vec2 uv = vUv;
uv += uTime * 0.05;
The entire noise field appears to drift smoothly across the screen.
This technique is often used for clouds, smoke, and magical effects.
Let's compare everything we've learned so far.
Random values.
Every neighboring pixel changes abruptly.
Value noise.
Random values blend together smoothly, but the grid is still visible.
Gradient noise.
Directional information blends together, creating much more natural patterns.
Each step builds directly on the previous one.
Gradient noise appears in many procedural graphics.
Many modern shaders begin with some variation of gradient noise.
Compare value noise with gradient noise.
Animate the coordinates.
Increase the grid size.
Decrease the grid size.
Apply different color gradients.
Observe how much smoother the transitions become.
Can you create these effects?
Each effect starts with smooth gradient noise.