Unreal Engine 4 Toon Outlines Tutorial

Performing Convolution

First, you need to create the offsets for each pixel. Since the corners of the kernel are always zero, you can skip them. This leaves you with the left, right, top and bottom pixels.

Open PP_Outline and create four Constant2Vector nodes. Set them to the following:

• (-1, 0)
• (1, 0)
• (0, -1)
• (0, 1)

Next, you need to sample the five pixels in the kernel. Create five MaterialFunctionCall nodes and set each to MF_GetPixelDepth. Afterwards, connect each offset to their own function.

This will give you the depth values for each pixel.

Next is the multiplication stage. Since the multiplier for neighboring pixels is 1, you can skip the multiplication. However, you still need to multiply the center pixel (bottom function) by -4.

Next, you need to sum up all the values. Create four Add nodes and connect them like so:

If you remember the graph of pixel values, you’ll see that some of them are negative. If you use the material as is, the negative pixels will appear black because they are below zero. To fix this, you can get the absolute value which converts any inputs to a positive value. Add an Abs and connect everything like so:

Summary:

1. The MF_GetPixelDepth nodes will get the depth value for the center, left, right, top and bottom pixels
2. Multiply each pixel by its corresponding kernel value. In this case, you only need to multiply the center pixel.
3. Calculate the sum of all the pixels
4. Get the absolute value of the sum. This will prevent pixels with negative values from appearing as black.

Click Apply and then go back to the main editor. The entire image will now have lines!

There are a few problems with this though. First, there are edges where there is only a slight depth difference. Second, the background has circular lines due to it being a sphere. This is not a problem if you are going to isolate the edge detection to meshes. However, if you want lines for your entire scene, the circles are undesirable.

To fix these, you can implement thresholding.

Implementing Thresholding

First, you will fix the lines that appear because of small depth differences. Go back to the material editor and create the setup below. Make sure you set Threshold to 4.

Later, you will connect the result from the edge detection to A. This will output 1 (indicating an edge) if the pixel’s value is higher than 4. Otherwise, it will output 0 (no edge).

Next, you will get rid of the lines in the background. Create the setup below. Make sure you set DepthCutoff to 9000.

This will output 0 (no edge) if the current pixel’s depth is greater than 9000. Otherwise, it will output the value from A < B.

Finally, connect everything like so:

Now, lines will only appear if the pixel value is above 4 (Threshold) and its depth is lower than 9000 (DepthCutoff).

Click Apply and then go back to the main editor. The small lines and background lines are now gone!

The edge detection is working pretty well. But what if you want thicker lines? To do this. you need a larger kernel size.

Creating Thicker Lines

Generally, larger kernel sizes have a greater impact on performance. This is because you have to sample more pixels. But what if there was a way to have larger kernels with the same performance as a 3×3 kernel? This is where dilated convolution comes in handy.

In dilated convolution, you simply space the offsets further apart. To do this, you multiply each offset by a scalar called the dilation rate. This defines the spacing between each kernel element.

As you can see, this allows you to increase the kernel size while sampling the same number of pixels.

Now let’s implement dilated convolution. Go back to the material editor and create a ScalarParameter called DilationRate. Set its value to 3. Afterwards, multiply each offset by DilationRate.

This will place each offset 3 pixels away from the center pixel.

Click Apply and then go back to the main editor. You will see that your lines are a lot thicker. Here is a comparison between multiple dilation rates:

Unless you’re going for a line art look for your game, you probably want to have the original scene show through. In the final section, you will add the lines to the original scene image.

Adding Lines to the Original Image

Go back to the material editor and create the setup below. Order is important here!

Next, connect everything like so:

Now, the Lerp will output the scene image if the alpha reaches zero (black). Otherwise, it will output LineColor.

Click Apply and then close PP_Outline. The original scene will now have outlines!

Where to Go From Here?

You can download the completed project using the link at the top or bottom of this tutorial.

If you’d like to do more with edge detection, try creating one that works on the normal buffer. This will give you some edges that don’t appear in a depth edge detector. You can then combine both types of edge detection together.

Convolution is a wide topic that has many uses including artificial intelligence and audio processing. I encourage you to explore convolution by creating other effects such as sharpening and blurring. Some of these are as simple as changing the values in the kernel! Check out Images Kernels explained visually for an interactive explanation of convolution. It also contains the kernels for some other effects.

I also highly recommend you check out the GDC presentation on Guilty Gear Xrd’s art style. They also use the inverted mesh method for the outer lines. However, for the inner lines, they present a simple yet ingenious technique using textures and UV manipulation.

If there are any effects you’d like to me cover, let me know in the comments below!