...
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.
...
| Info |
|---|
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.
| Note |
|---|
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.
...
| Info |
|---|
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
As there are a few moving parts to this system, it might be quicker to open the example, and start from there. Removing the Igloo SettingsManager and adding your own, but without deleting the canvas.
Import your canvas into the scene and set the render mode to "Screen Space - Camera"Add a "
Graphic Raycaster" component to your canvas if it does not have oneSet the Canvas Scaler to Scale with Screen Size, and then 1920 x 1080 as the screen dimensions.
In the asset browser go navigate to "Assets->IglooToolkit->Resources->Prefabs->3D GUI"
Add "UICamera" prefab to your scene and add the camera to the canvas "Render Camera"
Add "Virtual Input Cursor " as the top child of your canvas.
Add "the Virtual input Input Event System " to your scene.
Open the event system in the inspector. On the "Virtual Input Module" script add the cursor object to "Virtual Cursor" input, and add the "UICamera" to the "Canvas Camera" input.
as a child of your canvas
If the UICamera does not have a " Target Texture", create a renderTexture and apply., add the CamTex - Standard render texture
If there is not already an IglooManager prefab in your scene go to Assets->IglooToolkit->Resources->Prefabs” and add drag one in.
Open the Igloo Manager in the inspector then add your canvas to “UI Canvas“, add the Cursor to “UI Cursor“ the UI Canvas variable, and add your render texture to “UI Texture“
...
Usage
The “Example“ GameObject in the scene contains a script showing how the UI can be shown and hidden via scripting during Play.
...
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.
...