cardboard-vr-display - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

 {
   "name": "cardboard-vr-display",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "homepage": "https://github.com/immersive-web/cardboard-vr-display",
@@ -31,2 +31,3 @@ "authors": [
     "build": "rollup -c",
+    "watch": "rollup -c -w",
     "preversion": "npm test",
@@ -43,4 +44,4 @@ "version": "npm run build && git add dist/*",
     "nosleep.js": "^0.7.0",
-    "webvr-polyfill-dpdb": "^1.0.3"
+    "webvr-polyfill-dpdb": "^1.0.7"
   }
 }

README.md

@@ -159,2 +159,3 @@ # cardboard-vr-display
 * `npm run build`: builds the distributable.
+* `npm run watch`: watches `src/` for changes and rebuilds on change.
 
@@ -161,0 +162,0 @@ ## Running The Demo

src/sensor-fusion/fusion-pose-sensor.js

@@ -34,4 +34,2 @@ /*
 
-  this.start();
-
   this.filter = new ComplementaryFilter(kFilter, isDebug);
@@ -66,4 +64,15 @@ this.posePredictor = new PosePredictor(predictionTime, isDebug);
   this.isIOS = Util.isIOS();
+  // Chrome as of m66 started reporting `rotationRate` in degrees rather
+  // than radians, to be consistent with other browsers.
+  // https://github.com/immersive-web/cardboard-vr-display/issues/18
+  let chromeVersion = Util.getChromeVersion();
+  this.isDeviceMotionInRadians = !this.isIOS && chromeVersion && chromeVersion < 66;
+  // In Chrome m65 there's a regression of devicemotion events. Fallback
+  // to using deviceorientation for these specific builds. More information
+  // at `Util.isChromeWithoutDeviceMotion`.
+  this.isWithoutDeviceMotion = Util.isChromeWithoutDeviceMotion();
 
   this.orientationOut_ = new Float32Array(4);
+
+  this.start();
 }
@@ -77,9 +86,45 @@
 FusionPoseSensor.prototype.getOrientation = function() {
-  // Convert from filter space to the the same system used by the
-  // deviceorientation event.
-  var orientation = this.filter.getOrientation();
+  let orientation;
 
-  // Predict orientation.
-  this.predictedQ = this.posePredictor.getPrediction(orientation, this.gyroscope, this.previousTimestampS);
+  // Hack around using deviceorientation instead of devicemotion
+  if (this.isWithoutDeviceMotion && this._deviceOrientationQ) {
+    // We must rotate 90 degrees on the Y axis to get the correct
+    // orientation of looking down the -Z axis.
+    this.deviceOrientationFixQ = this.deviceOrientationFixQ || (function () {
+      const z = new MathUtil.Quaternion().setFromAxisAngle(new MathUtil.Vector3(0, 0, -1), 0);
+      const y = new MathUtil.Quaternion().setFromAxisAngle(new MathUtil.Vector3(0, 1, 0), Math.PI / 2);
+      return z.multiply(y);
+    })();
+    orientation = this._deviceOrientationQ;
+    var out = new MathUtil.Quaternion();
+    out.copy(orientation);
+    out.multiply(this.filterToWorldQ);
+    out.multiply(this.resetQ);
+    out.multiply(this.worldToScreenQ);
+    out.multiplyQuaternions(this.deviceOrientationFixQ, out);
 
+    // Handle the yaw-only case.
+    if (this.yawOnly) {
+      // Make a quaternion that only turns around the Y-axis.
+      out.x = 0;
+      out.z = 0;
+      out.normalize();
+    }
+
+    this.orientationOut_[0] = out.x;
+    this.orientationOut_[1] = out.y;
+    this.orientationOut_[2] = out.z;
+    this.orientationOut_[3] = out.w;
+    return this.orientationOut_;
+  } else {
+    // Convert from filter space to the the same system used by the
+    // deviceorientation event.
+    let filterOrientation = this.filter.getOrientation();
+
+    // Predict orientation.
+    orientation = this.posePredictor.getPrediction(filterOrientation,
+                                                   this.gyroscope,
+                                                   this.previousTimestampS);
+  }
+
   // Convert to THREE coordinate system: -Z forward, Y up, X right.
@@ -89,3 +134,3 @@ var out = new MathUtil.Quaternion();
   out.multiply(this.resetQ);
-  out.multiply(this.predictedQ);
+  out.multiply(orientation);
   out.multiply(this.worldToScreenQ);
@@ -125,2 +170,11 @@
 
+FusionPoseSensor.prototype.onDeviceOrientation_ = function(e) {
+  this._deviceOrientationQ = this._deviceOrientationQ || new MathUtil.Quaternion();
+  let { alpha, beta, gamma } = e;
+  alpha = (alpha || 0) * Math.PI / 180;
+  beta = (beta || 0) * Math.PI / 180;
+  gamma = (gamma || 0) * Math.PI / 180;
+  this._deviceOrientationQ.setFromEulerYXZ(beta, alpha, -gamma);
+};
+
 FusionPoseSensor.prototype.onDeviceMotion_ = function(deviceMotion) {
@@ -161,5 +215,6 @@ this.updateDeviceMotion_(deviceMotion);
 
-  // With iOS and Firefox Android, rotationRate is reported in degrees,
-  // so we first convert to radians.
-  if (this.isIOS || this.isFirefoxAndroid) {
+  // DeviceMotionEvents should report `rotationRate` in degrees, so we need
+  // to convert to radians. However, some browsers (Android Chrome < m66) report
+  // the rotation as radians, in which case no conversion is needed.
+  if (!this.isDeviceMotionInRadians) {
     this.gyroscope.multiplyScalar(Math.PI / 180);
@@ -223,2 +278,3 @@ }
   this.onMessageCallback_ = this.onMessage_.bind(this);
+  this.onDeviceOrientationCallback_ = this.onDeviceOrientation_.bind(this);
 
@@ -233,3 +289,7 @@ // Only listen for postMessages if we're in an iOS and embedded inside a cross
   window.addEventListener('orientationchange', this.onOrientationChangeCallback_);
-  window.addEventListener('devicemotion', this.onDeviceMotionCallback_);
+  if (this.isWithoutDeviceMotion) {
+    window.addEventListener('deviceorientation', this.onDeviceOrientationCallback_);
+  } else {
+    window.addEventListener('devicemotion', this.onDeviceMotionCallback_);
+  }
 };
@@ -239,2 +299,3 @@
   window.removeEventListener('devicemotion', this.onDeviceMotionCallback_);
+  window.removeEventListener('deviceorientation', this.onDeviceOrientationCallback_);
   window.removeEventListener('orientationchange', this.onOrientationChangeCallback_);
@@ -241,0 +302,0 @@ window.removeEventListener('message', this.onMessageCallback_);

src/util.js

@@ -62,2 +62,35 @@ /*
 
+/**
+ * Returns a number value indiciating the version of Chrome being used,
+ * or otherwise `null` if not on Chrome.
+ */
+export const getChromeVersion = (function() {
+  const match = navigator.userAgent.match(/.*Chrome\/([0-9]+)/);
+  const value = match ? parseInt(match[1], 10) : null;
+  return function() {
+    return value;
+  };
+})();
+
+/**
+ * In Chrome m65, `devicemotion` events are broken but subsequently fixed
+ * in 65.0.3325.148. Since many browsers use Chromium, ensure that
+ * we scope this detection by branch and build numbers to provide
+ * a proper fallback.
+ * https://github.com/immersive-web/webvr-polyfill/issues/307
+ */
+export const isChromeWithoutDeviceMotion = (function() {
+  let value = false;
+  if (getChromeVersion() === 65) {
+    const match = navigator.userAgent.match(/.*Chrome\/([0-9\.]*)/);
+    if (match) {
+      const [major, minor, branch, build] = match[1].split('.');
+      value = parseInt(branch, 10) === 3325 && parseInt(build, 10) < 148;
+    }
+  }
+  return function() {
+    return value;
+  };
+})();
+
 export const isR7 = (function() {
@@ -64,0 +97,0 @@ var isR7 = navigator.userAgent.indexOf('R7 Build') !== -1;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

414169

increased by1.93%

Lines of code

7563

increased by2.62%

Number of lines in readme file

189

increased by0.53%

Dependency changes

• Updatedwebvr-polyfill-dpdb@^1.0.7