Welcome to my first shader tutorial! One of my favorite effects in After Effects is the 4-Color Gradient. I like it so much I wanted to recreate in a shader.
The gradient is composed of four solid-color circles blended together, each with an effect point as its center.
The implementation I will show you is slightly different. The colors are centered at the four corners of a box and can’t be moved, something to revisit in a future post!
Let’s get to it then!
Here is a live example of the shader written in GLSL.
This shader uses UV coordinates to interpolate between the four colors we can choose. Here is the shader written in Unity3D’s HLSL:
But what about that funny looking
lerp word? That stands for Linear Interpolation.
Unity has a straightforward article that you can read here!
The part that pertains to us is this definition:
What Is Interpolation?
At its core, Interpolation is the act of creating new data between two values. In other words, allowing you to smoothly move from one number to another. In the animated examples you can see those values can be anything from Position, Visibility or Color.
Also, look at the HLSL documentation of lerp for the actual specifics of the version of lerp we use here.
UV coordinates are normalized, so the u-axis and v-axis both go from
On a quad like the one I use in the following screens, the bottom left corner maps to the origin of UV coords
(0.0, 0.0), but the top right corner maps to
FourColorGradient(), we can take advantage of the
1.0 range and use one of the components as the interpolator parameter of the
The First Gradient
We can go from Color1 and Color2 along the v-axis vertically by lerping like this:
The Second Gradient
We are also going to go from Color3 to Color4 in the same way:
Bringing it all together
Time to bring it all together!
The two previous lerp function calls we made are outputting two new colors. So there is nothing stopping from lerping between these lerped colors like we did with Color1 and Color2, for example.
Next, we mix the two lerped colors together by going between them in the same way, but horizontally this time using the x component of the UV’s:
And that’s it!
Thank you for reading! Hopefully this shader and explanation were straight forward enough to understand easily.
If you have any questions, do ask! Find me at @MitchJMcClellan