One of the elements of augmented reality that’s probably most widely known is a HUD – this is a Heads Up Display. If you’ve played an FPS computer game you’ll be familiar with this as the area of the screen that shows your health, or score, or the number of lives you have left in the game.
This isn’t really a hologram as such, but it’s still something we can develop for the HoloLens. The key is making sure the artefacts rendered by the HoloLens are kept in the same position in front of you – and essentially, it means making those artefacts child objects of the camera.
Let’s have a closer look.
Keeping an object in one place
I’ll demonstrate the principle of keeping an object in one place in the steps below – later we’ll look at how to render text.
First, create a new project in Unity for the HoloLens (I’ve previously described how to do this here).
Next, right click on the Main Camera object in the Hierarchy. Add a new Cube GameObject.
Change the position of this Cube object so that it’s 2m in front of you, and scale it to 0.1 of its original size. This should be a white cube, sitting 2m in front of the camera, which has sides of about 10cm in length.
If you now build this project and deploy it to the emulator, you’ll see a white cube as described above. If you try to move around in the emulator, nothing will happen (apparently). This is because the cube is in a static position in front of the camera, so even though you are moving, the cube moves with you.
Let’s prove this by adding another object. This time, add another cube to the main Hierarchy panel, but not as a child of the camera object. Make it 2m in front of you and 1m to the left, resize it to 0.1 scale, and add a material to colour the cube red (I write about how to change an object’s colour here).
Again, build this project, deploy to the emulator, and try to move around. This time you’ll be able to look around the red cube and move your position relative to it, but the white cube will stay in the same spot.
If you have a HoloLens, try deploying to the HoloLens and you’ll be able to see this more clearly – whereas you can walk around the red cube, the white cube stays still in front of you.
A more useful example
So having a white cube as a HUD isn’t very useful – but that was just to demonstrate how to keep an object in a static position in front of you. Now, let’s look at adding some text to our HUD.
Open the HUD project again, and remove the white and red cubes we created in the last step.
Now add a canvas object as a child of the Main Camera – this is available by right clicking on the Main Camera, selecting UI from the context menu, and then selecting Canvas from the fly-out menu.
- Position the Canvas to be 1m in front of you – meaning change the Z position to be 1.
- Change the width to 460, and height to 280.
- Change the scale to be 0.001 for the X, Y and Z axes.
- Also, change the Dynamic Pixels per Unit in the Canvas Scaler component from 1 to 10 (this makes the text we’ll add later less blurry).
Next, add a Text GUI object as a child of this Canvas object (this is also available from the same UI menu).
- Position this to be in the top left of the canvas using the Paragraph -> Alignment options.
- Change the text to “Top Left”.
- Change the font to be 14.
- Change the colour to be something distinctive. I’ve used green in my example.
- Make sure the positions in the X, Y and Z axes are all zero, and that the scales are all set to 1.
- Finally, in the Text object’s Rect Transform component, ensure that the object is set to stretch in both vertical and horizontal directions.
Now build your project, and deploy it to the emulator.
This time, you should see some green text floating in the top left corner of your field of view.
If you can’t see this text, change the position from top left to centre – it may be the you need to adjust the canvas dimensions to be different from mine.
You can take this a bit further as I’ve shown in the picture below, where you can align text to different positions on the canvas.
This is a very powerful technique – you can use scripts to adjust this text depending on actions in your surroundings. Also, you aren’t constrained to just using text objects – you could use an image, or something else.
Hopefully this is useful inspiration in creating a HUD for your HoloLens.