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.
You may need to hit play before continuing just to force the editor to compile your new editor script
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.