From 9293eb4a7b6a6431b24453ae0bda608785521bce Mon Sep 17 00:00:00 2001
From: Campbell Morgan <1377367+campbellwmorgan@users.noreply.github.com>
Date: Mon, 14 Jun 2021 17:01:41 +0100
Subject: [PATCH] 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     | 20 ++++++++++++++------
 src/plugin.js | 34 ++++++++++++++++++++++++++++------
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 4cf37668..af4f8809 100644
--- a/README.md
+++ b/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`
diff --git a/src/plugin.js b/src/plugin.js
index 6b10cc21..8cd991fc 100644
--- a/src/plugin.js
+++ b/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];