How to create a HUD (Head Up Display)
To make a realistic 3D experience, many implementations need some sort of window to display information to the person navigating the 3D world.
The term HUD (Head Up Display) is adapted from the military, where modern fighter planes have a transparant display on which vital plane data is projected. This optic is placed directly in the line of sight of the pilot, making it possible to read the information without having to look away from the combat scene outside (hence the term "Head Up").
There is a new specification in the make to mix 2D and 3D content in x3d, but as long as it's not ready, we'll stick to the old-fashioned 3D (?) way...
These are the steps to follow to create a simple hud:
Create a world
It should include:
- a scene
- a viewpoint
- some objects to show movement across the scene
- a very large proximitysensor, with bounds large enough to encompass the area the user can navigate (here: "sensor")
Add the HUD
- add a transform (here: "hud")
- add another transform as a child (here: "offset")
Set the offset translation to a few meters in front and to the side from the viewpoint location. This needs a little "trial and error" after adding the text, as various browsers render in different ways.
- add a text node to it (here: "hudtext")
- add the necessary code to shape the text to your likings
- if needed, add another object (like a plane or a very flat box) as a panel right behind the text for better visibility
Link the HUD to the viewpoint
- ROUTE the sensor "position_changed" to the hud "set_translation"
- ROUTE the sensor "rotation_changed" to the hud "set_rotation"
Done! As simple as that!
Now you can experiment with scripting to alter the text as the user moves, or create switches on your hud.
Good luck!
Of course there are many things that can be added to this simple example, like scripting to alter the text as you move or switches on the dashboard...
