Your first Cardboard VR experience in Unity 3D

I thought about jumping on the Virtual Reality train for some time now. Not that I don’t like the Real Reality, but the idea of putting a person in a fully artificial world and letting him or her explore it using different senses is somehow mesmerizing.

Promotional shot of Ready Player One movie, go see it if you’re excited about VR potential!

A perfect moment came when my friend Jagna wanted to use VR for her university art project. She had a concept and art skills and I was more than happy to assist her with technical execution.

Technology choice

After researching the landscape of game engines which have VR capabilities, Unity was an obvious choice for this project for several reasons:

• I’m a .NET developer and Unity3D scripts are written in C#. Later it turned out that for a simple project like this one, you need to write exactly 0 lines of code
• it allows to create 3D scenes in an accessible manner, even for someone who doesn’t have a lot of experience with this kind of designing

Getting Unity

Follow this link to get a personal version of Unity. This tutorial uses the newest release at the time of writing, which is v2018.1.1. Download and install it. Remember to check the mobile build support boxes (iOS or/and Android, depending on your mobile platform).

Open Unity and create a new 3D project. You will be presented with an almost blank scene, containing source of light and main camera.

Blank Unity scene

This is the time of adding the actual content to our future VR world. For this tutorial let’s start with something really basic: a ground and a cube.

Adding 3D objects in Unity

To create ground, right-click on free space in the left pane (Hierarchy), and create a cube (which is located in 3D Object category). Then create a sphere (a ball).

Creating 3D objects in Hierarchy view automatically adds them to the scene. In the next step, we will move them a bit and change their sizes.

We’ll edit properties of 3 objects using the Inspector panel on the right side (take a look at a gif below to see how it’s exactly done):

1. Select Cube by clicking on it and:
   a) change it’s position to (X: 0, Y: -1, Z: 0). The camera will be located at (0, 0, 0), so in order to put our ground under the camera, we change the Y to -1
   b) change it’s scale to (20, 1, 20) to make it bigger
2. Select Sphere and change it’s position to (0, 5, 5). We set Y to 5, so it’s 6 units above the ground (Cube element) and Z to 5, so it’s in front of the camera
3. Select Main Camera and move it to position (0, 0, 0). CardBoard SDK is also moving the camera to (0, 0, 0) automatically, so it’s good to see in the Scene view where are all the elements located in relation to the camera

Adding simple physics

To add a bit of movement, we’ll make the sphere fall and bounce on the ground:

1. Select the sphere
2. In Inspector click “Add Component” and select RigidBody. This component basically adds physics to our object.

Now you can click play button above the scene to see the preview of our scene:

The ball is falling and even more — the ground stopped it from falling into the never-ending Unity void below. Another nice and easy modification we can do is adding a bounce effect to the sphere (remember to unclick the play before further modifications!). In order to do so, we need to create a special material object, which we’ll then attach to the sphere:

1. Right-click in the Assets pane in the bottom
2. Create -> Physic Material. A new object will be created, name it “BounceMaterial”
3. Click on it and set the Bounciness property in the inspector to 1.0

Now let’s attach the newly created material to the sphere. Select the sphere and in inspector find the property Material inside Sphere Collider section. Drag the BounceMaterial into it.

Now let’s see if it worked by playing the scene again. Yay!

To add a bit more of action, you can duplicate the ball 10 or 20 times, change the colours by adding a material to it and then change the rotation of ground, so the spheres can slide from it.

Configuring iOS/Android app

A mobile phone will be themain device in our Virtual Reality setup. In order to deploy our Unity scene to mobile, you need to:

1. Open Build settings (it’s an option in File menu, top bar)
2. At the top of the Build settings window, there’s list of your scenes. If you followed this tutorial, you’ll have only one there. Make sure it’s selected
3. Below you should see all possible deploy options. The default is for pc/mac machines. We need to deploy to mobile, so pick either iOS or Android. Then, after selecting, click Switch platform button. This operation will take a while.
4. After the popup with loader disappears, we need to configure iOS/Android project. Click Player Settings button, which is located next to Switch platform. Player Settings will appear at the right side, play with them a bit to change properties like the app name or minimal OS version
5. There’s some additional configuration needed if you want to run the app on iOS:

- in Resolution and Presentation change Default Orientation to Landscape Left (there was a bug in previous Unity versions which broke the VR view when the scene launched in portrait mode)

- in Other settings scroll down to Identification and set up the correct Bundle Identifier (in format com.Company.ProductName) and Signing Team ID. These will be added to created Xcode project and you’ll have possibility to fix any signing mistakes there, but you’d need to do it each time you build a new version of your scene. The Team ID can be looked up on your Apple developer profile here: https://developer.apple.com/account/#/membership/

6. The common part for both platforms is enabling the Virtual Reality. Scroll down to XR Settings, check Virtual Reality Supported and then add Cardboard to the list below

Now we’re ready to try it on the device. Go to File menu again and select Build & Run. If you configured everything correctly, the app should run on your device. Put in in your cardboard viewer and enjoy your first VR experience!

Adding the GVR SDK

All the previous steps were enough to run VR app, but there’s one additional step which can speed up your development cycle. At the moment if you run your scene in Unity (without mobile deployment), you will see feed from the main camera. Wouldn’t it be great if you could simulate head movement in the preview screen?

It is possible to archive by using Google VR SDK. Go to the github page of the project and download the latest unity package file, currently it’s GoogleVRForUnity_1.130.1.unitypackage

In Unity, select Assets -> Import Package -> Custom package from the top menu. Then select the downloaded GVR SDK file. Unity will prompt you about which files should it import. The safe option is always to get all of them, but if you know what you actually need, then you can just grab these files to spare some space. For this tutorial import all files.

After the importing process is done (it may take a while), we need to drag and drop one prefab from Assets view to our scene. It’s called GvrEditorEmulator and it’s located in GoogleVR (newly imported folder)/Prefabs.

After you add it to your scene, press play again. Now you’re able to simulate head movements by moving mouse cursor inside the preview and holding:

• Ctrl: for changing the roll of camera
• Alt: for changing the Yaw and Pitch of camera

Solutions to random problems

• my project built once for iOS, but doesn’t build again without error

For me it was about missing Android SDK. Even though I was only running it on my iOS device, Unity and GVR SDK made me download Android SDK and set up it’s location in Unity’s settings

• when running the scene on iOS, views for eyes seem to wrong/shifted

It turned out to be a problem caused by running the app/scene in portrait phone orientation and then changing it to Landscape. To fix that, you can simply lock the app’s orientation to Landscape left/right (described above in the tutorial)

• I see black output in my phone, even though everything looked okay when clicking the play button in Unity

In my case it happened because:

a) I was running a wrong scene (you have to select the correct one in Build Settings, it’s described earlier in the tutorial)
b) I had an additional camera for video recording in my scene which caused this error, deleting it fixed the problem

Questions, problems?

Let me know if you have any questions about this tutorial or VR in general, I’ll be happy to assist you (and learn something new). If this tutorial helped you, please leave a clap or two to motivate me a bit to write something more :)

Disclaimer: I’ve seen similar posts about using VR in Unity, but all of them were describing an old CardBoard SDK with different components names and different bugs. Since some time VR capability is built into Unity and that’s what will be used in this tutorial.