In this tutorial we will learn how create a Glow Effect in Unity's Unlit Shader.
[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.
For example we have a circle of white color. (Left image below)
To make it glowing we just have to set the color intensity maximum inside the circle, and as we goes away from the circle boundary we have to decrease the color intensity gradually.
fixed4(1, 1, 1, 1) * 0.1 means color intensity is minimum.
fixed4(1, 1, 1, 1) * 2.0 means color intensity is maximum.
All the pixels within the circle have color intensity greater than 1. e.g 2, 3, 4, 5, 6..
At point A the color intensity is 0.9
At point B the color intensity is 0.5.
At point C the color intensity is 0.0.
Next is to generate some data having maximum values within the circle radius and gradually decreasing values as we move away from circle boundary.
Let's first draw a simple circle.
If you don't know how to draw a circle you could follow this tutorial. Click Here!
UVLength is 0.0 in the center and 0.19 at the circle boundary, and increases as we move away from center in all directions. UVLength values are written In the first row (below).
Next we will use the inverse function (1/x) to generate some data.
x is UVLength, and in the numerator we can set any value, we will use 0.2 in the numerator. e.g ( 0.20/UVLength )
In simple words we will divide 0.20 by different values of UVLength. These values (0.20/UVLength) are written the second row (below).
If we divide the 0.20 by large value of UVLength then result is small number, if we divide 0.20 by small value of UVLength then result is large number.
If UVLength is equal to 0.20, e.g 0.2 / 0.2 = 1.0
If UVLength is less than 0.20, e.g 0.2 / 0.05 = 4.0
If UVLength is greater than 0.20, e.g 0.2 / 4.0 = 0.4
Multiply these values with the color. (mentioned in orange cell)
Inside the circle the UVLength is small, so GlowValue is large, &
As we move away from circle boundary the UVLength increases, and GlowValue decreases gradually.
You could increase or decrease the circle radius by just changing the values in the numerator.
Circle sizes for value 0.2 & 0.1
Next thing that we will do is to control the glow radius.
In center image, the color intensity is 10, but it seems like the color intensity is 1, and no glow effect, because we are not multiplying GlowValue less than 1.0 (0.9 .. 0.75 .. 0.50 .. 0.25 .. 0.0) with the color.
In right image we are multiplying GlowValue less than 1.0 (0.9 .. 0.75 .. 0.50 .. 0.25 .. 0.0) with the color, and that results in simple glow effect.
This means GlowValue less than 1.0 (0.9 .. 0.75 .. 0.50 .. 0.25 .. 0.0) are responsible for the glow effect.
In left image (below), GlowValue is 0.9 at the circle boundary and 0.0 at the plane boundary, and result in larger glow radius.
In middle image, GlowValue is 0.9 at boundary and goes to zero quickly, results in medium glow radius.
In right image, GlowValue goes to 0.0 even more quickly, results in smaller glow radius.
Glow radius depends upon the width of GlowValues less than 1.0 (0.9 .. 0.75 .. 0.50 .. 0.25 .. 0.0)
This function is easy and we are familiar with it.
e.g pow(2, 2) = 4 it is equivalent to 2 2 = 4
One more important thing about the Pow() Function is,
if you take power of large number, it becomes larger e.g 4 2 = 16
But if you take power of small number, it becomes smaller e.g 0.80 2 = 0.64
If we take power of 6 of GlowValue. (mentioned with green cell)
large value becomes larger and small values becomes smaller.
(2 becomes 64) & (4 becomes 4096)
(0.9 becomes 0.53) & (0.8 becomes 0.26) etc
Glow radius for the power of 3 & 6 is given below.
