Creating your first VR app

VR is a new, exiting field with incredible potential! This tutorial covers some basic topics that I found helpful when starting my own journey into VR development.

This is an updated, and more in-depth version of the tutorial found here.

In this tutorial you will:

Create a simple app in Unity where you fly around a 3D virtual environment.

We will be designing our app for and running our app on the Google Cardboard. However, you do not need a Google Cardboard viewer for this tutorial (although one is recommended because I think it’s really cool to see your creations on a physical device as opposed to in a simulator).

What you will need:

• Unity (download here)
• Google VR SDK for Unity (download here)
• 3 scripts I wrote for the tutorial (download here)

Optional:

• Xcode (if you are using an iOS device) (download here)
• Android Studio (if you are using an Android device) (download here)
• Google VR Viewer (the Cardboard is only $15)

Let’s begin!

Step 1: Create the project

• Open Unity
• Enter your project name
• Make sure 3D is checked (the other settings won’t concern us right now)
• Click ‘Create project’

Step 2: Set up your environment

• I will be using this free forest environment by Patryk Zatylny as my environment because it has a nice demo scene already created for us. So, open this URL
• Click ‘Open in Unity’
• The same window will now open in Unity

I’ve already downloaded the assets, so your blue button should say ‘Download’

• Click ‘Download’
• After the download is complete, you’ll see a pop up. Click ‘Import’

• Your computer might give you a message about an ‘API Update Required.’ If so, select ‘I Made a Backup, Go Ahead!’

• Navigate to your Project panel (if you can’t find it, go to the top menu bar Window > Layouts > Default). In the Project panel, navigate to Handpainted Forest Environment Free Sample > Scenes. Double click on demoScene_free to open the demo scene

The ‘Project’ panel is outlined in green

• Now the demo scene is open in your Scene and Hierarchy panels, but we are not quite ready to make changes to it yet

Step 3: Import the Google VR SDK

• Unzip the Google VR SDK you downloaded from here earlier
• In the top bar of Unity, go to Assets > Import Package > Custom Package…
• Navigate to the unzipped Google VR SDK directory, it should be named ‘gvr-unity-sdk-master’
• Open gvr-unity-sdk-master > GoogleVRForUnity.unitypackage
• A pop up will appear. Select ‘Import’

• You might get another pop up about an additional ‘Package Import Required.’ Select ‘Import Package.’ Then select ‘Import’ on the following pop up

• Now you’re ready to start doing stuff!

Step 4: Learn about the Unity interface (optional)

• I recommend watching a few of these Unity tutorial videos about using the Unity interface. Each video is 1–2 minutes long, and it will be helpful to watch videos 1–6 under ‘Using the Unity Interface’
• Those first six videos will explain how to work with Unity’s 3D environment, and they are very useful for this tutorial

Step 5: Set up the Google VR objects

• Delete the ‘First Person Controller’ in the Hierarchy panel. We will not need it for our app

• In the Project panel, navigate to GoogleVR > Prefabs. You should see a prefab called ‘GvrViewerMain’

• Drag ‘GvrViewerMain’ and drop it anywhere in the Scene. The ‘GvrViewerMain’ is not going to be seen by the player (it is invisible). But, it will automatically do calculations that turn a normal Unity camera into a Google VR camera.

• Next, create a Camera in the scene. Go to Create > Camera in the Hierarchy panel.

• The camera will be instantiated at the origin (0,0,0) of our scene. Move the camera to a better location. Make sure your Camera is selected in the Hierarchy panel, then enter (22.25, 2.04, 31.47) for the ‘Position’ in the Inspector panel

Step 6: Test it out!

• Press the play button in the top center of Unity to run the simulator

• As you can see, the ‘GvrViewerMain’ turned our normal ‘Camera’ into a VR camera (with one screen for each eye). In the simulator, hold down option/alt, and move your mouse to look around. Hold down control and move your mouse to rotate your head

• Press the play button again to exit the simulator. Make sure your have stopped the simulator before continuing (any changes you make during the simulation will be reverted after you exit the simulator). So, make sure the play button has returned to its unselected state

Step 7: Add the flying script

• Download (if you haven’t already) and locate the 3 scripts from here in your local filesystem. They should be in the ‘first_vr_app-master’ directory
• We will only be using the ‘AutoFly.cs’ script right now, but you can drag all the scripts (‘AutoFly.cs,’ ‘AutoFly_Advanced.cs,’ and ‘MoreRandom.cs’) and drop them into the ‘Assets’ directory in Unity’s Project panel

