Create a Virtual Tour app with Hotspots for Oculus Go and Oculus Quest VR using Unity

In a previous tutorial, we used Unity to create a Virtual Tour experience for Gear VR. Since then Unity has changed quite a bit with more VR devices like the Oculus Go and the Quest coming out and have become mainstream. Today we will build the updated version of the app using Unity 2019.2 which can run on both the Go and the Quest (On Rift too).

Although the previous app worked only with 360 Panoramas, with this app and very slight and easy modifications we could accommodate playing 360 Videos as well!

Also, with the previous app some people were not able to set up the panoramas properly but this time we have a much simpler and easier way to achieve the same result.

We’ll be using an example of a house interior that has a Living Room, Dining Hall, and a kitchen. This is how the app is going to work, once loaded we’ll be able to see a panorama with a couple of hotspots placed around us. When we point to and select a hotspot we’ll be teleported to the panorama that it represents.

Creating and Setting up Unity Application for VR

First of all, let’s start off by creating a new Application. I’m using Unity 2019.2.4f1 with Unity Hub.

We’ll be greeted with an empty new scene. We want to structure our project properly and hence will create separate folders for our Scenes, Scripts, etc., For now, let’s create a folder called Scenes and save the new scene as “MainScene”.

Let’s set our platform to Android by going to File -> Build Settings -> Android under Platform and click on Switch Platform. The scene we created should already be in the Scenes In the Build tab, if not, then click on “Add Open Scenes” which will add it there. This is so that Unity knows which scene to include when we compile and build the application.

Next, we enable VR Support for our app. Go to Edit -> Project Settings -> Player. Under XR Settings, check Virtual Reality Supported.

To enable Oculus support, the necessary SDK has to be selected as well. Under Virtual Reality SDK’s on selecting the + icon, select Oculus from the list. Unity will then load the SDK and compile it, it should take a few seconds.

We now have full Oculus support within our app. But we take this a step further by downloading and importing Oculus Integration for Unity – which is an extra SDK package with additional functionality that makes building for Oculus much easier. It can be downloaded from here. Once downloaded open the file and it should open with unity and prompt the Import package window. Select All and click on Import. Note that the package contains much more functionality than what we need and we can pick and choose from the package exactly what we require, but for the simplicity of this tutorial we import everything. Once unity is done importing it will create all the necessary folders containing the package.

Setting up Camera, Controller, and Events

Once we have all the SDK related stuff imported and all setup, it’s time to start configuring our scene. The Scene will have a MainCamera, delete this and anything else currently in the hierarchy panel. We will be replacing it with the Oculus Camera. In the project panel, search for “OVRCameraRig”, select it and drag and drop it into the hierarchy panel. This is the prefab that is already configured for everything camera related.

Once it’s in the Hierarchy panel, select the prefab and in its Inspector panel under “OVRManager” there will be a property called “TargetDevices”. Enter its size as 2 and from the dropdown select the first element as Go and the second element as Quest.

Click on “Add Component” at the bottom of the inspector panel and search for “OVR Physics Raycaster” and select it. This is used for interacting with the 3D objects in the scene with our Camera. You can read more about it here. In this case, the OVR Physics Raycaster is made to work with Oculus Input and Event System which we’ll be adding next.

In the hierarchy panel, right-click -> UI -> Event System. This will add a new EventSystem gameobject into the scene. Select it and delete the “Standalone Input Module” that it comes with by clicking on the gear icon of component and “Remove Component”. Select “Add Component” and search for “OVR Input Module” and add it. Once added, select the OVRCameraRig gameobject and expand it, you will find “RightHandAnchor” gameobject. Select it and drag it onto the “RayTransform” field of the OVR Input Module of the EventSystem gameobject. This basically tells the Input Module that all the rays will be cast from the transform of the RightHandAchor which in case of Oculus Go will be our hand controller or the Right Controller in case of Quest.

Next is to create our cursor, Search for OVRGazePointer and drag and drop it into the Scene. Select the same and assign it to the Cursor property of the OVR Input Module. The cursor will now move with our hand controller.

But we don’t want just a cursor. Let’s create our very own custom laser pointer that will come out of the hand controller. We can point it at the hotspots and click on them directly.

Under the Scripts folder create a new C# script by right-clicking in the project view -> Create -> C# Script. Name it CustomLaserPointer.cs.

This is the whole script.

We have two color properties that we’ll use to apply a fading gradient to our Laser pointer. This will basically work using the Line Renderer where we draw a line using the specified gradient.

