All content in this course uses:

Design comfortable VR user interfaces using in-world UI and Interactable Events for immersive interaction.

Best Practices for User Interfaces (UI) in VR with the XR Interaction Toolkit

 In this tutorial, we'll explore how to implement UI in VR so that it’s comfortable and immersive for your users. We'll look at in-world versions of traditional UI, as well as look back at how we can use Interactable Events with 3D objects, such as buttons and switches, for in-world interaction that never breaks immersion. 

This tutorial has been verified using Unity 2019.4.12f1 LTS, XR Interaction Toolkit 0.9.3-preview, and Oculus XR Plugin 1.4.3

In this tutorial, we'll explore how to implement UI in VR so that it’s comfortable and immersive for your users. We'll look at in-world versions of traditional UI, as well as look back at how we can use Interactable Events with 3D objects, such as buttons and switches, for in-world interaction that never breaks immersion.

Applying UI directly to a user's screen in VR is like attaching a sticky note to their face. Instead, it’s good practice to anchor the UI in World Space so that it exists in 3D independent of the player (

). In this exercise, we’ll create a simple starting Scene with a button that loads a second Scene. 

2. Create a raw image for your title by selecting 

 from the GameObject drop-down. This also creates a Canvas set to Screen Space - Overlay.

3. In the Hierarchy view, select your Canvas.

5. Depending on your source art and how you want the UI to look, you may wish to increase or decrease 

6. Create a new empty GameObject by selecting 

8. Delete Start and Update, as we won’t be using these.

12. Save changes and return to the Unity Editor.

15. Expand the button in the Hierarchy view and select 

. Set it to “NEW GAME” (or whatever suits your purposes).

16. Click to select the button in the Hierarchy. In the Inspector, scroll down to On Click (). Click the 

 slot. In the Function drop-down, select 

18. Create a second Scene. An easy way to do this is to save the current Scene under a new name, make some changes so that it’s visually distinct from the Scene we’ve been working on, and save again.

21. In the Inspector for the Scene Loader component, enter the name of the second Scene (

22. Add an XR Rig. This works with either type of XR Rig. For this exercise, it doesn’t matter which you choose, as we’re working in Play Mode. For actual builds, you’d use the type most suitable for your project and target hardware.

23. Scale the Canvas/UI GameObjects down and place them so that they’re in front of the XR Rig and visible in the Main Camera’s preview in the Scene view.

25. In the Scene view, or using the Transform, move the Main Camera around. The UI elements remain in their original position rather than sticking to the screen/Camera.

26. Click the button. The second Scene should load. Make sure to include both Scenes in the Build Settings.

28. Try creating more complex interfaces. Rather than a single button, try a Vertical Layout Group.

Creating a World Space UI

A more immersive option would be to replace the UI button with the mesh of a button, with an Interactable and with the LoadScene() method attached to the OnSelectEnter event. For more information, see Customizing Interactors and Interactables. 

In-World User Interfaces

With careful design, in-world user interfaces need not cause discomfort or break immersion. Even the traditional Canvas-based UI, when anchored in World Space, can take on the form of a holographic display, interactive kiosk, or whatever suits your project’s world. 

Unity Version 2020.2