janusweb 1.5.56 → 1.7.0

package/README.md

@@ -1,6 +1,6 @@
 <p align="center"><a href="https://web.janusvr.com" target="_blank"><img width="480" alt="JanusWeb" src="https://imgur.com/ejvyphR.jpg"></a></p>
 
-<p align="center"><b>A web framework for building social virtual reality experiences.</b></p>
+<p align="center"><b>A web framework/browser for building rich virtual reality experiences.</b></p>
 
 <div align="center">
   <a href="https://janusvr.com">Site</a>
@@ -11,7 +11,9 @@
   &mdash;
   <a href="https://web.janusvr.com">Demo</a>
   &mdash;
-  <a href="https://github.com/madjin/janus-guide">Docs</a>
+  <a href="https://coderofsalvation.github.io/janus-guide/">Docs</a>
+  &mdash;
+  <a href="https://discord.gg/7eyK2wE">Discord</a>
 </div>
 
 
@@ -39,20 +41,24 @@
 
 ## Features
 
+- [Open Immersive Web-layer](https://madjin.github.io/janus-guide/#/home/about) for browsing XR experiences across the web 
 - Build immersive 3D environments for desktop, mobile, and VR devices using HTML and JS
 - Rendering functionality provided by Three.js / WebGL
+- Separately host WebXR experiences via ([JML](https://madjin.github.io/janus-guide/#/examples/markup) in) any textfile.
 - Oculus Rift, Vive, GearVR, Daydream, and Cardboard support via WebVR API
-- Realtime collaboration across all devices via built-in networking
+- [Realtime collaboration](https://madjin.github.io/janus-guide/#/home/usecases) across all devices via built-in networking
 - Import Collada, OBJ, glTF, and other popular 3d file formats
 - 3D positional audio
 - Gamepad support via the HTML5 Gamepad API
 - Supports hand tracking peripherals like Leap Motion, Oculus Touch, and Vive controllers
 - Support for 2d, sbs3d/ou3d, and 360 degree video textures using HTML5 Video
 - Scriptable client enables many customized uses
+- And [much more](https://madjin.github.io/janus-guide/#/home/toc)
+
 
 ## Using
 
-There are several different ways to use JanusWeb, depending on how much control you want to 
+There are [several different ways](https://madjin.github.io/janus-guide/#/home/usecases) to use JanusWeb, depending on how much control you want to 
 have over the whole system.
 
 ### Use our viewer
@@ -126,7 +132,9 @@ JanusWeb supports several arguments at initialization time to control how it beh
 <table>
   <tr><th> Name           </th><th> Description                            </th><th> Default                  </th></tr>
 
-  <tr><td> autoload       </td><td> Load URL by default or wait for script </td><td> true                     </td></tr>
+  <tr><td> autostart      </td><td> call `elation.janusweb.init({..})` automatically or manually </td><td> true                     </td></tr>
+
+  <tr><td> autoload      </td><td> Load URL by default or wait for script </td><td> true                     </td></tr>
 
   <tr><td> crosshair      </td><td> Show player crosshair                  </td><td> true                     </td></tr>
 
@@ -142,10 +150,6 @@ JanusWeb supports several arguments at initialization time to control how it beh
 
   <tr><td> server         </td><td> Presence server to connect to          </td><td> wss://presence.janusvr.com:5567/</td></tr>
 
-  <tr><td> shownavigation </td><td> Control visibility of navigation bar   </td><td> true                     </td></tr>
-
-  <tr><td> showchat       </td><td> Control visibility of chat             </td><td> true                     </td></tr>
-
   <tr><td> stats          </td><td> Enable render performance stats        </td><td> false                    </td></tr>
 
   <tr><td> url            </td><td> Default page to load                   </td><td> (homepage)               </td></tr>
@@ -160,12 +164,18 @@ JanusWeb supports several arguments at initialization time to control how it beh
                                     for Opus via WebAudio)                 </td><td> false                    </td></tr>
 </table>
 
+> NOTE: see [client.js](https://github.com/jbaicoianu/janusweb/blob/master/scripts/client.js#L65) for the most up to date arguments 
+
 ## Scripting
 After initializing the client, `elation.janusweb.init()` returns a Promise which provides a reference to the client.
 You can programatically control this client to do all sorts of things.  For instance, we can make the client load a
 URL, wait for the world and all of its assets to load, and then take a screenshot of the world after a specified delay:
 
 ```javascript
+<janus-viewer autostart="false">     <!-- disable autostart, we will   -->
+</janus-viewer>                      <!-- call elation.janusweb.init() -->
+
+<script>
 var pageinfo = elation.utils.parseURL(document.location.href),
     urlargs = pageinfo.args || {},
     hashargs = pageinfo.hash || {};
@@ -173,11 +183,11 @@ var pageinfo = elation.utils.parseURL(document.location.href),
 var url = elation.utils.any(hashargs.url, urlargs.url, 'http://www.janusvr.com/index.html'),
     delay = elation.utils.any(hashargs.delay, urlargs.delay, 1000);
 
-elation.janusweb.init({
+elation.janusweb.init({ 
   url: url,
   resolution: '1920x1080',
-  showchat: false,
-  shownavigation: false
+  uiconfig: "./media/assets/webui/default.json" // tweak ui here
+  // more options at https://github.com/jbaicoianu/janusweb/blob/master/scripts/client.js#L93
 }).then(function(client) {
   elation.events.add(client.janusweb.currentroom, 'room_load_complete', function() {
     setTimeout(function() {
@@ -188,7 +198,9 @@ elation.janusweb.init({
       });
     }, delay);
   });
+  elation.janusweb.init = function(){} // init only once 
 });
+</script>
 
 ```
 
@@ -209,6 +221,30 @@ If you need to load a specific version of JanusWeb, all previous versions are st
 
 JanusWeb versions follow the [Semantic Versioning 2.0.0](http://semver.org/) spec, which follows the format ```<major>.<minor>.<patch>``` - for example, at the time of writing (March 2017) the current stable release is **1.0.15**.  So if you want to view this version, you could go to https://web.janusvr.com/1.0.15/ and if you wanted to pull this specific version into your page, you could do so with ```<script src="https://web.janusvr.com/1.0.15/janusweb.js"></script>```.  We also support aliases for the most current version - for instance, https://web.janusvr.com/1.0/ will always refer to the most recent 1.0 release, https://web.janusvr.com/0.9/ the final 0.9 release, etc.
 
+## Ecosystem
+
+Platforms using JanusXR + JanusWeb:
+
+|    | URL | source / docker |
+|----|-----|------------|
+| <img src="https://imgur.com/JMYi81Z.png"/><br><br> | [vesta.janusxr.org](https://vesta.janusxr.org) | |
+| <img src="https://codeberg.org/coderofsalvation/xrforge/media/branch/master/xrforge.jpg"/><br><br> | [xrforge.isvery.ninja](https://xrforge.isvery.ninja) | [codeberg.org](https://codeberg.org/coderofsalvation/xrforge)
+
+Visualisations of hyperlinked Janus clusters across the web:
+* [augmentedperception.com](https://augmentedperception.com) 
+* [panopticon](https://panopticon.spyduck.net/) 
+
+Extra Tools / Components:
+* [custom components](https://github.com/jbaicoianu/janus-custom-components)
+* [janusxr-cli](https://github.com/coderofsalvation/janusxr-cli) swiss army CLI knife for room health/preservation #cli
+* [corsanywhere](https://github.com/Rob--W/cors-anywhere) for hasslefree hopping clusters #stack
+* [janus-gateway](https://janus.conf.meetecho.com/) webrtc/voip-layer [docs](https://janus.conf.meetecho.com/) #stack
+* [janus-server](https://github.com/janusvr/janus-server) multiuser presence layer #stack
+
+Reference:
+* [quick scripting reference](https://github.com/jbaicoianu/janusweb/wiki/Scripting-Support-2.0)
+* [janus guide](https://coderofsalvation.github.io/janus-guide/)
+
 ## Contributing
 JanusWeb is open source, and we welcome any contributions!  Please do report bugs using GitHub Issues,
 and all pull requests will be considered.  We could especially use help with documentation!

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

@@ -320,7 +320,20 @@ console.log('set translation snap', ev.data, ev);
   }
   handleExportClick(ev) {
     let exporter = new THREE.GLTFExporter();
+    let userDatas = new Map();
+    // Store and nullify userData objects for each object before serializing
+    room._target.objects['3d'].traverse(n => {
+      userDatas.set(n, n.userData);
+      n.userData = {};
+    });
     exporter.parse(room._target.objects['3d'], (data) => {
+      // Restore userData objects
+      room._target.objects['3d'].traverse(n => {
+        if (userDatas.has(n)) {
+          n.userData = userDatas.get(n);
+        }
+      });
+
       let filedata = new Blob([data], {type: 'model/gltf-binary'});
 
       var url = window.URL.createObjectURL(filedata);

package/media/assets/webui/apps/locomotion/locomotion-assets.json

@@ -0,0 +1,3 @@
+[
+  { "assettype": "sound", "name": "button-teleport", "src": "./teleport.mp3" }
+]

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

@@ -1,8 +1,15 @@
+/*
+ * for room-specific teleport sound use:
+ *
+ * <room teleport_sound_id="mysound" ...>
+ *
+ */
+
 janus.registerElement('locomotion_teleporter', {
   active: false,
   longpresstime: 500,
   deadzone: 5,
-  xrplayer: null,
+  xrplayer: null, // *TODO* use janus.engine.client.xrplayer instead (and allow desktop too)
   linesegments: 100,
 
   create() {
@@ -102,7 +109,13 @@ janus.registerElement('locomotion_teleporter', {
     });
     player.head.add(this.shroud._target);
     this.particles.particle_vel = V(-.4, 0, -.4); // FIXME - particle velocity isn't being set on spawn
-    this.sound = room.createObject('Sound', { id: 'teleport2' }, this);
+
+    let locomotion = janus.ui.apps.default.apps.locomotion;
+    let asseturl = locomotion.resolveFullURL('./locomotion-assets.json');
+    fetch(asseturl).then(res => res.json()).then(assetlist => {
+      this.assetpack = elation.engine.assets.loadJSON(assetlist, locomotion.resolveFullURL('./'));
+      this.sound = room.createObject('Sound', { id: room.teleport_sound_id || 'button-teleport' }, this);
+    })
 
     this.disableCursor();
     window.addEventListener('mousemove', this.handleMouseMove);
@@ -133,13 +146,15 @@ janus.registerElement('locomotion_teleporter', {
     });
     this.activateControlContext('teleporter');
 
-    //room.addEventListener('mousedown', (ev) => this.handleMouseDown(ev));
-    //room.addEventListener('mouseup', (ev) => this.handleMouseUp(ev));
+    // emulated mouse-events (via webxr handtracking e.g.)
+    room.addEventListener('mousemove', (ev) => this.handleMouseMove(ev));
+    room.addEventListener('mousedown', (ev) => this.handleMouseDown(ev));
+    room.addEventListener('mouseup', (ev) => this.handleMouseUp(ev));
     elation.events.add(janus._target, 'room_change', (ev) => this.handleRoomChange(ev));
   },
   update() {
     if (this.active) {
-      let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+      let hand = this.xrplayer ? this.xrplayer.trackedobjects['hand_' + this.teleporthand] : null
       let startpoint,
           segments = this.linesegments,
           duration = .25,
@@ -152,11 +167,13 @@ janus.registerElement('locomotion_teleporter', {
       if (hand) {
         startpoint = hand.pointer.localToWorld(V(0, 0, 0));
         v0 = hand.pointer.localToWorld(V(0, 0, -speed)).sub(startpoint);
+        hand.teleportPos = hand.teleportPos || v0
       } else {
         startpoint = player.head.localToWorld(V(0,0,0));
         v0 = player.head.localToWorld(V(0,0,-speed)).sub(startpoint);
         return; // Head-locked teleporter is awkward, do we really still support this?
       }
+
       let i = 0,
           p0 = startpoint.clone(),
           dir = v0.clone().normalize();
@@ -181,6 +198,8 @@ janus.registerElement('locomotion_teleporter', {
             this.pos = player.worldToLocal(hit.point);
             this.localToWorld(this.particles.emitter_pos.set(0,0,0));
             this.updateTeleportAngle();
+            // track movement to cancel longpresstimer
+            if( hand ) hand.teleportPos = hand.teleportPos || this.pos.clone()
           }
           laserpoints[i * 2].copy(p0);
           laserpoints[i * 2 + 1].copy(p1);
@@ -231,7 +250,6 @@ janus.registerElement('locomotion_teleporter', {
       if (len > .8) {
         this.updateTeleportAngle();
       } else if (len < .01) {
-        this.showShroud();
         this.teleport();
         this.teleportactive = false;
         this.teleporthand = false;
@@ -262,16 +280,23 @@ janus.registerElement('locomotion_teleporter', {
 
     }
   },
-  teleport() {
+  teleport(mouse) {
     //if (!room.teleport) return;
     let pos = player.localToWorld(this.pos.clone());
     pos.y += player.fatness; // FIXME - This accounts for wonky player sphere collider, when we switch to a capsule we won't need it
     player.pos = pos;
     player.vel = V(0,0,.01); // "wake up" physics engine
-    player.angular.set(0,0,0);
-    let playerangle = Math.atan2(this.pos.x, this.pos.z);
-    console.log('Teleport player', pos, playerangle);
-    this.xrplayer.orientation._target.setFromEuler(new THREE.Euler(0, this.teleportangle - playerangle, 0));
+    console.log('Teleport player', pos);
+    this.showShroud();
+    if( this.sound ){
+      this.sound.pos = pos;
+      this.sound.play();
+    }
+    if( this.xrplayer && this.teleportangle && !mouse){
+      player.angular.set(0,0,0);
+      let playerangle = Math.atan2(this.pos.x, this.pos.z);
+      this.xrplayer.orientation._target.setFromEuler(new THREE.Euler(0, this.teleportangle - playerangle, 0));
+    }
   },
   updateTeleportAngle() {
     let controls = this.activecontrols;
@@ -282,27 +307,28 @@ janus.registerElement('locomotion_teleporter', {
   handleMouseDown(ev) {
     if (!room.teleport) return;
     if (ev.button == 0 && (player.enabled || janus.hmd)) {
+      if( ev.inputSourceObject && this.xrplayer ){ // translate webxr emulated mousedown event 
+        this.teleporthand = ev.inputSourceObject.device.handedness
+        let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+        if( hand ) hand.teleportPos = false 
+      }
       if (!this.longpresstimer) {
-        //this.longpresstimer = setTimeout(() => { console.log('timer fired'); this.enableCursor(); }, this.longpresstime);
+        this.longpresstimer = setTimeout(() => { console.log('timer fired'); this.enableCursor(); }, this.longpresstime);
         this.mousediff = [0,0];
-      }
-      //this.active = true;
+      }else this.cancelLongPress()
     }
   },
   handleMouseMove(ev) {
     if (!room.teleport) return;
-    if (this.longpresstimer) {
-      this.mousediff[0] += ev.movementX;
-      this.mousediff[1] += ev.movementY
-      var distance = Math.sqrt(this.mousediff[0] * this.mousediff[0] + this.mousediff[1] * this.mousediff[1]);
-      if (distance > this.deadzone) {
-        clearTimeout(this.longpresstimer);
-        this.longpresstimer = false;
-      }
-    }
+    //if (this.longpresstimer) {
+    //  this.mousediff[0] += ev.movementX;
+    //  this.mousediff[1] += ev.movementY
+    //  var distance = Math.sqrt(this.mousediff[0] * this.mousediff[0] + this.mousediff[1] * this.mousediff[1]);
+    //  if (distance > this.deadzone) this.cancelLongPress()
+    //}
   },
   handleTouchMove(ev) {
-    if (!room.teleport) return;
+    if (!room.teleport || !this.active) return;
     if (this.longpresstimer) {
       var touch = ev.changedTouches[0];
 
@@ -315,9 +341,7 @@ janus.registerElement('locomotion_teleporter', {
       }
       this.lasttouch = [touch.clientX, touch.clientY];
       var distance = Math.sqrt(this.mousediff[0] * this.mousediff[0] + this.mousediff[1] * this.mousediff[1]);
-      if (distance > this.deadzone) {
-        clearTimeout(this.longpresstimer);
-      }
+      if (distance > this.deadzone) this.cancelLongPress()
       if (this.active) {
         ev.stopPropagation();
         ev.preventDefault();
@@ -325,42 +349,50 @@ janus.registerElement('locomotion_teleporter', {
     }
   },
   handleMouseUp(ev) {
-    //if (!room.teleport) return;
-    if (this.longpresstimer) {
-      clearTimeout(this.longpresstimer);
-      this.longpresstimer = false;
-    }
-    if (this.active) {
-/*
-      player.pos = this.pos;
-      this.sound.pos = this.pos;
-      this.sound.play();
-*/
-      this.showShroud();
-      this.teleport();
-    }
-    this.disableCursor();
+    if (!room.teleport) return;
+    if (this.teleportactive) {
+      this.teleport(true);
+      this.active = false
+      this.teleportactive = false;
+      this.teleporthand = false;
+      this.disableCursor();
+    }else if( this.longpresstimer ) this.disableCursor();
   },
   enableCursor() {
     if (!room.teleport) return;
+    if( this.xrplayer ){
+      let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+      if( hand ) hand.pointer.laser.visible = false // prevent (portal)clicks
+    }
+    this.active = true;
+    this.teleportactive = true;
     this.visible = true;
     this.particles.resetParticles();
     this.particles.visible = true;
     if (this.laser.room !== room._target) room.appendChild(this.laser);
     if (this.particles.room !== room._target) room.appendChild(this.particles);
     this.laser.visible = true;
-    this.active = true;
     this.particles.start();
   },
   disableCursor() {
+    if( this.xrplayer ){
+      let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+      if( hand ) hand.pointer.laser.visible = true // restore original laser 
+    }
+    this.teleportactive = false;
     this.visible = false;
     this.particles.visible = false;
     this.laser.visible = false;
     this.active = false;
     this.particles.stop();
+    this.cancelLongPress()
   },
   showShroud() {
     this.shroud.visible = true;
     this.shroud.opacity = 1;
+  },
+  cancelLongPress(){
+    clearTimeout(this.longpresstimer);
+    this.longpresstimer = false
   }
 });

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

@@ -408,6 +408,11 @@ elation.elements.define('janus.ui.urlbar', class extends elation.elements.ui.pan
     }
   }
   handleBlur(ev) {
+    // enter-key on Quest devices (onscreen keyboards) is not emitted (blur-event instead)
+    // https://developers.meta.com/horizon/documentation/web/webxr-keyboard/
+    if (navigator.userAgent.indexOf('OculusBrowser') != -1) {
+      this.handleAccept({altKey:true}) // get straight to it
+    }
     setTimeout(() => {
       this.suggestions.hide();
     }, 100);

package/media/assets/webui/apps/xrmenu/xrmenu-assets.json

@@ -3,5 +3,6 @@
   { "assettype": "image", "name": "xrmenu-button-back", "src": "./images/previous-button.png", "hasalpha": true },
   { "assettype": "image", "name": "xrmenu-button-reset", "src": "./images/address-location.png", "hasalpha": true },
   { "assettype": "image", "name": "xrmenu-button-reload", "src": "./images/redo-arrow.png", "hasalpha": true },
-  { "assettype": "image", "name": "xrmenu-button-sound", "src": "./images/audio-settings.png", "hasalpha": true }
+  { "assettype": "image", "name": "xrmenu-button-sound", "src": "./images/audio-settings.png", "hasalpha": true },
+  { "assettype": "image", "name": "xrmenu-button-teleport", "src": "./images/teleport.png", "hasalpha": true }
 ]

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

@@ -13,6 +13,7 @@ janus.registerElement('xrmenu', {
       renderorder: 9,
     });
 */
+    console.log("creating xrmenu")
 
     this.worldpos = V();
     this.worlddir = V();
@@ -82,25 +83,22 @@ janus.registerElement('xrmenu', {
           image_id: 'xrmenu-button-sound',
           //onactivate: (ev) => this.engine.client.stopXR(),
         }),
+        teleport: this.createObject('xrmenu-button', {
+          pos: V(.68, 0, 0),
+          label: 'Teleport',
+          image_id: 'xrmenu-button-teleport',
+          toggle: true,
+          enabled: room.teleport,
+          //onactivate: (ev) => this.engine.client.stopXR(),
+        }),
       };
       this.buttons.home.addEventListener('activate', ev => janus.navigateHome());
       this.buttons.back.addEventListener('activate', ev => janus.navigateBack());
       this.buttons.reset.addEventListener('activate', ev => player.reset_position());
       this.buttons.reload.addEventListener('activate', ev => location.reload());
       this.buttons.exitvr.addEventListener('activate', ev => this.engine.client.stopXR());
-      this.buttons.sound.addEventListener('activate', ev => {
-        if (!this.panels['sound']) {
-          this.panels['sound'] = this.buttons.sound.createObject('xrmenu-popup', {
-            content: 'janus-voip-picker'
-          });
-        } else {
-          if (this.panels['sound'].parent === this.buttons.sound) {
-            this.buttons.sound.removeChild(this.panels['sound']);
-          } else {
-            this.buttons.sound.appendChild(this.panels['sound']);
-          }
-        }
-      });
+      this.buttons.sound.addEventListener('activate', ev => this.toggleSound());
+      this.buttons.teleport.addEventListener('activate', ev => this.toggleTeleport());
       this.reflow();
     });
   },
@@ -116,6 +114,23 @@ janus.registerElement('xrmenu', {
       button.pos.x = (-width / 2) + (this.buttonwidth * this.buttonmargin * (i + .5)) ;
     }
   },
+  toggleSound(){
+    if (!this.panels['sound']) {
+      this.panels['sound'] = this.buttons.sound.createObject('xrmenu-popup', {
+        content: 'janus-voip-picker'
+      });
+    } else {
+      if (this.panels['sound'].parent === this.buttons.sound) {
+        this.buttons.sound.removeChild(this.panels['sound']);
+      } else {
+        this.buttons.sound.appendChild(this.panels['sound']);
+      }
+    }
+  },
+  toggleTeleport(){
+    room.teleport = !room.teleport
+    this.buttons.teleport.state(room.teleport)
+  },
 /*
   update() {
     let worldpos = this.localToWorld(this.worldpos.set(0,0,0));
@@ -135,16 +150,20 @@ janus.registerElement('xrmenu', {
 janus.registerElement('xrmenu-button', {
   onactivate: null,
   image_id: '',
+  toggle: false,
+  enabled: true,
 
   create() {
     this.button = this.createObject('object', {
       id: 'plane',
       scale: V(.1, .1, .02),
       col: '#fff',
-      pos: V(0, 0, .01),
+      pos: V(0, 0, this.enabled ? 0.01 : 0 ),
       collision_id: 'cube',
       image_id: this.image_id,
       renderorder: 10,
+      emissive: this.enabled ? (this.toggle ? '#FFF' : '#595')
+                             : '#555',
     });
     this.button.addEventListener('mouseover', ev => this.handleMouseOver(ev));
     this.button.addEventListener('mouseout', ev => this.handleMouseOut(ev));
@@ -153,9 +172,11 @@ janus.registerElement('xrmenu-button', {
     this.button.addEventListener('click', ev => this.handleClick(ev));
   },
   handleMouseOver(ev) {
+    if( this.toggle ) return
     this.button.emissive = '#595';
   },
   handleMouseOut(ev) {
+    if( this.toggle ) return
     this.button.emissive = '#555';
   },
   handleMouseDown(ev) {
@@ -164,7 +185,10 @@ janus.registerElement('xrmenu-button', {
   handleMouseUp(ev) {
     this.button.pos.z = .01;
   },
-  
+  state(enabled){
+    this.button.emissive = (this.enabled = enabled) ? '#FFF' : '#555'
+    this.button.pos.z = enabled ? .01 : 0
+  },
   handleClick(ev) {
     this.dispatchEvent({type: 'activate'});
   },

package/package.json

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

package/scripts/janusbase.js

@@ -350,6 +350,7 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
           room:     ['property', 'room'],
           parts:    ['property', 'jsparts'],
           js_id:    ['property', 'js_id'],
+          jsid:     ['property', 'js_id'],
           pos:      ['property', 'position'],
           rotation: ['property', 'rotation'],
           scale:    ['property', 'scale'],
@@ -377,6 +378,7 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
           gazetime:  ['property', 'gazetime'],
           layers:  ['property', 'layers'],
           renderorder:  ['property', 'renderorder'],
+          lighting: [ 'property', 'lighting' ],
 
           pickable:  [ 'property', 'pickable'],
           collidable:  [ 'property', 'collidable'],
@@ -674,15 +676,15 @@ elation.require(['engine.things.generic', 'utils.template', 'janusweb.parts'], f
         let object = args.object;
         if (args.mesh_verts) {
           let geo = new THREE.BufferGeometry();
-          geo.addAttribute( 'position', new THREE.Float32BufferAttribute( args.mesh_verts, 3 ) );
+          geo.setAttribute( 'position', new THREE.Float32BufferAttribute( args.mesh_verts, 3 ) );
           if (args.mesh_faces) {
             geo.setIndex(args.mesh_faces);
           }
           if (args.mesh_normals) {
-            geo.addAttribute( 'normal', new THREE.Float32BufferAttribute( args.mesh_normals, 3 ) );
+            geo.setAttribute( 'normal', new THREE.Float32BufferAttribute( args.mesh_normals, 3 ) );
           }
           if (args.mesh_uvs) {
-            geo.addAttribute( 'uv', new THREE.Float32BufferAttribute( args.mesh_uvs, 2 ) );
+            geo.setAttribute( 'uv', new THREE.Float32BufferAttribute( args.mesh_uvs, 2 ) );
           }
           object = new THREE.Mesh(geo, new THREE.MeshPhongMaterial());
         }
@@ -1328,30 +1330,19 @@ console.log('its null', k, this[k], prop);
         }
         //if (this[k] !== prop.default && this[k] !== null && this[k] !== undefined) {
       }
-console.log('clone', props);
+
+      if (!parent) parent = this.parent || room;
+
+      let clone = parent.createObject(this.tag, props);
+
       if (cloneChildren) {
         let children = this.children;
         props.children = [];
         for (let i = 0; i < children.length; i++) {
-          props.children.push(children[i].clone(true, this));
+          props.children.push(children[i].clone(true, clone));
         }
       }
-      //let parent = this.parent || room;
-      if (!parent) parent = this.parent || room;
-
-      return parent.createObject(this.tag, props);
-/*
-      {
-        pos: this.pos.clone(),
-        rotation: this.rotation.clone(),
-        scale: this.scale.clone(),
-        color: this.color.clone(),
-        lighting: this.lighting,
-        id: this.id,
-        js_id: this.js_id + '_copy',
-        collision_id: this.collision_id,
-      });
-*/
+      return clone;
     }
     this.addControlContext = function(name, defs) {
       let legacydefs = {};
@@ -1375,7 +1366,7 @@ console.log('clone', props);
           }
         }];
       }
-      return this.engine.systems.controls.addContext(name, legacydefs);
+      return this.engine.systems.controls.addContext(name, legacydefs, this);
     }
     this.activateControlContext = function(name) {
       this.engine.systems.controls.activateContext(name, this);

package/scripts/janusghost.js

@@ -313,7 +313,7 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
       if (!animasset.loaded) {
         let animationsLoaded = false;
         elation.events.add(animasset, 'asset_load_complete', ev => {
-          if (!animationsLoaded) {
+          if (!animationsLoaded && animasset.animations) {
             animationsLoaded = true;
             if (this.body.animationmixer) {
               this.cloneAnimations(animasset);
@@ -323,7 +323,7 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
         });
         animasset.load();
       } else {
-        if (this.body.animationmixer) {
+        if (this.body.animationmixer && animasset.animations) {
           this.cloneAnimations(animasset);
         }
         //this.body.setAnimation('idle');

package/scripts/janusparagraph.js

@@ -3,7 +3,7 @@ elation.require(['janusweb.janusbase'], function() {
     this.postinit = function() {
       elation.engine.things.janusparagraph.extendclass.postinit.call(this);
       this.defineProperties({
-        text: {type: 'string', default: '', set: this.updateTexture},
+        text: {type: 'string', default: '', set: this.toInlineHTML },
         font_size: {type: 'integer', default: 16, set: this.updateTexture},
         text_col: {type: 'color', default: 0x000000, set: this.updateTexture},
         back_col: {type: 'color', default: 0xffffff, set: this.updateTexture},
@@ -11,6 +11,7 @@ elation.require(['janusweb.janusbase'], function() {
         cull_face: { type: 'string', default: 'back', set: this.updateMaterial },
         css: {type: 'string', set: this.updateTexture },
         depth_write: { type: 'boolean', default: true },
+        transparent: {type: 'boolean', set: this.updateTexture },
         depth_test: { type: 'boolean', default: true },
         collision_id: { type: 'string', default: 'cube' },
         collision_scale: { type: 'vector3', default: V(.5, .5, .02) },
@@ -75,7 +76,7 @@ elation.require(['janusweb.janusbase'], function() {
       var basestyle = 'font-family: sans-serif;' +
                       'font-size: ' + this.font_size + 'px;' +
                       'color: ' + text_col + ';' +
-                      'background: ' + back_col + ';' +
+                      'background: ' + (this.transparent ? 'transparent' : back_col) + ';' +
                       'max-width: 1014px;' +
                       'padding: 5px;';
 
@@ -85,7 +86,7 @@ elation.require(['janusweb.janusbase'], function() {
       // styled divs instead.
 
       var sanitarydiv = document.createElement('div');
-      sanitarydiv.innerHTML = this.text;
+      sanitarydiv.innerHTML = this.html;
       var content = sanitarydiv.innerHTML.replace(/<br\s*\/?>/g, '<div class="br"></div>');
       content = content.replace(/<hr\s*\/?>/g, '<div class="hr"></div>');
       content = content.replace(/<img(.*?)>/g, "<img$1 />");
@@ -150,5 +151,40 @@ elation.require(['janusweb.janusbase'], function() {
       }
       return this._proxyobject;
     }
+
+    this.toInlineHTML = async function(){
+      this.html = this.text
+      try{
+        // find all img tags and capture src attributes
+        const imgRegex = /<img[^>]*src=["'](?!data:)([^"']+)["']/gi;
+        const matches = [];
+        let match;
+        while ((match = imgRegex.exec(this.html)) !== null) { // Collect all src values
+          matches.push(match[1]);
+        }
+        // fill array with base64 image-strings
+        const dataURLs = await Promise.all( matches.map(src => this.toDataURL(src)) );
+        // Replace each src in the html with the corresponding data URL
+        let updatedHtml = this.html;
+        matches.forEach((src, i) => {
+          updatedHtml = updatedHtml.replace( `src="${src}"`, `src="${dataURLs[i]}"`)
+        });
+        this.html = updatedHtml
+      }catch(e){ console.error(e) } // continue when inlining failed
+      this.updateTexture()
+    };
+
+    this.toDataURL = function(url){
+      const finalUrl = `${elation.engine.assets.corsproxy||''}${url}`
+      return fetch(finalUrl)
+      .then(response => response.blob())
+      .then(blob => new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      }))
+    }
+
   }, elation.engine.things.janusbase);
 });

package/scripts/janusplayer.js

@@ -56,7 +56,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       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)],
+        'toggle_view': ['keyboard_nomod_v,keyboard_shift_v', ev => { if (ev.value == 1) this.toggleCamera() }],
         'zoom_out': ['mouse_wheel_down', ev => this.zoomView(-1, ev)],
         'zoom_in': ['mouse_wheel_up', ev => this.zoomView(1, ev)],
         //'browse_back': ['gamepad_any_button_4', elation.bind(this, this.browseBack)],
@@ -945,9 +945,9 @@ document.body.dispatchEvent(click);
 */
           this.pickable = false;
           this.setCollider('capsule', {
-            radius: this.collision_radius,
-            length: 1,
-            offset: V(0, this.collision_radius, 0)
+            radius: this.fatness,
+            length: this.height - (this.fatness * 2),
+            offset: V(0, this.fatness, 0)
           });
         } else {
           this.removeCollider();
@@ -1230,8 +1230,11 @@ document.body.dispatchEvent(click);
       this.defaultanimation = 'portal';
       setTimeout(() => this.defaultanimation = 'idle', 3000);
     }
-    this.toggleCamera = function(ev) {
-      if (ev.value == 1) {
+    this.toggleCamera = function(arg) {
+      if (typeof arg == 'string') {
+        this.setCameraView(arg);
+      } else if (!arg || arg.value) {
+        // Legacy handling - if arg is a control input event, check to make sure this is a button press, not a release
         if (this.cameraview == 'firstperson') {
           this.setCameraView('thirdperson');
         } else {

package/scripts/janusxrplayer.js

@@ -412,7 +412,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
             this.buttonwaspressed = false;
             if (!this.menu.parent || this.menu.parent === this) {
               player.appendChild(this.menu);
-              player.worldToLocal(this.pointer.localToWorld(this.menu.pos.set(0,0,-.25)));
+              player.worldToLocal(this.pointer.localToWorld(this.menu.pos.set(0.1,-0.07,-.2)));
               this.menu.billboard = 'y';
             } else {
               //this.appendChild(this.menu);
@@ -656,8 +656,9 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         }
       },
       handleRaycastEnter(ev) {
-        let proxyobj = ev.data.object,
-            obj = proxyobj._target;
+        let proxyobj = ev.data.object
+        if( !proxyobj || !proxyobj?._target ) return
+        obj = proxyobj._target;
         let oldactiveobject = this.activeobject;
         if (this.activeobject) {
           this.engine.client.view.proxyEvent({
@@ -723,6 +724,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         this.engine.client.view.proxyEvent(evdata, evdata.element);
       },
       handleRaycastMove(ev) {
+        if( ! ev?.data?.intersection?.face?.normal ) return // skip those!
         this.updateLaserEndpoint(ev.data.intersection.point, ev.data.intersection.face.normal);
         if (this.activeobject) {
           let obj = this.activeobject.objects['3d'];
@@ -779,7 +781,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         }
       },
       handleSelect(ev) {
-        if (this.activeobject) {
+        if (this.activeobject && this.laser.visible ) {
           let obj = this.activeobject.objects['3d'];
           console.log('CLICK IT', this.activeobject);
           this.engine.client.view.proxyEvent({

package/scripts/room.js

@@ -3,10 +3,10 @@ elation.require([
      'engine.things.generic', 'engine.things.label', 'engine.things.skybox',
     'janusweb.object', 'janusweb.portal', 'janusweb.image', 'janusweb.video', 'janusweb.text', 'janusweb.janusparagraph',
     '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'
+    'janusweb.translators.bookmarks', 'janusweb.translators.reddit', 'janusweb.translators.error', 'janusweb.translators.blank', 'janusweb.translators.default', 'janusweb.translators.dat', 'janusweb.translators.janusvfs', 'janusweb.translators.xrfragments'
   ], function() {
   let roomTranslators = false;
-  function initRoomTranslators() {
+  function initRoomTranslators(room) {
     roomTranslators = {
       '^janus-vfs:': elation.janusweb.translators.janusvfs({janus: janus}),
       '^about:blank$': elation.janusweb.translators.blank({janus: janus}),
@@ -14,8 +14,9 @@ elation.require([
       '^dat:': elation.janusweb.translators.dat({janus: janus}),
       '^https?:\/\/(www\.)?reddit.com': elation.janusweb.translators.reddit({janus: janus}),
       '^error$': elation.janusweb.translators.error({janus: janus}),
+      '.*\.(gltf|glb|dae)$': elation.janusweb.translators.xrfragments({janus: janus}),
       '^default$': elation.janusweb.translators.default({janus: janus})
-    };
+    }
   }
   elation.component.add('engine.things.janusroom', function() {
     this.postinit = function() {
@@ -100,7 +101,7 @@ elation.require([
       });
 
       if (!roomTranslators) {
-        initRoomTranslators();
+        initRoomTranslators(this);
       }
 
       this.spawnpoint = new THREE.Object3D();
@@ -301,7 +302,8 @@ elation.require([
           }
         }
       } else if (this.urlhash) {
-        let obj = this.getObjectById(this.urlhash);
+        // XR Fragments deeplink spec (Level1: URL) https://xrfragment.org/#teleport%20camera
+        let obj = this.getObjectById(this.urlhash) || this.getObjectByDeepName(this.urlhash)
         if (obj) {
           obj.localToWorld(spawnpoint.position.set(0,0,0));
           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))));
@@ -567,12 +569,12 @@ elation.require([
       }
       var baseurl = baseurloverride;
       if (!baseurl) {
-        if (url && !this.baseurl) {
+        if (url && url.match("://") && !this.baseurl) {
           baseurl = url.split('/');
           if (baseurl.length > 3) baseurl.pop();
           baseurl = baseurl.join('/') + '/';
-          this.baseurl = baseurl;
         }
+        this.baseurl = baseurl || "";
       } else {
         this.baseurl = baseurl;
       }
@@ -590,7 +592,7 @@ elation.require([
       var fullurl = url;
       if (fullurl[0] == '/' && fullurl[1] != '/') fullurl = this.baseurl + fullurl;
       if (!fullurl.match(/^https?:/) && !fullurl.match(/^\/\//)) {
-        fullurl = self.location.origin + fullurl;
+        fullurl = self.location.origin + (fullurl[0] == '/' ? '' :'/') + fullurl;
       } else if (!fullurl.match(/^https?:\/\/(localhost|127\.0\.0\.1)/) && fullurl.indexOf(document.location.origin) != 0) {
         fullurl = proxyurl + fullurl;
       }
@@ -706,11 +708,22 @@ elation.require([
         }
       }));
     }
-    this.loadFromSource = function(sourcecode, baseurl) {
+    this.loadFromSource = async function(sourcecode, baseurl) {
       if (baseurl) {
         this.baseurl = baseurl;
       }
-      var source = this.parseSource(sourcecode);
+
+      var source
+      // scan sourcecode for non-JML microformats within translators 
+      for( m in roomTranslators ){
+        let rt = roomTranslators[m] 
+        if( rt.parseSource && rt.parseSource.regex ){
+          source = await rt.parseSource(sourcecode,this)
+          if( source ) break;
+        }
+      }
+      if( !source ) source = this.parseSource(sourcecode)
+
       if (source && source.source) {
         this.roomsrc = source.source;
         var datapath = elation.config.get('janusweb.datapath', '/media/janusweb');
@@ -1955,8 +1968,19 @@ elation.require([
 */
 
     }
-    this.getObjectById = function(js_id) {
-      return this.jsobjects[js_id];
+    this.getObjectByDeepName = function(name) {
+      if( !this.janus.currentroom ) return
+      let obj = this.janus.currentroom.objects['3d'].getObjectByName(name)
+      if( obj ){ // return polyglot THREE/janusweb object for convenience
+        return new Proxy(obj,{
+          set(me,k,v){ obj[k] = v; return true;    },
+          get(me,k){ 
+            if( k == 'objects' ) return { '3d': me }
+            return obj[k]; 
+          }
+        })
+      }
+      return obj
     }
     this.getObjectsByClassName = function(classname) {
       var objects = [];

package/scripts/sound.js

@@ -65,7 +65,7 @@ elation.require(['janusweb.janusbase'], function() {
           }
           //this.audio.panner.maxDistance = this.properties.distance;
           if (this.dist) {
-            this.audio.setRefDistance(this.dist);
+            this.audio.setRefDistance(Math.max(0, this.dist));
           } else {
             //this.audio.panner.distanceModel = 'linear';
           }

package/scripts/text.js

@@ -11,7 +11,7 @@ elation.require(['engine.things.label'], function() {
         'align':           { type: 'string', default: 'center', refreshGeometry: true },
         'verticalalign':   { type: 'string', default: 'bottom', refreshGeometry: true },
         'zalign':          { type: 'string', default: 'back', refreshGeometry: true },
-        'emissive':        { type: 'color', default: 0x000000 },
+        'emissive':        { type: 'color', default: 0x000000, set: this.updateMaterial },
         'opacity':         { type: 'float', default: 1.0 },
         'depth_write':     { type: 'bool', default: true },
         'depth_test':      { type: 'bool', default: true },
@@ -120,6 +120,7 @@ elation.require(['engine.things.label'], function() {
           this.material.metalness = this.metalness;
           this.material.envMap = this.getEnvmap();
         }
+        this.material.emissive = this.emissive;
         this.material.needsUpdate = true;
       }
     }

package/scripts/translators/xrfragments.js

@@ -0,0 +1,93 @@
+elation.require([], function() {
+  elation.component.add('janusweb.translators.xrfragments', function() {
+    this.init = function() {
+      this.description = "this implements the https://xrfragment.org standard for immersive 3d file browsing"
+    }
+    this.exec = function(args) {
+      return new Promise(elation.bind(this, function(resolve, reject) {
+
+        var room = this.room = args.room;
+        this.setupEvents()
+
+        var datapath = elation.config.get('janusweb.datapath', '/media/janusweb');
+
+        var roomdata = {
+          assets: {
+            assetlist: [
+              {assettype: 'model', name: 'scene', src: args.url},
+            ]
+          },
+          room: {
+            pos: [0,0,0],
+            xdir: "1 0 0",
+            zdir: "0 0 1",
+          },
+          object: [
+            {id: 'scene', js_id: 0, pos: "0 0 0", xdir: "-1 0 0", zdir: "0 0 -1", lighting: "false"}
+          ],
+          link: []
+        };
+        resolve(roomdata);
+      }));
+    }
+
+    this.spawnUserAtFragment = function(source) {
+      // XR Fragments deeplink spec: explicit or default spawn
+      // https://xrfragment.org/#teleport%20camera
+      if( ! this.room.urlhash ) this.room.urlhash = 'spawn'
+      this.room.setPlayerPosition.apply(this.room)
+      console.log("[xrfragment] camera teleport")
+    }
+
+    this.setupEvents = function(){
+      elation.events.add(room._room, 'room_load_complete', this.spawnUserAtFragment.bind(this) )
+    }
+
+    // translate XR Fragments microformat into JML
+    this.parseSource = async function(sourcecode, room){
+      this.room = room
+      const isJML = /<fireboxroom>[\s\S]*?<\/fireboxroom>/si;
+      if( sourcecode.match(isJML) ) return // JML takes precedence over microformats 
+
+      // extract href/title value
+      let el = document.createElement("div")
+      el.innerHTML = sourcecode
+      const link = el.querySelector("link[as=spatial-entrypoint]")
+      if( !link ) return
+      const title = el.querySelector("title")
+      const href  = link.getAttribute("href")
+      if( !href ) return
+      console.log("[xrfragment] detected XRF microformat")
+      const hrefNoHash = href.replace(/#.*/,'')
+
+      // if microformat has xr fragment in URI, use it if room-url has no xr fragment 
+      if( href.match(/#/) && !room.urlhash ){
+        room.urlhash = href.replace(/.*#/,'')
+      }
+      // check if link exists
+      const hrefFull = hrefNoHash.match('://') ? hrefNoHash : String(room.baseurl+hrefNoHash)  
+      const exist    = await fetch( hrefFull ,{method:'HEAD'})
+      if( !exist.ok ) return console.warn(`[xrfragment] ${link.outerHTML} resolves to invalid url ${hrefFull}`)
+
+      // setup events
+      this.setupEvents()
+      // return JML
+      return room.parseSource(`
+        <title>${ title ? title.innerText.replace(/\n.*/g,'') : room.baseurl.split("/").pop() }</title>
+        <FireBoxRoom>
+            <Assets>
+              <assetobject id="scene" src="${hrefNoHash}"/>
+            </Assets>
+            <Room>
+              <object pos="0 0 0" collision_id="scene" id="scene" />
+            </Room>
+        </FireBoxRoom>
+      `)
+    }
+    // microformat heuristic (https://xrfragment.org/#XRF%20microformat)
+    // example: <link rel="alternate" as="spatial-entrypoint" src="https://foo.org/bar.glb"> 
+    this.parseSource.regex = /<link\s+[^>]*rel=['"]spatial-entrypoint['"][^>]*\/?>/si;
+
+  });
+});
+

package/utils/clean-build.sh

@@ -2,3 +2,8 @@
 
 [ -e elation ] && rm -r elation
 [ -e node_modules ] && rm -r node_modules
+[ -d build ] && rm -r build
+read -p "[?] bleeding-edge dependencies? (y/n) " ok
+test "$ok" = y && rm package-lock.json
+npm install
+utils/build.sh