outline_effect_part2_featured

in Tutorials, UE4

Outline effect (Part 2)

With this tutorial we are going to add more effects and the treatment of the occluded parts of the object  that has the outline effect of the previous tutorial.

Part 1: Outline effect
Part 2: Occlusion, colors and glow
Part 3: Opaque zones
Part 4: Depth limit

Occlusion effect

In the previous tutorial we added the outline effect to some objects of a simple scene. This outline could be seen even when the object was hidden, partially or completely, by other object.

occlusion_shape

To determine when the object is occluded we need to take the difference between the custom depth and the scene depth. We can add a parameter to control the alpha value of the internal shape of the outline.

#if SCENE_TEXTURES_DISABLED
return 0;
#endif
FScreenSpaceData ScreenSpaceData = GetScreenSpaceData(ViewportUVToBufferUV(UV), false);
return clamp(ceil(ScreenSpaceData.GBuffer.CustomDepth.r- ScreenSpaceData.GBuffer.Depth.r), 0, 1) * OcclusionAlpha;

This code must be added to a custom node expression

occlusion_alpha_custom

But we need to limit this effect to the object shape, we can take this shape using the Custom stencil values of the image. We can add the outline to this shape too.

occlusion_limit_shape

Now, putting all together:

outline_and_occlusion_material
M_Outline_occlusion

We can add more features like more color options, or glow effects.

More colors

We can replace our color node with a color switch, using the stencil value we can choose the color that will be applied to the outline object

color_switch_custom

The code inside de custom expression is a switch that returns the color associated to an index value.

float ColorIndex = ColorIndexInput;

if( ColorIndex == 1 )
    return Color1;
else if( ColorIndex == 2 )
    return Color2;
else if( ColorIndex == 3 )
    return Color3;
else
    return Color3;

If we want to add more colors, we only need to add more inputs to the custom node and modify the code to add more if-clauses using the same pattern.

color_switch_material_addon

We can establish that values below the StencilFirstIndex parameter will disable the outline effect.

below_values

Final material overview:

outline_material_full
M_outline_colors

Now we only need to change the stencil value to change the outline color

color_stencil_values
Stencil values : 254, 253, 252

Glow effect

To achieve this effect we must multiply the color output by a value above 1.

glow_effect_modification

With a value of 100 in the material instance we can obtain a nice glow effect.

glow_modification_instance
glow_effect_scene

Finally we can add a pulsating effect to the glow to do it more dynamic. Just multiply the color by a sine node connected to a Time node.

glow_pulsating_modification
glow_pulsating_effect

These have been some of the outline effect possibilities, we have a lot of combinations and more features can be added to this base effect.

Your imagination is the limit.

Tutorial files

2022/04/14 – Updated to UE5 5.00

Support this blog!

For the past year I've been dedicating more of my time to the creation of tutorials, mainly about game development. If you think these posts have either helped or inspired you, please consider supporting this blog. Thank you so much for your contribution!

Leave a Reply for Guest1 Cancel Reply

Write a Comment

Comment

  1. My shader won’t compile and I an error message along the lines of [SM5] Base shaders can’t read SceneTextureStruct.

    Any clue as to what I’ve missed?

      • Adding

        #if SCENE_TEXTURES_DISABLED
        return 0;
        #endif

        in the first lines of the custom nodes that access to GBuffer fix the compilation, I will update the tutorial with the new materials for this version

  2. Works like a charm in 4.20. Thanks so much for keeping your code up to date, so many of these tutorials out there just stopped working after 4.17 because of the engine changes. Keep up the good work!

  3. Great stuff! I’m wondering though, as in your chest examples, if one chest is in front of the other chest in view space, how would you render the outline around the entire shape of the “closer” chest, even where the two chests overlap? Currently, if the chests were to overlap, the outline would only render around the combined shapes of the chests, and not each chest individually. Is there a way around this? Thanks!