feat: add option to change the detail level of the projection sphere (#…

…225)

Currently the lack of detail in the underlying sphere mesh used in
equirectangular projections is very obvious and can cause visual
artifacts (a kind of wobble).

Increasing the detail level of the sphere can dramatically improve this
and it should therefore be provided as a customization option

README.md

@@ -18,7 +18,6 @@ Maintenance Status: Stable
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Installation](#installation)
 - [Browser Support](#browser-support)
 - [Projection support](#projection-support)
@@ -37,8 +36,8 @@ Maintenance Status: Stable
   - [`motionControls`](#motioncontrols)
   - [`projection`](#projection)
     - [`'180'`](#180)
-    - [`'180_lr'`](#180_lr)
-    - [`'180_mono'`](#180_mono)
+    - [`'180_LR'`](#180_lr)
+    - [`'180_MONO'`](#180_mono)
     - [`'360'`, `'Sphere'`, or `'equirectangular'`](#360-sphere-or-equirectangular)
     - [`'Cube'` or `'360_CUBE'`](#cube-or-360_cube)
     - [`'NONE'`](#none)
@@ -47,6 +46,7 @@ Maintenance Status: Stable
     - [`'360_TB'`](#360_tb)
     - [`'EAC'`](#eac)
     - [`'EAC_LR'`](#eac_lr)
+  - [`sphereDetail`](#spheredetail)
   - [`player.mediainfo.projection`](#playermediainfoprojection)
   - [`debug`](#debug)
   - [`omnitone`](#omnitone)
@@ -209,11 +209,11 @@ Can be any of the following:
 #### `'180'`
 The video is half sphere and the user should not be able to look behind themselves
 
-#### `'180_lr'`
+#### `'180_LR'`
 Used for side-by-side 180 videos
-The video is half sphere and the user should not be able to look behind themselves 
+The video is half sphere and the user should not be able to look behind themselves
 
-#### `'180_mono'`
+#### `'180_MONO'`
 Used for monoscopic 180 videos
 The video is half sphere and the user should not be able to look behind themselves
 
@@ -241,6 +241,14 @@ Used for Equi-Angular Cubemap videos
 #### `'EAC_LR'`
 Used for side-by-side Equi-Angular Cubemap videos
 
+### `sphereDetail`
+
+> type: `number`, default: `32`
+
+This alters the number of segments in the spherical mesh onto which equirectangular
+videos are projected. The default is `32` but in some circumstances you may notice
+artifacts and need to increase this number.
+
 ### `player.mediainfo.projection`
 
 > type: `string`

src/plugin.js

@@ -21,7 +21,8 @@ const defaults = {
   omnitone: false,
   forceCardboard: false,
   omnitoneOptions: {},
-  projection: 'AUTO'
+  projection: 'AUTO',
+  sphereDetail: 32
 };
 
 const errors = {
@@ -126,7 +127,7 @@ class VR extends Plugin {
       }
       return this.changeProjection_('NONE');
     } else if (projection === '360') {
-      this.movieGeometry = new THREE.SphereBufferGeometry(256, 32, 32);
+      this.movieGeometry = new THREE.SphereBufferGeometry(256, this.options_.sphereDetail, this.options_.sphereDetail);
       this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide });
 
       this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
@@ -137,7 +138,11 @@ class VR extends Plugin {
       this.scene.add(this.movieScreen);
     } else if (projection === '360_LR' || projection === '360_TB') {
       // Left eye view
-      let geometry = new THREE.SphereGeometry(256, 32, 32);
+      let geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail
+      );
 
       let uvs = geometry.faceVertexUvs[ 0 ];
 
@@ -163,7 +168,11 @@ class VR extends Plugin {
       this.scene.add(this.movieScreen);
 
       // Right eye view
-      geometry = new THREE.SphereGeometry(256, 32, 32);
+      geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail
+      );
 
       uvs = geometry.faceVertexUvs[ 0 ];
 
@@ -224,7 +233,14 @@ class VR extends Plugin {
 
       this.scene.add(this.movieScreen);
     } else if (projection === '180' || projection === '180_LR' || projection === '180_MONO') {
-      let geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
+       let geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail,
+        Math.PI,
+        Math.PI
+      );
+
 
       // Left eye view
       geometry.scale(-1, 1, 1);
@@ -249,7 +265,13 @@ class VR extends Plugin {
       this.scene.add(this.movieScreen);
 
       // Right eye view
-      geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
+      geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail,
+        Math.PI,
+        Math.PI
+      );
       geometry.scale(-1, 1, 1);
       uvs = geometry.faceVertexUvs[0];