Merge pull request #48 from mozilla/bug/galaxy-s6-skinned-meshes

Workaround for skinned mesh bug on galaxy s6 devices

.prettierrc.json

+{
+  "printWidth": 120
+}

src/behaviours/oculus-touch-joystick-dpad4.js

-import { angleTo4Direction, angleTo8Direction } from "../utils";
+import { angleTo4Direction, angleTo8Direction } from "../utils/dpad";
 
 // @TODO specify 4 or 8 direction
 function oculus_touch_joystick_dpad4(el, outputPrefix) {

src/behaviours/vive-trackpad-dpad4.js

-import { angleTo4Direction, angleTo8Direction } from "../utils";
+import { angleTo4Direction, angleTo8Direction } from "../utils/dpad";
 
 function vive_trackpad_dpad4(el, outputPrefix) {
   this.outputPrefix = outputPrefix;

src/room.js

 import queryString from "query-string";
 
+import { patchWebGLRenderingContext } from "./utils/webgl";
+patchWebGLRenderingContext();
+
 import "aframe";
 import "./vendor/GLTFLoader";
 import "networked-aframe";
@@ -36,7 +39,7 @@ import "./components/layers";
 import "./components/spawn-controller";
 import "./systems/personal-space-bubble";
 
-import { promptForName, getCookie, parseJwt } from "./utils";
+import { promptForName, getCookie, parseJwt } from "./utils/identity";
 import registerNetworkSchemas from "./network-schemas";
 import { inGameActions, config } from "./input-mappings";
 import registerTelemetry from "./telemetry";

src/utils/dpad.js

+export function angleTo4Direction(angle) {
+  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
+  if (angle > 0 && angle < 90) {
+    return "north";
+  } else if (angle >= 90 && angle < 180) {
+    return "west";
+  } else if (angle >= 180 && angle < 270) {
+    return "south";
+  } else {
+    return "east";
+  }
+}
+
+export function angleTo8Direction(angle) {
+  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
+  var direction = "";
+  if ((angle >= 0 && angle < 120) || angle >= 330) {
+    direction += "north";
+  }
+  if (angle >= 150 && angle < 300) {
+    direction += "south";
+  }
+  if (angle >= 60 && angle < 210) {
+    direction += "west";
+  }
+  if ((angle >= 240 && angle < 360) || angle < 30) {
+    direction += "east";
+  }
+  return direction;
+}

src/utils.js → src/utils/identity.js

@@ -190,34 +190,3 @@ export function parseJwt(token) {
   var base64 = base64Url.replace("-", "+").replace("_", "/");
   return JSON.parse(window.atob(base64));
 }
-
-export function angleTo4Direction(angle) {
-  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
-  if (angle > 0 && angle < 90) {
-    return "north";
-  } else if (angle >= 90 && angle < 180) {
-    return "west";
-  } else if (angle >= 180 && angle < 270) {
-    return "south";
-  } else {
-    return "east";
-  }
-}
-
-export function angleTo8Direction(angle) {
-  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
-  var direction = "";
-  if ((angle >= 0 && angle < 120) || angle >= 330) {
-    direction += "north";
-  }
-  if (angle >= 150 && angle < 300) {
-    direction += "south";
-  }
-  if (angle >= 60 && angle < 210) {
-    direction += "west";
-  }
-  if ((angle >= 240 && angle < 360) || angle < 30) {
-    direction += "east";
-  }
-  return direction;
-}

src/utils/webgl.js

+import AFRAME from "aframe";
+const THREE = AFRAME.THREE;
+
+function checkFloatTextureSupport() {
+  const renderer = new THREE.WebGLRenderer();
+
+  const scene = new THREE.Scene();
+  const size = 2;
+  const data = new Float32Array(size * size * 4);
+  const dataTexture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat, THREE.FloatType);
+  const box = new THREE.Mesh(new THREE.PlaneBufferGeometry(1, 1), new THREE.MeshBasicMaterial({ map: dataTexture }));
+  box.material.map.needsUpdate = true;
+  scene.add(box);
+
+  renderer.render(scene, new THREE.Camera());
+  const result = renderer.context.getError() === 0;
+  renderer.dispose();
+  return result;
+}
+const supportsFloatTextures = checkFloatTextureSupport();
+
+export function patchWebGLRenderingContext() {
+  const originalGetExtension = WebGLRenderingContext.prototype.getExtension;
+  function patchedGetExtension(name) {
+    // It appears that Galaxy S6 devices falsely report that they support
+    // OES_texture_float in Firefox. This workaround disables float textures
+    // for those devices.
+    // See https://github.com/mozilla/mr-social-client/issues/32 and
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1338656
+    if (name === "OES_texture_float" && /Android.+Firefox/.test(navigator.userAgent) && !supportsFloatTextures) {
+      return null;
+    }
+    return originalGetExtension.call(this, name);
+  }
+  WebGLRenderingContext.prototype.getExtension = patchedGetExtension;
+}