Soft outlines in Unreal Engine 4

Ever since I first wrote about creating outlines in Unreal Engine 4 I’ve wondered if it was possible to render them as soft outlines instead of harsh binary lines much like you would see in games like Left 4 Dead or CS:GO as seen below.

Recently I did a quick experiment using a modified version of SpiralBlur, a node that’s available in Unreal Engine 4, and is using some custom shader code. Here is the result I got:

Looks pretty good! The effect is a little more expensive than the binary outlines since we do several steps in the SpiralBlur node to get to look decently smooth. Later in this post I will talk about performance. The final image shows an extreme setup with high Distance param so show the fade-off more clearly.

The Material Graph

Unfortunately I couldn’t find any official UE4 documentation on the Spiral Blur node. The built-in implementation takes the scene textures and over several iterations creates….a spiral blur. The default settings are at about 128 iterations, which is pretty hefty! I’ve used this node as a reference to create my own which samples the Custom Depth buffer instead of the scene color.

The node graph for it is reasonably simple and most of the logic happens inside the custom node which I added as a code sample below.

Performance

Performance was recorded on a 850M mobile GPU at 1280×720 with ~1.5ms measured and on my GTX 980 Ti it runs at 1920×1080 with 0.8ms for the post process material. It’s heavily depending on the amount of iterations in the spiral blur. You will want to keep the DistanceSteps and RadialSteps as low as possible while maintaining a smooth edge. In the demo I settled on 4 DistanceSteps and 8 RadialSteps which is 32 iterations.

Conclusion

To conclude, the answer is yes! It’s entirely possible to make this work. I imagine there may be more efficient ways of blurring the custom depth buffer to get similar results, I simply leveraged the available shader code to quickly get to a proof of concept. It’s important to note that being far away from the object with an outline can make it look slightly less smooth, a thinner outline helps and is a matter of tweaking.

References

15 Comments

  1. This looks like it could be incredibly beneficial to my project!

    I unfortunately get errors when implementing it though – “redefinition of ‘CurColor”‘ is the initial error. If I remove that duplicate line from the code that goes in the custom node I get a bunch of other errors about missing declarations and not found Intrinsic functions. I tried this out in both 4.16 and 4.17 to no avail.

    Any way you could either send me a copy of the function or help me get it working?
    Much appreciated!

    -DSP

  2. @Noodlespagoodle I’m using 4.17, I removed the duplicate line and had no other errors. Did you copy/paste the Scalars from the engine SpiralBlur, maybe you made a tiny mistake there? <3

    • That’s 10000 units, I don’t even quite remember why I went for that – in practise defines the available range of custom depth (if you lower this value you’ll see it breaks beyond a certain range, since everything will be clamped to 1’s. If I’d clean this up I would probably map the custom depth range between 0 and 1 properly (This really was just a quick proof of concept on the method)

  3. Hi, I am trying to use this example but I have a couple of questions.

    Does the output of the PP_BlurredCustomDepth_OccludedOnly blueprint is connected to the Emissive Color property of the material node or the Base Color property?

    Also, I am getting a compiler error when trying to compile the material, it shows “ERROR” just below the custom function (LODZERO_SpiralBlur – Texture), and in the logs it goes:

    “Error [SM5] SceneTexture expressions cannot use post process inputs or scene color in non post process domain materials”

    Seems that its complaining for the UV property is not connected, although you do not have it in the image either, so, there must be something I am doing wrong.

    Any help is appreciated!

    Regards,
    Lermy

    • Hi Lermy,

      You did not set the “Material Domain” to be a post-process and it’s still considered a surface material. Click on the main node in your material to access the properties and change it to be a Post Process. This will expose ONLY the emissive channel.

      Hope that helps,

      Tom

  4. Hi! When “saving” it shows a pop up with this message:

    The current material has compilation errors, so it will not render correctly in feature level SM5.
    Are you sure you wish to continue?

    After continuing, the call to LODZERO shows an error:

    Error [SM5] Function LODZERO_SpiralBlur-Texture: Missing function input ‘UV’

    I would appreciate any help!

    Thanks

  5. Hi, thanks for your guide, but I found a problem: I can’t change the outline color using “custom stencil value” (I am able to do this with normal stencil material in your previous tutorial)

Leave a Reply