UnityUI tooling — MRTK3

UnityUI may not be the first tool mixed reality developers think of when creating 3D user interfaces. But with a few helper components and utilities, it's possible to make beautiful and flexible 3D user interfaces in UnityUI.

Tip

It is easy to create performance bottlenecks when authoring UnityUI. Before creating complex UnityUI layouts, it's recommended you read this tutorial.

Sample

See the UnityUI sample for demonstrations of various components built for UnityUI.

UI behavior components

The components below help with rendering UI, but they aren't visible Graphic components.

ScaleMeshEffect

On UnityUI components, the unity_ObjectToWorld matrix (or UNITY_MATRIX_M in URP) isn't the transformation matrix of the local transform the Graphic component lives on but that of its parent Canvas. Many shader effects within Graphics Tools require object scale to be known. To solve this issue, the ScaleMeshEffect.cs will store scaling information into UV channel attributes during UI mesh construction.

Tip

A Canvas or CanvasRenderer within Graphics Tools will prompt for the addition of a ScaleMeshEffect.cs when one is required.

RectMask2DFast

UnityUI has a built-in component called RectMask2D. Normally this component is used to mask out a small section of a larger area. When masking many objects, this process can take considerable time to cull objects on the CPU. To avoid this bottleneck, Graphics Tools includes a RectMask2DFast component.

RectMask2DFast works in the same way as RectMask2D and is a recommended replacement. If you encounter an issue where masking doesn't update after adding or removing objects from RectMask2DFast then you may need to manually invoke an update like below:

myRectMask2DFast.ForceClip = true;

All Graphics Tools/Canvas/ shaders and the Graphics Tools/Standard Canvas shader support RectMask2D, RectMask2DFast, and RoundedRectMask2D.

Note

The Graphics Tools/Canvas/ shaders and the Graphics Tools/Standard Canvas shader do not support the Softness property on RectMask2D or RectMask2DFast.

RoundedRectMask2D

RoundedRectMask2D derive from RectMask2DFast and acts similarly. The only difference is that RoundedRectMask2D contains a corner radius value for rounded corners. This radius can be selected for all corners or each corner individually.

Note

Material instancing must be controlled by the user. i.e shared materials may be effected by RoundedRectMask2D.

UI graphic components

The below Graphic components help add 3D dimensionality to a Canvas.

CanvasElementRoundedRect

This component procedurally generates a 3D rounded rect mesh that is then assigned to the Canvas's vertex stream. Normally this component is used to generate backplate meshes using the Graphics Tools/Canvas/Backplate shader.

CanvasElementBeveledRect

Just like CanvasElementRoundedRect, this component procedurally generates a 3D rounded rect but with beveled edges. Normally this component is used to generate back plate meshes using the Graphics Tools/Canvas/Beveled shader.

CanvasElementMesh

Unity's MeshRenderer component can be used to display 3D meshes within UnityUI, but it doesn't respect some of the layout features UnityUI provides. To solve these layout issues, there's the CanvasElementMesh component.

The CanvasElementMesh component takes an input mesh and translates it into a Graphic component.

Important

The input mesh must have its Read/Write property enabled so that vertices can be read within script.

Animation

To animate UnityUI material properties, you can use the CanvasMaterialAnimator... classes. For more information, see the animation documentation.

Menu items

To help with UI layout a handful of menu items exist within Graphics Tools.

Anchors to corners and corners to anchors

Window > Graphics Tools > Canvas Anchors > Anchors to Corners and Window > Graphics Tools > Canvas Anchors > Corners to Anchors let you move back and forth between expressing layout in the pinning system and the anchor (constraint) system inherent in RectTransform. This can be useful when moving between responsive and fixed scale layouts.

See also

• Standard Shader
• Animation