Thursday, June 30, 2016

Make Your Own Virtual Reality App for Google Cardboard on iOS

(These notes are relevant for Unity version 5.5 and under. Here is a new post that covers Unity 5.6, when the Google Cardboard SDK was integrated into Unity build settings, making some of this obsolete.) I thought Google Cardboard was neat when I first saw it but a couple days ago I started playing around with creating 3D content for it and I'm blown away with the possibilities. I want to give a survey of some ways 3D content can be experienced in a Cardboard VR app but I'm not going to go super in-depth with any of them because each one is its own endless rabbit hole. The biggest hurdle, especially for making an app for iOS (as opposed to Android) is getting your Unity and XCode environment set up. Once that's working the rest is pure fun and amazement.

Set Up the Environment

If you want to load VR apps on iPhone you have to use a Mac because there's no XCode for Windows. By the way, all of this is free unless you want to distribute your apps to others. For that you need to pay the $100 Apple developer license fee. Keep in mind you're going to fill up around 7 GB of disk space just with Unity, XCode, and iOS development tools. And each project is big, too, around 1 GB. Here's what I did to get started:

Follow this excellent tutorial on setting up and running a demo app on an iPhone. I highly recommend this because it will give you an introduction to working with Unity, including how the UI and code work together. Plus you will go through the whole workflow and get used to the multitude of details and steps.

The last step will require downloading XCode from the App Store. When you select Build & Run in Unity it opens XCode and "side-loads" the app onto your connected phone. To do the side-loading you have to set up a free developer account with an Apple ID.

Blank Slate

Stationary view or Mobility view? I have stripped down a couple Unity projects to the bare essentials so you can add whatever content from there.

Here is a view that offers mobility. When you press and hold the button on the Cardboard viewer you will move in the direction you are looking. I had a hard time figuring this out and ended up adapting this project. It uses an older version of Cardboard SDK but nothing I could find in the newer one worked.

So download and unzip one of those and open in Unity. You will have a flat plane with your viewer camera in the center. The "walking" version has all the movement controls and scripts in the VRController object in the hierarchy pane.

Add Some Content

Download it!

There's lots available on the web, just search "collada dae models." I found this just now. Unzip it and drag the folder containing the .dae file and graphics into the Assets pane in Unity.

To add it to your scene, open the model for the folder and drag the .dae file onto the floor. It will often be too big and oriented incorrectly, so you can use the editing controls at the upper left to scale, rotate, and position it where you like, or input your parameters in the inspector on the right.

I find that some models don't appear with their textures and I have to select individual parts and re-select the correct image files. In this case I was only partially successful.

Scan it

To scan small objects I use the 123D Catch app. You are guided through taking a lot of photos from all angles and it uploads and processes for a while.
Once the scan is processed you can download the model through the editing program Meshmixer, which you can use to edit out the unwanted parts of the scan. Install Meshmixer and download your model by choosing the 123D button.

I won't go over a whole how-to on Meshmixer, but basically use the Edit tool to rotate and translate the model to the right position

and the Select tool to highlight and delete the unwanted parts.

and it's pretty well cleaned up!

Now export the mesh as .obj format and put the accompanying image files that go with it together into a folder.
Drag that folder into Unity Assets pane, then the obj file into the scene. Scale it down as it will probably be big, and there you have it.

Scan People

We have a setup for scanning people: an XBOX 360 Kinect sensor, Skanect software, and a heavy duty turntable we made. The scans can be cropped in Skanect and exported as STL format, then imported to Meshlab and exported as Collada format, then dragged into Unity.

Sim Builds

If you have access to a sim, student builds can be exported and imported to Unity as Collada files. I set up a sim for our school using the Diva distribution of OpenSimulator, which is a reverse engineered version of Second Life. I will not go into how to set up a sim as it is involved, but we've had students do some great builds, like the Parthenon and St. Peter's Basilica. To get a model out of OpenSim I followed these steps. The short of it is:

Use Singularity viewer

Link all the prims for a build

Use the circle menu to export as DAE format

Drag the folder into Unity the same way as the other models

Any textures that have transparency won't show it by default, so you have to select those prims individually and change their shader settings to Unlit > Transparent.

Collision Detection

If you are using the template with the mobile viewpoint you might want to add collision detection to the models so you can't go through them. You can select a part of the model, then in the inspector click Add component > Physics, and choose the shape of collider that best matches your object. If you need to, you can stretch the collider to cover more area than just the part of the model you selected.

Here I put one big box collider across this whole multi-prim model.

What else?

I know there are many other ways to get 3D content into Unity, like making models in Blender and stuff. If you have any good suggestions, please post in the comments!