janusweb 1.5.42 → 1.5.44

package/scripts/room.js

@@ -5,6 +5,18 @@ elation.require([
     'janusweb.sound', 'janusweb.januslight', 'janusweb.janusparticle', 'janusweb.janusghost',
     'janusweb.translators.bookmarks', 'janusweb.translators.reddit', 'janusweb.translators.error', 'janusweb.translators.blank', 'janusweb.translators.default', 'janusweb.translators.dat', 'janusweb.translators.janusvfs'
   ], function() {
+  let roomTranslators = false;
+  function initRoomTranslators() {
+    roomTranslators = {
+      '^janus-vfs:': elation.janusweb.translators.janusvfs({janus: janus}),
+      '^about:blank$': elation.janusweb.translators.blank({janus: janus}),
+      '^bookmarks$': elation.janusweb.translators.bookmarks({janus: janus}),
+      '^dat:': elation.janusweb.translators.dat({janus: janus}),
+      '^https?:\/\/(www\.)?reddit.com': elation.janusweb.translators.reddit({janus: janus}),
+      '^error$': elation.janusweb.translators.error({janus: janus}),
+      '^default$': elation.janusweb.translators.default({janus: janus})
+    };
+  }
   elation.component.add('engine.things.janusroom', function() {
     this.postinit = function() {
       elation.engine.things.janusroom.extendclass.postinit.call(this);
@@ -27,6 +39,7 @@ elation.require([
         'baseurl': { type: 'string', default: false },
         'source': { type: 'string' },
         'skybox': { type: 'boolean', default: true, set: this.toggleSkybox },
+        'skybox_intensity': { type: 'float', set: this.setSkybox, default: 1.0 },
         'skybox_equi': { type: 'string', set: this.setSkybox },
         'skybox_left_id': { type: 'string', set: this.setSkybox },
         'skybox_right_id': { type: 'string', set: this.setSkybox },
@@ -68,7 +81,7 @@ elation.require([
         'server': { type: 'string' },
         'port': { type: 'int' },
         'rate': { type: 'int', default: 200 },
-        'voip': { type: 'string', default: 'janus' },
+        'voip': { type: 'string', default: 'none' },
         'voipid': { type: 'string' },
         'voiprange': { type: 'float', default: 1 },
         'voipserver': { type: 'string', default: 'voip.janusxr.org' },
@@ -79,17 +92,13 @@ elation.require([
         'requires': { type: 'string' },
         'onload': { type: 'string' },
         'sync': { type: 'boolean', default: false },
-        'pointerlock': { type: 'boolean', default: true },
+        'pointerlock': { type: 'boolean', default: true, set: this.updatePointerLock },
       });
-      this.translators = {
-        '^janus-vfs:': elation.janusweb.translators.janusvfs({janus: this.janus}),
-        '^about:blank$': elation.janusweb.translators.blank({janus: this.janus}),
-        '^bookmarks$': elation.janusweb.translators.bookmarks({janus: this.janus}),
-        '^dat:': elation.janusweb.translators.dat({janus: this.janus}),
-        '^https?:\/\/(www\.)?reddit.com': elation.janusweb.translators.reddit({janus: this.janus}),
-        '^error$': elation.janusweb.translators.error({janus: this.janus}),
-        '^default$': elation.janusweb.translators.default({janus: this.janus})
-      };
+
+      if (!roomTranslators) {
+        initRoomTranslators();
+      }
+
       this.spawnpoint = new THREE.Object3D();
       this.roomsrc = '';
       this.changes = {};
@@ -113,6 +122,7 @@ elation.require([
       this.customElements = {};
       this.unknownElements = {};
       this.eventlistenerproxies = {};
+      this.pendingScriptMap = {};
 
       // FIXME - binding functions to this instance so we can unbind events later.  Should be done at a lower level
       this.onRoomEdit = elation.bind(this, this.onRoomEdit);
@@ -138,6 +148,7 @@ elation.require([
         let hashidx = this.url.indexOf('#');
         if (hashidx != -1) {
           this.urlhash = this.url.substr(hashidx+1);
+          this.setHash(this.urlhash)
           this.url = this.url.substr(0, hashidx);
         }
         this.roomid = md5(this.url);
@@ -148,6 +159,8 @@ elation.require([
         this.loadFromSource(this.source);
       }
       elation.events.add(this, 'thing_remove', elation.bind(this, this.onThingRemove));
+
+      document.addEventListener('visibilitychange', ev => this.handleVisibilityChange());
     }
     this.createChildren = function() {
       this.collidable = false;
@@ -208,13 +221,13 @@ elation.require([
       }
     }
     this.setActive = function() {
+      this.active = true;
       this.setSkybox();
       this.setFog();
       this.updateBloom();
       this.updateToneMapping();
       this.setNearFar();
       this.setPlayerPosition();
-      this.active = true;
       elation.events.fire({element: this, type: 'room_active', data: this});
     }
     this.setPlayerPosition = function(pos, orientation) {
@@ -274,7 +287,7 @@ elation.require([
         let obj = this.getObjectById(this.urlhash);
         if (obj) {
           obj.localToWorld(spawnpoint.position.set(0,0,0));
-          spawnpoint.orientation.setFromRotationMatrix(obj.objects['3d'].matrixWorld);
+          spawnpoint.orientation.setFromRotationMatrix(obj.objects['3d'].matrixWorld.lookAt(spawnpoint.position, obj.localToWorld(V(0,0,1)), obj.localToWorld(V(0,1,0).sub(spawnpoint.position))));
         }
       }
       return spawnpoint;
@@ -307,9 +320,11 @@ elation.require([
         elation.events.add(equi, 'asset_load', ev => {
           this.skyboxtexture = ev.target._texture;
           this.skyboxtexture.mapping = THREE.EquirectangularReflectionMapping;
+          this.skyboxtexture.encoding = THREE.sRGBEncoding;
           if (this.janus.currentroom === this) {
             this.skyboxobj.setTexture(this.skyboxtexture);
           }
+          elation.events.fire({element: this, type: 'skybox_update'});
         });
         equi.getInstance();
       } else if (hasSkybox) {
@@ -470,13 +485,17 @@ elation.require([
       }
     }
     this.updateToneMapping = function() {
-      this.engine.systems.render.renderer.toneMapping = this.toneMappingTypes[this.tonemapping_type] || 0;
-      this.engine.systems.render.renderer.toneMappingExposure = this.tonemapping_exposure;
-      this.refresh();
+      if (this.active) {
+        this.engine.systems.render.renderer.toneMapping = this.toneMappingTypes[this.tonemapping_type] || 0;
+        this.engine.systems.render.renderer.toneMappingExposure = this.tonemapping_exposure;
+        this.refresh();
+      }
     }
     this.setNearFar = function() {
-      this.engine.client.player.camera.camera.near = this.properties.near_dist;
-      this.engine.client.player.camera.camera.far = this.properties.far_dist;
+      if (this.active) {
+        this.engine.client.player.camera.camera.near = this.properties.near_dist;
+        this.engine.client.player.camera.camera.far = this.properties.far_dist;
+      }
     }
     this.showDebug = function() {
       this.engine.client.player.disable();
@@ -619,7 +638,7 @@ elation.require([
             this.loadFromSource(data);
           }), 
           failurecallback: elation.bind(this, function(xhr) {
-            var translator = this.translators['^error$'];
+            var translator = roomTranslators['^error$'];
             translator.exec({janus: this.properties.janus, room: this, error: xhr.status || 404})
                       .then(elation.bind(this, function(objs) {
                         var datapath = elation.config.get('janusweb.datapath', '/media/janusweb');
@@ -679,7 +698,7 @@ elation.require([
           //this.parseerror = false;
           elation.events.fire({element: this, type: 'room_load_processed'});
           elation.events.fire({type: 'janus_room_load', element: this});
-          if (this.pendingassets.length == 0) {
+          if (this.pendingassets.length == 0 && !this.completed) {
             setTimeout(() => elation.events.fire({element: this, type: 'room_load_complete'}), 0);
           }
         } catch (e) {
@@ -885,9 +904,9 @@ elation.require([
             // If no reciprocal link was found, spawn one so we can find our way back
             let linkrot = new EulerDegrees();
             linkrot.radians.copy(this.spawnpoint.rotation);
-            //linkrot.x *= THREE.Math.RAD2DEG;
+            //linkrot.x *= THREE.MathUtils.RAD2DEG;
             linkrot.y = linkrot.y + 180;
-            //linkrot.z *= THREE.Math.RAD2DEG;
+            //linkrot.z *= THREE.MathUtils.RAD2DEG;
             let linkpos = this.spawnpoint.localToWorld(V(0,0,player.fatness/2));
             this.createObject('link', {
               pos: linkpos,
@@ -973,7 +992,6 @@ elation.require([
 
         if (assets.scripts) {
           this.pendingScripts = 0;
-          this.pendingScriptMap = {};
           this.loadScripts(assets.scripts);
         }
 
@@ -1024,11 +1042,11 @@ elation.require([
       });
     }
     this.getTranslator = function(url) {
-      var keys = Object.keys(this.translators);
+      var keys = Object.keys(roomTranslators);
       for (var i = 0; i < keys.length; i++) {
         var re = new RegExp(keys[i]);
         if (url.match(re)) {
-          return this.translators[keys[i]];
+          return roomTranslators[keys[i]];
         }
       }
       // TODO - implement default page handling as translator
@@ -1064,7 +1082,7 @@ elation.require([
 
         if (this.audionodes) {
           this.audionodes.gain.connect(this.audionodes.listener.getInput());
-console.log('connect room audio to graph', this.audionodes.gain, this.audionodes.listener.getInput(), this);
+          //console.log('connect room audio to graph', this.audionodes.gain, this.audionodes.listener.getInput(), this);
           this.fadeAudioIn(2);
         }
         this.engine.systems.controls.pointerLockEnabled = this.pointerlock;
@@ -1508,6 +1526,7 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
             type: args.type,
             format: args.format,
             hls: args.hls,
+            proxy: args.proxy,
             baseurl: this.baseurl
           });
         }
@@ -1753,10 +1772,12 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
           this.pendingassets.splice(idx, 1);
           if (this.pendingassets.length == 0) {
             this.applyingEdits = false;
-            setTimeout(elation.bind(this, function() {
-              this.completed = true;
-              elation.events.fire({element: this, type: 'room_load_complete'});
-            }), 0);
+            if (!this.completed) {
+              setTimeout(elation.bind(this, function() {
+                  this.completed = true;
+                  elation.events.fire({element: this, type: 'room_load_complete'});
+              }), 0);
+            }
           }
         }
       }
@@ -1877,6 +1898,10 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
         }
       }
 */
+      // FIXME - hack to disable XR rendering while room is still loading. this can be handled better.
+      if (this.engine.systems.render.views.xr && this.engine.systems.render.renderer.xr.isPresenting) {
+        this.engine.systems.render.views.xr.enabled = this.completed;
+      }
       this.janus.scriptframeargs[0] = ev.data.delta * 1000;
       elation.events.fire({element: this, type: 'janusweb_script_frame', data: ev.data.delta});
       elation.events.fire({element: this, type: 'janusweb_script_frame_end', data: ev.data.delta});
@@ -2069,8 +2094,10 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
           sync:          ['property', 'sync'],
           js_id:         ['property', 'roomid'],
           pickable:      ['property', 'pickable'],
+          audionodes:    ['property', 'audionodes'],
 
           skybox:         ['property', 'skybox'],
+          skybox_intensity: ['property', 'skybox_intensity'],
           skybox_equi:    ['property', 'skybox_equi'],
           skybox_left_id: ['property', 'skybox_left_id'],
           skybox_right_id:['property', 'skybox_right_id'],
@@ -2166,29 +2193,72 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
           //changestr += this.currentroom.changes[id];
           var change = this.changes[id];
           var real = this.getObjectFromProxy(change);
+          let propdefs = real._thingdef.properties,
+              proxydefs = change._proxydefs;
           if (real) {
-            var xmltype = typemap[real.type] || 'Object';
+            var xmltype = false;
+            if (room.customElements) {
+              for (let k in room.customElements) {
+                if (room.customElements[k].classname == real.type) {
+                  xmltype = k;
+                  break;
+                }
+              }
+            }
+            if (!xmltype) {
+              if (real.type in janus.customElements) {
+                xmltype = real.type;
+              }
+            }
+            if (!xmltype) {
+              xmltype = typemap[real.type] || 'Object';
+            }
             let xmlnode = xmldoc.createElement(xmltype);
             
             var attrs = Object.keys(change);
             for (var i = 0; i < attrs.length; i++) {
               var k = attrs[i];
 
+              let propdef = propdefs[proxydefs[k][1]];
+
               if (ignoreattributes.indexOf(k) != -1) continue;
 
+              let defaultval = (propdef ? propdef.default : null);
               var val = change[k];
-              if (val instanceof THREE.Vector2 ||
-                  val instanceof THREE.Quaternion ||
-                  val instanceof THREE.Vector3) {
-                val = val.toArray().map(function(n) { return (+n).toFixed(4); }).join(' ');
+              if (val instanceof THREE.Vector2) {
+                if (defaultval instanceof THREE.Vector2) defaultval = defaultval.toArray();
+                //if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1]))) {
+                  val = val.toArray().map(function(n) { return (+n).toFixed(4); }).join(' ');
+                //} else {
+                //  val = null;
+                //}
+              } else if (val instanceof THREE.Quaternion) {
+                //if (defaultval instanceof THREE.Quaternion) defaultval = defaultval.toArray();
+                //if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1] && val.z == defaultval[2] && val.w == defaultval[3]))) {
+                  val = val.toArray().map(function(n) { return (+n).toFixed(4); }).join(' ');
+                //} else {
+                //  val = null;
+                //}
+              } else if (val instanceof THREE.Vector3) {
+                if (defaultval instanceof THREE.Vector3) defaultval = defaultval.toArray();
+                //if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1] && val.z == defaultval[2]))) {
+                  val = val.toArray().map(function(n) { return (+n).toFixed(4); }).join(' ');
+                //} else {
+                //  val = null;
+                //}
               } else if (val instanceof THREE.Euler) {
-                val = [val.x.toFixed(4), val.y.toFixed(4), val.z.toFixed(4)].join(' ');
+                if (defaultval instanceof THREE.Euler) defaultval = defaultval.toArray();
+                //if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1] && val.z == defaultval[2]))) {
+                  val = [val.x.toFixed(4), val.y.toFixed(4), val.z.toFixed(4)].join(' ');
+                //} else {
+                //  val = null;
+                //}
               } else if (val instanceof THREE.Color) {
-                if (k == 'col' && real.colorIsDefault) {
-                  val = null;
-                } else {
+                //if (k == 'col' && real.colorIsDefault) {
+                //  val = null;
+                //} else {
                   val = val.toArray().map(function(n) { return +n.toFixed(4); }).join(' ');
-                }
+                //}
               } else if (elation.utils.isString(val) && val.indexOf('blob:') == 0) {
                 var xhr = new XMLHttpRequest();
 
@@ -2211,6 +2281,15 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
                 }
                 val = 'data:image/png;base64,' + btoa(binary);
 */
+              } else if (elation.utils.isArray(val)) {
+                //if ('default' in propdef && val.length == 0) {
+                  // FIXME - this assumes if a default array is provided, it's probably empty. This may not always be true.
+                //  val = null;
+                //}
+              } else {
+                //if ('default' in propdef && val == defaultval) {
+                //  val = null;
+                //}
               }
 
               if (val !== null && val !== undefined && typeof val != 'function') {
@@ -2403,7 +2482,7 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
           } else if (val instanceof THREE.Euler) {
             if (defaultval instanceof THREE.Euler) defaultval = defaultval.toArray();
             if (!('default' in propdef) || ('default' in propdef && !(val.x == defaultval[0] && val.y == defaultval[1] && val.z == defaultval[2]))) {
-              objectsrc += ' ' + k + '="' + val.toArray().slice(0, 3).map(n => Math.round((n * THREE.Math.RAD2DEG) * 10000) / 10000).join(' ') + '"';
+              objectsrc += ' ' + k + '="' + val.toArray().slice(0, 3).map(n => Math.round((n * THREE.MathUtils.RAD2DEG) * 10000) / 10000).join(' ') + '"';
             }
           } else if (val instanceof THREE.Quaternion) {
             if (defaultval instanceof THREE.Quaternion) defaultval = defaultval.toArray();
@@ -2512,10 +2591,11 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
           _ray = new THREE.Raycaster();
       _ray.params.Line.threshold = 3;
       _ray.params.Points.threshold = 3;
-      return function(dir, pos, classname, maxdist) {
+      return function(dir, pos, classname, maxdist, colliderroot=null) {
         _ray.set(pos, dir);
         _ray.far = maxdist || Infinity;
-        var intersections = _ray.intersectObject(this.colliders, true);
+        if (!colliderroot) colliderroot = this.colliders; 
+        var intersections = _ray.intersectObject(colliderroot, true);
         var hits = [];
         if (classname) {
           for (var i = 0; i < intersections.length; i++) {
@@ -2598,17 +2678,19 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
             });
             if (!this.loaded && this.pendingScripts) {
               // We're still waiting for the room to finish loading, so wait for the room_load_complete event before checking if we need to load anything else
-              this.addEventListener('room_load_complete', (ev) => {
+              let func = (ev) => {
                 // Room and all of its assets have finished loading. If our required component still isn't available, check the master package list and autoload if possible
                 if (!finished) {
                   this.loadComponentList().then(components => {
                     if (components[k]) {
                       this.loadNewAsset('script', { src: components[k].url, override: { room: this.getProxyObject() } });
                       this._target.loadScripts([{src: components[k].url}]);
+                      this.removeEventListener('room_load_complete', func);
                     }
                   });
                 }
-              });
+              }
+              this.addEventListener('room_load_complete', func);
             } else {
               // Room is already loaded and scripts are processed - we still don't know about this component, so load it up
               this.loadComponentList().then(components => {
@@ -2645,12 +2727,13 @@ console.log('connect room audio to graph', this.audionodes.gain, this.audionodes
     }
     this.dispatchEvent = function(event, target) {
       let firedev = elation.events.fire({element: this, target: target || event.target, event: event});
-/*
       if (!event.element) event.element = target || this;
       var handlerfn = 'on' + event.type;
-      if (this[handlerfn]) {
-        this.executeCallback(this[handlerfn], event);
+      let proxy = this.getProxyObject();
+      if (proxy[handlerfn] && typeof proxy[handlerfn] == 'function') {
+        proxy.executeCallback(proxy[handlerfn], event);
       }
+/*
       let firedev = elation.events.fire(event);
       let returnValue = true;
       firedev.forEach(e => returnValue &= e.returnValue);
@@ -2660,6 +2743,17 @@ console.log('dispatch to parent', event, this, event.target);
       }
 */
     }
+    this.executeCallback = function(callback, args) {
+      if (callback instanceof Function) {
+        callback(args);
+      } else if (elation.utils.isString(callback)) {
+        (function(fn) {
+          var event = args;
+          return eval(callback);
+        }).call(this.getProxyObject(), callback);
+
+      }
+    }
     this.handleDelayedSound = function(ev) {
       // TODO - implement some visual indicator that this room is trying to play sound but was temporarily blocked
     }
@@ -2741,7 +2835,7 @@ console.log('dispatch to parent', event, this, event.target);
             ctx = this.audionodes.listener.context;
         //gain.gain.setValueAtTime(0, ctx.currentTime);
         gain.gain.cancelScheduledValues(ctx.currentTime);
-        gain.gain.linearRampToValueAtTime(0, ctx.currentTime);
+        gain.gain.linearRampToValueAtTime(gain.gain.value, ctx.currentTime);
         gain.gain.linearRampToValueAtTime(value, ctx.currentTime + time);
       }
     }
@@ -2870,6 +2964,22 @@ console.log('unknown material', mat);
       }
       return stats;
     }
+    this.updatePointerLock = function() {
+      this.engine.systems.controls.pointerLockEnabled = this.pointerlock;
+    }
+    this.handleVisibilityChange = function(ev) {
+      if (this.audionodes) {
+        if (document.visibilityState == 'visible') {
+          if (this.audioFadeTimer) clearTimeout(this.audioFadeTimer);
+          if (this.audionodes.gain.gain.value < 1) {
+            this.fadeAudioIn(1);
+          }
+        } else {
+          if (this.audioFadeTimer) clearTimeout(this.audioFadeTimer);
+          this.audioFadeTimer = setTimeout(() => this.fadeAudioOut(10), 10000);
+        }
+      }
+    }
   }, elation.engine.things.generic);
 });
 

package/scripts/text.js

@@ -2,7 +2,6 @@ elation.require(['engine.things.label'], function() {
   elation.component.add('engine.things.janustext', function() {
     this.postinit = function() {
       elation.engine.things.janustext.extendclass.postinit.call(this);
-      this.frameupdates = [];
       this.textcache = this.engine.getScratchObject('textcache');
       this.defineProperties({
         'text':            { type: 'string', default: '', refreshGeometry: true },
@@ -14,7 +13,8 @@ elation.require(['engine.things.label'], function() {
         'zalign':          { type: 'string', default: 'back', refreshGeometry: true },
         'emissive':        { type: 'color', default: 0x000000 },
         'opacity':         { type: 'float', default: 1.0 },
-        'depthTest':       { type: 'bool', default: true },
+        'depth_write':     { type: 'bool', default: true },
+        'depth_test':      { type: 'bool', default: true },
         'thickness':       { type: 'float', refreshGeometry: true },
         'segments':        { type: 'int', default: 6, refreshGeometry: true },
         'bevel':           { type: 'bool', default: false, refreshGeometry: true },
@@ -29,7 +29,6 @@ elation.require(['engine.things.label'], function() {
         'wireframe':       { type: 'boolean', default: false, set: this.updateMaterial, comment: 'Wireframe rendering' },
       });
       this.emptygeometry = new THREE.BufferGeometry();
-      elation.events.add(this.engine, 'engine_frame', elation.bind(this, this.handleFrameUpdates));
     }
     this.createObject3D = function() {
       this.objects['3d'] = new THREE.Object3D();
@@ -82,6 +81,9 @@ elation.require(['engine.things.label'], function() {
         this.mesh = mesh;
       }
       this.objects['3d'].add(mesh);
+      setTimeout(() => {
+        //this.setCollider('box', this.getBoundingBox(true));
+      }, 0);
       this.refresh();
     }
     this.createTextMaterial = function() {
@@ -91,7 +93,8 @@ elation.require(['engine.things.label'], function() {
         transparent: this.properties.opacity < 1,
         emissive: this.properties.emissive, 
         flatShading: false,
-        depthTest: this.properties.depthTest,
+        depthTest: this.depth_test,
+        depthWrite: this.depth_write,
         reflectivity: .5,
         wireframe: this.wireframe,
       };

package/scripts/websurface.js

@@ -45,7 +45,7 @@ elation.require(['engine.things.generic'], function() {
       elation.events.add(this, 'click', elation.bind(this, this.click));
     }
     this.createObject3D = function() {
-      var plane = new THREE.PlaneBufferGeometry(1,1);
+      var plane = new THREE.PlaneGeometry(1,1);
 
       var mat = new THREE.MeshBasicMaterial({
         color: 0x000000,
@@ -113,7 +113,7 @@ elation.require(['engine.things.generic'], function() {
       if (!this.active) {
         var canvas = this.engine.client.view.rendersystem.renderer.domElement;
         canvas.style.pointerEvents = 'none';
-        canvas.style.position = 'absolute';
+        //canvas.style.position = 'absolute';
         this.engine.systems.controls.releasePointerLock();
         this.active = true;
         this.selectionmaterial.color.copy(this.activecolor);
@@ -127,7 +127,7 @@ setTimeout(elation.bind(this, function() {
       if (this.active) {
         var canvas = this.engine.client.view.rendersystem.renderer.domElement;
         canvas.style.pointerEvents = 'all';
-        canvas.style.position = 'static';
+        //canvas.style.position = 'static';
         this.engine.systems.controls.requestPointerLock();
         ev.stopPropagation();
         ev.preventDefault();