UE5: Highlight on overlap

UE version: 5.3.1

The goal here is to create this effect:

when your character is near a specific object (i.e., their collisions overlap), the object gets a highlight color.

For this, the Custom Stencil Buffer will be used. This post is adapted from this tutorial from the official UE youtube channel, and checked with UE 5.3.

The set-up

In the project settings, change Custom Depth-Stencil Pass to Enabled with Stencil

I created my "interact-able" cube object as a blueprint with a static mesh as the root and a box collision.

Search for "depth" in the static mesh's details,

set Render CustomDepth Pass to true, set CustomDepth Stencil Value to 1. This could really be any value besides 0, but this value will come up again later.

Visualization

Now I added the target object cube BP to the level

To see how the stencil value makes that cube "special," set the view to Buffer Visualization > Custom Stencil

And the static mesh get highlighted. It has a stencil value of 1, everything else has Render CustomDepth Pass set to false.

I create a material called PPM_InteractOverlay and set the Blend Mode to Post Process

Create a Scene Texture node and set the Scene Texture Id of them to Post Process Input 0, and another one to Custom Stencil

To see how the PPM affects the entire level, we can add a post process volume to the level, set the extent to unbound, then add the material as a post process material

In order to get the same effect as in the video, add a desaturate node

And then add a Linear Interpolate node -

On Collision

The effect should be shown only when there's something colliding with the object. So, get the event OnComponentBeginOverlap from the collision in the BP

It is known that the object is highlighted only when Custom Render Depth Pass is set to True (or when the stencil value is set to a nonzero value)

So change that value when there's another actor overlapping the object.

(Or, instead of Set Render Custom Depth, the Set Custom Depth Stencil Value node can also be used, which is what I ended up using eventually. See below for why)

BUT WAIT.

Since the highlight turns on when checking for overlapping actors, this can happen

Two objects can highlight each other!

I added a Blueprint Interface to the player BP and added a check to the overlapping actor if it implements that BP interface

And now, only I may highlight the cubes

But colors.

Flip the input of the linear interpolate node to get this

Then just replace B with some color

Or some color with an alpha

We can also use a parameter so that we can create a material instance

Aside: I added an "if custom stencil value" node so that if there are other meshes in the level with other custom stencil values, the highlight will only be applied to meshes with that particular stencil value

Why? In this example, if the stencil value of the big cube is set to 2, the effect is still applied to it.

Limiting the effect to specific stencil values will prevent this from happening.

Bonus: You can also use textures

Here's how I set it up

Overlaps

This can happen too:

This is because the custom render depth pass of the character mesh is set to false. The fix is to set that to true. Basically, anything highlighted will be "see through" to any meshes with custom render depth pass set to false.

Since that value needs to be true regardless, I changed the highlight command from setting that to true/false and instead changed the stencil value from 0 to 1 instead.

Code

PPM_InteractiveOverlay

BP_TargetCube Event Graph