Unity VRTK Virtual Tour for Gear VR or Oculus Go
Archives Unity

Unity VRTK Virtual Tour for Gear VR or Oculus Go

Combine three 360 photos in Unity using VRTK v3.3.0 to create a virtual tour experience for VR complete with buttons and scene changes. The final product is an .apk file build & run on Android mobile device for use with Samsung’s Gear VR or Oculus Go.

Assumptions: You already have Unity 2017.4.0f1 installed, you own a 360 camera or have access to 360 images, you have a compatible Android mobile device & a Samsung Gear VR with controller OR an Oculus Go.


 

 

 Set up a new project

Open Unity and create a new 3D project. File> Build Settings> Switch to Android Platform. Player Settings>Other Settings> Minimum API Level> 24.

 

 Import 360 Photos

The 360 photos I am using were taken with a Samsung Gear 360 and a microphone tripod with a 5/8” to 1/4″ adaptor.

Drag your photos directly into the Assets panel or right click and click “Import new Asset”. Add them to a new folder in Assets called “Photos” and rename them “PhotoA”, “PhotoB”, and “PhotoC.” With all three photos selected, change “Texture Shape” from 2D to Cube using the inspector window. Lastly, click the “Apply” button.

 

 Create Skybox Materials

Right click in the assets window or use the Create drop down menu to create another new folder named “Skyboxes”. Next use the create drop down menu or right click to create a Material as a child of the Skyboxes folder. Rename it “SkyboxA”. With the new material selected, change the shader to “skybox/cubemap” the inspector window.

Next drag the “PhotoA” photo onto the gray cubemap square in the inspector (or you can manually select it by clicking on the select button in the bottom right hand corner of the gray box).

Repeat the process to create SkyboxB and SkyboxC materials for the other two photos.

 

 VRTK Camera Rig & Pointer

Follow these steps to set up your camera rig using VTRK and Oculus Utilities. Then add these pointer scriptsincluding those for the UI pointer.

 

 UI Buttons

Add a new UI Button to your scene. Notice the object is added as a child of a Canvas object and an Event System is also created. If you haven’t already, click on the canvas object and add the following scripts to your Canvas object: VRTK_UICanvas (Script). Change the render mode to “World Space – Camera” and drag the “CenterEyeAnchor (Camera)” object into the Render Camera field.

Set the Canvas Pos X, Y, Z to 0, 0, 0, reduce the Scale to .01, .01, .01, width 1800, & height 1600.

Next click onto the button object and adjust the Rectangular Transform settings to match the screenshot below.

Click into the “Text” child and edit the button text to read “Next”.

Create a second UI button called “Back” and repeat the process with one exception: Set the Button Rect Transform to Pos X = -50.

 

 Scene Change & Loading Screen

Create a new script in Assets and rename it “LoadOnClick” paying attention to capitalization. Double click on the script to edit and paste in the following code:

using UnityEngine;
using System.Collections;

public class LoadOnClick : MonoBehaviour {

    public GameObject loadingImage;

    public void LoadScene(int level)
    {
        loadingImage.SetActive(true);
        Application.LoadLevel(level);
    }
}

Create a new UI>Image object as a child of the Canvas object, move it to the bottom of the heirarchy. Set the color of the image to black. Click on the anchor point icon in the inspector and alt+click on the bottom right icon to stretch the image to fit canvas. Turn the image object off by deselecting the box to the left of the object name in Inspector window:

Lastly, click on the Canvas parent object in your scene and add the “LoadOnClick” script. Drag the UI image object into the Loading Image field.

 

 Apply Skybox to Scenes

Rename/save your existing scene as “0_SceneA”.

Navigate to main nav bar> Window> Lighting> Settings. Then change the skybox material by clicking on the little dot to the right of the material field.

A window with any available materials in the project will pop up. Manually select the “Skybox A” material you created in Step 3.

Now we need to duplicate this scene for the other two skyboxes we created. To do this, go to File> Save Scene As. Save out two duplicate scenes titled “1_SceneB” and “2_SceneC”. Apply SkyboxB to “1_Scene_B” and SkyboxC to “2_SceneC”. If desired, add them into a folder within Assets called “Scenes”.

 

Apply Scene Change Event System

Go to Main Nav> Build Settings. Drag all three scenes into the “Scenes in Build” field.

The numbers on the right denote the order in which Unity will read the scenes in your project, starting with zero. Now we need to go back into our scenes and tell Unity which scenes to load when a given button is clicked. Exit Build Settings and open up “0_SceneA”.

Click on the “Next” button object and drag the Canvas object into the “On Click ()” field. Then select LoadOnClick>LoadScene from the drop down and enter the number “1”, because we want scene 1 (aka “1_SceneB”) to load when the Next button is clicked.

Now click on the Back button. We want the back button to take us to “2_SceneC”. Repeat the above “On Click” except enter the number “2”.

Save this scene, and open “1_SceneB” and repeat the process above, setting the Next button to “2”, the Back button to “0”.

Save and open “2_SceneC” and repeat the process above, setting the Next button to “0” and the Back button to “1”.

 

 Build Your App

Main Nav> File> Build and Run! See our Build Unity app for Android tutorial for more information.

 

         
That’s it!
I hope this information will make it easier for you to get started working in VR. One of the goals of ScenicMentor.com is to help designers learn and work faster, giving them more time to create and more easily share their ideas with the world!
I’d love to hear comments or suggestions. Contact me here.

Facebook
RSS
Twitter
Email
LinkedIn