Lumberyard
User Guide (Version 1.16)

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 on a 3D mesh.

You can use any material on any type of entity to display a texture rendered by a UI canvas. However, if players are to interact with the UI canvas in the 3D world—by clicking with the mouse, for example—you must use a component entity.

To see an example of a UI canvas on an object in a 3D world, open the UiIn3DWorld level in the Samples Project.

Follow all the steps in the following procedure if you need to create a canvas that players can interact with. If the canvas is not to be interactive, then you only need steps 1 through 5.

To place a UI canvas on an object in the 3D world

  1. Create your UI canvas file. In the canvas properties, select Render to texture and enter a name in the Render target text box. The name must start with the $ character. This indicates to the graphics system that the texture is a dynamic texture.

  2. In the level, create a component entity.

  3. In the Entity Inspector, add to this component entity a UI Canvas Asset Ref to specify the UI canvas and optionally to load it automatically when the level loads. See Loading Canvases in the Flow Graph Editor for other ways to load the canvas.-->

  4. In the Material Editor, create a material that uses the render target texture that is rendered by your canvas. Under Texture Maps, for Diffuse, specify the texture file name.

  5. Add a Static Mesh component to the component entity and choose the mesh asset onto which you want to map your canvas. Use the Material override property to select the material that you created.

  6. Add a Mesh Collider component. In the physics component properties, click the + icon next to the Behavior property and add a Static Body behavior. Physics is required on this entity because a ray cast is used to translate a mouse or touch input into a position on the UI canvas that is at that point in the world.

  7. Add a UI Canvas on Mesh component. Type a canvas name in the Render target override property if you want to load several instances of the UI canvas on different meshes and have them display different states. Otherwise, leave this property blank.