Add option for detail level in projection sphere

README.md

@@ -47,6 +47,7 @@ Maintenance Status: Stable
     - [`'360_TB'`](#360_tb)
     - [`'EAC'`](#eac)
     - [`'EAC_LR'`](#eac_lr)
+  - [`sphereDetail`](#spheredetail)
   - [`player.mediainfo.projection`](#playermediainfoprojection)
   - [`debug`](#debug)
   - [`omnitone`](#omnitone)
@@ -241,6 +242,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];