Rendering 3D Character in Front of UMG UI

✍ Last Updated : December 21, 2022

🚪 Prequisite Knowledge (Optional)

Describe Initial Knowledge that reader need to know before reading this article

❓ Key Question / Problem / Issue

There was a request to render a 3D character in front of 2D UI, but Unreal default UI is always rendered in front of 3D objects.

✅ Expected Output/Definition of Done

Able to render 3D character in front of 2D UI

🎁 Resulting Solution

To render a 3D character in front of 2D UI, Unreal has a built-in SceneCapture2D blueprint that can be used to render the scene within its frustrum into a render target texture. Then add Image using the target texture into a UI widget.

First, add a SceneCapture2D into a scene/map.

Then assign/add a Canvas Render Target into the SceneCapture2D’s target texture. ⚠️ Note that to hide the background, the Canvas Render Target need to have alpha channel

Set the Primitive Render Mode to ShowOnly List, so we can select which 3D object in scene will be visible/captured by the SceneCapture2D. Then, add those 3D object into the Show Only Actors list.

Next is to add the texture into the UI widget, to show the 3D object on top of the UI, the Image for target texture need to be on top of other UI elements, this can be done by assigning the Z Order into something bigger than other UI Z Order value.

At this point, the Canvas Render Target should show what the SceneCapture2D camera see, but with inverted alpha channel (only the background is shown but the 3D object itself become transparent.

To fix this, create a material that invert the alpha (alpha = 1-alpha), then assign the canvas texture into the texture sampler input

Then assign the material into the Image texture