UE4: Outline Post Process

During the Unreal Engine 4 Beta I experimented with an object outline post-process that I’ve attempted before using Unreal Engine 3’s UDK, with limited success back then.

Update: For an updated multi-color implementation of this effect Click Here!

Below is the first version I had running during Beta.Β It’s built on the new “Custom Depth”-rendertarget that allows the engine to render marked objects to a secondary depth buffer. The post process samples this buffer and builds an outline when the difference between neighbouring pixels is large enough.

outline_comparison

The left-most sphere is not drawn in the Main-renderpass (another checkbox available in the Details panel of a StaticMeshActor) the middle is using both Main-renderpass (default) and the CustomDepth-checkbox. The right is a default StaticMeshActor that is not drawn into the custom depth buffer, therefore not showing any outlines.

The second iteration alters the outline behavior slightly so that only the occluded parts of a mesh are outlined. (given that the object has custom depth enabled)

outline_occluded_only

Overview of the Post process material. Not very readable unfortunately except for the comments, which give an idea of what is going on.

material_overview

The next step is to add a fade-off effect as seen in games like Left 4 Dead. This requires some changes to the original sampling as the current outline is actually an inset. I’d also like to differiantiate between different types of objects, eg. enemies as red and friendlies as green – which would require a bit of trickery in the current setup. More details on that in an upcoming post…

left_4_dead_outlines

Update: Download link added to an updated outline post process. For more info on the material check out the new blog post here!

Outline Post Process [Download]

Post Process material for outlines with translucent veil on occluded pixels.

After copying the .uasset files into the Content folder of your project you must add a Post Process Volume into your scene and enable the Unbound property, also don’t forget to add the post effect material under Blendables.

ue4_postvolume_properties

Resources

