Render Screen-Space Widget Behind Character?

FrozenHarlequin
Fri, 04 Oct 2019 14:22:44 +0000
UI

I’m currently trying to make Life is Strange-style UI elements that always face the camera, are placed at a specific location in the 3D space of the level and that are rendered on-top of every 3D element except for the player character.

My strong preference would be to use a screen-space widget for this since I’ve run into some isues with world-space widgets (see below) but I have yet to find a way to render the character mesh in front of a screen-space widget. I attempted to put my character mesh into a custom depth pass and use a custom stencil in the widget material to mask out the area he occludes but depth passes and scree-space widgets don’t seem to work together. Is there any way to do this using blueprints?

(Widget material blueprint. The Custom Stencil works fine when widget is set to world space but not when set to screen space.)

Alternatively, I have been able to sort of achieve the effect using a world-space widget by disabling depth test in the material and adding a custom depth pass for my character mesh and some simple blueprinting to keep the widget aligned with the camera. But there are some pretty big caveats:

1. The widget can intersect with my character since it exists on a 3D plane in 3D space. It doesn’t look too great. Now I could make the widget vanish whenever it gets too close to the character mesh but I’d rather not have to do that.

(Widget intersecting character - please ignore the placeholder character model.)

2. When using a world-space widget, TAA is applied to it just like it would be to a normal game world object. This leads to impaired legibility and ghosting whenever you move the camera. It’s not pretty and basically makes world-space widgets unusable with TAA. My attempt at a workaround was to put the widget into its own Custom Depth Pass und use a post-process material and a Custom Stencil to bypass the post-processing pipeline for the widget. That works but the problem now, of course, is that there’s pretty significant aliasing on the widget and I can’t seem to get rid of it.

This does not seem to be an issue with screen-space widgets which are neither affected by AA, nor show aliasing. (Which is probably obvious to anyone who has a better understanding of how screen-space stuff is rendered vs world-space stuff than I do.)

(Aliasing on widget after post-process material has been applied. It doesn’t look that bad in the screenshot but looks terrible in motion.)

(Post-process material.)

I have also attempted using a Text Render component but font materials are set to masked, meaning you cannot use the Disable Depth Test function on them. When I change the blend mode to translucent, I get pretty terrible motion artefacts on the text so that doesn’t seem to be an option, either.

So yeah, I guess I’m asking if anyone has any ideas on how I might be able to solve any of these issues? Or is there another way I might be able to get the desired result that I haven’t thought of yet? Either way, I’d be incredibly grateful :).

10 posts - 3 participants