janusweb 1.5.43 → 1.5.44

package/media/assets/webui/apps/comms/comms.css

@@ -169,4 +169,4 @@ janus-voip-picker>ul li button[disabled] {
   color: #888;
   text-shadow: 0 0 5px #444;
   cursor: not-allowed;
-
+}

package/media/assets/webui/apps/locomotion/teleporter.js

@@ -167,8 +167,14 @@ janus.registerElement('locomotion_teleporter', {
         speed = dir.length();
         dir.divideScalar(speed);
         let hits = room.raycast(dir, p0, null, speed);
-        if (hits.length > 0) {
-          let hit = hits[0];
+        let hit = false;
+        for (let j = 0; j < hits.length; j++) {
+          if (hits[j].object !== player) {
+            hit = hits[j];
+            break;
+          }
+        }
+        if (hit) {
           p1.copy(hit.point);
           if (hit.distance < 200) {
             this.pos = player.worldToLocal(hit.point);

package/media/assets/webui/apps/xrmenu/xrmenu.js

@@ -21,6 +21,7 @@ janus.registerElement('xrmenu', {
     this.panels = {};
 
     let xrmenu = janus.ui.apps.default.apps.xrmenu;
+    if (!xrmenu) return;
     let asseturl = xrmenu.resolveFullURL('./xrmenu-assets.json');
     fetch(asseturl).then(res => res.json()).then(assetlist => {
       this.assetpack = elation.engine.assets.loadJSON(assetlist, xrmenu.resolveFullURL('./'));
@@ -186,28 +187,36 @@ janus.registerElement('xrmenu-popup', {
     this.shadowdom = container.attachShadow({mode: 'open'});
     //container.appendChild(element);
 
-setTimeout(() => {
-console.log('LOADED????', janus.ui, janus.ui.apps.default);
-    this.initShadowStylesheets();
-}, 0);
-    this.shadowdom.appendChild(element);
+    setTimeout(() => {
+      this.initShadowStylesheets();
+    }, 0);
+    //this.shadowdom.appendChild(element);
+    let a = document.createElement('html');
+    let b = document.createElement('body');
+    b.className = 'dark janusweb';
+    a.appendChild(b);
+    this.shadowdom.appendChild(a);
+    b.appendChild(element);
     document.body.appendChild(container);
 
+    elation.events.add(element, 'styleupdate', ev => {
+      this.initShadowStylesheets();
+    });
 
-container.style.position = 'absolute';
-container.style.top = '0';
-container.style.left = '0';
-container.style.zIndex = -1000;
-container.style.width = this.width + 'px';
-container.style.height = this.height + 'px';
-container.style.overflow = 'auto';
-container.style.opacity = 0;
-//container.style.transform = 'translateX(-40000px)';
-//container.style.border = '1px solid red';
+    container.style.position = 'absolute';
+    container.style.top = '0';
+    container.style.left = '0';
+    container.style.zIndex = -1000;
+    container.style.width = this.width + 'px';
+    container.style.height = this.height + 'px';
+    container.style.overflow = 'hidden';
+    container.style.opacity = 0;
+    //container.style.transform = 'translateX(-40000px)';
+    //container.style.border = '1px solid red';
 
-this.elementcontainer = container;
+    this.elementcontainer = container;
 
-  this.initElementCanvas();
+    this.initElementCanvas();
 
     this.plane = this.createObject('object', {
       id: 'plane',
@@ -249,6 +258,7 @@ canvas.style.border = '1px solid red';
     this.loadNewAsset('image', {
       id: 'xrmenu-element-canvas',
       canvas: canvas,
+      transparent: true,
     });
     this.plane.image_id = 'xrmenu-element-canvas';
     this.canvas = canvas;
@@ -264,12 +274,23 @@ canvas.style.border = '1px solid red';
     let promises = [];
     for (let i = 0; i < document.styleSheets.length; i++) {
       //promises.push(new Promise(accept => {
-        let styleel = document.createElement('link');
-        styleel.rel = 'stylesheet';
-        styleel.href = elation.engine.assets.corsproxy + document.styleSheets[i].href;
-        //styleel.onload = accept;
-        this.shadowdom.appendChild(styleel);
-console.log('add link', document.styleSheets[i].href);
+        if (document.styleSheets[i].href ) {
+          // external stylesheet
+          let styleel = document.createElement('link');
+          styleel.rel = 'stylesheet';
+          styleel.href = elation.engine.assets.corsproxy + document.styleSheets[i].href;
+          this.shadowdom.appendChild(styleel);
+        } else if (document.styleSheets[i].cssRules.length > 0) {
+          // inline <style>  definition
+          let txt = '';
+          let sheet = document.styleSheets[i];
+          for (let i = 0; i < sheet.cssRules.length; i++) {
+            txt += sheet.cssRules[i].cssText + '\n';
+          }
+          let styleel = document.createElement('style');
+          styleel.appendChild(document.createTextNode(txt));
+          this.shadowdom.appendChild(styleel);
+        }
       //}));
     }
 /*
@@ -336,7 +357,6 @@ setTimeout(() => {
             clientY: mousexy[1],
             view: window,
           });
-console.log(mouseover);
           target.dispatchEvent(mouseover);
         }
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "janusweb",
   "description": "Web client for JanusVR worlds",
-  "version": "1.5.43",
+  "version": "1.5.44",
   "main": "scripts/janusweb.js",
   "author": "James Baicoianu",
   "license": "MIT",

package/scripts/client.js

@@ -133,6 +133,17 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
           this.startXR();
         });
       }
+      window.addEventListener('load', ev => {
+        window.scrollTo(0, 1);
+      });
+      window.addEventListener('touchend', ev => {
+        // FIXME - useragent hack isn't the best way of handling this, but it beats getting stuck in non-immersive fullscreen mode while in a VR headset
+        if (navigator.userAgent.indexOf('OculusBrowser') != -1) {
+          this.startXR();
+        } else if (!this.view.isFullscreen()) {
+          this.toggleFullscreen({value: 1});
+        }
+      });
     }
     initButtons() {
       this.sharebutton = elation.ui.button({classname: 'janusweb_sharing', label: 'Share'});

package/scripts/config.js

@@ -26,7 +26,7 @@ elation.config.set('share.targets.yahoo.clientid', '374523350201-p566ctvssq49sa4
 elation.config.set('share.targets.facebook.clientid', '1197654320349894');
 elation.config.set('share.targets.file.enabled', true);
 
-elation.config.set('serviceworker.enabled', true);
+elation.config.set('serviceworker.enabled', false);
 
 // FIXME - hack for dev, we should support role-based config
 if (typeof document != 'undefined' && document.location.origin == 'https://bai.dev.supcrit.com') {

package/scripts/janusbase.js

@@ -178,7 +178,7 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
               collider.traverse(n => {
                 // Ignore collider if it's too high-poly
                 if (n instanceof THREE.Mesh && n.geometry instanceof THREE.BufferGeometry) {
-                  if (n.geometry.attributes.position.count > 65536) {
+                  if (n.geometry.attributes.position.count > 65536 * 3) {
                     console.warn('Collider mesh rejected, too many polys!', collision_id, this, n, collider);
                     elation.events.fire({type: 'thing_collider_rejected', element: this, data: {root: collider, mesh: n}});
                     remove.push(n);
@@ -564,7 +564,8 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
             hasalpha: args.hasalpha,
             maxsize: args.maxsize,
             preload: args.preload,
-            baseurl: this.baseurl
+            baseurl: this.baseurl,
+            srgb: args.srgb
           };
           assetlist.push(assetargs);
         } else if (args.canvas) {
@@ -766,8 +767,8 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
           dir = new THREE.Vector3(),
           up = new THREE.Vector3();
       return function(ev) {
-        let parent = this.properties.parent;
-        let billboard = this.properties.billboard;
+        const parent = this.properties.parent;
+        const billboard = this.properties.billboard;
         if (billboard && parent) {
           //player.camera.localToWorld(playerpos.set(0,0,0));
           //this.localToWorld(objpos.set(0,0,0));
@@ -795,14 +796,11 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
           */
           // TODO - Simple trig makes this much faster, but to get the same functionality as before we'll need to implement each dimension
           //        For now, we only support billboarding with the Y axis locked (eg, doom sprites)
-          let views = this.engine.systems.render.views;
-          let camera = player.camera;
-          if (views.xr && views.xr.enabled && views.xr.camera && views.xr.camera.userData.thing) {
-            camera = views.xr.camera.userData.thing;
-          }
-          parent.worldToLocal(camera.getWorldPosition(playerpos)).sub(this.position);
-          dir.copy(playerpos).normalize();
           if (billboard == 'y' || billboard === true || billboard == 'true') {
+            const views = this.engine.systems.render.views;
+            const camera = (views.xr && views.xr.enabled && views.xr.camera && views.xr.camera.userData.thing ? views.xr.camera.userData.thing : player.camera)
+            parent.worldToLocal(camera.getWorldPosition(playerpos)).sub(this.position);
+            dir.copy(playerpos).normalize();
             this.rotation.radians.set(0, Math.atan2(dir.x, dir.z), 0);
             this.frameupdates['rotation'] = true;
           }
@@ -837,7 +835,7 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
 
         this.resetFrameUpdates();
         this.dispatchEvent({type: 'update', data: ev.data, bubbles: false});
-        var proxy = this.getProxyObject();
+        const proxy = this.getProxyObject();
         if (this.created && typeof proxy.update == 'function') {
           proxy.update(ev.data);
         }
@@ -918,6 +916,8 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
       this.frameupdates['zdir'] = false;
       this.frameupdates['rotation'] = false;
       this.frameupdates['rotation_dir'] = false;
+      this.frameupdates['rotation_order'] = false;
+      this.frameupdates['fwd'] = false;
 
       for (var k in this.lastframevalues) {
         this.lastframevalues[k].copy(this.properties[k]);
@@ -1096,12 +1096,12 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
       if (!event.target) {
         event.target = target || event.element;
       }
-/*
+
       var handlerfn = 'on' + event.type;
       if (handlerfn in this) {
         this.executeCallback(this[handlerfn], event);
       }
-*/
+
       // Bubble event up to parents, unless the event was thrown with bubbling disabled or an event handler called stopPropagation()
       let firedev = elation.events.fire(event);
       let returnValue = true;

package/scripts/janusghost.js

@@ -828,10 +828,12 @@ return;
       let headaction = this.headaction || this._target.headaction;
       if (headaction && headaction._clip.tracks[0]) {
         let track = headaction._clip.tracks[0];
-        track.values[0] = orientation.x * (invert ? -1 : 1);
-        track.values[1] = orientation.y * (invert ? -1 : 1);
-        track.values[2] = orientation.z * (invert ? -1 : 1);
-        track.values[3] = orientation.w; // * (invert ? -1 : 1);
+        if (track) {
+          track.values[0] = orientation.x * (invert ? -1 : 1);
+          track.values[1] = orientation.y * (invert ? -1 : 1);
+          track.values[2] = orientation.z * (invert ? -1 : 1);
+          track.values[3] = orientation.w; // * (invert ? -1 : 1);
+        }
       }
     }
     this.blink = function() {

package/scripts/janusplayer.js

@@ -51,6 +51,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       elation.events.add(this.engine.client.view.container, 'touchstart', elation.bind(this, this.handleTouchStart));
       elation.events.add(this.engine.client.view.container, 'touchmove', elation.bind(this, this.handleTouchMove));
       elation.events.add(this.engine.client.view.container, 'touchend', elation.bind(this, this.handleTouchEnd));
+      elation.events.add(this.engine.client.view.container, 'touchcancel', elation.bind(this, this.handleTouchEnd));
 
       this.controlstate2 = this.engine.systems.controls.addContext('janusplayer', {
         'toggle_view': ['keyboard_nomod_v,keyboard_shift_v', elation.bind(this, this.toggleCamera)],
@@ -556,8 +557,34 @@ document.body.dispatchEvent(click);
       }
     }
     this.start = function() {
+      if (!this.started) {
+        if (!this.static) {
+          elation.events.add(this.room, 'janusweb_script_frame_end', this.handleFrameUpdates);
+        } else {
+          this.handleFrameUpdates({data: {dt: 0}});
+        }
+        this.started = true;
+      }
+      for (var k in this.children) {
+        if (this.children[k].start) {
+          this.children[k].start();
+        }
+      }
+      this.dispatchEvent({type: 'start', bubbles: false});
     }
     this.stop = function() {
+      for (var k in this.children) {
+        if (this.children[k].stop) {
+          this.children[k].stop();
+        }
+      }
+      if (this.started) {
+        if (!this.static) {
+          elation.events.remove(this.room, 'janusweb_script_frame_end', this.handleFrameUpdates);
+        }
+        this.started = false;
+        this.dispatchEvent({type: 'stop', bubbles: false});
+      }
     }
     this.getProxyObject = function() {
       if (!this._proxyobject) {
@@ -898,9 +925,9 @@ document.body.dispatchEvent(click);
           this.setCollider('sphere', {
             radius: this.collision_radius,
           });
-          this.pickable = false;
           this.collidable = false;
 */
+          this.pickable = false;
           this.setCollider('capsule', {
             radius: this.collision_radius,
             length: 1,
@@ -989,8 +1016,9 @@ document.body.dispatchEvent(click);
         }
       }
       if (!document.fullscreenElement) {
-        //this.engine.client.toggleFullscreen({data: 1});
+        this.engine.client.toggleFullscreen({data: 1});
       }
+      this.cancelTouchMovement(ev);
     }
     this.handleTouchMove = function(ev) {
       if (ev.defaultPrevented) return;
@@ -1026,22 +1054,22 @@ document.body.dispatchEvent(click);
           this.touchcache.positions[touch.identifier][0] = touch.clientX;
           this.touchcache.positions[touch.identifier][1] = touch.clientY;
         }
-
       }
+      this.cancelTouchMovement(ev);
     }
     this.handleTouchEnd = function(ev) {
-      for (let i = 0; i < ev.changedTouches.length; i++) {
-        let touch = ev.changedTouches[i];
+      this.cancelTouchMovement(ev);
+    }
+    this.cancelTouchMovement = function(ev) {
+      for (let i = 0; i < ev.touches.length; i++) {
+        let touch = ev.touches[i];
         if (touch.identifier === this.touchindex[0]) {
-          this.controlstate.move_right = 0;
-          this.controlstate.move_forward = 0;
-          this.touchindex[0] = null;
-        } else if (touch.identifier === this.touchindex[1]) {
-          this.controlstate.turn_right = 0;
-          this.controlstate.look_down = 0;
-          this.touchindex[1] = null;
+          return;
         }
       }
+      this.controlstate.move_right = 0;
+      this.controlstate.move_forward = 0;
+      this.touchindex[0] = null;
     }
     this.updatePartyMode = function(key, value) {
       if (typeof value != 'undefined') {

package/scripts/janusweb.js

@@ -315,7 +315,7 @@ elation.require([
         baseurl: baseurl,
         corsproxy: this.corsproxy,
         deferload: true
-      });
+      }, makeactive && typeof makeactive != 'undefined');
 
       if (this.currentroom && !stripreferrer) {
         room.referrer = this.currentroom.url;
@@ -356,7 +356,7 @@ elation.require([
           room = this.rooms[roomid];
         }
       } else if (url.type == 'janusroom') {
-        room = url;
+        room = url._target || url;
         url = room.url;
       }
       var player = this.engine.client.player;
@@ -424,7 +424,7 @@ elation.require([
         janus: this,
         corsproxy: this.corsproxy,
         deferload: true
-      });
+      }, !makeactive);
 
       this.rooms[newroom.roomid] = newroom;
       //console.log('made new room', url, room);
@@ -485,9 +485,22 @@ elation.require([
         var hashurl = hashargs['janus.url'];
         if (hashurl && hashurl != this.properties.url && !this.loading) {
           this.setActiveRoom(hashurl, this.currentroom.url, true);
-        } else if (!hashurl && this.properties.url != this.homepage && !document.location.hash) {
+        } else if (!hashurl && this.properties.url != this.homepage) { // && !document.location.hash) {
           this.setActiveRoom(this.homepage);
         }
+        if (document.location.hash && document.location.hash.substr(1) in room.objects) {
+          let jumpto = room.objects[document.location.hash.substr(1)];
+          if (typeof jumpto.activate == 'function') {
+            jumpto.activate();
+          } else if (typeof jumpto.navigate == 'function') {
+            jumpto.navigate();
+          } else {
+            player.pos = jumpto.pos;
+            player.xdir.copy(jumpto.xdir);
+            player.ydir.copy(jumpto.ydir);
+            player.zdir.copy(jumpto.zdir);
+          }
+        }
       }
     }
 

package/scripts/janusxrplayer.js

@@ -570,7 +570,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
       create() {
         this.lasercolor = V(1,0,0);
         this.laser = this.createObject('linesegments', {
-          positions: [V(0,0,0), V(0,0,-.5)],
+          positions: [V(0,0,0), V(0,0,-5)],
           opacity: .8,
           col: this.lasercolor,
           visible: false,
@@ -580,7 +580,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           id: 'cylinder',
           col: 'white',
           lighting: false,
-          scale: V(.005, .5, .005),
+          scale: V(.005, 5, .005),
           rotation: V(-90,0,0),
           opacity: .2,
         });
@@ -634,6 +634,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           this.laser.updateColor();
           this.cursor.image_id = 'cursor_dot_active';
           this.cursor.opacity = player.cursor_opacity;
+          this.bonk.col.setRGB(.5,1,.5);
           this.bonk.opacity = 0.2 * player.cursor_opacity;
           //this.laser.visible = false; // FIXME - hack to disable laser without breaking things
 
@@ -650,6 +651,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           this.laser.updateColor();
           this.cursor.image_id = 'cursor_dot_inactive';
           this.cursor.opacity = player.cursor_opacity / 2;
+          this.bonk.col.setRGB(1,1,1);
           //this.laser.visible = false; // FIXME - hack to disable laser without breaking things
         }
       },
@@ -843,7 +845,9 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           visible: false
         });
         this.tmpobj = new THREE.Object3D();
+        this.tmpquat = new THREE.Quaternion();
         this.jointmaterial = new THREE.MeshPhysicalMaterial({color: 0xccffcc, metalness: 1, roughness: .5, emissive: 0xccffcc, transparent: true});
+        this.tmpobj.matrixAutoUpdate = false;
         this.joints = new THREE.InstancedMesh(new THREE.SphereGeometry(1), this.jointmaterial, 26);
         this.joints.frustumCulled = false;
         this.joints.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
@@ -869,7 +873,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           return;
         }
 
-        let tmpobj = this.tmpobj,
+        let tmpobj = this.tmpobj, tmpquat = this.tmpquat,
             i = 0;
         let poses = this.jointposes;
 /*
@@ -893,30 +897,36 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           }
         }
 */
-        for ( const inputjoint of this.hand.values() ) {
+        const handvalues = this.hand.values(), jointposes = this.jointposes;
+        for ( const inputjoint of handvalues ) {
           const jointpose = xrFrame.getJointPose( inputjoint, xrReferenceFrame );
           const jointname = inputjoint.jointName;
           if (jointpose && jointpose.transform) {
             let radius = Math.max(.002, jointpose.radius); 
+/*
             tmpobj.position.copy(jointpose.transform.position);
             tmpobj.quaternion.copy(jointpose.transform.orientation);
             tmpobj.scale.set(radius, radius, radius);
             tmpobj.updateMatrix();
+*/
+            tmpquat.copy(jointpose.transform.orientation);
+            if (tmpobj.scale.x != radius) tmpobj.scale.set(radius, radius, radius);
+            tmpobj.matrix.compose(jointpose.transform.position, tmpquat, tmpobj.scale)
             this.joints.setMatrixAt(i, tmpobj.matrix);
             //FIVARSlog('xr.debug', 'update joint: ' + i + ', ' + jointname + ', ' + tmpobj.matrix.elements.join(', '));
           }
           i++;
-          this.jointposes[jointname] = jointpose;
+          jointposes[jointname] = jointpose;
         }
         this.joints.instanceMatrix.needsUpdate = true;
         //this.joints.computeBoundingSphere();
 
-        if (this.jointposes['wrist']) this.localToWorld(this.handpos.copy(this.jointposes['wrist'].transform.position));
-        if (this.jointposes['thumb-tip']) this.localToWorld(this.p0.copy(this.jointposes['thumb-tip'].transform.position));
-        if (this.jointposes['index-finger-tip']) this.localToWorld(this.p1.copy(this.jointposes['index-finger-tip'].transform.position));
-        if (this.jointposes['middle-finger-tip']) this.localToWorld(this.p2.copy(this.jointposes['middle-finger-tip'].transform.position));
-        if (this.jointposes['ring-finger-tip']) this.localToWorld(this.p3.copy(this.jointposes['ring-finger-tip'].transform.position));
-        if (this.jointposes['pinky-finger-tip']) this.localToWorld(this.p4.copy(this.jointposes['pinky-finger-tip'].transform.position));
+        if (jointposes['wrist']) this.localToWorld(this.handpos.copy(this.jointposes['wrist'].transform.position));
+        if (jointposes['thumb-tip']) this.localToWorld(this.p0.copy(this.jointposes['thumb-tip'].transform.position));
+        if (jointposes['index-finger-tip']) this.localToWorld(this.p1.copy(this.jointposes['index-finger-tip'].transform.position));
+        if (jointposes['middle-finger-tip']) this.localToWorld(this.p2.copy(this.jointposes['middle-finger-tip'].transform.position));
+        if (jointposes['ring-finger-tip']) this.localToWorld(this.p3.copy(this.jointposes['ring-finger-tip'].transform.position));
+        if (jointposes['pinky-finger-tip']) this.localToWorld(this.p4.copy(this.jointposes['pinky-finger-tip'].transform.position));
         this.isactive = true;
         this.jointmaterial.opacity = player.cursor_opacity;
       }

package/scripts/object.js

@@ -195,7 +195,7 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
         if (this.modelasset) {
           this.initAnimations(this.modelasset.animations);
           if (this.animations && this.anim_id && this.animations[this.anim_id]) {
-            console.log('start animation', this);
+            //console.log('start animation', this);
             this.animations[this.anim_id].play();
             this.activeanimation = this.animations[this.anim_id];
           }
@@ -867,6 +867,12 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
                 m.emissive.copy(this.emissive)
               }
               m.emissiveIntensity = this.emissive_intensity;
+            } else {
+              if (textureEmissive) {
+                m.map = textureEmissive;
+                textureEmissive.encoding = THREE.sRGBEncoding;
+                m.color = new THREE.Color(0xffffff);
+              }
             }
             if (textureAlpha) {
               m.alphaMap = textureAlpha;
@@ -1028,6 +1034,11 @@ elation.require(['janusweb.janusbase', 'janusweb.websurface'], function() {
             }
           }
           if (oldmat.emissiveIntensity !== undefined) m.emissiveIntensity = oldmat.emissiveIntensity;
+        } else {
+          if (oldmat.emissiveMap && !oldmat.map) {
+            m.map = oldmat.emissiveMap;
+            oldmat.color.setRGB(1,1,1);
+          }
         }
 
         m.lightMap = oldmat.lightMap;

package/scripts/portal.js

@@ -21,6 +21,7 @@ elation.require(['janusweb.janusbase'], function() {
         'mirror_recursion': { type: 'integer', default: 2, set: this.updateGeometry },
         'mirror_texturesize': { type: 'integer', default: 1024, set: this.updateGeometry },
         'external': { type: 'boolean', default: false },
+        'preload': { type: 'boolean', default: false },
         'target': { type: 'string', default: '' },
         'round': { type: 'boolean', default: false },
         'cooldown': { type: 'float', default: 1000 },
@@ -289,7 +290,12 @@ elation.require(['janusweb.janusbase'], function() {
               this.closePortal();
             }
           } else if (this.url) {
-            this.properties.janus.setActiveRoom(this.url, room.url);
+            if (this.preload) {
+              let newroom = this.properties.janus.preload(this.url);
+              elation.events.add(newroom, 'room_load_complete', ev => this.properties.janus.setActiveRoom(newroom));
+            } else {
+              this.properties.janus.setActiveRoom(this.url, room.url);
+            }
           }
         }
         var gamepads = this.engine.systems.controls.gamepads;
@@ -320,6 +326,7 @@ elation.require(['janusweb.janusbase'], function() {
           shader_id: ['property', 'shader_id'],
           size: ['property', 'size'],
           round: ['property', 'round'],
+          preload: ['property', 'preload'],
         };
       }
       return this._proxyobject;

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);
@@ -82,15 +94,11 @@ elation.require([
         'sync': { type: 'boolean', default: false },
         '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 = {};
@@ -151,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;
@@ -211,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) {
@@ -475,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();
@@ -624,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');
@@ -684,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) {
@@ -1028,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
@@ -1758,10 +1772,12 @@ elation.require([
           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);
+            }
           }
         }
       }
@@ -1882,6 +1898,10 @@ elation.require([
         }
       }
 */
+      // 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});
@@ -2074,6 +2094,7 @@ elation.require([
           sync:          ['property', 'sync'],
           js_id:         ['property', 'roomid'],
           pickable:      ['property', 'pickable'],
+          audionodes:    ['property', 'audionodes'],
 
           skybox:         ['property', 'skybox'],
           skybox_intensity: ['property', 'skybox_intensity'],
@@ -2706,12 +2727,13 @@ elation.require([
     }
     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);
@@ -2721,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
     }
@@ -2802,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);
       }
     }
@@ -2934,6 +2967,19 @@ console.log('unknown material', mat);
     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 },
@@ -30,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();