37 Comments

  1. I’m considering doing a follow up on this when I get to spend more time on it. I got inspired by a similar effect in the new Evolve trailer and I’d like to re-create that in Unreal. You’ll see a post about this, if I can find some time!

  2. If you have time, a readable version of the material diagram would be useful! I’m curious about what you did in there, still learning how post-process materials work.

    Thanks!

  3. Hi Joel,

    It’s impossible to get the entire graph in a single screenshot, I can however recommend you checking out the Content Examples from Epic and search for M_Highlight in the content browser, this is a similar approach to how I handled the outline effect you can see demo’d in the map Blueprint_Communication Example #3.2, hope this helps!

  4. This is really awesome ! I would love a tutorial for this, I’ve been searching everywhere to try and find that exact effect.
    I tried looking in the Content exemapl but with not much success.

  5. This is really awesome! Thanks so much for the tutorial!

    But I have quick follow-up question on your “Next Step Section”:

    What would the general procedure be for setting up the Post Process Volumes to differentiate the colors for different types of characters/people (i.e. enemies as Red, friendlies as Green, etc.)

    We’ve tried setting up individual PostProcessComponents for each of our PlayerCharacters, but they still all seem to be using the same Post Process Material Color. So I’m just wondering what your thoughts would be on how to approach this.

    Thanks again!

    • Using multiple post processes doesn’t work, they will still sample the same custom depth buffer. I have no current solution for this, I’d like multiple custom depth buffers. If you only have one outline type (or enemies, or friendlies, or items never all at the same time) then you are set with just one custom depth buffer and updating the color parameter through blueprint.

      – Tom

      • Hi Tom!

        I’m wondering if you have any update on this? I’m currently trying to create the L4D2 multi-color highlights in a project i’m working on and running into the same issue with the boolean custom depth.

        It seems like there is no problem trying to do this in source or unity, but unreal… still seems like the verdict’s out!

  6. I just found your tutorials through Google, and I am really impressed with what I am seeing. I am not exactly well versed in the whole post processing thing, though I am very interested in learning more about it.

    Because of that, if you don’t mind, I have a couple of questions, some of them likely very beginner.

    First of all, texel size. What does this one calculate exactly? I am under the impression that texels are what textures consist of, so am I right into assuming that the texel size node calculates the distance of the object to the camera trough the use of texel size?

    Secondly, why is there a need for so many offsets? Currently, I only have experience using scenedepth to calculate edges (and even then, I mostly followed tutorials, so the science behind that is also still kinda vague to me), which only uses 4 (top, bottom, left and right). Your version includes the corners (At least, I assume you do), but I don’t really understand why.

    Lastly, I also cannot quite grasp where exactly the outline and overall color are separated in the nodes. I previewed many nodes, but it seems like everything is connected. If I were, say, to only want an outline, where would I go and do so without relying on the existing parameters?

    Sorry for the many questions πŸ™‚

    • Hi Michael,

      Texels are in the context of a post effect the size of 1 pixel on screen. usually referred to as a ‘texture pixel’. So I use the texel size to find nearby pixels and compare the depth values of these nearby pixels to figure out if we have located an edge of an object (in this case we are using custom depth, so only specific objects are drawn into this buffer like the spheres in the example)

      I have more offsets so it looks proper with rounded surfaces or odd angles. Otherwise the line won’t be equal across the object.

      The blending of the outline with color and the existing SceneColor happens somewhere near the end. We blend in our outline result with the original scene output to form a new result with SceneColor + Outlines.

      I hope that helps.

      – Tom

      • Thanks! Sorry for the somewhat late reply, but this will definitely help me into further understanding the workings of post effects. πŸ™‚

    • Probably not without forward rendering unless you employ a trick/hack using a translucent mesh that is effectively drawn after the entire deferred scene is already drawn. Basic idea:

      2nd mesh, translucent that does depth checks against the scene like the post effect, possibly slightly upscaled so you have some room to display the outlines. Pretty hacky, but perhaps it gets you started.

      – Tom

    • @Kevin;

      In addition to what Tom said; if we are talking about a simple outline, there’s a trick you can do with the meshes themselves. It’s not a pretty hack since it effectively doubles the poly count for each of the meshes you want to have an outline, but it’s something anyone with an ounce of modeling skills can do.

      Just copy the mesh, and flip the normals. Make sure you increase the size of mesh with the flipped normals (how much depends on how big an outline you want) and give that mesh any color you want it to have. Black would be an obvious choice for the outline, but since you are using a mesh you can control, you can technically color it anyway you want.

  7. Hey Tom, great tutorial! Could you upload a higher res screenshot of the material breakdown that you used for the second iteration? I’m trying to do the inverse of what you’ve done here (highlight only the NON-occluded parts of custom depth enabled objects) and am really struggling trying to sort out what you’ve done in the ‘normalize depth’ and ‘normalize scene depth to only outline hidden geometry’ sections of your material. It would be a huge help! Thanks.

    • Well, I actually sorted out a solution – it took some trial and error but I’m really happy with it. For anyone else who wonders, I made two changes.

      First, in the “IF” node of the “Determine Occlusion” section, I changed the conditions around so that A>=B is now 0 and A==B & A<B is now 1.

      Secondly, right before the final Lerp, there is a series of 1-X, Add & Clamp. I simply changed the Add to a Multiply and this gives me exactly what I want.

      Thanks again for the awesome tutorial, Tom!

  8. Hi Tom

    I’m trying to replicate its outline system in a project I’m doing and I noticed a problem. Objects that are not with the option custom depth active are also to outline.

    Have you ever noticed this issue?We come to find a solution? How do I resolve this issue?

    Tanks and congratulations for the work, very good

  9. Hello Tom, i’m trying to replicate the effect you had in the first example in the first step.

    What i have is an map of the US as a backround and i have meshes that make out the states. When i try to use your outline material it makes everything lightblue and the whole states light up.

    What happens when i use your material: http://s9.postimg.org/698nb3opb/image.png

    I want it to look like i have it now: http://s22.postimg.org/bbwmypmip/image.png

    But with all the states that are meshes outlined when the mouse is hovering over them.

    Best regards,
    Florian

  10. Hello Tom, thank you for the tutorials and the materials, they are really useful and work like a charm.
    I’m wondering if you found out a way to recreate this effect ( http://goo.gl/wCNVTe ), I would love to use it in a project of mine but I’m terrible with these kind of things. Thank you again.

    Cheers.

        • Hi Tom,

          Thanks for the reply. You’re kind of a wizard with these things. Do you know of a way to limit a post processing effects rendering distance? This outline would be great if it activated say, 100m away from a target and disabled otherwise. Is there a way that we can achieve that without say using a lot of different post processing volumes for each object?

          Thanks!

          • If you only wish to outline objects nearby you can check if the CustomDepth values is below a certain value (instead of only check if it has ANY value like in this outline example) by default unrendered pixels have very high values as defaults, only the objects that render into CustomDepth explicitly will alter this, so it shouldn’t be hard to quickly filter your pixel based on this distance from the camera.

    • The easiest way to normalize SceneDepth output is to divide the R-channel by 3200 (the other channels are empty)

      You’ll need to compare the CustomDepth value (normalized) to your normalized SceneDepth and see if CustomDepth is closer to (or equal) the screen than SceneDepth.

      Hope that gets you started!

      – Tom

Leave a Reply