Shaders Example: Step Functions

[00:00:00]
>> Mathew DesLauriers: Next thing would be let's have a white background. So you'll notice if the pixel is transparent, like 0, we're just drawing black. And so actually, we have to set up the background in this utility function here. And we set it by doing clear color. And you can use a string ClearColor is white.

[00:00:25]
>> Mathew DesLauriers: And if you set this to be false, it's actually gonna be transparent. And you're gonna test that again like we did earlier, by downloading the output and you'll see that it's a transparent PNG. But we're gonna use white for now.
>> Mathew DesLauriers: So another thing we'll do and another thing you might notice if you're looking at this image and you want it to be a really high quality image that you're sending to a client for their branding or something like that.

[00:00:51]
You might notice these jagged edges around the circle. It's a bit hard to see on the screen but it's definitely noticeable when you zoom in. And we want to smooth that circle a bit. So we're going to use another concept. So here we have this line here, just this part, and the reason it's jagged is because we're using such a harsh step.

[00:01:16]
We're saying as soon as the distance is greater than a certain value make it 0 and as soon as is less than a certain value make it 1. And there's no smoothness in between there, so is either 1 or 0. It's like a bit map but we actually want it to do is slowly go from 0 to 1 and vice-versa.

[00:01:32]
So we're gonna set this to the value, we're gonna call this value alpha. Just leave it at 1 for now just to make sure it works.
>> Mathew DesLauriers: And you should see everything. This means all the pixels in the image are full transparency.
>> Mathew DesLauriers: And what we're gonna do is we're gonna learn about two different functions.

[00:01:56]
The first one is exactly what we had before, it's just looking a little bit different.
>> Mathew DesLauriers: And this is called a step function. In a step function, it says if this is less than this value, if the first argument is less than the second argument, return 0, otherwise return 1.

[00:02:19]
I might have the arguments mixed up, but either way it's basically exactly what we did before with the ternary where if a is less than b use 0, otherwise use 1. But instead of step, which is a built-in function just like mix and length, we're gonna use something else called smoothstep.

[00:02:37]
So step is really useful to learn, and generally, whenever you're writing shaders, if you're using the built-ins, it's gonna be a bit faster than trying to do the math yourself. So that's just a tip if you're working with shaders and want better performance. So smoothstep works like this.

[00:02:54]
You pass in a low value, and you pass in a high value. And then you pass in the value that you have that lies somewhere between your low and high values. And what's gonna happen is if this dist value is less than 0.25, we're gonna end up with 0.

[00:03:15]
And if this dist value is greater than 0.5, we're gonna end up with 1. But if it's anywhere between those, it's going too smoothly sort of roll off between 0 and 1. And so that's what's happening here is we have this smooth gradient effect, which is kind of cool on its own right and you can try flipping those numbers around.

[00:03:35]
Just doing instead of the first and second parameter, just do them flipped. And so this is way too smooth. You know how the whole purpose of this image was to make a really crisp mask? Although it's pretty cool already, we have this blurry thing. What we should do is let's make this value much, much closer to the other value.

[00:03:56]
So the closer this value is to the other value, the less of a gradient fall off we're gonna get. So if we were to use almost the same value. You just don't wanna use the same value but almost the same, you can do 0.5005 or something. And there's a point which is too close and it starts to look pixel-y again.

[00:04:15]
But there might be a point at which it starts to look smooth. And there's actually more technical ways of achieving really perfect edges. But just for the sake of this class, we're gonna just do this effect here.