360 Videos in Virtual Reality Tutorial
WebVR app for 360 videos
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.
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.
Join 6000+ Students
Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.
Start Learning Now
Get your Free Lesson now.
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.
|
1 2 3 4 |
var geometry = new THREE.SphereGeometry(500, 60, 40); var material = new THREE.MeshBasicMaterial({ map: videoTexture, side: THREE.DoubleSide }); |
We’ll be wrapping our 360 video on this sphere. Of course, this will only work if the video has equirectangular projection.
|
1 2 3 4 5 6 7 8 |
var videoElement = document.createElement('video'); videoElement.src = '/common/360-video.mp4'; videoElement.load(); videoElement.crossOrigin = 'anonymous'; videoElement.setAttribute('webkit-playsinline', 'true'); videoElement.setAttribute('playsinline', 'true'); |
Here, we’re creating a video element and starting to load the video.
|
1 2 3 4 5 |
document.getElementById('vr-button').addEventListener('click', function() { videoElement.play(); }); |
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.
|
1 2 3 |
var videoTexture = new THREE.Texture(videoElement); |
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.
Download Source Code
Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.
Download Source Code
Get your Free Lesson now.
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?
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.