PostProcess3DUI

English | 简体中文

This repository contains the latest Unreal Engine 5.8 plugin implementation of the published invention patent CN119174908A, “User interface display method, device, equipment, storage medium and program product”.

It supports 3D UI such as overhead nameplates, health bars, and image panels. These elements can bypass scene post-processing to preserve the intended appearance of text and images, while retaining scene-depth occlusion and smoothing jagged occlusion edges.

For the full algorithm, see Patent Technical Overview: Occlusion Anti-Aliasing for Post-Process 3D UI Using Temporal Depth Reconstruction and PCF.

Features

Conventional 3D UI is rendered with the scene, so scene post-processing can affect its colors, sharpness, and glow. This plugin composites the UI into the scene after scene post-processing, preserving its authored appearance. The documentation and code refer to this approach as bypass.

The plugin provides three main toggles:

Toggle	Purpose	Behavior when disabled
Bypass Post Processing	Prevent scene post-processing from changing the UI's appearance	Restore normal rendering through the native UWidgetComponent
Enable Translucent AA	Smooth the boundary where pillars, walls, or other objects occlude the UI	The UI remains occluded, but occlusion edges may look visibly jagged
Enable Outline Feather	Add an alpha transition around the panel's outer boundary to reduce aliasing on tilted panels	No additional alpha transition is applied to the outer boundary

The last two toggles apply only when bypassing scene post-processing. With normal rendering, the engine handles UI anti-aliasing.

Occlusion edges and panel outlines are different: when a pillar blocks an image, the boundary between the pillar and the image is an occlusion edge; the rectangular boundary around the image panel is its outline. Enabling occlusion AA may therefore leave a tilted image's outline in need of separate treatment.

Installation

1. Place this repository in your project's Plugins/PostProcess3DUI/ directory and confirm that it contains PostProcess3DUI.uplugin.
2. Build the project's Editor target with UE 5.8. The plugin code and shaders must be compiled on first use; for a Blueprint-only project, add a C++ class first if needed.
3. Open the Editor and confirm that Post Process 3DUI is enabled under Edit → Plugins. Restart the Editor if prompted.
4. In the Content Browser's Settings, enable Show Plugin Content to access the plugin assets.

Plugin asset paths begin with /PostProcess3DUI/.

Try the Examples

Three UI Panels Above a Character

Open the following level in the current ThirdPerson project:

/PostProcess3DUI/Maps/L_Character3DUI_Comparison

Click Play, then click the game view to give it keyboard and mouse focus. With the example's saved defaults, bypass and occlusion AA are already enabled. If the mouse cursor is still visible, press Tab to hide it and enable camera and character controls.

From the initial camera view, the three panels above the character are:

Position	Component	Widget asset	What to inspect
Left	RocketImage	WBP_3DUI_Image_Rocket	A tilted Rocket image for inspecting panel outline aliasing
Center	HeadNameplate	WBP_3DUI_Nameplate	A name, health bar, and translucent regions for inspecting edges occluded by pillars
Right	LyraLoadingScreen	W_LyraLogo_LoadingScreen	A tilted Lyra Loading Screen for another panel outline comparison

In the current example, the two side images are fully opaque after being drawn into their Widget textures: alpha is 1 across the entire texture. Both have outline feathering enabled by default with a width of approximately 1 pixel. This demonstrates how the final draw can add a transition even when the Widget texture has no transparent outer edge. The example's outline toggle does not affect the center nameplate.

For a first comparison:

1. Press 3, then 4: both states bypass scene post-processing; only occlusion edge smoothing changes. Inspect the places where pillars block the UI.
2. Press 3, then toggle O repeatedly: inspect the rectangular outlines of the left and right images, comparing them with and without the alpha transition.
3. Press 1, then 4: compare colors, text sharpness, and glow between normal rendering and bypass. This changes both the rendering path and AA, so the differences are not solely due to anti-aliasing.
4. Press L to switch to night, then use 1 / 4 and G to compare the effect of scene Bloom on the UI.

