All UI elements appear to render in two Alpha blend passes - is this preventable?

Development Rendering
, , , , , ,
1

All UI elements will render as translucent (inherent to the variable opacity setting in UMG) and therefore use alpha blend, even if opacity is set to 100% within UMG - is this correct?

The fact that UI elements can use materials with alternate blend modes in addition to the opacity setting within UMG leads me to believe that all UI elements are rendered using two alpha passes

Example:

  1. Create a button with a material-based brush using the masked blend mode
  2. Place the button in the UI
  3. The button will then be rendered using alpha test via the masked blend mode, as well as alpha blend caused by the UMG opacity setting, even if the opacity is set to 100%

Can anyone confirm that this is the case?

There doesn’t appear to be any option to disable the UMG opacity setting and force a UI element to be completely opaquely rendered.

Optimally, a large UI element that was 100% opaque and using invalidation boxes would serve to cull the game scene via front-to-back rendering on mobile devices.

Currently the opposite appears to be the case, where large UI elements with any level of opacity and regardless of material settings, will always perform an alpha blend on the rendered scene (often twice), significantly affecting performance, especially on ES2.0 level devices.

Additionally, with translucent blending being very costly on mobile, the fact that this operation appears to be performed twice on most UI elements seems like a very good candidate for optimization in the UE4 implementation.

2

To follow up and clarify it appears that texture-based images are treated similarly to masked UI materials in UMG in that two alpha calculations will be used to render each UI element as follows:

  • Render the image using alpha test (masked blending) based on the alpha channel values of the texture
  • Render again using alpha blend (translucent blending), based on the Opacity value set in UMG

In this sense, it appears that all texture-based UI images are treated both as masked and translucent elements.

Which brings up the question: if I were to use a UI material with translucent blending as an image within UMG, would this actually only require 1 pass, since the material blend mode and the opacity setting in UMG (which also requires translucent blending) both use alpha blending/translucent blending, rather than masking?

3

More investigation! I overlooked the fact that all fonts have a drop shadow value. The shadow is essentially another font sprite, with its own alpha value, so for every font object in the UI - including fonts with no shadow - two alpha calculations are being made (one for the font itself and one for the “shadow”).

A great optimization would be to be able to fully disable shadows on fonts, rather than simply setting opacity to 0 (unless of course the engine already optimizes shadows with 0 opacity). Can anyone clarify how UMG and the UI system handles alpha and what built-in optimizations exist, if any?