Building an interactive 360 Video player for Mobile / GearVR

This post will run you through the basics of creating a 360 video player for the Oculus GearVR. The same techniques will work for google cardboard, daydream, htc vive, and oculus rift with minor changes. You’ll learn how to play a video, bring up a quick menu, and switch to another video.

Note on 3D 360

This post covers 360 video but not stereo 3D video.

If you’re looking to play 3D 360 Video check out this post: https://unity3d.college/2017/07/31/how-to-play-stereoscopic-3d-360-video-in-vr-with-unity3d/

Sphere Setup

Before we can play 360 video, we need an inverted sphere.

In a previous post, I showed how to use an inverted sphere mesh.

Today, I’ll show you how to create one in Unity using a single editor script – original source here

Create a new folder named “Editor”

Create a script named InvertedSphere.cs in the “Editor” folder.

Replace the script contents with this.



In a new scene, right click the Hierarchy and select “Create Other”->”Inverted Sphere”

Set the size to 100.

Click “Create Inverted Sphere”

Select your “Inverted Sphere” in the Hierarchy

Add a “Video Player” component to the sphere.

Importing Videos

Create “Videos” folder.

Download some sample 360 videos that you enjoy from youtube or your favorite source.

Place them in the “Videos” folder.

Transcoding

Some videos will play fine on GearVR without transcoding them, but many won’t. Luckily, transcoding is as easy as checking a box and waiting.

Select your videos.

In the inspector, check the “Transcode” box.

Click Apply

Wait (this took 15 minutes for me)

Video Selection Script

To manage our basic menu system, we’ll need two scripts.

Create a “Code” folder.

In the folder create these two scripts.

VideoSelection.cs

GazeInput.cs



Menu Setup

For this sample we’ll create a basic menu out of cubes. Once it’s working, feel free to pretty them up however you like or replace the cubes with something that fits better to your style.

Create an empty gameobject in the Hierarhcy

Name it “Menu”.

Reset the transform so it’s in the center of your scene.

Right click on the “Menu” object and create a cube as a child.

Re-name your cube to be “Menu Item – yourvideoname” (example I used a bunny video so mine looks like this)

Adjust the transform values so that X & Z are 1.

Add the VideoSelection component to the new Menu Item

Drag your first video clip onto the Video Clip field of the component.

The second Menu Item

To create another menu item, duplicate the existing one (ctrl-d).

Re-name it

Change the X to -1

Swap out the video clip with a different one.

Camera Setup

The last thing we need to do is setup the camera.

Select the “Main Camera” object in your Hierarchy.

Reset the position.

Set the Position Y value to positive 1.

Add the GazeInput component to the “Main Camera”

Building to the phone

The project should be good and running now. The final step is to put it onto a GearVR (or whatever platform you’re using).

If you already have an OSIG file, place that in the Plugins/Android/Assets folder of your project (create this folder structure if it doesn’t exist).

If you don’t know what I’m talking about, go here and follow the instructions (only takes a minute) – https://dashboard.oculus.com/tools/osig-generator/

With the OSIG in place we’re good to go.

Save the scene and open the Build dialog

Add the saved scene.

Click build and run with the phone plugged in and if all goes right, you’ll have your video player up and running.

**** IMPORTANT – Make sure your phone is plugged in via USB and UNLOCKED or the deployment will fail ****

Controls

The controls for this video player are very simple.

Tap the GearVR touchpad to bring up the 2 cubes.

Look at the cube you want to play from and tap again. The video will start playing.

Just tap again to bring the menu (cubes) up again.

Conclusions & Extensions

This is not the prettiest video player, but should give you a good idea how to get started. Once you get it working, the first thing I’d recommend doing is making the ‘menu’ a whole lot prettier, adding some text to show what the video names are, or some video preview on the items.

Overall though, the new video player functionality, along with the included Oculus SDK makes it really easy to get going with your own video player now. I’m excited to see all the variations people build, and may end up building a more full featured one soon myself.