Controls During Play

Key	Function	Details
B	Toggle bypass	Controls all three panels; the corresponding on-screen checkbox also works
N	Toggle occlusion AA	Applies only in bypass mode; switches between hard occlusion and TemporalPCF by default
O	Toggle outline feathering	Applies only in bypass mode and only to the two side images
1 or 2	Normal rendering	Both keys restore native engine Widget rendering
3	Bypass with occlusion AA disabled	Inspect unsmoothed occlusion edges; occlusion is still applied
4	Bypass with occlusion AA enabled	Uses the component's selected AA mode, TemporalPCF by default in this example
W / S	Move the camera forward / backward	Move along the camera's viewing direction; looking up and pressing W moves upward
A / D	Move the camera left / right	Move only the observation camera, not the character; using WASD in the character view switches back to the independent camera
Mouse movement	Rotate the camera	Requires a hidden cursor and focus on the game view
↑ / ↓ / ← / →	Move the character	Move relative to the camera's horizontal orientation to pass the overhead UI behind occluders
Space	Jump	Inspect the UI as it moves with the character
L	Toggle day / night	Preserve the current UI toggle settings
G	Toggle nighttime Bloom	During the day, only the setting is recorded; it takes effect at night
C	Switch cameras	Switch between the independent observation camera and the character-follow camera
R	Restore the initial observation view	Reset and switch to the independent camera; does not reset the character
Tab	Show / hide the cursor	Showing it enables on-screen checkbox interaction and pauses mouse camera rotation, WASD camera movement, and arrow-key character movement; hiding it restores these controls

These shortcuts are provided by the example level's PostProcess3DUIComparisonActor. When adding UI components to your own level, bind the controls yourself.

Changes during Play are temporary comparisons. To change the initial state of the next Play session, stop Play, edit the corresponding components on the character instance in the level, and save the level.

Compare Four Panels Side by Side

Open /PostProcess3DUI/Maps/L_PostProcess3DUI, switch the Editor viewport to the ReferenceCamera view, and click Simulate.

The panels use the same UI content and similar occluders to compare the methods simultaneously. From left to right in the fixed camera view:

Position	Mode / component	Occlusion handling	What to compare
Panel 1	TemporalPCF / TemporalWidget	Combine current and previous scene depth, then smooth occlusion edges	Edge stability across consecutive frames
Panel 2	PCF / PCFWidget	Use only the current frame, with multiple nearby depth comparisons to produce a translucent transition	Smoothing within a single frame
Panel 3	HardDepth / HardDepthWidget	Each depth comparison decides only visible or occluded, without edge smoothing	A reference for aliasing; the UI's original translucent content is retained
Panel 4	Native Widget / NativeWidget	Use normal engine rendering, including scene AA and post-processing	Native 3D UI rendering

The first three panels bypass scene post-processing; the fourth uses a native UWidgetComponent. These four panels do not correspond to the character example's number keys 1–4.

The character example also references shared ThirdPerson template assets such as the character and animations. Migrate these dependencies as well when moving the example to another project. The plugin component itself can use your own Widgets and Actors.

Use It in Your Character or Level

1. Open a character or other Actor Blueprint and add a Post Process Widget Component.
2. Set Widget Space to World and choose your UMG Widget under Widget Class.
3. Set the UI rendering dimensions with Draw Size, then adjust the component's position, rotation, and scale. For example, place it above a character's head to create a nameplate.
4. Enable Bypass Post Processing and Enable Translucent AA, and keep AA Mode at its default, TemporalPCF.
5. Leave Face Camera enabled if the UI should always face the camera. To display a tilted panel, disable it and rotate the component manually.
6. If a tilted panel's outline looks jagged, enable Enable Outline Feather and start with the default 1-pixel transition width.

