Creating a circle is different from creating a line and a cube, from here our math work will start.
[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.
Each pixel have different value of i.uv, i.uv on bottom left pixel is (0.0, 0.0) and i.uv on top right pixel is (1.0, 1.0).
i.uv for each pixel is not fixed we can change it, and that is the next thing we will do, and we will name it coordinate shifting.
First store the i.uv in UV, and then minus float2(0.5, 0.5) from UV, It will shift our origin from bottom left corner to center. Next it is explained visually.
i.uv and UV (Shifted Origin) values are printed on each pixel.
Consider the bottom left pixel, i.uv of that pixel is (0, 0) if we minus (0.5, 0.5) from (0, 0) then it will become (-0.5, -0.5)
On center pixel, i.uv is (0.5, 0.5) if we minus (0.5, 0.5) from (0.5, 0.5) then it will become (0.0, 0.0)
Next is top right pixel, i.uv is (1.0, 1.0) if we minus (0.5, 0.5) from (1.0, 1.0) then it will become (0.5, 0.5)
You can imagine the process for all the remaining pixel.
Creating a circle is simple, and our first step towards the math, that we will use in Shader Programming
We will use the concept of a simple 2D Vector and its length. A 2D Vector has two componenets x and y.
For example we have a 2D Vector of length 7.07, having components/coordinates (5, 5).
i.uv & UV both are 2D Vector's, i.uv have components i.uv.x & i.uv.y, and UV have components UV.x & UV.y
Each pixel on grid have different components/coordinates of i.uv & UV
In Case of i.uv the origin of all i.uv Vectors is
bottom left corner.
Vector's length is also printer on the pixel.
In Case of UV (Shifted Origin) the origin of all UV Vectors is center.
Vector's length is also printer on the pixel.
To draw a circle we just have to know that at which pixel the UV Vector has length less than 0.2.
If it is less than 0.2 then color of that pixel is white otherwise black.
To calculate the length of a Vector, we will use the length() function.
The edges of the circle are not smooth, that could be done with smooth step function. We will do that in next section.
What we have.
What we want.
Zooming the circle edges to know the difference.
At 0.19 (UVLength), color intensity is 1(means white) & at 0.21 it is 0 (means black).
At 0.19 (UVLength) color intenisty is 1.0.
At 0.195 it is 0.5
At 0.20 it is 0.1
That means in case of smooth edge we have lerped color values from 1.0 . to . 0.0 for UVLength values 0.19 . to . 0.20
smoothstep(max, min, value)
If value is greater than max, the function will return 0.
If the value is less than min, the function will return 1.
If value is greater than min and less than max the function returns lerp values from 0.0 to 1.0.
(0.0 . 0.25 . 0.50 . 0.75 . 1.0)
e.g smoothstep(0.60, 0.40, value)
If value is less than min (0.40), function will return 1, if value is greater than max (0.60), function will return 0.
If value is 0.4 it will return 1.
If value is 0.45 it will return 0.75. (light grey color)
If value is 0.50 it will return 0.50. (medium grey color)
If value is 0.55 it will return 0.25. (grey color)
If value is 0.60 it will return 0.0. (Black color)
If value is 0.65 it will return 0.0. (Black color)
When UVLength is less than 0.19 it will return 1, and multiply it with the col result is white color, when value is greater than 0.2 it will return 0, and result is black color.
When UVLength is between 0.19 to 0.20 it will return value from 1.0 to 0.0.
