Keeping Values Under Control with `clamp()`

As you continue learning GLSL, you will notice that many values are expected to stay between 0.0 and 1.0.

Colors, gradients, brightness, and blending often work best inside this range.

But what happens if a value becomes larger than 1.0 or smaller than 0.0?

That is where clamp() becomes useful.

It is a simple function that prevents values from going outside a range you choose.

What Is clamp()?

The clamp() function limits a value between a minimum and a maximum.

Its structure looks like this.

clamp(value, minimum, maximum)

Think of it as placing invisible walls around a value.

If the value stays inside the walls, nothing changes.

If it goes outside, it is pushed back inside.

A Simple Example

Suppose we write this.

float brightness = 1.5;

If we clamp it like this,

brightness = clamp(brightness, 0.0, 1.0);

the result becomes

1.0

The value was larger than the maximum, so clamp() changed it to 1.0.

Now try another example.

float brightness = -0.4;

After using

brightness = clamp(brightness, 0.0, 1.0);

the result becomes

0.0

Since the value was below the minimum, it was raised to 0.0.

What Happens to Values Already Inside the Range?

Suppose we have

float brightness = 0.65;

Now we write

brightness = clamp(brightness, 0.0, 1.0);

The value stays exactly the same.

clamp() only changes values that fall outside the chosen range.

Visualizing clamp()

Imagine a number line.

Outside     Inside      Outside

-1.0   0.0 -------- 1.0   2.0

Anything smaller than 0.0 becomes 0.0.

Anything larger than 1.0 becomes 1.0.

Everything between those values remains untouched.

Using clamp() with UV Coordinates

Suppose we multiply the horizontal position.

float value = vUv.x * 2.0;

The left side of the screen starts at 0.0.

The right side now reaches 2.0.

If we use that value directly, it goes beyond the normal color range.

Instead, we can write

float value = clamp(vUv.x * 2.0, 0.0, 1.0);

Now every value stays between 0.0 and 1.0.

Using clamp() Inside a Shader

Here is a complete example.

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;

void main() {

    float value = clamp(vUv.x * 2.0, 0.0, 1.0);

    gl_FragColor = vec4(value, value, value, 1.0);

}

Without clamp(), the brightness would continue increasing beyond the normal range.

With clamp(), it reaches white and then stops.

Why Is This Useful?

You will often perform calculations that produce values outside the range you expect.

For example,

• Multiplying brightness
• Increasing contrast
• Animating colors
• Adding lighting
• Combining several values together

Instead of worrying about values becoming too large or too small, you can simply use clamp().

Try These Examples

Clamp between 0.0 and 1.0

clamp(vUv.x * 2.0, 0.0, 1.0)

Clamp between 0.2 and 0.8

clamp(vUv.x, 0.2, 0.8)

Clamp a calculated value

clamp(vUv.x + vUv.y, 0.0, 1.0)

Try changing the minimum and maximum values to see how the output changes.

A Small Challenge

Can you create these effects?

• A gradient that never becomes completely black.
• A gradient that never reaches pure white.
• A gradient that only changes in the middle of the screen.
• A brightness value that never drops below 0.3.

Experiment before moving on.

You will quickly see why clamp() appears in so many shaders.

What We Learned

The clamp() function keeps values inside a range you choose.

If a value becomes too small, it is raised to the minimum.

If it becomes too large, it is reduced to the maximum.

Everything already inside the range stays exactly the same.

It is one of the simplest functions in GLSL, but also one of the most useful.