Antialiasing with GLSL

[00:00:00]
>> So one other thing I wanted to mention is if we use a step function, so in our code, we have this step function, we have this here. And a step function is saying, if it's less than something, give me 1, or otherwise give me 0. That's basically what the step function is doing, it's like this ternary operation we did before, just like this, same kind of concept.

[00:00:25]
But it's probably flipped instead of less than it's greater than. That's what a step function does. But if we look close enough to some of these circles and it's kind of hard to see sometimes, but the easiest way to see it is to export this PNG. And then look at it really close.

[00:00:46]
And you'll see these super jagged edges on all these circles. And that's pretty ugly. And in order to fix that, we're going to use a different step function, that's called aastep or anti alias step. And it's on NPM as GLSL aastep. You can see it on NPM or GitHub.

[00:01:09]
And so we're gonna install this and require it just the same way we're gonna go into a terminal, NPM install glsl-aastep for anti alias step. And there's an example of how to use this here. That'll just show you here in our code. So we should already probably have it wrapped in glsl.

[00:01:34]
If not, you'll need to require the utility, the glslify utility and then wrap that as a function. But now we can say pragma glslify-aastep = require glsl-aastep, but this is gonna give us an error. And this is because this particular line, this particular module needs an extension in web gl, which is something you don't always see in a lot of the documentation because extensions are a little bit more advanced.

[00:02:09]
But all of a sudden, this is requiring an extension. The way we actually know is if we look at our error here, it's gonna say some sort of error like something extension is disabled. So we could Google this in regards to threejs. And you might start to find some docs and stuff on it.

[00:02:29]
Unfortunately, because this is a bit more advanced, it's not super well documented, but you will see some references and sort of GitHub issues and things that we have to say derivatives, we have to say something with derivatives. I'll just show you how it looks. And we basically have to go to our ShaderMaterial, say extensions and then derivatives, true.

[00:02:54]
So what we've just done, is we've said for this material turn on derivatives, which is an extension. So this is like a bit more of an advanced topic here. And now if we've done that, we should be able to replace our step function. So let's say we have a step function like this.

[00:03:19]
So we have a step function like this. Now we're just going to replace it with aastep which we've acquired up here. And now just to compare, I'm going to save the file. I'm gonna go check it out, and the circles are smooth, which is what we want. So that's something to keep in mind, if you're using step it's going to be very jagged.

[00:03:43]
And a way to fix that is to use aastep. And basically what this function is doing under the hood is just saying, instead of making it either A or B instead of being purely binary, I'm going to look at the difference based on the pixel difference within the rendering of this distance field basically.

[00:04:07]
And I'm gonna just make it a bit smoother and it's doing some crazy stuff under the hood.