Creating a Google Cardboard VR App
In this post I will be showing you how I made a VR application for the Android Play Store or Apple(This tutorial will be focusing on the android aspect of it.). Let's begin.
Firstly you will need some programs and files if you don't have them already. Put all the installs in a folder on your desktop(assuming you don't have them)
Downloads
1. Blender3D
We will use Blender to model our scene and export it to the unity as a panoramic image.
You will need to know some basic stuff with Blender, if you don't I would recommend Tutor4u
2. Unity
Unity is a free platform for creating and exporting games.
3. Blender Cubemap Creator
We will need this to make the cubemap for Unity
(will be explained later)
4. Google Cardboard SDK UnityPackage
Will be used to make the VR work and all the extra code.
Installs
1. For Blender and Unity just follow the installation progress as you would any other program for your respective OS.
2. Just Unzip the cubemap creator and set it off to the side as we will use it later.
3. When we get to Unity we will import the .unitypackage but again set this aside for later.
Creating the environment
Check the example.blend if you get stuck or don't under stand something.
1. Open Blender3D
2. Go to the top bar where it says File and Render and look to the right until you see "Blender Render", click that and change it to Cycles Render. Go To Step Four if completed.
3. If you don't see Cycles Render go to File -> User Preferences (CTRL + ALT + U on PC), Go to the tab that says, "Add-ons", once in there go the the top-left search bar and type in "Cycles", you should see a bar that says "Render: Cycles Render Engine" and a check box on the very right of that. Check that check box then click "Save User Settings" in the bottom left. Now try to repeat step 2.
4. This is the hard part, now you can build the environment that you want to make into a VR room. You can choose to model your own furniture or you can download 3d models from websites. Just be sure to follow the copyright laws and give credit if and when it's due.
Here are some sites you could use.
- 5. Now to set up the camera, to create a camera go Shift + A then click Camera. Position the camera towards the center of your room. Right click on the camera and go to the camera settings tab in your properties panel. Once there Click Panoramic Instead of perspective. Right under that you should see Type: Then a box that says Fisheye, click on that then select "Equirectangular"
- 6. With your camera set-up go to the render panel under your properties tab(the one that looks like a camera is pointing at you). You should see a Dimensions tab, under that you should see a resolution, not sure what the default is but you should set X: to 2048 and Y: to 1024.
- 7. Go down until you see a "Sampling" tab, open it and you should see stuff like Seed, Clamp, Samples, Render and Preview. The preview samples should be around 12, and your render samples you will want to be around 1000-2000. Make sure Square Samples is unchecked and Clamp and Seed are all 0. close that tab and scroll down and open "Performance"
- 8. There will be 2 directions for this One for CPU rendering, and one for if you have an NVIDIA GPU.
CPU RENDERING
- This one will be short and simple, just make sure Auto-Detect is selected under Threads: and Under Tiles you change X and Y both to 64. If you have a higher end CPU you can probably get away with 128 for each but 64 is typically pretty safe.
GPU RENDERING
- This step is ONLY if you have an NVIDIA GPU.
- To set this up you will need to go back to File>User Preferences
- Click on the tab that says "System"
- You will see a whole lot of mumbo jumbo just dont change anything
- Go to the bottom left and you should see Comput Device: (if not scroll down)
- It should say "None" and if you have an NVIDIA GPU you should see a tab labeled "CUDA"
- Click that and click the drop down box and select your GPU.
- Save User Settings and close the tab
- Now go to the top of Render Properties tab and you should see a render button, and animation button, and an audio button. Go below that til you see Device: and it should say CPU
- Click that and select GPU.
- Go back down to the Performance Tab and change X and Y to both be 256.(Has fastest render time) and if Auto Detect isnt checked click on it.
- DONE!
- 9. Once you have a finished environment you can go ahead and render your panoramic image. (For higher quality check the render resolution to 4096x2048, looks nicer but takes a lot longer to render)
- 10. If your machine isn't good enough to render I suggest you sign up for a service like Sheep-It render farm where people use their machines to help render your project!
- 11. If you rendered your image in blender click on Image, next to view in the UV/Image editor tab. Then click Save As Image. And save it in that folder on your desktop or where ever it is.
This is what yours might look like, sorry for the overlay but thats just my personal one that I might upload to the app store.
- 12. Open the image in Photoshop or Gimp somewhere you can resave it as a .jpg
- 13. Resave it as a .jpg :)
- 14. rename the file to environment, should look like "environment.jpg" then put it in the cubemap maker folder right along side next to the environment.blend file.
- 15. Open the Environment.blend file and change the image resolution to 2048 by 2048. Click on "Animation" and wait for it to finish, shouldn't be that long.
- 16. You should have six image files, just hold onto them as we will need them later.
Setting Up Unity
- Open Unity via the icon on your desktop or however you need to access it.
- It should pop-up with a window asking you to make a new project or choose an existing one. Click make a new project. Make sure that 3D is checked and name it something like VR_room or what ever you would like. I made a folder in My Documents called unity projects and that is where it stores all my projects, you may do the same as I've found it very useful. Click create project and then wait for it to boot up.
You should see
- Now you are going to want to click on Assets>Import Package>Custom Package and then find your CardboardSDK.unitypackage from before and click import to import it. Wait for it to finish and now we need to import OUR assets.
- Go back to where you had your environment folder and drag the 6 images right next to those folders in the Unity Asset panel.
- Click on 0001 hold shift and click 0006, now on the right side in the Inspector Tab, You should see Texture Type, click on texture and select, "Editor GUI and Legacy GUI" Now under the settings click 2048 and select the resolution that your image is, if its already 2048 don't change anything. Now click Apply and wait for it to change the settings.
- Once completed right click on an empty space in your assets tab hover over Create, then click on Material. Name it what ever you want I named mine SkyboxMaterial.
- In the inspector tab you should see what you named your material with Shader: Standard under that. Click Standard>Skybox>Six Sided
- Now drag the corresponding image to each slot.
- 0001 to front
- 0002 to right
- 0003 to back
- 0004 to left
- 0005 to down
- 0006 to up
- Once you've done that navigate to your assets window, you should see two folders, Cardboard and Plugins. Double click on cardboard then Prefabs then click CardboardMain and drag it into your Hierarchy. In your Hierarchy click on Main Camera then press delete.(Or Right click then delete).
- Click all the down arrows on your CardboardMain. Click on Main Camera Left and shift click Main Camera Right, in the inspector at the bottom you should see Add Component. Click that then type, "Skybox", be sure to select skybox and not skybox mesh. Navigate in your assets to where your Skybox material is and drag it in the Material Slot for skybox.
- While both Main Camera Left and Right are still selected, right click on Cardboard Eye in the inspector tab, then click Edit Script. Wait for Visual Studio(or monodevelop) to load up. Once loaded up press CTRL + F and type "Destroy" in the search bar. Type "//" right before the highlighted Destroy Should Look Like
//Destroy(customSkybox);
and it should turn green or gray depending on your version of unity. Go to File>Save All and exit the program. - Once completed make sure Main Camera Left and Right are both selected and then go to the top where it says Camera without a check box, Click on Solid color right under it and select Skybox.
*** IF you are not using Google Cardboard VR or a deviant of it, follow the instructions below for a similar viewing experience***
- Click on CardboardMain in your Hierarchy, then in the inspector there should be something like,"VR mode Enabled", uncheck the box next to it if you do not have google cardboard.
- Just follow the above steps but instead of doing it to Main Camera Left and Right, do it to Main Camera and exclude the part where you have to edit Cardboard Eye.cs
- Continue with the tutorial now.
- Save your scene with File>Save Scene and save it as default.scene in your Assets.
Exporting to Android
- In order to Export to an APK you will need to go to File>Build settings Then click on Android and click "Switch Platform" in the bottom left hand corner. Let it run it's course(should take less then a minute)
- In the Settings of the Android platform under Texture Compression Click the drop down and select "ETC(default)". Now go to Player Settings. Give your project a company name and App name. Mine is TexasFunk Productions and ExampleVR. You can choose an Icon for your app but its not required, it will just have the default unity Icon.
- Under Resolution and Presentation make sure Default Orientation is set to Landscape Left it will not look right if set to anything else.
- Skip Icon and Splash image and click on Other Settings. Only change the Bundle Identifyer to be something like your website backwards, for me it would be com.texasfunkproductions.examplevr you can keep the version and bundle version code the same but if you release an update make sure version is a higher number like 1.1 or 2.0
- If you are going to publish to the play store you will have to look up a tutorial for using keystores and stuff like that but for now just skip it. Go back to File>Build Settings and make sure you are under Android then click Build. Save it as test or what ever you need. If it prompts for an android SDK you will have to go download it and point it to that, but I do not think it requires it anymore(just in unity 4.9 and lower.)
- I just upload my APK to the google drive and download it that way onto my note 3 to install it. If you have a problem where you can't press the install button when you install the apk make sure to disable any application that dims brightness or anything along those lines.
Conclusion
- I hope you enjoyed this tutorial and found it helpful, please leave a comment if you have any questions and I will try to answer them!