Placing UI Canvases in the 3D World

You can place a UI canvas directly on an object in the 3D world, as opposed to showing it in screen space. To do this, you render a UI canvas to a texture, and then use that texture in a material of a mesh or actor.

You can use any material on an entity to display a texture rendered by a UI canvas. To interact with a canvas on a mesh or actor, the entity requires a UI Canvas on Mesh component.

Placing a canvas in the world

1. Create a UI canvas in UI Editor.

2. In the canvas properties, enable the Render to texture property.

3. In the Render Target property, click the button and select an .attimage Attachment Image asset. Refer to Attachment Image assets for an example .attimage source asset.

4. In the level, create an entity.

5. With the entity selected, in the Entity Inspector, add a UI Canvas Asset Ref component to the entity and select the UI canvas you created. Enable Load automatically.

6. Add a Mesh component to the entity and select a Model Asset.

7. Add a Material component to the entity and select a material to display the canvas on. Edit the material instance by clicking on the arrow next to the Model Materials property. Select Open Material Instance Editor…. In the Material Instance Editor, update the Base Color texture to the same Attachment Image asset as the UI canvas’ Render Target.

8. (For interactable canvases) Add a UI Canvas on Mesh component to the entity. If you want to load multiple instances of the UI canvas on different entities and have them display different states, select the Attachment Image asset in the Render target override property. Otherwise, leave this property blank.

   Note:

   You must create a unique Attachment Image asset for each entity, assign that asset the entity’s material, and then assign the Attachment Image asset in the Render target override property.

Example entity component configuration

The following image shows an entity that is configured to display a non-interactable canvas on its mesh.