Build-in Shader Anti-Aliasing - TUTORIAL + FILES (Patreon)

It's been a while I posted something here... But the time has come!

In a previous tutorial we made a radial progress bar shader. And it was a problem with it... Very sharp pixialized edges:

To prevent this, we should use Anti-Aliasing... But! In our case this edge is not an edge of geometry, it's just a math-based generated texture and it can't be smoothed with MSAA default anti-aliasing. That's why we should implement our own anti-aliasing feature and embed it into our shader.

First of all, we should make our shader Transparent, not Cutout. Cutout doesn't support partial opacity and will not able show the smooth edges. But it is still not enough. We need to generate the same thing, but with a blurry edge.

The easiest way to do this is just to Remap our radial gradient like this:

We can even achieve a little bit more smooth and correct result using a Smoothstep node.

Smoothstep node works just like a Remap, but it also smoothes values between 0 and 1 and clamps it:

Let's just replace a Remap nod with a Smoothstep:

Now, let's use it with our radial progress bar and see how it looks:

Much-much better from a distance, but... When we zoom it, we can see a blurry edge.

How can we fix this? Basically, we need our blurry edge to always be a size of a one screen pixel. There can be several ways to do it, but the most correct way is to use an FWidth node.

 FWidth  node outputs the absolute value of the partial derivatives of the specified input. Actually, it outputs the result of abs( ddx( Input ) ) + abs( ddy( Input ) ).

And if we use it with our UV-based radial gradient, we'll get something like a screen, scale and perspective independent value of a pixel-edge width. Basically, a factor we need to make our anti-aliasing.

Now we just need to remap our radial gradient with a smoothstep node in a Min-Max difference of our FWidth value to get a perfect anti-aliased circle.

In editor it looks and works like this:

Perfect! But, we also need to smooth our ATan2 based angular gradient:

It will be a big mistake to use the same FWidth value for this, because a gradient, this edge based, changes it's width angular. So, we need to generate a new FWidth value based on this gradient:

And... this is almost that simple, yes. But still doesn't correct. As our FWidth works with a neighbor pixel differences, we absolutely don't need to have any seams in our input-gradient, like we have here. So, let's just use an Abs node to make it seamless. Let's, basically, just mirror it! But don't forget to tweak our Remap Min New and Max New values first:

And now it is a correct FWidth value for our angular gradient.

Some simple final moves and that's what we have! A perfect anti-aliased radial progress bar:

You can download a source file of this shader here below.