360 Videos in Virtual Reality Tutorial

This is part of #DaysInVR series. View VR Project. Yesterday, we learnt how to display and view 360 photos in virtual reality. If you haven’t seen that, be sure to check that out. Today we’ll learn how to display 360 videos in VR. By the end of the tutorial, you’ll be able to take any 360 video and play it in the browser.

WebVR app for 360 videos

Demo | Source

Today we’re going to create a virtual reality player for 360 video. 360 videos are getting popular these days and a lot of them are available on YouTube and Facebook.

I’m using Three.js for this tutorial. The process is almost same as yesterday’s vr photos tutorial.

Setting up with Three.js

We’ll be creating a scene using Threejs and we’ll keep a camera inside it.

Let’s start by creating a SphereGeometry and MeshBasicMaterial.

We’ll be wrapping our 360 video on this sphere. Of course, this will only work if the video has equirectangular projection.

Here, we’re creating a video element and starting to load the video.

However, we’re only playing the video when a button is clicked. This is because, video element can only start playing after a user gesture in mobile browsers.

We create a texture with the video and then use it to create our material.

VRControls and VREffect

VRControls is responsible for giving the positional data to the camera. This is why you can look around when you’re in VR mode on your mobile. VREffect will create the stereo rendering necessary for VR when entering VR mode. It uses WebVR api for this. You can check the respective files to understand how this is achieved.

Entering VR mode

To enter VR mode, you can use a local server such as SimpleHTTPServer in Python2. Once the local server is started, ngrok can be used see the page on mobile.

Its your turn

Create your own 360 VR player and put a link to the project in the comments below.

2 responses to “360 Videos in Virtual Reality Tutorial”

  1. Rory says:

    Great series of tutorials here! At my company we produce similar VR experiences although we are predominantly a Arch Viz shop. Which leads me a question, whats your experience on how many polys you can throw at three.js before is starts to hit a stand still?

    • Rison says:

      I haven’t found threejs to be a limitation. Its more related to the hardware used. So it depends on what all devices you want to support.

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1