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: Adding more effects

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.

1
2
FScreenSpaceData ScreenSpaceData = GetScreenSpaceData(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.

1
2
3
4
5
6
7
8
9
10
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:

github

UE4 Project

Download

Download M_Outline occlusion

Download

Download M_Outline colors

Download

Download M_Outline glow


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!


Write a Comment

Comment

eighteen + nine =