• Select the ‘Camera’ in the Hierarchy panel. Select ‘Add Component’ in the Inspector panel. Find ‘AutoFly’ and select it

• After clicking on ‘AutoFly’ you will see a new section in the Inspector panel. Notice we have added the ‘AutoFly’ script to the ‘Camera’ object

• In the ‘Auto Fly (Script)’ section, set ‘Speed’ to 1. Then, click the circle with a dot in it to the right of ‘Viewer — None (Gvr Viewer)’
• A window will pop up with your options for the ‘Viewer.’ Double click on ‘GvrViewerMain’

• Now you’re ready to fly around your virtual environment! Before pressing the play button, make sure the ‘Auto Fly (Script)’ is attached to the ‘Camera’ object (or else you might end up with a flying tree)

Step 8: Start flying!

• Once you have pressed the play button to start the simulator, you can toggle flying by clicking the screen. Remember, you can look around the simulator by holding down option/alt and dragging your mouse around the screen; this will allow you to fly in different directions.
• Press the play button to exit the simulator when you are done

Step 9: Build and Run on your own device (optional)

• In the top bar go to File > Build Settings…
• In the pop up window, scroll through the ‘Platform’ list, and select the platform you wish to build to

• If you don’t have the proper software installed yet, there will be an ‘Open Download Page’ button. Click this button to download the required software. After you’re done with the download, the ‘Switch Platform’ and ‘Player Settings’ buttons will no longer be grayed out
• Select ‘Switch Platform’ (this might take a little time)
• Select ‘Player Settings…’ to open up a window in the Inspector panel with all the build settings
• When you are happy with the build settings, select ‘Build And Run’ or ‘Build’ to build your app
• I won’t go into any more detail about building projects, because there’s too much specific information to cover, but the Unity documentation is very helpful for this
• For building to iOS, here is a good resource
• For building to Android here is a good resource

Congratulations, you have created your first Unity VR app!

This is the end of my beginner’s tutorial. If you are still interesting in learning a few more key features of Unity and Google VR development, then keep reading!

Primarily, the main topics I will cover next are

• Controlling the VR Camera
• Creating new (primitive) objects in Unity
• Selecting objects in the environment using a Physics Raycaster

From this point forward, I will assume that you have completed the first half of this tutorial, and watched videos 1–6 of the Unity Interface Tutorials.

Step 10: Creating the player’s ‘Head’

We are going to add a function to our app that allows the player to turn by tilting their head to the left or right. However, the Google VR SDK does not let us rotate the Camera directly (usually it is not a good idea to take control away from the player in a VR environment). So, we must make the Camera the child of another object, and rotate the parent object instead of the Camera (this will indirectly rotate the camera). We will call this parent object the ‘Head.’

• Create a new ‘Empty’ Game Object. Name this object ‘Head’

• Drag the ‘Camera’ onto the ‘Head’ object. This will make ‘Head’ the parent of ‘Camera’ (and ‘Camera’ the child of ‘Head’)

• Now, the position of ‘Camera’ will be relative to ‘Head.’ So, change the ‘Position’ of ‘Head’ to (22.25, 2.04, 31.47) and the position of ‘Camera’ to (0,0,0) using the Inspector panel. At this point, ‘Camera’ should be positioned at exactly the same spot as ‘Head’
• From now on, we do not want to move ‘Camera’ directly. Instead, we will move the ‘Head’ (which will automatically move the ‘Camera’ with it). So, deactivate the ‘AutoFly’ script attached to ‘Camera’ by unchecking the box next to the script (or you can remove it by clicking the cog icon > Remove Component)

• Add the ‘AutoFly_Advanced’ script to ‘Head’

• Set the script properties just like you did for the ‘AutoFly’ script. There are two additional properties ‘Allows Rotation’ and ‘Rotation Speed.’ These just give us more control over the player’s flight settings

Step 11: Test out your turning!

• Press the play button to test out this new script with the ‘Head’ object. Everything should seem the same as before (with the basic ‘AutoFly’ script). But now, you can tilt your head when flying to turn to the right or left. Try holding down control while flying and move your mouse to turn!
• Exit the simulator when you are done

Step 14: Add a new GameObject and Material

• Create a ‘Cube’ GameObject in your Scene

• Move the cube to postion (20.55, 2.69, 34,84) so it can be seen by your ‘Camera’

• Notice how the cube has no color; this is because it was given the ‘Default-Material.’ Unity does not allow us to edit the ‘Default-Material,’ so we are going to create our own simple material for the cube
• In the Project panel, navigate to the Assets directory, and select Create > Material

