If you look back at our previous lessons, you will notice a function that quietly appeared in almost every example:
mix()
We used it to create gradients.
We used it when discussing clamp().
We used it again when exploring contrast with pow().
Yet we never stopped to discuss what it actually does.
Today we fix that.
The exercise for this lesson can be found here:
[PLACEHOLDER EXERCISE LINK]
mix() Do?At its simplest, mix() blends between two values.
The syntax looks like this:
mix(valueA, valueB, t)
Think of it as a slider.
valueA is the starting point.valueB is the ending point.t determines how far you move from A toward B.When:
t = 0.0
you get only valueA.
When:
t = 1.0
you get only valueB.
When:
t = 0.5
you get a result halfway between them.
vec3 c = mix(
vec3(0.0, 0.0, 1.0),
vec3(1.0, 0.0, 0.0),
0.5
);
The first color is blue.
The second color is red.
Since t is 0.5, the result becomes a blend of both colors.
In our gradients lesson we wrote:
float t = vUv.x;
vec3 c = mix(
vec3(0.1, 0.15, 0.25),
vec3(1.0, 0.85, 0.25),
t
);
Notice something important.
The colors never change.
These values remain fixed:
vec3(0.1, 0.15, 0.25)
vec3(1.0, 0.85, 0.25)
The only thing changing is:
t
Since vUv.x changes across the screen, each pixel receives a different blend between the same two colors.
That changing blend is what creates the gradient.
Many beginners think mix() changes the colors.
It does not.
The colors stay exactly the same.
mix() only changes how much of each color appears in the final result.
Think of two buckets of paint.
One bucket is blue.
One bucket is yellow.
The buckets never change.
You simply change how much paint you take from each bucket.
That amount is controlled by t.
mix() With clamp()In Lesson 3, we explored:
Understanding clamp() by Breaking and Fixing Colors
@hey2d/glsl-lesson-3-understanding-clamp-by-breaking-and-fixing-colors-ckf
The focus of that lesson was not the gradient itself.
The focus was controlling values.
For example:
float t = clamp(vUv.x * 2.0, 0.0, 1.0);
Here clamp() ensures that t stays between 0 and 1.
Why?
Because mix() works most predictably inside that range.
Without clamp(), values can become larger than 1 or smaller than 0, causing the blend to extend beyond the intended limits.
In that lesson, mix() acted as the visual proof that our clamped values were working correctly.
The hero of the lesson was clamp().
mix() was simply showing us the results.
mix() With pow()In Lesson 4, we explored:
Reshaping Light and Shadow with pow()
@hey2d/glsl-lesson-4-reshaping-light-and-shadow-with-pow-2t7
Again, the colors stayed exactly the same.
The only thing we changed was:
float t = pow(vUv.x, 2.0);
or
float t = pow(vUv.x, 4.0);
The purpose of pow() was not to change the colors.
The purpose was to reshape the values flowing into mix().
Remember:
mix(colorA, colorB, t)
If t changes, the blend changes.
By applying pow() to t, we altered the shape of the gradient while keeping the same start and end colors.
In that lesson, mix() became a visual tool for showing how the curve was being reshaped.
The hero of the lesson was pow().
mix() simply displayed the result.
Your First Shader: Painting the Entire Screen One Color
Gradients: When Color Learns About Position
Understanding clamp() by Breaking and Fixing Colors
Reshaping Light and Shadow with pow()