The component derives from UWidgetComponent and continues to use native UMG, the Widget render texture, and the Widget mesh. Most familiar 3D UI configuration workflows still apply.

Common Parameters and APIs

The names below refer to component properties or C++ APIs; the Details panel displays property names with spaces.

Parameter / API	Default	Description
bBypassPostProcessing / SetBypassPostProcessing(bool)	Enabled	Whether to bypass scene post-processing. Use this setter to switch at runtime
bEnableTranslucentAA / SetEnableTranslucentAA(bool)	Enabled	Smooth the edges where scene objects occlude the UI. Applies only in bypass mode
AAMode	TemporalPCF	Applies only with bypass and occlusion AA enabled. HardDepth does not smooth; PCF smooths using the current frame; TemporalPCF incorporates depth from previous frames
bFaceCamera	Enabled	Whether to face the camera. Disable for tilted image panels
bEnableOutlineFeather	Disabled	Add an alpha transition around the panel outline. Applies only in bypass mode
OutlineFeatherPixels	1.0	Approximate transition width in screen pixels, in the range 0–8; 0 disables the transition
PCFRadius	1.0	Sampling radius for occlusion edge smoothing. Larger values generally produce wider transitions
DepthBias	0.00001	Small bias for occlusion tests; normally leave at its default. Excessive values may reveal UI that should be occluded
Opacity	1.0	Overall UI opacity; 1 applies no additional reduction, and 0 is fully transparent. Multiplied by Tint alpha
HasNativeSceneProxy()	—	Debugging API: reports whether the native Widget scene proxy has been created. Use GetBypassPostProcessing() to check whether bypass is enabled

At runtime, change the two main toggles using the setters above or the corresponding Blueprint property Set nodes. Disabling bypass retains the occlusion AA setting for use when bypass is enabled again.

Advanced Tuning

The defaults are usually sufficient. For troubleshooting or performance comparisons, use these UE console commands:

Command	Default	Effect
r.PostProcess3DUI.Enabled	1	0 stops drawing bypass UI; 1 resumes it. This does not automatically switch those components to normal rendering
r.PostProcess3DUI.Mode	-1	Applies only with bypass and occlusion AA enabled: -1 uses the component's AAMode; 0 disables occlusion tests; 1 selects HardDepth; 2 PCF; 3 TemporalPCF. Components with occlusion AA disabled always use HardDepth
r.PostProcess3DUI.DepthUpsampleFactor	2	Width and height multiplier of the temporal depth texture relative to the final image. Accepts 1–4; 0 disables depth history, making TemporalPCF fall back to single-frame PCF

For example, r.PostProcess3DUI.DepthUpsampleFactor 1 reduces the memory cost of the depth texture. Larger factors produce larger textures and higher costs. The plugin automatically limits the effective factor based on the current sampling conditions and the GPU's maximum texture dimensions.

The history stores scene depth from previous frames for occlusion tests; it does not accumulate UI color. TemporalPCF requires conditions suitable for temporal accumulation, such as TAA / TSR, and automatically falls back to PCF when those conditions are not met.

If component settings and the rendered result appear inconsistent, first confirm that r.PostProcess3DUI.Enabled=1 and r.PostProcess3DUI.Mode=-1.

Scope and Limitations

• Currently validated with UE 5.8's default deferred rendering pipeline. Other engine versions and rendering configurations require separate checks.
• The bypass path supports the unlit surface panel materials commonly used by native Widgets (Surface Unlit). Unsupported panel materials are not drawn. Special effects such as refraction or scene-color access are not guaranteed to match native rendering.
• Fast-moving occluders may leave brief history trails. Compare PCF and TemporalPCF in your actual scene.
• Outline feathering operates on the panel's UV boundary, such as the four edges of a rectangular image. Edges within the image, text, and transparent holes still depend on the source image and UMG rendering. The transition extends inward and may make the boundary slightly softer and narrower.