Radial progress bar shader - TUTORIAL (Patreon)

I already told you about making a simple progress bar shader. Today we'll try to make something a little bit more complex! A radial progress bar shader.

Let's begin with generating a simple circle. First of all we need to make a gradient, just like in the previous tutorial, but radial instead of linear. And, we'll begin with a "Texture Coordinates" node, as always. Then, use a "Distance" node with our UV output. Just connect UV output to Distance node A input.

Wow... what is it? Hmmm... let's shift it a little bit right.

Just set our UV Offset parameter to (-0.5, -0.5). What is this actually does? It shifts our UV coordinates to the center of an object UV space. 

And now we can see, that it's a radial gradient! But how is this magic works?

Our Distance node measures the distance between A and B inputs. Our A represents UV coordinates and our B represents the center of UV axis (0,0). So, basically, it measures the distance from center to our current position in UV space. So, the close points will be dark because of the short distance to it, and the far points will be bright.

But it's still isn't correct. UV coordinates are must to be scaled to fit inside our UV space. So, let's fix it by changing both Tiling and Offset values like i specified below:

Now our gradient fits the UV space. Now, let's use a "Floor" node as the easiest way to turn it into a circle. Floor node works almost like a "Ceil" node from the previous tutorial, it also rounds our float value, but down to the integer value.

Now, lets make a smaller circle by adding a value to the Distance output before applying a Floor node.

Now we can control our circle size. Now lets combine them both to create a ring. First, let's use a "One Minus" node (Key "O") to inverse the values of one of our circles. One Minus is just a quick implementation of a (1 - value) subtraction, which basically inverses any values.

Then let's just multiply the results!

Okay, the first step is done! Now we need to make another type of a circle gradient, which will become our progress bar.

Let's use an "ATan2" node with U and V outputs of our Texture Coordinates node.

What the heck just happened??? It is math, okay?! Don't you know what the ATan2 function does? It outputs the arctangent of the (A/B) division. As it outputs the result in (-Pi, Pi) range, it looks overexposed. Let me show you what it really looks like by remapping the result:

What the "Remap" node does? It just remaps values from the old, to the new range. Old range was (-Pi, Pi), and new is (0, 1), just as we need it to be.

Now let's turn it into a progress bar:

Remember the circle we made before? Let's multiply it with this thing.

Actually, this is it! Don't forget to set our shader Blend Mode to Masked. It's a transparent Cutout mode.

Now we just need to colorize our progress bar. Then, use the circle mask as the Opacity Mask:

And, let's apply our shader material to a simple quad:

Woo, now we're done!

But... Look at this pixialized edges.. Meeeeh. This isn't good... and. It can be fixed with manual-implemented build-in anti-aliasing thing!

But... About this complex stuff, I'll tell exclusively to my Patrons in the next tutorial soon. A little sneak-peek below: