Remove VREffect / VRControls in favor of the new WebGLRenderer API

Author: dmarcos

package.json

@@ -41,7 +41,7 @@
     "present": "0.0.6",
     "promise-polyfill": "^3.1.0",
     "style-attr": "^1.0.2",
-    "three": "^0.87.0",
+    "three": "mrdoob/three.js#dev",
     "three-bmfont-text": "^2.1.0",
     "webvr-polyfill": "^0.9.40"
   },

src/components/camera.js

@@ -28,6 +28,9 @@ module.exports.Component = registerComponent('camera', {
     var el = this.el;
     var sceneEl = el.sceneEl;
 
+    // To save / restore camera pose
+    this.savedRotation = new THREE.Vector3();
+    this.savedPosition = new THREE.Vector3();
     this.savedPose = null;
 
     // Create camera.
@@ -153,13 +156,15 @@ module.exports.Component = registerComponent('camera', {
    */
   saveCameraPose: function () {
     var el = this.el;
+    var position = el.getAttribute('position');
+    var rotation = el.getAttribute('rotation');
     var hasPositionalTracking = this.hasPositionalTracking !== undefined ? this.hasPositionalTracking : checkHasPositionalTracking();
 
     if (this.savedPose || !hasPositionalTracking) { return; }
 
     this.savedPose = {
-      position: el.getAttribute('position').clone(),
-      rotation: el.getAttribute('rotation')
+      position: this.savedPosition.copy(position),
+      rotation: this.savedRotation.copy(rotation)
     };
   },
 

src/components/look-controls.js

@@ -1,7 +1,7 @@
 var registerComponent = require('../core/component').registerComponent;
 var THREE = require('../lib/three');
-var DEFAULT_CAMERA_HEIGHT = require('../constants').DEFAULT_CAMERA_HEIGHT;
 var bind = require('../utils/bind');
+var PolyfillControls = require('../utils').device.PolyfillControls;
 
 // To avoid recalculation at every mouse movement tick
 var GRABBING_CLASS = 'a-grabbing';
@@ -23,21 +23,16 @@ module.exports.Component = registerComponent('look-controls', {
   },
 
   init: function () {
-    var sceneEl = this.el.sceneEl;
-
     this.previousHMDPosition = new THREE.Vector3();
     this.hmdQuaternion = new THREE.Quaternion();
     this.hmdEuler = new THREE.Euler();
     this.position = new THREE.Vector3();
+    this.polyfillObject = new THREE.Object3D();
+    this.polyfillControls = new PolyfillControls(this.polyfillObject);
     this.rotation = {};
     this.deltaRotation = {};
-
     this.setupMouseControls();
-    this.setupHMDControls();
     this.bindMethods();
-
-    // Reset previous HMD position when we exit VR.
-    sceneEl.addEventListener('exit-vr', this.onExitVR);
   },
 
   update: function (oldData) {
@@ -57,22 +52,9 @@ module.exports.Component = registerComponent('look-controls', {
 
   tick: function (t) {
     var data = this.data;
-    if (!data.enabled) { return; }
-    this.controls.standing = data.standing;
-    this.controls.userHeight = this.getUserHeight();
-    this.controls.update();
-    this.updateOrientation();
+    if (!data.enabled || this.el.sceneEl.is('vr-mode')) { return; }
     this.updatePosition();
-  },
-
-  /**
-   * Return user height to use for standing poses, where a device doesn't provide an offset.
-   */
-  getUserHeight: function () {
-    var el = this.el;
-    return el.hasAttribute('camera')
-      ? el.getAttribute('camera').userHeight
-      : DEFAULT_CAMERA_HEIGHT;
+    this.updateOrientation();
   },
 
   play: function () {
@@ -108,16 +90,6 @@ module.exports.Component = registerComponent('look-controls', {
     this.yawObject.add(this.pitchObject);
   },
 
-  /**
-   * Set up VR controls that will copy data to the dolly.
-   */
-  setupHMDControls: function () {
-    this.dolly = new THREE.Object3D();
-    this.euler = new THREE.Euler();
-    this.controls = new THREE.VRControls(this.dolly);
-    this.controls.userHeight = 0.0;
-  },
-
   /**
    * Add mouse and touch event listeners to canvas.
    */
@@ -140,6 +112,9 @@ module.exports.Component = registerComponent('look-controls', {
     canvasEl.addEventListener('touchstart', this.onTouchStart);
     window.addEventListener('touchmove', this.onTouchMove);
     window.addEventListener('touchend', this.onTouchEnd);
+
+    // sceneEl events.
+    sceneEl.addEventListener('exit-vr', this.onExitVR);
   },
 
   /**
@@ -161,71 +136,39 @@ module.exports.Component = registerComponent('look-controls', {
     canvasEl.removeEventListener('touchstart', this.onTouchStart);
     canvasEl.removeEventListener('touchmove', this.onTouchMove);
     canvasEl.removeEventListener('touchend', this.onTouchEnd);
+
+    // sceneEl events.
+    sceneEl.removeEventListener('exit-vr', this.onExitVR);
   },
 
   /**
    * Update orientation for mobile, mouse drag, and headset.
    * Mouse-drag only enabled if HMD is not active.
    */
   updateOrientation: function () {
-    var currentRotation;
-    var deltaRotation = this.deltaRotation;
     var hmdEuler = this.hmdEuler;
-    var hmdQuaternion = this.hmdQuaternion;
     var pitchObject = this.pitchObject;
     var yawObject = this.yawObject;
     var sceneEl = this.el.sceneEl;
     var rotation = this.rotation;
 
-    // Calculate HMD quaternion.
-    hmdQuaternion = hmdQuaternion.copy(this.dolly.quaternion);
-    hmdEuler.setFromQuaternion(hmdQuaternion, 'YXZ');
-
-    if (sceneEl.isMobile) {
-      // On mobile, do camera rotation with touch events and sensors.
-      rotation.x = radToDeg(hmdEuler.x) + radToDeg(pitchObject.rotation.x);
-      rotation.y = radToDeg(hmdEuler.y) + radToDeg(yawObject.rotation.y);
-      rotation.z = radToDeg(hmdEuler.z);
-    } else if (!sceneEl.is('vr-mode') || isNullVector(hmdEuler) || !this.data.hmdEnabled) {
-      // Mouse drag if WebVR not active (not connected, no incoming sensor data).
-      currentRotation = this.el.getAttribute('rotation');
-      this.calculateDeltaRotation();
-      if (this.data.reverseMouseDrag) {
-        rotation.x = currentRotation.x - deltaRotation.x;
-        rotation.y = currentRotation.y - deltaRotation.y;
-        rotation.z = currentRotation.z;
-      } else {
-        rotation.x = currentRotation.x + deltaRotation.x;
-        rotation.y = currentRotation.y + deltaRotation.y;
-        rotation.z = currentRotation.z;
-      }
-    } else {
-      // Mouse rotation ignored with an active headset. Use headset rotation.
-      rotation.x = radToDeg(hmdEuler.x);
-      rotation.y = radToDeg(hmdEuler.y);
-      rotation.z = radToDeg(hmdEuler.z);
-    }
+    // In VR mode THREE is in charge of updating the camera rotation.
+    if (sceneEl.is('vr-mode')) { return; }
 
-    this.el.setAttribute('rotation', rotation);
-  },
+    // Calculate polyfilled HMD quaternion.
+    this.polyfillControls.update();
+    hmdEuler.setFromQuaternion(this.polyfillObject.quaternion, 'YXZ');
+    // On mobile, do camera rotation with touch events and sensors.
+    rotation.x = radToDeg(hmdEuler.x) + radToDeg(pitchObject.rotation.x);
+    rotation.y = radToDeg(hmdEuler.y) + radToDeg(yawObject.rotation.y);
+    rotation.z = 0;
 
-  /**
-   * Calculate delta rotation for mouse-drag and touch-drag.
-   */
-  calculateDeltaRotation: function () {
-    var currentRotationX = radToDeg(this.pitchObject.rotation.x);
-    var currentRotationY = radToDeg(this.yawObject.rotation.y);
-    this.deltaRotation.x = currentRotationX - (this.previousRotationX || 0);
-    this.deltaRotation.y = currentRotationY - (this.previousRotationY || 0);
-    // Store current rotation for next tick.
-    this.previousRotationX = currentRotationX;
-    this.previousRotationY = currentRotationY;
-    return this.deltaRotation;
+    this.el.setAttribute('rotation', rotation);
   },
 
   /**
-   * Handle positional tracking.
-   */
+    * Handle positional tracking.
+  */
   updatePosition: function () {
     var el = this.el;
     var currentHMDPosition;
@@ -238,26 +181,37 @@ module.exports.Component = registerComponent('look-controls', {
 
     // Calculate change in position.
     currentHMDPosition = this.calculateHMDPosition();
-
     currentPosition = el.getAttribute('position');
 
     position.copy(currentPosition).sub(previousHMDPosition).add(currentHMDPosition);
     el.setAttribute('position', position);
     previousHMDPosition.copy(currentHMDPosition);
   },
 
-  /**
-   * Get headset position from VRControls.
-   */
   calculateHMDPosition: (function () {
     var position = new THREE.Vector3();
     return function () {
-      this.dolly.updateMatrix();
-      position.setFromMatrixPosition(this.dolly.matrix);
+      var object3D = this.el.object3D;
+      object3D.updateMatrix();
+      position.setFromMatrixPosition(object3D.matrix);
       return position;
     };
   })(),
 
+  /**
+   * Calculate delta rotation for mouse-drag and touch-drag.
+   */
+  calculateDeltaRotation: function () {
+    var currentRotationX = radToDeg(this.pitchObject.rotation.x);
+    var currentRotationY = radToDeg(this.yawObject.rotation.y);
+    this.deltaRotation.x = currentRotationX - (this.previousRotationX || 0);
+    this.deltaRotation.y = currentRotationY - (this.previousRotationY || 0);
+    // Store current rotation for next tick.
+    this.previousRotationX = currentRotationX;
+    this.previousRotationY = currentRotationY;
+    return this.deltaRotation;
+  },
+
   /**
    * Translate mouse drag into rotation.
    *
@@ -377,7 +331,3 @@ module.exports.Component = registerComponent('look-controls', {
     disableGrabCursor();
   }
 });
-
-function isNullVector (vector) {
-  return vector.x === 0 && vector.y === 0 && vector.z === 0;
-}

src/components/scene/screenshot.js

@@ -61,6 +61,7 @@ module.exports.Component = registerComponent('screenshot', {
 
     function setup () {
       var gl = el.renderer.getContext();
+      if (!gl) { return; }
       self.cubeMapSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);
       self.material = new THREE.RawShaderMaterial({
         uniforms: {map: {type: 't', value: null}},