3D UMG widget looks washed out

Development Programming & Scripting UI
, , , ,
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