feat: Add 180 projection support (#172)

videojs · Aug 13, 2019 · 67fe78b · 67fe78b
1 parent 3c57c23
commit 67fe78b
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 2 deletions.
diff --git a/examples/180.html b/examples/180.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video width="640" height="300" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
+    <source src="../samples/video_180.mp4" type="video/mp4">
+  </video>
+  <ul>
+    <li><a href="../">return to main example</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '180';
+
+      var vr = window.vr = player.vr({projection: '180', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
     <li><a href="examples/cube.html">Cube Video example</a></li>
     <li><a href="examples/fluid.html">"Fluid" video size example</a></li>
     <li><a href="examples/iframe.html">Iframe example</a></li>
+    <li><a href="examples/180.html">180 VR example</a></li>
   </ul>
   <script src="node_modules/video.js/dist/video.js"></script>
   <script src="dist/videojs-vr.js"></script>

diff --git a/samples/video_180.mp4 b/samples/video_180.mp4
diff --git a/src/orbit-orientation-controls.js b/src/orbit-orientation-controls.js
@@ -55,6 +55,13 @@ class OrbitOrientationControls {
     if (options.orientation) {
       this.orientation = new DeviceOrientationControls(this.object);
     }
+
+    // if projection is not full view
+    // limit the rotation angle in order to not display back half view
+    if (options.halfView) {
+      this.orbit.minAzimuthAngle = -Math.PI / 4;
+      this.orbit.maxAzimuthAngle = Math.PI / 4;
+    }
   }
 
   update() {

diff --git a/src/plugin.js b/src/plugin.js
@@ -221,6 +221,50 @@ class VR extends Plugin {
       this.movieScreen.position.set(position.x, position.y, position.z);
       this.movieScreen.rotation.y = -Math.PI;
 
+      this.scene.add(this.movieScreen);
+    } else if (projection === '180') {
+      let geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
+
+      // Left eye view
+      geometry.scale(-1, 1, 1);
+      let uvs = geometry.faceVertexUvs[0];
+
+      for (let i = 0; i < uvs.length; i++) {
+        for (let j = 0; j < 3; j++) {
+          uvs[i][j].x *= 0.5;
+        }
+      }
+
+      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
+      this.movieMaterial = new THREE.MeshBasicMaterial({
+        map: this.videoTexture,
+        overdraw: true
+      });
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
+      // display in left eye only
+      this.movieScreen.layers.set(1);
+      this.scene.add(this.movieScreen);
+
+      // Right eye view
+      geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
+      geometry.scale(-1, 1, 1);
+      uvs = geometry.faceVertexUvs[0];
+
+      for (let i = 0; i < uvs.length; i++) {
+        for (let j = 0; j < 3; j++) {
+          uvs[i][j].x *= 0.5;
+          uvs[i][j].x += 0.5;
+        }
+      }
+
+      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
+      this.movieMaterial = new THREE.MeshBasicMaterial({
+        map: this.videoTexture,
+        overdraw: true
+      });
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
+      // display in right eye only
+      this.movieScreen.layers.set(2);
       this.scene.add(this.movieScreen);
     }
 
@@ -410,7 +454,7 @@ class VR extends Plugin {
     // Store vector representing the direction in which the camera is looking, in world space.
     this.cameraVector = new THREE.Vector3();
 
-    if (this.currentProjection_ === '360_LR' || this.currentProjection_ === '360_TB') {
+    if (this.currentProjection_ === '360_LR' || this.currentProjection_ === '360_TB' || this.currentProjection_ === '180') {
       // Render left eye when not in VR mode
       this.camera.layers.enable(1);
     }
@@ -511,6 +555,8 @@ class VR extends Plugin {
           const options = {
             camera: this.camera,
             canvas: this.renderedCanvas,
+            // check if its a half sphere view projection
+            halfView: this.currentProjection_ === '180',
             orientation: videojs.browser.IS_IOS || videojs.browser.IS_ANDROID || false
           };
 

diff --git a/src/utils.js b/src/utils.js
@@ -36,7 +36,8 @@ export const validProjections = [
   'AUTO',
   'Sphere',
   'Cube',
-  'equirectangular'
+  'equirectangular',
+  '180'
 ];
 
 export const getInternalProjectionName = function(projection) {