SteamVR/Environments/Adding a Welcome Panel

Introduction

You have your lavishly constructed SteamVR Home location constructed, but how about adding some informational panels to it? This tutorial will explain a more advanced welcome panel, complete with globe to show where in the world your visitors have found themselves.

Entities

We don't want to crowd the environment with all sorts of permanently visible information panels, so we'll place a teleport point and use entity logic to show and hide the information as appropriate.

First, place a 'vr_teleport_marker in the world. Since this will be shown when a visitor first arrives in the world, I've placed it at the feet of the info_player_start entity and set the 'Starts As Current' flag - the latter makes it automatically fire its OnTeleportTo outputs on startup. (More on that later!) To make the teleport point appear with a helpfully descriptive informational 'i' icon, I've set the 'Info' flag as well. That's all on this entity for now.

Next, place a point_clientui_world_panel in the world. This will act as the actual information panel - arrange this so that it's facing the teleport point and up a bit - the light grey side is the 'front', the dark grey side is the 'back'. It can be helpful to set a larger width now, so you can be sure it's oriented the correct way and isn't on its side.

I've given mine the name 'welcome_panel', and set the Layout XML (a file akin to a small web page) to 'file://{resources}/layout/custon_destination/welcome_panel.xml'. Width I've set to 48, height to 32, and since we won't be directly interacting with this panel via buttons or similar I've set the Ignore Input flag.

Globe

This part is optional, but can be a useful guide to show people where they now are in the world.

Place a prop_dynamic somewhere to the right of the information panel, and set the model to 'models/globes/earth/earth.vmdl'. Give it the name 'welcome_globe_models', and make sure its angles under Transform are all set to zero. This by itself provides a globe - now we need some sort of marker on it. With the globe selected in the 3D view, press Control-C to copy it. Now go to Edit : Paste Special... - this useful tool provides many ways to paste a copy into a map, but we're going to use it simply to place a copy of the globe at the exact position of the existing globe. Make sure the number of copies is zero, and that Start at centre of original is checked, then click OK.

There should now be a second copy of the globe in the exact position of the first. Which isn't very useful - so, with the new copy still selected, change the model to 'models/globes/earth/earth_marker.vmdl'. We should now have a marker at zero degrees longitude and zero degrees latitude.

Tip:Note also that the model's target name has become bold and orange. This indicates that there is more than one entity with that name. In this case, this is what we want - but it can also be a helpful indicator when things aren't as they should be.

Now, bring up Google Maps in your web browser, and navigate to the location you captured. When you get there, click once on the ground to get an information popup at the bottom of the window, then click once on the map coordinates it provides. You'll be able to copy and paste those numbers into Notepad or similar - for my scene, the numbers came out as 19.955628, -155.856047.

In the marker model's transform settings, the three angles are Pitch, Yaw and Roll. The last one isn't relevant for us, but the first two are equivalent to Latitude and Longitude. I entered -19.96 for Pitch (the minus sign being a fudge to get things round the right way) and -155.86 for Yaw (which immediately updated itself to 204.14 degrees). The marker is now centered on the north-west of Big Island, Hawaii!

Tip:For various obscure reasons, the oceans on the globe model are by default a colourless grey. To set them to the appropriate blue, with the model selected bring up its Color (R G B) and set R, G and B to 0, 162 and 255. Many models can be tinted in this way - often in splendidly complex ways thanks to the Tint Mask feature in the Standard shader.