top of page
Writer's pictureDavid Flores

Learning Unreal: Toon Outlines

Updated: Sep 8, 2019

Today's Learning Unreal post is the second part of a mini sub-series about creating shaders in Unreal. You can find the first part on cel shading here.


The type of shader being covered today is the toon outline, which is a technique used to render lines around objects. As always, if you want to follow along with the same tutorial that I'm using, you can find it here.


As with the previous post, I'll start first with an image of what the scene looks like before the shader is applied for later comparison.

Original scene without shaders.
He's just happy to be here.

Two completely different techniques were actually used to create a toon outline shader, both of which I'll be talking about. The first of these methods uses an inverted mesh.

Viking with Inverted Mesh outline.
Our viking friend has grown a little bolder.

This technique is relatively simple to implement. It involves simply creating a duplicate of the original mesh, turning it completely black, making it slightly larger than the original, and inverting the duplicate's surface normals so it doesn't cover the original once it's placed on top of it.


Although this method does have a handful of advantages, such as being guaranteed to always have a nice clean line and being easily adjustable, it does have a few disadvantages as well. Most notably are the facts that it doesn't outline details inside the mesh such as the facial features and that the outline is prone to clipping, which can be seen on the bottom of the shoes above.

 

The second technique is done through post-processing using convolution to preform edge detection.

Viking with Convolution outline.
Things have become a bit more convoluted now.

The specific convolution operation for edge detection is Laplacian edge detection. This uses a particular kernel to calculate the amount of variance across a set of pixels to determine if there is an edge or not.

Laplacian Convolution kernel.
Laplacian in a nutshell; or, rather, a kernel.

This technique is a bit more complicated to set up, involving creating and using a Material Function within the post-processing blueprint to calculate pixel depth. Otherwise, the edge detection itself is just some simple math. After that, the result is ran through threshold and depth cutoff algorithms to prevent an excessive amount of outlines from being generated. The final two steps are adding a dilation factor to the edge detection to make the lines thicker and overlaying the calculated outline onto the scene itself.


Compared to the inverted mesh method, convolution first appears to be a better method, as it easily applies the outline to everything to the scene and it won't clip because it's a post-processing effect. However, running all of the edge detectors every frame, though constant over time, still has an impact on performance, which is something to keep in mind.

 

Little known fact: The universe applies convolution under your eyes when you get tired.


44 views0 comments

Comments


bottom of page