GLSL Lesson 5: Mastering mix() Before Moving Forward

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]

---

What Does 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.

---

A Simple Color Example

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.

---

The Most Common Use: Gradients

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.

---

The Biggest Misunderstanding

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.

---

How We Used mix() With clamp()

In Lesson 3, we explored:

Understanding clamp() by Breaking and Fixing Colors

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.

---

How We Used mix() With pow()

In Lesson 4, we explored:

Reshaping Light and Shadow with pow()

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.

Previous Lessons

Lesson 1

Your First Shader: Painting the Entire Screen One Color

Lesson 2

Gradients: When Color Learns About Position

Lesson 3

Understanding clamp() by Breaking and Fixing Colors

Lesson 4

Reshaping Light and Shadow with pow()

Posted Using INLEO