UI and Depth Violations

Getting the most out of your UI placement and avoiding depth violations

UI Placement

World Space

For content that requires readability, such as text or UI elements, designers should place this content on the Leia Display plane. Text that is positioned behind or in front of the Leia Display plane will not be sharp enough to be legible.

Correct: UI is directly on the Leia Display Plane, appropriately in focus.

Broken: UI behind the Leia Display Plane, distorted

Broken: UI in front of the Leia Display Plane, distorted

When designing your text content, larger font sizes work best to accommodate for the resolution of each view.

Screen Space - Overlay

Content created in Screen Space - Overlay will render on top of Leia's interlacing.

Screen Space - Camera

Unsupported with our render pipeline.

Depth Violations

A depth violation is when an object is positioned in 3D space in front of another object, but is rendered as if it is behind it. It can be uncomfortable to look at.

The most common occurrence happens when UI is rendered on top of 3D scenery.

Moving UI elements off to the side and away from objects will remove the depth violation.

Some depth violations are unavoidable. They can be improved with strategic UI placement. On the left the UI element will have depth violations on 3 sides. On the right, there will only be one depth violation.