You.
Hello and welcome back.
Now, our next objective in this series is to create an outline effect.
Take a look at the assault rifle to the right of the character here.
Now, as soon as I look at the assault rifle, it gets a purple outline effect.
This is the outline effect we're interested in creating at this stage in the tutorial series.
So let's talk about how we can do this now.
When Unreal Engine renders the scene, it uses several buffers.
A buffer is just information pertaining to each pixel.
And there are many different buffers that we can take a look at in the ED.
The way you can see the different buffers is up here at the top left of the viewport.
You can take a look where it says lit.
If you click on that and hover down over buffer visualization, you can see the different buffers.
This is the base color buffer.
It only shows you color information.
If you go down, you can select the metallic buffer and this gives you black to white information per
pixel, depending on whether or not an object has metallic.
Here's the submachine gun and you can see the parts of the submachine gun that have metal and its material.
Now, if you'd like to see an overview of the different buffers, you can go to buffer visualization
and overview and you'll see a bunch of different mini screens here showing you the different buffers
that are used throughout the rendering pipeline of Unreal Engine.
Now, the reason we're talking about these buffers is because in order to create an outline effect,
we're going to make use of one of these buffers.
And that's the scene depth buffer.
You can see it down here at the bottom left.
Now, if I click the icon and go down to buffer visualization and choose scene depth, then I'll see
an image that represents the depth of each object in the scene.
Each pixel is a grayscale value, representing the objects distance from the camera.
So objects that are closer are going to have darker pixels and objects that are farther away will have
lighter pixels.
If I zoom in on the gun here, you'll see that the gun gets darker and darker and that's because it's
seen depth is getting lower and lower and therefore the visualization for that is going to result in
a darker pixel.
So how are we going to use same depth to create an outline effect for our objects?
Let's discuss this in a bit more detail now.
We know that Unreal Engine uses multiple buffers to store information about the scene that's being rendered
for the purpose of creating an outline effect on items we can make use of the fact that we have a buffer
that stores information regarding depth.
This is called the scene depth buffer for each pixel.
We can have a value that tells us how far away that surface is from the camera.
This distance is represented by a greyscale value when visualizing the in depth buffer, the scene depth
buffer looks like a grayscale image where each pixel is brighter or darker, depending on that objects
a distance from the camera.
When looking at the scene, depth and buffer of pixel on a gun is going to be darker than a pixel on
the wall behind it.
Now, Unreal Engine has an additional buffer called custom depth, and you're allowed to select specific
objects to participate in the custom depth buffer.
The custom depth buffer acts like the scene depth buffer, except it ignores all objects that are not
selected to participate in the custom depth buffer.
So a pixel on an object participating in the custom depth buffer will be dark and everything else in
the world will appear white.
Their depth of values will be extremely high, representing a large distance from the camera in this
image of the custom depth buffer, these two objects are participating in the custom depth buffer and
the rest of the world appears white.
Since we can have a buffer that gives us dark pixels for specific objects and white pixels for everything
else, we can figure out which pixels are on the border of an image and this will allow us to create
an outline effect.
Here we have an object in the custom depth buffer for each pixel.
We have a custom depth of value representing its distance from the camera.
The custom depth value for the pixels surrounding it are very high, which is why they appear white
on the grayscale image.
We can think of their distance from the camera to be nearly infinite since these pixels aren't on any
objects in the world.
As far as the custom depth buffer is concerned, here we have a pixel on the border for this pixel.
It's custom depth value is relatively low as it has a small distance from the camera compared to, say,
the pixel above it, which has a very high distance from the camera.
Now for this border pixel, if we sum up the custom depth values for its surrounding pixels, the result
would be very high since the top pixels aren't on any objects in the scene depth buffer.
Therefore, they have very high values.
Let's say, for example, say that a pixel that's not on an object in the scene depth buffer has a seam
depth of value of a thousand.
So all pixels that are white are a thousand.
Now let's say that a pixel that is on an object in the same depth buffer has a depth of value of one.
Now, this is an oversimplification, but just for examples sake, bear with me here.
So the sum of the surrounding pixels for a pixel that's not on an object and it's in depth buffer would
be 8000 since there's eight pixels surrounding the pixel and all of them have values of a thousand,
whereas the sum of the surrounding pixels for a pixel that is on an object in the same depth buffer
is only eight, provided that pixel is not on the border.
Remember, if it's on the border, then at least some of its surrounding pixels will have a value of
a thousand.
So we can use this some of the surrounding pixels as a metric for each pixel.
If the some of the surrounding pixels is a small number, like eight, then we know that that pixel
is on an object and it's not close to the border.
So here's what we can do.
We can take the some of these surrounding pixels for each pixel and subtract a high value from it,
say, 100.
If the pixel is on an object and not close to the border, then the result of this subtraction should
be a negative number.
But if we took this sum for a pixel that's not on the object, then the result of subtracting 100 would
still be a positive number.
Now, if we have a pixel that has at least one neighbor that's not on the object, that neighboring
pixel has a value of a thousand.
So the sum of the surrounding pixels is a thousand and seven.
So subtracting one hundred still yields a positive number.
So why do we even care about pixels that are on an object but not close to the border?
Well, we have an object and we know which pixels are on the object, which have no weight on them,
such as these depicted in Grey, and we also know which pixels on the object have no white neighbors.
These are not close to the border.
Now, these pixels have neighbors with at least some white on them.
So since we can tell the difference, here's what we can do.
Let's take all the pixels that have no white on them and let's call these pixels object pixels.
Here's an image of the custom depth buffer showing the black pixels for a gun and some ammo.
Now, in this image, the gray pixels are pixels that have no white neighbors call these interior pixels,
they represent the object only they're missing the broader pixels.
So they form a smaller version of the object.
Now, if we take the object pixels and we subtract the interior pixels, we're left with just the border
of the image.
Here's the scene depth buffer again.
We're seeing all of the object pixels in black.
Now, here's the result of inverting that scene depth buffer, changing each white pixel to black and
each black pixel to white.
And here's the result of subtracting away the interior pixels for each object.
What's left is the object border.
This is the basis for creating an outline effect.
Now, don't worry if all of this seemed to go over your head.
This is just a high level discussion and the take home ideas here are that one.
We can select objects to participate in a special buffer.
And in that buffer, those objects are represented by black pixels and everything else is white.
And the second takeaway is that we can discover which pixels are on the border of an object simply by
looking at their neighbors and seeing if they're white or dark.
We're going to create this broader effect step by step.
We're going to take baby steps so that we don't overwhelm ourselves with too much, too fast.
Let's jump into the editor and start to construct this outline effect.