So far in this series, we have created solid colors, gradients, blended colors with mix(), and learned how to keep values inside a safe range using clamp().
Our gradients look smooth, but sometimes smooth is not enough.
What if you want the gradient to stay dark for longer?
Or become bright much faster?
That is exactly what the pow() function allows us to do.
With just one line of code, you can completely change the appearance of a gradient.
Now we will learn how to reshape gradients using mathematics.
What Is pow()?
The pow() function raises one number to the power of another.
Its structure looks like this.
pow(value, exponent)
The first value is the number you want to change.
The second value controls how strongly it changes.
A Simple Example
Let's start with a number.
float value = 0.5;
Now apply pow().
pow(0.5, 2.0)
The result is
0.25
The value became smaller.
Now try
pow(0.5, 3.0)
The result becomes
0.125
The higher the exponent, the darker the value becomes.
Using pow() with a Gradient
Suppose we have a simple gradient.
float gradient = vUv.x;
Now display it.
gl_FragColor = vec4(vec3(gradient), 1.0);
This creates a perfectly smooth transition from black to white.
Now let's reshape it.
float gradient = pow(vUv.x, 2.0);
The left side stays dark for much longer before becoming bright.
The gradient has changed shape without changing the UV coordinates.
Comparing Different Values
Normal Gradient
float gradient = vUv.x;
Softer Beginning
float gradient = pow(vUv.x, 2.0);
Even Stronger Contrast
float gradient = pow(vUv.x, 4.0);
Each larger exponent pushes more brightness toward the right side of the screen.
What Happens with Small Exponents?
The exponent does not always have to be greater than one.
Try this.
float gradient = pow(vUv.x, 0.5);
Now something different happens.
The gradient becomes bright much earlier.
Instead of keeping the left side dark, it brightens quickly.
This gives the opposite effect.
Visualizing It
Imagine the same gradient being shaped in different ways.
Normal
████████████████
Power 2
██▃▄▅▆▇█████████
Power 4
█▁▁▂▂▃▄▅▆███████
Power 0.5
████████████████
The gradient still begins at black and ends at white.
Only the transition between them changes.
Using pow() with Colors
pow() also works well with colors.
vec3 color = mix(
vec3(0.0, 0.3, 1.0),
vec3(1.0, 0.3, 0.6),
pow(vUv.x, 2.0)
);
gl_FragColor = vec4(color, 1.0);
Instead of changing the colors themselves, we reshape the blending value.
The result feels much more dramatic.
Why Is pow() Useful?
You will find pow() in many shaders because it can control
- Brightness
- Contrast
- Lighting
- Glow
- Fading
- Reflections
- Animation curves
It is one of the easiest ways to make a simple shader look much more polished.
Try These Experiments
A normal gradient.
pow(vUv.x, 1.0)
A darker beginning.
pow(vUv.x, 2.0)
Very high contrast.
pow(vUv.x, 5.0)
A brighter beginning.
pow(vUv.x, 0.5)
Try replacing the exponent with different numbers.
Watch how the transition changes each time.
pow() and mix()
One of the most common combinations in GLSL is using pow() inside mix().
Instead of writing
vec3 color = mix(colorA, colorB, vUv.x);
you can write
vec3 color = mix(colorA, colorB, pow(vUv.x, 2.5));
Now the blend spends more time showing the first color before gradually reaching the second.
This small change can completely transform how a shader looks.
A Small Challenge
Can you create these effects?
- A gradient that stays almost black until the middle of the screen.
- A gradient that becomes bright almost immediately.
- A sunset gradient using
mix()andpow(). - A blue to purple gradient with much stronger contrast.
Experiment with different exponents before moving on.
There is no single correct answer.
What We Learned
The pow() function changes the shape of a value instead of simply increasing or decreasing it.
By applying it to gradients, we can create softer fades, stronger contrast, and more natural looking transitions.
Although the code changes by only one line, the visual difference can be dramatic.
Posted Using INLEO
