This tutorial will show you how to make a
simple post process outline in Unreal. Make a new material. In the bottom left,
change the type from surface to post process. Make a scene texture node. Change the type to
PostProcessInput0 and hook it up. Now before you get too far,
go to your global post process volume and in the section for post process materials, add an asset reference
then assign the material you just made. Take a minute to preview some of the buffers.
In forward rendering you don't get a whole lot. Two of the ones you can use are Scene Depth and Custom Depth. Both are the same except Custom Depth will only draw the
objects you tell it to by checking Render CustomDepth. There's one more called Custom Stencil and in order to see it,
you'll need to go to your Project Settings. In Rendering... ...Postprocessing, change the depth from Enabled to Enabled with Stencil
and now you can set it to an integer other than zero. Use 2. To draw an outline, there's something called the Sobel Operator
which looks at surrounding pixels to determine if a pixel is on an edge or not. This tutorial is only going to compare two pixels
using custom stencils that are offset from each other. To offset the custom stencils you're going to adjust the UVs. Make a ScreenPosition node and a SceneTexelSize node
and add the two together. The SceneTexelSize is the size of a single pixel.
Multiply that by a custom parameter so you can adjust the width. Do the same thing for the second CustomStencil except... multiply the SceneTexelSize by -1 so that
the UVs are offset in the opposite direction. Compare the two custom stencils using a distance node. The difference between the values of these two custom stencils
will be mostly zero except where they don't match and that'll be along the edges of whatever object you're drawing. Mask both custom stencils with a single channel
so that you're getting a scalar instead of a vector3. Use an if statement to determine if the result
is the exact custom stencil value you want. If the result equals the custom stencil value,
pass the custom stencil value through. Otherwise assign 0 to leave that pixel black. The Scene Texture for PostProcessInput0 is what
the camera sees before any post-processing has happened. The next step is to combine the results of the
edge pixel comparison with the rendered camera view. Use another if statement. If the result is a black pixel, if it equals zero or is less than zero,
then draw the unaltered image. Otherwise it's an outline.
Make a vector4 node to be your outline color. Save the material and an outline will show up on any
object that has CustomDepth enabled and a stencil value of 2. If you adjust the width to be a very high value, you can actually see the two
custom stencils offset and how they make an outline where they overlap. Now you can make the outline look better. Create a series of nodes starting with Time.
Then Multiply to increase the speed of Time. Sine, to blink on and off. Multiply by 0.5 then add 0.5 to normalize the Sine. Multiply the Sine by the
outline color to create a blinking color. Add that to a second color. Then connect the results of the if statement
to create a flashing outline. Create a scalar parameter to represent the outline opacity
and multiply that by the flashing outline. Then add that to the PostProcessInput0
and connect the result to the if statement. Now the outline can appear transparent. Set it to 0.5 which looks nice. One final thing in this tutorial
is to turn the outline on and off using a blueprint. Choose an object in your scene then select
that object in the content browser and make a blueprint out of it. Add a box collision component
and make the box bigger than the object. In the Event Graph, you're going to use BeginOverlap. Remember to always disable tick on any blueprint that doesn't need it. Get a reference to the object and there's a node called Set Render Custom Depth.
Check the box to make it true. There's another node called Set Custom Depth Stencil Value,
set that to 2. Make an Event ActorEndOverlap.
Copy the nodes. Set the custom depth back to false.
Set the custom stencil value to 0. Replace the objects in your scene
with the blueprint you just made. Now when you overlap, the outline turns on. Imagine being in VR, reaching out your hand, and
an outline appears to let you know the object is interactive. Here's the full outline material for reference.
