In this tutorial we will learn about Gradients.
[IMPORTANT]
If you are visiting this website for the very first time, please have a look at the first tutorial, it would help you to understand this tutorial better.
Click Here !
First add a plane then rotate it's face toward camera, or set the plane rotation to (90, 180, 0).
Add a unlit shader and apply it to a material, and apply that material to the plane.
open the Unlit Shader in Visual Studio.
With this rotation of plane, the origin of i.uv is bottom left corner.
Gradient means change.
Color gradient means having one color on one side and different color on the other side.
We can create color gradient with more than two colors, different types of gradients are shown in the images. Created using two, three & four colors.
2 Colors, bottom to top
2 Colors, left to right
3 Colors
4 Colors
Define 4 colors, named as _colorA, _colorB, _colorC & _colorD.
(Mentioned with green cells)
We will start with a 2 color gradient, and we will use the lerp() function to create the color gradient.
Returns the linear interpolation of a and b based on weight w.
lerp(1, 5, 0.0) = 1
lerp(1, 5, 0.25) = 2
lerp(1, 5, 0.50) = 3
lerp(1, 5, 0.75) = 4
lerp(1, 5, 1.0) = 5
i.uv.x have range of values (0.0 . 0.25 . 0.50 . 0.75 . 1.0) from left to right.
Input _colorA & _colorB and i.uv.x as weight to the lerp( _colorA, _colorB, i.uv.x ) function.
At points A, B & C the i.uv.x is 0.1, lerp() function will return _colorA as Result_AB.
At points D, E & F the i.uv.x is 0.5, lerp() function will return mix of _colorA & _colorB as Result_AB.
At points G, H & I the i.uv.x is 0.9, lerp() function will return _colorB as Result_AB.
Similarly i.uv.y have range of values (0.0 . 0.25 . 0.50 . 0.75 . 1.0) from bottom to top.
At points A, B & C the i.uv.y is 0.1, lerp() function will return _colorA as Result_AB.
At points D, E & F the i.uv.y is 0.5, lerp() function will return mix of _colorA & _colorB as Result_AB.
At points G, H & I the i.uv.y is 0.9, lerp() function will return _colorB as Result_AB.
At point A, i.uv.x is 0.1 & i.uv.y is also 0.1,
lerp(_colorA, _colorB , 0.1) will return _colorA as Result_AB.
We input that in the second lerp.
lerp(Result_AB, _colorC, 0.1) will return final color that is _colorA.
At point B, i.uv.x is 0.9 & i.uv.y is 0.1,
lerp(_colorA, _colorB , 0.9) will return _colorB as Result_AB.
We input that in the second lerp.
lerp(Result_AB, _colorC, 0.1) will return final color that is _colorB.
At point C, i.uv.x is 0.1 & i.uv.y is 0.9,
lerp(_colorA, _colorB , 0.1) will return _colorA as Result_AB.
We input that in the second lerp.
lerp(Result_AB, _colorC, 0.9) will return final color that is _colorC.
By passing i.uv.y in the first lerp(), and i.uv.x in the second lerp(), could invert the results.
At point A, i.uv.x is 0.1 & i.uv.y is also 0.1,
lerp(_colorA, _colorB , 0.1) will return _colorA as Result_AB.
lerp(_colorC, _colorD , 0.1) will return _colorC as Result_CD.
We input that in the third lerp.
lerp(Result_AB, Result_CD, 0.1) will return final color that is _colorA.
At point B, i.uv.x is 0.9 & i.uv.y is also 0.9,
lerp(_colorA, _colorB , 0.9) will return _colorB as Result_AB.
lerp(_colorC, _colorD , 0.9) will return _colorD as Result_CD.
We input that in the third lerp.
lerp(Result_AB, Result_CD, 0.9) will return final color that is _colorD.
