v1.3 Example 6 - 3D UI

The 3D GUI uses the same GUI elements that are used to create 2D GUI's in Unity. This makes it possible to import any 2D Canvas made in Unity to a 3D scene that can be used inside the Igloo. To make the GUI elements intractable in 3D space, we use a virtual cursor that replicates the functionality that the windows cursor has, but in 3D space.

How it works

In order to have the 2D UI Canvas on any 3D object in the scene, the canvas is first rendered to a texture in screen space using a separate camera in the scene. On this canvas is a virtual cursor that is used to do collision testing with the UI elements on the canvas. With the Virtual Input Module, the virtual cursor can interact with the elements on this UI as if it was in 2D.

The rendered texture can then be applied to any UV mapped object. In the example scene, we use shader "3D_UI_Display" which allows unlit, transparency-enabled rendering of the UI.

Example Scene

To assist in the creation of your own UI’s and to give our internal demos a quicker way to adjust various settings, we have created an Igloo Settings UI system.

To open this example, you will need to import Text Mesh Pro (TMP) Essentials when you first open the scene. This is an inbuilt package within Unity, and will install via a popup.

Import TMP Essentials popup

Once that is done, you can close the popup. You don’t need the Examples and Extras.

The Elements Explained

Igloo Settings Canvas

This canvas contains the entire Igloo Settings system, with a large script containing all the variables and functions called SettingsManager.cs.

Depending on if you have Igloo UI set to true or false, this canvas will either be in Screen Space - Camera, or Screen Space - Overlay.

You will also notice that the elements of the UI are rather large for a 1920x1080 screen, this is intentional so it is easy to navigate and fully visible when projected onto a large wall.

Virtual Input Cursor

Once of two important, and neccessary children of the Igloo Settings gameObject. The Virtual Input cursor is what ‘clicks’ on the UI elements when you press Fire1 or Submit.
It is moved around by the DrawUI.cs script, and has it’s own Virtual Input Cursor.cs script that is used only to locate it within the hierarchy.

This needs to exist as a child of the root canvas that you intend to use thas the Igloo UI system canvas.

Event System

The event system is the second necessary and important child of the root canvas gameObject. This contains the Igloo Canvas controller, which switches the input modules between the Virtual Input Module (Igloo mode) and the Standalone input module (ScreenSpace - Overlay) based on if Use UI is set to true in the Igloo Settings xml document.

UI Camera

This is a camera that is setup to view the Canvas when it is in world space mode. It takes it’s view and then applies it to a 1080p render texture, which is then displayed on the desired UI screen mesh object.

This is a required item that needs to be assigned to the Igloo Manager for the UI System to function.

Igloo Manager variables

Two variables need to be assigned within the Igloo Manager script for the UI system to function, they are the root UI canvas, and the Texture UI. You can see them assigned in the example below.

In previous versions of the Igloo Toolkit, you also needed to assign the Igloo Virtual Cursor, however now it is found automatically and assigned in the background.

Setup from scratch

Import your canvas into the scene and set the render mode to "Screen Space - Camera"
Set the Canvas Scaler to Scale with Screen Size, and then 1920 x 1080 as the screen dimensions.
In the asset browser navigate to "Assets->IglooToolkit->Resources->Prefabs->3D GUI"
Add UICamera prefab to your scene
Add Virtual Input Cursor as the top child of your canvas
Add the Virtual Input Event System as a child of your canvas
If the UICamera does not have a Target Texture, add the CamTex - Standard render texture
If there is not already an IglooManager prefab in your scene go to Assets->IglooToolkit->Resources->Prefabs” and drag one in.
Open the Igloo Manager in the inspector then add your canvas to the UI Canvas variable, and add your render texture to the UI Texture variable.

Notes

The Cursor object does not get movement data from the windows cursor. You'll have to use your own method of input to translate the cursor on the canvas. In the example scene, we use the script "Player Pointer" attached to the main camera object, and the "Draw UI" script on the "6m_Screen" object to alter it's position.
It's recommended to add a new render layer for your 3D GUI, and go to the "Graphic Raycaster" on the canvas to set the "Blocking Mask" to your 3D GUI layer. Apply the layer to all the UI elements you want to be intractable.