3D UMG widget looks washed out

Development Programming & Scripting UI
, , , ,
1

I created a 3D widget and placed it on the level. I disabled all the post processing in the editor. Yet the 3D widget’s color looks washed out compared to adding the same widget directly to viewport.

This is how it looks if i add it to viewport directly.

96797-viewport+widget.jpg
96797-viewport+widget.jpg1218×574 28.3 KB

And this is how it looks if I add it as 3D widget into the world

96798-3d+widget.jpg
96798-3d+widget.jpg1226×582 29.4 KB

Not just the color, 3D widget doesnt look as crispy as the viewport menu looks.

How to make the 3D widget looks exactly like how its look when I add it to viewport? Crispy and colors not washed out.

EDIT:
After i disabled postprocessing nothing happened, but when i detach from controller in editor its crispy and not washed out. But when I posses controller in editor post processing is happening again. I added PostProcessVolume and disabled everything and checked everything and there is no difference at all! I unchecked everything still no difference. Its same washed out look. Does postprocess volume effect 3D widget at all??

1 Like
2

Your 3D widget could be affected by the auto exposure settings in either your camera or any post process effects you have placed in the world:

“Eye adaptation is a feature in the engine that mimics the way your eyes adjust in real life depending on how bright or dark your surroundings are.”

3

This is the top search result in Google, but the answer I found to solve the issue is here

4

For anyone using UE5, it looks like they’ve added this nice “Apply Gamma Correction” button directly to the widget component which fixes the issue.

ApplyGammaCorrection

1 Like
5

Enabling the Apply Gamma Correction changes the colors but its still very different from the actual reference image. Below i have 2 images,

  1. Apply Gamma Correction ENABLED

    WITH GAMMA_edit
    WITH GAMMA_edit901×510 32.4 KB

  2. Apply Gamma Correction DISABLED

    WITHOUT GAMMA_edit
    WITHOUT GAMMA_edit880×477 30.8 KB

Are there any additional settings in the Textures or Post processing that can help me with this ?

1 Like
6

Would be interested as well.

7

  • Edit > Project Settings > Postprocessing > Custom Depth - Stencil Pass = Enabled With Stencil

  • Create your Widget normally.

  • Create an Actor Blueprint and add a widget component. Select widget component.

  • Assign the Widget3D material, I used Widget3DPassthrough_Masked_OneSided

  • Advanced > Apply Gamma Correction

  • Under Rendering > Advanced set ‘Render CustomDepth Pass’

  • Set ‘CustomDepth Stencil Value’ to 200 or whatever you want to use

  • Create a new material

  • Material Domain: Post Process

  • Blendable Locaiton: Scene Color After Tonemapping

  • Add the following graph, changing the “200” float to your Stencil Value.

(Note that I’ve added a fix here for Eye Adaptation / Auto Exposure)

FixWorldUI_Final
FixWorldUI_Final1228×706 148 KB

  • Create a PostProcessVolume to cover the area player will see the UI
  • Rendering Features > Post Process Materials > Add
  • Select the Material you’ve just created.

For me, this produced a perfect world UI where I could view it at any angle and I got a 1:1 match to the colors I have in my UI Designer. I double checked with photoshop to make sure the color values were exactly the same.

Video Tutorial:

1 Like