Creating a Grid is easier than creating a circle.
You can draw a Grid by following the first tutorial (Draw a Line).
In this tutorial we will generate a Grid procedurally.
Step is consist of two parts one is scalling of i.uv values and second is using frac() function.
Frac() function is very important, and it is most commonly used function in shader programming.
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.
i.uv.x have range of values (0.0 . 0.25 . 0.50 . 0.75 . 1.0) from left to right.
i.uv.y have range of values (0.0 . 0.25 . 0.50 . 0.75 . 1.0) from bottom to top.
If we multiply i.uv with 3, it will scale i.uv values,
from (0.0 . 0.25 . 0.50 . 0.75 . 1.0)
to (0.0 . 0.5 . 0.10 . 1.5 . 2.0 . 2.5 . 3.0)
Input these UVScaled values to red & green channel, values greater than 1, e.g (1.5 . 2.0 . 2.5)
will be taken as 1.
Here it is explained visually.
At top right pixel, i.uv is (1.0, 0.5) if we multiply 3 with it then it will become (3.0, 3.0)
At center pixel, i.uv is (0.5, 0.5) if we multiply 3 with it then it will become (1.5, 1.5)
At middle left pixel, i.uv is (0.0, 0.5) if we multiply 3 with it then it will become (0, 1.5)
You can imagine the process for all the remaining pixles.
frac(float Input) || frac(float2 Input)
Frac() function returns the fractional part of a given number.
e.g if we input 4.5 it will return 0.5, and if we input (2.3, 6.8) it will return (0.3, 0.8).
UVScaled.x & UVScaled.y have range of values (0.0 . 0.5 . 1.0 . 1.5 . 2.0 . 2.5 . 3.0).
Color channels (red & green) accept values from 0 to 1 only, (0.0 . 0.25 . 0.50 . 0.75 . 1.0).
UVScaled.x & UVScaled.y values greater than 1 (1.5, 1.9, 2.1, 2.4, 2.7, 2.9, 3.0) will be taken as 1 by color channels. (seems like useless)
But we can use fractional part of these values, like in 1.5, 0.5 is usefull & in 2.9, 0.9 is usefull.
UVScaled.x values and fractional parts are listed below.
UVScaled.y values and fractional parts would be same.
Store fractional parts of UVScaled.x & UVScaled.y in float2 UVFracPart.
Input UVFracPart.x to red channel and UVFracPart.y to green channel separately.
UVFracPart.x goes from 0.0 to 0.9, 0.0 to 0.9 & 0.0 to 0.9, results in three gradients.
Similary UVFracPart.y also goes from 0.0 to 0.9 three time.
Input UVFracPart.x into red channel and UVFracPart.y into green channel.
Just write the lines in your Shader mentioned in green cells. And our Grid will become procedural.
how it is happenening?.
e.g if we multiply 6 with i.uv then its values will scale from 0.0 - 1.0 to 0.0 - 6.0, for both i.uv.x and i.uv.y
and using the frac function will give us values repeating from 0.0 - 0.9, 6 times.
Just like we explained it in above, when we multiply 3 with i.uv.
UVFracPart.x goes from 0.0 .. 0.9, 0.0 .. 0.9 & 0.0 .. 0.9 three times, and 0.5 appears three times for _GridSize = 3.
we just have to check that if at specific pixel if(UVFracPart.x < 0.52 & UVFracPart.x > 0.48) then color of that pixel is white otherwise it is black.
Now lets draw both horizontal & vertical line.
Update your Shader code with the code in the image.
The only thing that you need to understand is this line
(UVFracPart.x < 0.5 + _LineWidth && UVFracPart.x > 0.5 - _LineWidth)
It is same as this line
(UVFracPart.x < 0.52 && UVFracPart.x > 0.48)
if _LineWidth has value of 0.02,
0.5 + 0.02 = 0.52
0.5 - 0.02 = 0.48
Last thing is to add options to change the color and opacity of the Grid Lines.
Change Color of Grid Lines
Instead of fixed4(1, 1, 1, 1), pass the _Color Variable to col
Change Opacity of Grid Lines
The code ZWrite Off & Blend SrcAlpha OneMinusSrcAlpha in second cell just write it in your code, we will understand it later, what does it means.