And in the Update() method which gets called every frame, we will ray cast against any colliders in the scene like our hotspots. We can then make the laser pointer stop at the collider by settings its end up to the hit.point.

Now, let’s add this laser pointer into the scene. This will be controlled with our right hand. Hence, go the OVRCameraRig gameobject and under its child gameobjects select RightHandController -> OVRControllerPrefab and add the script by Add Component -> Search for CustomLaserPointer. If you notice a Line Renderer will also be added automatically as we mentioned this dependency in the script using the RequireComponent Tag.

Importing and Creating Cubemaps from Panoramas.

You can find the panoramas used in the project source. Copy your panoramas into your project under a new folder called Panoramas.

Select all of them and in the Inspector Change their texture type to Default and shape to 2D with the following settings.

To use these Panorama Textures in our scene. We have to create a material and assign these textures to them.

To create a new material, under the Materials folder create new by right-clicking -> Create -> Material.

Name it according to the source texture name. For the Dining room texture, I’m naming it DiningRoomMat.

Before we assign a texture to our material, let’s create a panorama shader that will map the equirectangular format into a cube map.

Create a new folder called shaders in the project and inside it create a new shader by right-clicking -> Create -> Shader -> Standard Surface Shader.

Now, here the type of shader we create doesn’t matter because we’ll be clearing the shader file and writing everything from scratch. Name the shader Equirectangular.

Open the shader by double-clicking on it. It should open your favorite code editor.

Delete everything in the file and copy this. This is the whole shader script.

Save the file and head back into Unity.

Select the material you just created and assign the shader by clicking on the Shader dropdown property -> Custom -> Equirectangular.

Finally, assign the texture for this cubemap by dragging in the texture file into the Diffuse (RGB) Alpha (A) property of the material.

Do the same for the rest of the cubemaps and assign the created equirectangular shader.

Creating Hotspots and Interaction

Now that we have our Materials. We can create our Hotspots from them.

Cubemaps in the Scene

To see our Panorama in our scene, we’ll create a sphere gameobject and assign our materials created before to them.

Create a new sphere gameobject by right-clicking in the Hierarchy -> 3D Object -> Sphere.

Rename it to the material or panorama it will represent.

Under its material property of the Mesh Renderer, set the size to 1 and drag and drop its corresponding material. First will be the DiningRoomMat.

Do the same for the Hall and Kitchen Panorama and Materials.

Also, place and size them accordingly. Set all of the gameobjects Transform -> Scale -> 100 on all axis. Spread them apart so that they don’t overlap by changing the X position of the transform. Find the full transform values for each Hotspot Panorama in the images above.

Hotspots and Interaction

Now that we have all the panoramas in the Scene, we can start creating hotspots. These are nothing but sphere gameobjects.

Let’s create and place them accordingly.

For example, from the Dining Room which is the default and starting point of our Virtual Tour, we can go into the Hall or the kitchen.

Hence, I want two spheres or hotspots that will be placed in that relative direction from the Dining Room.

The same goes for Hall and the Kitchen. From the Hall, I can go into the Dining room. And from the Kitchen, I can go back into the Dining room.

You want to place these spheres so that when you’re in the center of the panorama gameobject these spheres are in the relative direction of the target panorama. Essentially. you will have to eyeball their placement as only you will know where to navigate.

Before we actually create the spheres lets create a Hotspot script to handle the behavior on tapping them. This script will be assigned to each hotspot sphere with a collider component on it.

Create a new script called Hotspot.cs. This is the whole script.

We implement the IPointerEnterHandler, Exit and Click Handlers. When the Gaze Pointer falls on the sphere with a collider on it, the Script then can receive those events using Callbacks. We can animate the sphere on enter, exit and when clicked we will call the VirtualTourManager class -> JumpToTargetHotspot() to teleport the camera to the specific panorama that we configure this hotspot with.

Once you’ve created a sphere, add a Sphere Collider -> Add Component -> search for sphere collider.

Next, add the Hotspot script and assign the thisparnoama variable to its own gameobject and the targetPanorama to the target Panorama’s gameobject.

And Finally the VirtualTourManager.cs

Add this script to any gameobject in the scene and assign the OVRCameraRig as the Camera property.

Building and Deploying

Now finally onto build a .apk file and testing it onto your device. First, let’s set up our Player Settings by Edit -> Project Settings -> Player.

Under other settings, set the Package Name and Version.

Next, go to file –> Build Settings -> Add Open Scenes. It should add the mainscene.

Click on build and run and enter the apk file name.

Unity will now start building the .apk file. Once done, simply install the file onto your Oculus Quest or Go.

Please read this article on how to install .apks onto the devices.