>> Welcome to Unreal Tips and Tricks.
In this episode, we'll look at one of the post process
material techniques available to us for masking out
objects in our scene.
Masking is a powerful tool that lets
us modify how specific objects in the scene are rendered.
There are several different tricks
that can be used for masking, including
using the built in Chroma Key Alpha Material Function,
using the Stencil Buffer, using the Bit Mask Material Expression,
or using the Custom Depth and Scene Depth Buffers.
In this episode of Tips and Tricks
we'll look at using the Custom Stencil Buffer.
Two of the techniques we'll be using today
make use of our video card's GBuffer.
The GBuffer is simply a place in memory on the video card,
or VRAM, that Unreal sends render targets to in order
to create the final render.
We can access these different render targets
that will be sent to the GBuffer
in the viewport in Unreal.
We can simply go up to our View Options button
here, and then go down to Buffer Visualization,
and then select Overview.
You can see now the different render
targets that are being sent over to the video card's GBuffer.
And if I move my camera around here,
you can see that these are updating in real time,
just like the regular view is.
And if we look around, we're not going
to cover every single one of these,
but if we look around from the top left here,
you can see the first one is our base color,
which, of course, represents the base color input of all
of the materials in the scene.
We also have our specular, our world normal, opacity,
metallic roughness, scene depth, and so forth.
And we could actually get access to all
of these different render targets in our materials,
and then create special effects using them.
If you want to see one of these render targets by itself,
click on the Buffer Visualization button
again, go to buffer visualization,
and simply select the one that you'd like to see.
All right, so let's go ahead and go back to our view mode
and set ourselves back to Lit.
We're going to be using post process
materials for these masking techniques today.
If you aren't familiar with post process materials,
they're simply materials that can
be used by a post process volume,
and then these materials will affect the entire screen.
The first thing we need to do is select our post process
volume in the scene.
And then we'll want to go down to our rendering features,
and right at the top of rendering features,
you'll see the post process materials rollout.
I've already got a post process
material applied here.
As you can see in the scene, we have
essentially a desaturated viewport,
except for this singular object here,
this telephone, which is rendering in full color.
If I remove this post process material using the trashcan
icon, you can see that my scene goes back
to being completely in full color.
The first thing we'll need to do is
add a post process material to this array here.
This array is simply a collection
of post process materials, because we
can have more than one applied.
So let's go ahead and hit the plus icon here,
or Add Element button.
And then we want to change the dropdown here
to Asset Reference.
From here, we'll be able to drag in our post process
materials.
So the first technique we're going to look at
is using the Stencil Buffer to control our masking.
In order to do this, we first need
to go into our Project Settings.
In the Project Settings, we'll need to search for depth.
You'll find it under Engine Rendering,
and then under Post-processing.
We want to make sure that Custom Depth Stencil Pass is
set to Enabled With Stencil.
Once we've done that, we can close down
our Project Settings.
So as you saw at the beginning of this Tips and Tricks video,
we're going to make this phone full color,
while the rest of the scene is black and white.
To do that with the Stencil Buffer,
we need to select the phone.
And then on the Details panel, we need to search for depth.
Under Rendering, we'll find an option for Render Custom Depth
Pass.
We'll need to enable this so that we get access
to the other options below it.
So the options we have available to us
are going to be Custom Depth Stencil White Mask, which
we can leave at the default setting, and then
Custom Depth Stencil Value.
We're going to set this to a value of 1.
Now that we've done this, we can actually use our render target
GBuffer visualization here to actually see our stencil mask
for this phone.
So if we go up to our View Mode options
again, and then go to Buffer Visualization,
we can enable Custom Stencil.
In this visualization we can see that the entire scene
is being rendered black, except for our phone, which is making
use of a custom depth stencil.
If we were to change this number here,
you can see that the color of the phone updates, as well
as the value that is being drawn on top of it
to represent the custom depth stencil
value that we've applied.
Let's go ahead and go back to 1.
So using this value, we can have multiple different objects
in the scene using different stencils.
Or we can apply the same stencil value
to all of those different objects as well.
So if I go back to buffer visualization,
back to lit mode, and then select this statue here,
I can apply the exact same value here.
And then we'll go back to our buffer visualization
for stencil.
And now you can see that both objects
are sharing the same stencil.
And, again, of course, if I've changed this second object
to a value of two, you can see that it is
using a different stencil now.
So let's go back now to Lit mode.
And let's look at creating the material that
will make use of the stencil.
So we'll go ahead and create our material.
And I'm going to call this material PPM
for post-processed material.
And we'll call this one, Custom Stencil.
The first thing we need to do in our material editor
is to change the domain of our material.
So on the Details panel where it says Material Domain,
we need to change that from Surface to Post-Process.
And this means this material will now
be usable as a post-process material.
You can see when we set that, everything gets grayed out
except for emissive color.
This is the only input we need for a post process material.
Now, as I said earlier, inside of Unreal
we can actually make use of the different render targets
when we create a post-process material.
To do that, we need to get access to a material node
called Scene Texture.
So we're going to right click in our material graph and search
for scene texture.
The Scene Texture node is an input node,
meaning it grabs data automatically
for us from Unreal.
And then we can take that data and do stuff to it.
You can see that the scene texture node by default
is grabbing the scene color, but what we want instead
is the input data that goes into our post process effect.
On the Details panel, we have a dropdown here
called Scene Texture ID.
If we open this dropdown up, you'll
see that we have access to all of the different render targets
that we were able to visualize in the viewport.
So you can see, we have Base Color, Specularity,
Metallic, Roughness, Custom Depth, and so forth.
Now, the first thing we're going to need
is the raw, post process input.
This will give us the scene as it
is before any post-processing effects are applied.
Now, as you may guess, we're also
going to need access to the Custom Stencil Buffer.
So I'm going to copy and paste this first scene texture.
And then I'm going to go over to the details panel
and change this so that I have my Custom Stencil Buffer.
You'll find it towards the bottom, Custom Stencil.
Now, this will give us access to anything in the Stencil Buffer
on the video card.
In this case, that's going to be the phone and the statue.
This will be our mask.
So to create our mask, we'll simply pull out from the color
here and do a search for mask.
Our component mask by default has two values enabled,
red and green.
But in this case, because we're using
this as a black and white mask, we really
only need the red channel.
So we can uncheck the green channel.
Now, what we want to do is we want to desaturate the scene
and leave the phone in full color using the mask.
So that means we're going to need
two copies of the scene, a desaturated copy, and one
in full color.
Let's, first of all, get our desaturated copy
by pulling out of the color output
and search for desaturate.
So we're going to need to combine
the black and white version with our full color version
based on the mask here.
To do that, we're going to use a Linear Interpolate node.
So I'll pull off of my Desaturate node here,
and I'll search for lerp.
We're going to want Linear Interpolate.
From here, we can take the color output of our post process
input scene texture here, and plug that into the B.
And then finally, we need our alpha mask
to control which part our linear interpolate is
going to deliver to us.
And we're going to use our stencil buffer mask to do that.
Now we can drive our lerp into the emissive color.
And that's all there is to it.
So now, if we close this down and save it,
we'll need to go back to our post process volume.
And then we can search in here for material.
And this will quickly bring us to our post process material
array.
And now we can take our custom stencil material
and simply drag it onto that array.
So in this case, because we have two objects making
use of the stencil buffer, we have
both of those objects being rendered
by a material in full color.
But remember, our two different objects
are using two different depth values here for the stencil.
So the custom depth for the phone was one,
and the custom depth for the statue is two.
So what if we want to make use of these two different values
to create two different effects?
Well, that's easy enough.
Let's go ahead and load our material back up,
and we just need to make a few tweaks in here.
But remember, our phone is a value of one,
and our statue is at a value of two.
It's important to realize that those values represent
black and white essentially in our masks.
So a value of zero is going to be black,
while a value of one or higher is going to represent white.
So let's say we want our statue to be rendered
in green instead of full color.
Well, of course, the first thing we're going to need
is our color constant value here.
So we'll create one and set it to green using a vector 3.
And then we're going to need to create
a second linear interpolate off of our first one.
So we'll simply pull off of that and add
our second linear interpolate.
And now we're going to use the green color as the second value
of our linear interpolate.
And from here, we need to get access
to the different stencils.
The way we're going to do that is we're
going to pull off of our custom stencil mask here,
and we're going to use a Subtract node.
And we're going to leave it at the default value of one.
So we're going to subtract the value of one
from whatever comes out of our custom stencil mask.
And then we're going to make sure
that this value stays within a proper range
by using a clamp node, because we don't want the value
to go below zero.
And then we'll plug this into the alpha of our second lerp.
And then we can plug this into our emissive color.
You're going to see right away that we get
an error on our second lerp.
And that's because we're using a float four versus a float three
in a couple of our inputs here.
So to fix that, we're just going to pull off of our color value
here on our post process input, and we'll type mask.
And we want to make sure we're just using the red, green,
and blue channels here.
And then we can plug that into the B input of our first lerp,
and that should solve our error.
So let's explain what's happening here.
We have two pipes, or two lerps here controlling our masks.
The first pipe is controlling, as before,
whether the scene is black and white or in full color.
So we have A is black and white.
Full color is B. And that is controlled by this connection
here from our Stencil Buffer.
This is then, in turn, plugged into a second lerp pipe.
And this lerp pipe is either going
to be black and white plus full color,
and then other objects that are masked
out using this other pipe here will
be colored in green instead.
So remember that our phone has a value of one
and our statue has a value of two.
So coming off of this first pipe, both our phone
and our statue have a value higher than zero.
So they'll be used in the alpha channel
to determine what is full color and what is black and white.
So in this case, both the phone and the statue
will be full color.
And then they'll be plugged into this second lerp.
Now, on our second pipe down here
we're going to go down to a Subtract node.
And we're going to subtract the value of one
from both of the stencils.
So our phone has a value of one.
So that means it's going to be set to zero here.
And our statue has a value of two,
which means it will become one.
But in our second pipe here, the phone
will have a value of zero, meaning
it'll be black, while the statue still has a value higher
than zero, which is one.
So it will be used in the alpha mask for the second lerp.
So only the statue will be colored green,
while the phone, since it's not part of the mask anymore,
will still have its value driven from this first lerp pipe.
We can look at our scene now.
And as you see, we have a full color phone,
while our statue is being rendered in green.
If we change these values--
so I'll change the phone to a two--
you can see the phone now becomes green.
I can change the statue to a value of one.
Now it is full color.
So that is an example of using the custom stencil
buffer for creating masks.
We'll see you on the next Unreal Tips and Tricks.