In this tutorial we will learn how to create a fill effect for a ring in Unity's Unlit Shader.
We will start with ring drawn on screen, if you don't know how to draw a ring you could follow this tutorials.
(How to Draw a Ring).
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.
We will start from this point, a ring drawn on the screen.
In previous tutorials we have used 2D Vector's length to draw a circle & ring. Now we will use it's angle to control the fill amount of the ring.
For example we have a 2D Vector A with coordinates (6,6). As shown in left image below
Vector A makes an angle θ with the base, and how we can measure angle θ for any Vector ?
We know that, tan( θ ) = perpendicular/base
And solving it for θ
θ = tan-1 ( perpendicular/base )
x = base
& y = perpendicular
e.g θ = tan-1( 6/6 ) * 57.3 = 45 o
but?
We will not use tan-1 ( y/x ) in our shader code, instead we will use atan2 ( y/x ),
it also returns the angle but the results are different from that of tan-1 ( y/x )
For the vector's in first quadrant the atan2 ( y/x ) will return values within the range 0 ... 45 ... 90
Like for vector A(5.6, 4.1) in first quadrant, atan2() returns, θ = 36.2 o
In second quadrant the atan2 ( y/x ) will return values within the range 90 ... 135 ... 180
Like for vector B(-7.7, 5.6) in second quadrant, atan2() returns, θ = -143 o
In third quadrant the atan2 ( y/x ) will return values within the range -180 ... -135 ... -90
Like for vector C(-6.0, -4.3) in third quadrant, atan2() returns, θ = -139 o
In fourth quadrant the atan2 ( y/x )) will return values within the range -90 ... -45 ... 0
Like for vector D(7.9, -5.6) in fourth quadrant, atan2() returns, θ = -36 o
Positive values of θ in the upper half
Negative values of θ in the lower half
We know that each pixel on the screen have a UV vector associated with it, the values of atan2 ( UV.y/UV.x )) for each UV vector is printed on each pixel.
We know that fragment function during its one call goes through each pixel on screen .
If at specific pixel the value of UVAngle of UV is between the range (30 .... 70) then color of that pixel is white otherwise random color.
Just write the lines in your shader code, highlighted with green cells.
_Arc ranges from 0 ...... 180 ...... 360
