Multiplayer refactoring

ew.js

@@ -128,7 +128,7 @@ const xrState = (() => {
   result.msDepthTex = _makeTypedArray(Uint32Array, 1);
   result.aaEnabled = _makeTypedArray(Uint32Array, 1);
   result.fakeVrDisplayEnabled = _makeTypedArray(Uint32Array, 1);
-  result.blobId = _makeTypedArray(Uint32Array, 1);
+  // result.blobId = _makeTypedArray(Uint32Array, 1);
 
   return result;
 })();
@@ -144,16 +144,6 @@ customElements.define('xr-engine-template', XREngineTemplate, {
   extends: 'template',
 });
 
-(async () => {
-
-navigator.serviceWorker.register('/sw.js');
-
-if (navigator.serviceWorker.controller) {
-  GlobalContext.loadPromise.resolve();
-} else {
-  window.location.reload();
-}
-
 ['keydown', 'keyup', 'keypress', 'paste'].forEach(type => {
   window.addEventListener(type, e => {
     const event = {
@@ -183,42 +173,6 @@ if (navigator.serviceWorker.controller) {
     }
   });
 });
-['mousedown', 'mouseup', 'click', 'dblclick', 'mousemove', 'wheel'].forEach(type => {
-  window.addEventListener(type, e => {
-    const event = {
-      altKey: e.altKey,
-      button: e.button,
-      buttons: e.buttons,
-      clientX: e.clientX,
-      clientY: e.clientY,
-      ctrlKey: e.ctrlKey,
-      deltaMode: e.deltaMode,
-      deltaX: e.deltaX,
-      deltaY: e.deltaY,
-      deltaZ: e.deltaZ,
-      // detail: e.detail,
-      layerX: e.layerX,
-      layerY: e.layerY,
-      metaKey: e.metaKey,
-      movementX: e.movementX,
-      movementY: e.movementY,
-      offsetX: e.offsetX,
-      offsetY: e.offsetY,
-      pageX: e.pageX,
-      pageY: e.pageY,
-      screenX: e.screenX,
-      screenY: e.screenY,
-      shiftKey: e.shiftKey,
-      // timeStamp: e.timeStamp,
-      which: e.which,
-      x: e.x,
-      y: e.y,
-    };
-    for (let i = 0; i < windows.length; i++) {
-      windows[i].emit(type, event);
-    }
-  });
-});
 window.addEventListener('resize', e => {
   xrState.metrics[0] = window.innerWidth;
   xrState.metrics[1] = window.innerHeight;
@@ -230,83 +184,76 @@ window.addEventListener('resize', e => {
 });
 window.document.addEventListener('pointerlockchange', e => {
   const pointerLockElement = !!window.document.pointerLockElement;
-
   for (let i = 0; i < windows.length; i++) {
     windows[i].emit('pointerlockchange', {
       pointerLockElement,
     });
   }
 });
-window.addEventListener('drop', e => {
-  console.log('drop event', e);
-  /* const _readFiles = paths => {
-    const result = [];
-
-    return Promise.all(paths.map(p =>
-      new Promise((accept, reject) => {
-        fs.lstat(p, (err, stats) => {
-          if (!err) {
-            if (stats.isFile()) {
-              fs.readFile(p, (err, data) => {
-                if (!err) {
-                  const file = new window.Blob([data]);
-                  file.name = path.basename(p);
-                  file.path = p;
-                  result.push(file);
-
-                  accept();
-                } else {
-                  reject(err);
-                }
-              });
-            } else if (stats.isDirectory()) {
-              fs.readdir(p, (err, fileNames) => {
-                if (!err) {
-                  _readFiles(fileNames.map(fileName => path.join(p, fileName)))
-                    .then(files => {
-                      result.push.apply(result, files);
-
-                      accept();
-                    })
-                    .catch(err => {
-                      reject(err);
-                    });
-                } else {
-                  reject(err);
-                }
-              });
-            } else {
-              accept();
-            }
-          } else {
-            reject(err);
-          }
-        });
-      })
-    ))
-      .then(() => result);
-  };
+window.document.addEventListener('drop', e => {
+  const {
+    clientX,
+    clientY,
+    pageX,
+    pageY,
+    offsetX,
+    offsetY,
+    screenX,
+    screenY,
+    movementX,
+    movementY,
+    ctrlKey,
+    shiftKey,
+    altKey,
+    metaKey,
+    button,
+    dataTransfer,
+  } = e;
 
-  _readFiles(data.paths)
-    .then(files => {
-      const dataTransfer = new window.DataTransfer({
-        files,
-      });
-      const e = new window.DragEvent('drop');
-      e.dataTransfer = dataTransfer;
-      canvas.dispatchEvent(e);
-    })
-    .catch(err => {
-      console.warn(err.stack);
+  for (let i = 0; i < windows.length; i++) {
+    windows[i].emit('drop', {
+      clientX,
+      clientY,
+      pageX,
+      pageY,
+      offsetX,
+      offsetY,
+      screenX,
+      screenY,
+      movementX,
+      movementY,
+      ctrlKey,
+      shiftKey,
+      altKey,
+      metaKey,
+      button,
+      dataTransfer,
     });
-  break; */
+  }
 });
 window.addEventListener('contextmenu', e => {
   e.preventDefault();
 });
+window.addEventListener('vrdisplayconnect', e => {
+  const {display} = e;
+  const eyeParameters = ['left', 'right'].map(eye => display.getEyeParameters(eye));
+  const width = Math.max(eyeParameters[0].renderWidth, eyeParameters[1].renderWidth);
+  const height = Math.max(eyeParameters[0].renderHeight, eyeParameters[1].renderHeight);
 
-const topVrPresentState = {
-  /* hmdType: null,
+  xrState.renderWidth[0] = width;
+  xrState.renderHeight[0] = height;
+
+  for (let i = 0; i < windows.length; i++) {
+    const win = windows[i];
+    if (win.canvas) {
+      win.canvas.width = width * 2;
+      win.canvas.height = height;
+    }
+  }
+});
+
+/* const topVrPresentState = {
+  hmdType: null,
   windowHandle: null,
   fbo: null,
   msFbo: 0,
@@ -317,8 +264,8 @@ const topVrPresentState = {
   mesher: null,
   planeTracker: null,
   handTracker: null,
-  eyeTracker: null, */
-};
+  eyeTracker: null,
+}; */
 
 const requests = [];
 const handleRequest = req => {
@@ -483,7 +430,8 @@ core.animate = (timestamp, frame, referenceSpace) => {
     // console.log('got gamepads', gamepads);
     // debugger;
     const _loadGamepad = i => {
-      const inputSource = inputSources[i];
+      const handedness = i === 0 ? 'left' : 'right';
+      const inputSource = inputSources.find(inputSource => inputSource.handedness === handedness);
       const xrGamepad = xrState.gamepads[i];
 
       let pose, gamepad;
@@ -544,4 +492,35 @@ core.animate = (timestamp, frame, referenceSpace) => {
 };
 core.setSession(null);
 
-})();
+export default {
+  async register() {
+    await navigator.serviceWorker.register('/sw.js');
+
+    if (!navigator.serviceWorker.controller) {
+      await new Promise((accept, reject) => {
+        const _controllerchange = () => {
+          if (navigator.serviceWorker.controller) {
+            navigator.serviceWorker.removeEventListener('controllerchange', _controllerchange);
+            clearTimeout(timeout);
+            accept();
+          }
+        };
+        navigator.serviceWorker.addEventListener('controllerchange', _controllerchange);
+        const timeout = setTimeout(() => {
+          console.warn('ew timed out');
+          debugger;
+        }, 10 * 1000);
+      });
+    }
+
+    console.log('got registration', window.registration);
+
+    GlobalContext.loadPromise.resolve();
+  },
+  async unregister() {
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    for (let i = 0; i < registrations.length; i++) {
+      await registrations[i].unregister();
+    }
+  },
+};

src/VR.js

@@ -456,18 +456,6 @@ class FakeXRDisplay {
     GlobalContext.xrState.fakeVrDisplayEnabled[0] = 0;
   }
 
-  /* get width() {
-    return GlobalContext.xrState.renderWidth[0]*2;
-  }
-  set width(width) {
-    GlobalContext.xrState.renderWidth[0] = width/2;
-  }
-  get height() {
-    return GlobalContext.xrState.renderHeight[0];
-  }
-  set height(height) {
-    GlobalContext.xrState.renderHeight[0] = height;
-  } */
   get width() {
     if (GlobalContext.xrState.stereo[0]) {
       return GlobalContext.xrState.renderWidth[0];

src/Window.js

@@ -362,6 +362,7 @@ const _fetchText = src => fetch(src)
     window.XRPose = XR.XRPose;
     window.XRViewerPose = XR.XRViewerPose;
     window.XRInputSource = XR.XRInputSource;
+    window.DOMPoint = XR.DOMPoint;
     window.XRRay = XR.XRRay;
     window.XRInputPose = XR.XRInputPose;
     window.XRInputSourceEvent = XR.XRInputSourceEvent;
@@ -844,7 +845,7 @@ self.onrunasync = req => {
       self.tickAnimationFrame(req);
       break;
     }
-    case 'enterXr': {
+    /* case 'enterXr': {
       console.log('handle enter xr', GlobalContext.id);
       self.vrdisplaypresentchange();
       for (let i = 0; i < windows.length; i++) {
@@ -862,7 +863,7 @@ self.onrunasync = req => {
         });
       }
       break;
-    }
+    } */
     case 'response': {
       const {keypath} = req;
 

src/WindowBase.js

@@ -230,6 +230,11 @@ const _oninitmessage = async e => {
               target = 'input';
               break;
             }
+            case 'drop': {
+              constructor = DragEvent;
+              target = 'document';
+              break;
+            }
             default: {
               constructor = function(type) {
                 return new Event(type, {