• Name the material whatever you like. In the Inspector panel, click on the color box next to ‘Albedo’ and select a color you like from the pop up window. Close the pop up window, and now you should have a material with the color you’ve chosen

• Notice, your cube still has the ‘Default-Material.’ Now we must apply our new material to the ‘Cube.’ Select the ‘Cube’ in the Hierarchy panel. The Inspector panel should change to show the cube’s components
• In the ‘Mesh Renderer’ component (in the Cube’s Inspector panel) click the carrot next to ‘Materials’ to expand the options

• Replace the ‘Default-Material’ in ‘Element 0’ with your custom material. Your cube is now using your custom material

Step 13: Add the reticle

• In the Project panel, navigate to GoogleVR > Prefabs > UI. Add the ‘GvrReticle’ to your scene as a child of ‘Camera’ (you can do this by dragging the ‘GvrReticle’ from the Project panel and dropping it on ‘Camera’ in the Hierarchy panel)

• Run the simulator. You should now see a white dot in the center of the screen for each eye. This is the ‘reticle’ and it is used for selecting things in the environment (we will make it select the cube in the next step). Similar to the ‘GvrViewerMain,’ the ‘GvrReticle’ comes pre-packaged with Google’s scripts that will automatically do things for you. The ‘GvrViewerMain’ and ‘GvrReticle’ are called ‘Prefabs’ in Unity

• Exit the simulator when you are done

Step 14: Interacting with 3D objects in the scene

• We want to be able to interact with the cube in our scene. We will do this by using a ‘PhysicsRaycaster’ component and an Event System with the GazeInputModule that the raycaster will communicate with. Add the ‘PhysicsRaycaster’ component to the ‘Camera’ (this will cause a ray to be cast in the direction the ‘Camera’ is facing)

• In the Hierarchy panel, create an ‘EventSystem’ GameObject (Create > UI > EventSystem)
• Add the ‘GazeInputModule’ script component to your ‘EventSystem’

• Click the cog icon on the ‘GazeInputModule’ component, and select ‘Move Up’

• Make sure the ‘GazeInputModule’ component is above the ‘StandaloneInputModule’ in the Inspector panel for you ‘EventSystem.’ This will give ‘GazeInputModule’ precedence over the components below it. Without doing this, the selection process will look laggy, and might not work properly

• Select the ‘Cube’ in the Hierarchy. Add an ‘Event Trigger’ component to it. This will allow the ‘Cube’ to do something when selected

Step 15: Test it — see the smooth hover animation

• Run the simulator, and rotate the camera so that the reticle is hovering over the cube. You should see an animation where the reticle changes from a dot to a circle (indicating to the user that he/she can interact with the cube — even though we haven’t implemented this interaction yet)

• Exit the simulator

Step 16: Player interaction with the cube

• Select the ‘Cube’ and add the ‘Move Random’ script to it. Fill in the script’s properties with the values I supplied below. This is the script we want to trigger when the player selects the ‘Cube’ (it will toggle the cube into moving in a random direction)

• In the Cube’s ‘Event Trigger’ section (in the Inspector panel), select Add New Event Type > PointerDown (this will be triggered when the player presses down on the Google Cardboard’s button)

• Click the plus in the ‘Pointer Down’ section to add a new event

• Drag the ‘Move Random (Script)’ below the ‘Event Trigger (Script)’ into the empty ‘Pointer Down’ event property

• Select No Function > MoveRandom > ToggleRandomMovement(). This means that a ‘Pointer Down’ event will trigger the ‘ToggleRandomMovement()’ function from the ‘Move Random (Script)’

Step 17: Chase the Cube!

• Run the simulator, select the cube, and it should start moving in a random direction! If you select the cube again, it will stop moving
• I encourage you to look into the script files (especially AutoFly) and try to figure out what’s happening to run the small amount of logic behind this app. Play around with the script parameters; see what happens when you make yourself or the cube faster!
• Just like you did before, build and run this app on your Google VR Viewer (if you have one). It’s a simple app, but a lot of fun to experience on something like the Google Cardboard!

I hope you enjoyed this tutorial. If you’re looking for what to do next, I would suggest starting your own mini-project where you build something from scratch (and look up things as you go along). Don’t start too big; try to recreate something like the Autofly script on your own.

Unity has a ton of tutorials if you want to learn that way. But I implore you to learn by doing. Create a sandbox in Unity where you can play around with all the cool new features you learn about (it’s fun, and very helpful to make things yourself!)