Hello! My name
is Ben, and I'm a rendering engineer. If it's your first time here. I teach you how to write unity shaders
from scratch. To this video, we're going to be doing this
erosion effect so the set up for
the shader is very simple. All we have up here is some blending,
and we also have texture sampling, and we're just
outputting the texture right now. So the first thing we want to do
is duplicate all the texture stuff, because when it comes to masking,
we need a mask texture. So let's go ahead and make that The UVs are a float2. I want to change them to a float4 and then here I'm going to do .xy, x y will be the first texture and z w will be the second texture So for the sampling, we need x y
and we can save this. Often it should be okay. And now we have two textures
that we can work with. So the first thing we're going to do
is we're going to add a mask texture. We'll just use this black and white,
and we'll use probably the red channel to do all of the masking,
to do a simple mask. Let's duplicate this color here. We'll call it mask. Instead of main text,
we need to use mass text. And of course,
we also need to update the transform text to use mass text use
that we're using the proper tiling and offset values instead of x,y, we're going to use z,w, And we're going to reconstruct
this real quick. We'll do a fixed4
we'll print out the color RGB or display the color RGB for the alpha. We need to use mask dot R, let's just do that. So it looks like it worked. And let's just check the tiling
real quick. Yeah. So I can tile this value. And this one will tile the the bee texture. Now we've lost the... Lost the alpha for the bee (texture). So let's add that back. That's col.a. We just need to multiply it
against the mask.r Now it looks like it's masking. Okay, so this works pretty well. I also added this red background here so that we can easily
see what's happening here. And if we use this default sphere the default ball,
you can kind of see the mask working. It's just kind display mostly in the
middle and fading out and the edges. Cool. So what if we wanted to use this mask as a as a way to reveal this bee (texture)? Yeah. So one of the ways we can do
that is with a step function and a step looks like this. It's pretty much an on or off. It's either to zero or one. In other words, it only reveals
if x (second value) is greater or equal to a (first value) So what we can do
is have a using this step function, what we can do is have a value where it kind of determines or when
do I want to allow the bee (texture) to be shown? That's usually how I think about it. So let's think of it as reveal the reveal value. It's going to be a float we make sure it's declared here. And a step function will look like this. Will do the reveal amount What we want is a mask value to be first,
and the reveal value to be second, right? Because we are testing against the reveal
that this way, whenever the mask is let's just say, very dark, that's
where the texture will start to reveal. And as against to white as a reveal value
gets higher It shows the full amount of the texture.
(think of it as a gate to let in more of the texture) So it looks something like this right? So it starts off from the black,
which is on the outer edges. And then as it goes
(higher value) white, it'll reveal this much. Right. Of course you can inverted it
by flipping these two, but this works well with a texture
that's more clouded like. So starting from zero it starts where the blacks are. As it goes higher and higher,
it reveals out the white. And that's how this works. So now this works. But, you know,
this valley here is a little bit harsh. It's either on or off, right? There's no feathering. There's no smoothness between the two. So what have we wanted to add that? So let's go ahead and add a feather value. That we can tune Just going to add it onto here. So how feathering works. What we need is something called
smooth step. All right. Smooth Step is as it says
here, there's a space right here. And smoothly interpolate between
two input values based on the third. Our third value is the reveal amount. And what we need are two input values. So I always think of it as, you know,
this is the lower value. There's an upper value, right? So let's do smooth step here. I saved this off
there should be no changes. You know, despite having a feathered
amount, there should be no changes until we add the amount
or in this case, subtract So what I want is the bottom end to be minus
the feather and the top end to be plus the feather Right. Like so save that off. And there you go. Now, that is our feathered amount So now when we do our reveal from zero and up to one, it should it should work. Okay, so this works, but a lot of people sometimes
want to see a bit of color in between. I mean, this is an erosion effect. And having color in between here is quite a common effect. I guess
it's just called erosion with color. So how do we do that? Well, smooth
step was kind of the precursor to it, but in order to actually implement it,
we don't actually need smooth step. Instead, we need two normal step functions, an upper range and a lower range. So let's go ahead and do that
reveal amount. And oh, here
I'm going to show one and I'm going to display the reveal amount. So let's do this where it's revealed
amount is equal to we're going to go bring it back to what we had before,
which is a step of the mask.r followed by our reveal value here. I'm going to return the reveal amount in as a white and I'm also just going
to put one in the alpha. So that is our reveal amount. So what we need is a top and bottom. So let's go ahead and duplicate this and we'll call this first one, reveal top and reveal bottom to create a top. What we need to do
is add feather to our reveal amount and subtract it from our bottom amount So let's quickly display the top. We'll see this. We should see more (white)
when it's the top and less on the bottom. Okay. So in order to get the difference,
the white that's in between, we'll call it this is more of the,
the space between the two reveal. So we'll call it time
difference reveal difference equal to top - bottom All right. So let's show the reveal difference and we get this white line (think of it as a thickness) right. Okay. Now, in order
for us to have an erosion color, we need to multiply a color (lerp is to understand as you see later)
against this reveal difference. So let's quickly add a color up here we'll call it erode color it's going to be type color and I'm going to default it to white right. So we have our erode code Let's just check that there's no errors. Great. So the first thing we want to do
is we want a lerp wherever it is black. We wanted to show our color,
our sorry, our image. So our "col" and wherever it's white,
we want to show the color. So our final color,
it will be a float3 is equal to lerp. And we're lerping between col.RGB. So wherever it's black, it's
going to show the bee (texture) and wherever it is white,
we want it to show our color. Which is erode color, which is probably defaulted
to white anyway, but that's okay. We wanted to lerp this by the erode difference
or the reveal difference let's put a final color here
and comment this out. See what it looks like cool. And our erode color can be any color. Let's set it to green for now. Our feather still works as a thickness It can go inverted. We can. We can fix that. But I'll just leave it for now. And usually something
kind of thin looks pretty good. And we also need to make sure our reveal,
our alpha is still set. And what we want to do is make sure we cut off from the top
and not from the bottom. The cut off from the bottom,
and we actually lose the color as well. Right. So to quickly demonstrate cutting from
the bottom in will this color. But if we cut off from the
top end, it's after the color right So, yeah, that's how you can
and erode with color. And you can change this into multiple,
multiple things. You can have multiple colors. You can lerp between the
this small range based on maybe feathering you can because this is now it's almost like its own mask
erode color against this reveal difference. You can kind of put whatever you want here, image, etc.. Right. So yeah. So I just quickly added this animation
we feel and instead of us driving it from this end value but yeah,
that is it for this particular video. I mean, you can have artists
drive this value, you can use it as a game effect,
destroying characters yeah. There's there's actually many ways
you can use this effect. So I hope you guys learned something. And that's all for me. If you like what you see like, subscribe
and I'll see you guys next time. Bye Now
