janusweb 1.5.56 → 1.7.1

package/media/assets/webui/apps/xrfragment/level2-hyperlink.js

@@ -0,0 +1,265 @@
+/* XR URI Fragments spec (https://xrfragment.org)
+ *
+ * level2 explicit hyperlinks (embedded in 3D scenes/files) as per the XR URI Fragments spec
+ * 
+ * When clicking an href-value, the user(camera) is teleported/imported to the referenced object.
+ * Usecases: spatial anchors, object imports, hyperlink bridge between JML<>3D files
+ * see more: https://xrfragment.org/#%F0%9F%93%9C%20level2%3A%20explicit%20hyperlinks
+ */
+
+
+elation.require([], function() {
+
+  elation.extend('janusweb.hyperlink', class {
+    constructor(object) {
+      this.scene = elation.engine.instances.default.systems.world.scene['world-3d'] 
+      this._object = object
+      this.init()
+    }
+
+    init(){
+      this.cleanup()
+      this.scan( this.scene )
+      this.setupShroud()
+    }
+
+    setupShroud(){
+      // show shroud when teleporting
+      for( let i in player.head.children ){
+        let n = player.head.children[i]
+        if( n.js_id == 'xrf_shroud' ) this.shroud = n // found previrous one
+      }
+      if( this.shroud ) return // we're done!
+      this.shroud = room.createObject('object', {
+        id: 'sphere',
+        js_id: 'xrf_shroud',
+        scale: V(1),
+        lighting: false,
+        col: 'black',
+        cull_face: 'none',
+        depth_test: false,
+        depth_write: false,
+        shadow_cast: false,
+        shadow_receive: false,
+        renderorder: 1000,
+        visible: false,
+      });
+      player.head.add(this.shroud._target); 
+
+      // patch setPlayerPosition() with shroud animations during local teleports
+      room.setPlayerPosition = (
+        (original) => function(room){
+          this.hyperlink.showShroud()
+          return original.apply(this,room)
+        }.bind(room)
+      )(room.setPlayerPosition)
+    }
+
+    scan(scene,cb){
+      scene.traverse( (object) => {
+        this.detectHUDLUT(object)
+        this.detectHref(object)
+      })
+    }
+
+    detectHref(object){
+      if( !object?.userData?.href || object.hasHref ) return
+
+      const jobj = this.toJanusObject(object)
+      jobj.addEventListener("click", () => this.execute(object.userData.href,{jobj,scene:this.scene}) )
+      object.hasHref = true
+    }
+
+    cleanup(){
+      const head = player.head.objects['3d'] 
+      head.children
+      .filter( (child) => child.xrf_cleanup ? child : false ) 
+      .map( (child) => child.xrf_cleanup() )
+    }
+
+    detectHUDLUT(object){
+      // XR Fragment HUD extensions: https://xrfragment.org/#teleport%20camera%20spawnpoint
+      if( object.type == 'PerspectiveCamera' && object.name == 'spawn' && object.children.length ){
+        const head = player.head.objects['3d'] 
+        // move children to player head
+        while( object.children.length ){ 
+          object.children[0].xrf_cleanup = function(me,object){
+            object.add( me ) // add back
+          }.bind(null, object.children[0], object )
+          head.add( object.children[0] )
+        }
+      }
+    }
+
+    execute = function(href,opts){
+      const {url,hash} = this.getUrlObject(href)
+      opts = opts ? {...opts, url, hash} : {url,hash} 
+      console.log("hyperlink: "+href)
+      elation.events.fire({element: this, type: 'href', data: {href,opts}});
+      if( room.url != url.origin+url.pathname ) return this.executeExternal(href,opts)
+      hash.forEach( (v,k) => {
+        const {operator,param} = this.getOperators(k)
+        switch( param ){
+          case "t":    // W3C URI Time fragment not implemented (yet)
+          case "loop": this._object.loop = operator != '-' 
+          case "pos":  // legacy fallthrough
+          default:     // level2: internal teleports/spawn
+                       // https://xrfragment.org/#%F0%9F%93%9C%20level2%3A%20explicit%20hyperlinks   
+                       room.referrer = room.urlhash
+                       room.urlhash = v || k
+                       if( this.scene.getObjectByName(v) ){ 
+                         room.setPlayerPosition()
+                         this.spawnBackLink()
+                       }
+                       // level2: animation triggers 
+                       // https://xrfragment.org/#%F0%9F%93%9C%20level2%3A%20explicit%20hyperlinks   
+                       for( let i in this._object.children ){
+                         const model = this._object.children[i]
+                         if( model.animations && model.animations.map ){
+                           model.animations.map( (a) => {
+                             if( !String(a.name).toLowerCase() == String(v).toLowerCase() ) return 
+                             console.log("xrfragment: activating animation '"+a.name+"'")
+                             model.anim_id = a.name
+                           })
+                         }
+                       }
+                       return
+                      break;
+        }
+      })
+
+      const fullUrl = href.match(/^#/) ? `${room.url}${url.hash}` : url.href
+      room.url = fullUrl
+      if( !url.protocol.match(/^xrf:/) ){
+        // level4: https://xrfragment.org/doc/RFC_XR_Fragments.html#xrf-uri-scheme
+        janus.updateClientURL(fullUrl)
+      }
+      elation.events.fire({element: room, type: 'room_change', data: room});
+    }
+
+    spawnBackLink(){
+      for( let i in room.objects ){
+        if( i.match(/^reciprocal-hashlink/) ) room.removeObject(i)
+      }
+      let link = room.createObject('link', {
+        rotation: '0 45 0',
+        url: room.url+'#'+room.referrer,
+        title: 'go back',
+        round: true,
+        shader_id: 'defaultportal',
+        js_id: 'reciprocal-hashlink',
+      });
+      setTimeout( () => {
+        link.position = player.localToWorld(V(1.5,0,1.5))
+      },10)
+    }
+
+    executeExternal(href, opts){
+      if( opts.portalActivateDelay ){
+        setTimeout( () => {
+          janus.setActiveRoom( href, room.url)
+        }, opts.portalActivateDelay)
+      }
+      player.spawnPortal(href)
+      elation.events.fire({element: this, type: 'href_portal', data: {href,opts}});
+    }
+
+    getUrlObject = function(href){
+      const urlExpanded = href[0] == '#'                                                    
+                    ? room.url+href                                                   
+                    : href.match(/:\//) ? href : room.baseurl+href                                 
+      const url  = new URL( urlExpanded )
+      const hash = new URLSearchParams( String(url.hash).substr(1) ) 
+      return {url,hash}
+    }
+
+    getOperators = function(k){
+      let operator = ''
+      // scan for operator
+      if( k[0].match(/[-+]/) ){
+        operator = k[0]
+        k = k.substr(1)
+      }
+      return {operator,param:k}
+    }
+
+    toJanusObject = function(object){
+      // we are not using object.parts[ ... ] because
+      // glTF animated collidable objects require special sync/setup: 
+      // collider must be child of THREE object (to get animated), not janusobject
+      // NOTE: avoid jobj.add() since that reparents the object (andw breaks glTF anims)
+      let jo = this._object.createObject("object",{
+        js_id: object.name
+      })
+      object.parent.add( jo.objects['3d'] )
+      jo.objects['3d'] = object
+      jo.collidable = true
+      jo.removeCollider();
+      const collider = object.clone()
+      collider.position.set(0,0,0)
+      collider.rotation.set(0,0,0)
+      collider.scale.set(1,1,1)
+      jo.setCollider('mesh',{mesh: collider})
+      jo.colliders.parent = object
+      return jo
+    }
+
+    showShroud = function(){
+      this.shroud.visible = true;
+      this.shroud.opacity = 1;
+    }
+
+    update = function(){
+      if (this.shroud?.visible && !janus.loading) {
+        if (this.shroud.opacity > .001) {
+          this.shroud.opacity *= .9;
+          if (this.shroud.opacity <= .001) {
+            this.shroud.visible = false;
+            this.shroud.opacity = 0;
+          }
+        }
+      }
+    }
+
+  })
+});
+
+xrf_install_hyperlinks = function(){
+  if( !room.objects?.scene?.modelasset?.loaded ) {
+    return setTimeout( xrf_install_hyperlinks, 300 ) 
+  }
+  if( !room.hyperlink     ){
+    room.hyperlink = new elation.janusweb.hyperlink(room)
+    janus.loading = false // force!
+  }
+}
+
+xrf_install_hyperlinks()
+
+// update urlbar when user or browser activates href 
+elation.events.add(null, 'href', function(e){
+  const scene  = elation.engine.instances.default.systems.world.scene['world-3d'] 
+  const urlbar = document.querySelector('janus-ui-urlbar ui-input')
+  const href   = e?.data?.href
+  if( urlbar ){
+    urlbar.value = href[0] == '#' ? urlbar.value.replace(/#.*/,'') + href : href
+  }else console.warn("xrfragment: cannot find urlbar")
+})
+
+elation.events.add(null, 'room_load_complete', xrf_install_hyperlinks ) 
+elation.events.add(null, 'room_disable', function(e){
+  if( room?.hyperlink ) room.hyperlink.cleanup()
+})
+
+elation.events.add(null, 'room_enable', function(e){
+  if( room?.hyperlink ) room.hyperlink.init()
+  else xrf_install_hyperlinks()
+})
+
+elation.events.add(null, 'janusweb_script_frame', function(){
+  if( room?.hyperlink ) room.hyperlink.update()
+})
+
+if( room.urlhash ){ 
+  elation.events.fire({element: this, type: 'href', data: {href: `#${room.urlhash}`}});
+}

package/media/assets/webui/apps/xrfragment/level7-engine-prefixes.export.js

@@ -0,0 +1,93 @@
+xrf_export = {
+
+  node(e){
+    const {userData,n} = e.data
+    for( let k in userData ){
+      if( k.match(/^-(three)-/) || k == 'href' ){ // keep hrefs + `-three-*` engine prefixes
+        n.userData[k] = userData[k]               // but ditch `-janus-*` (we'll regenerate them)
+      }
+      if( k == 'thing' && String(userData[k].componentname).match('engine.things.janus') ){
+        const thing       = userData[k]
+        switch( thing.componentname ){
+          case "engine.things.janusparagraph":
+          case "engine.things.janustext":
+          case "engine.things.janusportal":
+          case "engine.things.januswebsurface":
+          case "engine.things.janusroom":
+
+            if( thing.componentname != 'engine.things.janusroom' ){
+              n.name = String(`-janus-${thing.js_id}`).replace(/.*janus-/,'-janus-')
+              n.userData['-janus-tag'] = thing.componentname 
+                                              .replace('janusportal','januslink')
+                                              .replace('engine.things.janus','')
+            }
+            if( thing.componentname.match(/engine\.things\.janus(portal|link)/) && n.children[0] ){
+              // convert portal to XRF href
+              n.children[0].userData['href'] = thing.url
+            }
+            // write XRF `-janus-*` engine prefixes
+            const attrs = xrf_export.getAttributes(thing)
+            for( let i in attrs ){ 
+              if( !i.match(/^-janus-(use_local_asset)/) ){
+                n.userData[`-janus-${i}`] = attrs[i]
+              }
+            }
+            break;
+        }
+      }
+    }
+  },
+  scene(e){
+    // https://xrfragment.org/#%F0%9F%93%9Clevel7%3A%20engine%20prefixes
+    e.data.scene.userData['-janus-source'] = room.getRoomSource()
+  },
+  getAttributes(thing){
+    if( !thing ) return {}
+    let proxy     = thing.getProxyObject(),
+        propdefs  = thing._thingdef.properties,
+        proxydefs = proxy._proxydefs,
+        attrs     = {};
+
+    // this code is almost a duplicate of elation's .summarizeXML() but with inversed (glTF) position
+    for (let k in proxydefs) {
+      let proxydef = proxydefs[k],
+        propdef = elation.utils.arrayget(propdefs, proxydef[1]);
+      if ( k != 'room' && k != 'tagName' && k != 'classList' && proxydef[0] == 'property' && propdef) {
+        let val = elation.utils.arrayget(thing.properties, proxydef[1]);
+        let defaultval = propdef.default;
+        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]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } 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]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * -10000) / 10000).join(' ');
+          }
+        } else if (val instanceof THREE.Color) {
+          if (defaultval instanceof THREE.Color) defaultval = defaultval.toArray();
+          if (!('default' in propdef) || defaultval === null || ('default' in propdef && !(val.r == defaultval[0] && val.g == defaultval[1] && val.b == defaultval[2]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } 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]))) {
+            attrs[k] = val.toArray().slice(0, 3).map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } 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]))) {
+            attrs[k] = val.toArray().map(n => Math.round(n * 10000) / 10000).join(' ');
+          }
+        } else if (val !== propdef.default && val !== null && val !== '') {
+          attrs[k] = val;
+        }
+      }
+    }            
+    return attrs;
+  }
+}
+
+elation.events.add(null, 'webui_editor_export_node', xrf_export.node )
+elation.events.add(null, 'webui_editor_export',      xrf_export.scene )

package/media/assets/webui/apps/xrfragment/level7-engine-prefixes.import.js

@@ -0,0 +1,229 @@
+// https://xrfragment.org/#%F0%9F%93%9Clevel7%3A%20engine%20prefixes
+// There are cases where the 3D scene file might want to hint the 
+// specific features to the viewer-engine (JANUSWEB, THREE.js, AFRAME, Godot e.g.). 
+
+xrf_engines = function(){
+
+  const {toJanusObject,applyPrefixes,applyCleanup} = xrf_engines
+  let cleanup = []
+
+  const map = (obj,key,realKey) => {
+    let match     = true 
+
+    // compatibility workaround: some 3D editors omit false booleans in export :/
+    // therefore we support boolean strings
+    if( obj.userData[key] == 'false' ) obj.userData[key] = false
+    if( obj.userData[key] == 'true'  ) obj.userData[key] = true
+
+    // increment/decrement
+    let scroller = key.match(/[+]$/) 
+    if( scroller && !scene.scrollers ){
+      if( typeof obj.userData[key] != 'number' ) obj.userData[key] = parseFloat(obj.userData[key])
+      scene.scrollers = []
+      elation.events.add(null, 'janusweb_script_frame', function(e){
+        scene.scrollers.map( (f) => f(e.data) ) // e.data == delta
+      })
+    }
+
+    // special cases
+    switch( key ){
+      case "-three-material.blending": if( obj.material ){
+                                         const modes = {
+                                           'THREE.NoBlending':          THREE.NoBlending,
+                                           'THREE.NormalBlending':      THREE.NormalBlending,
+                                           'THREE.AdditiveBlending':    THREE.AdditiveBlending,
+                                           'THREE.SubtractiveBlending': THREE.SubtractiveBlending,
+                                           'THREE.MultiplyBlending':    THREE.MultiplyBlending
+                                         }
+                                         setTimeout( () => { // not sure why this only works in setTimeout
+                                           if( modes[ obj.userData[key] ] ) obj.material.blending = modes[ obj.userData[key] ]
+                                         },10)
+                                       }
+                                       break;
+
+      case "-three-material.sides":    if( obj.material ){
+                                         const modes = {
+                                           'THREE.FrontSide':  THREE.NoBlending,
+                                           'THREE.BackSide':   THREE.NormalBlending,
+                                           'THREE.DoubleSide': THREE.DoubleSide
+                                         }
+                                         setTimeout( () => { // not sure why this only works in setTimeout
+                                           if( modes[ obj.userData[key] ] ) obj.material.sides = modes[ obj.userData[key] ]
+                                         },10)
+                                       }
+                                       break;
+
+      case "-janus-use_local_asset": room.use_local_asset = obj.userData[key]
+                                     room.localasset = room.createObject('object', {
+                                       id: room.use_local_asset,
+                                       collision_id: room.use_local_asset + '_collision',
+                                       collision_scale: V(1,1,1),
+                                       collision_pos: V(0,0,0),
+                                       col: room.col,
+                                       //fwd: room.fwd,
+                                       xdir: room.xdir,
+                                       ydir: room.ydir,
+                                       zdir: room.zdir,
+                                       shadows: true
+                                     });
+                                     break;
+
+      // DECLARATIVE entities
+      case "-janus-tag":             let opts    = {}// rotation: '0 -180 0' }
+                                     for( let i in obj.userData ){ 
+                                       if( !i.match(/^-janus-/) ) continue
+                                       opts[ i.replace(/-janus-/,'') ] = obj.userData[i]
+                                     }
+
+                                     // create asset
+                                     if( obj.userData['-janus-tag'].match(/^asset/) ){
+                                       if( opts.src && !opts.src.match(/(^\.|:\/)/) ) opts.src = room.baseurl + opts.src
+                                       room.loadNewAsset( opts['tag'].replace(/^asset/,''), opts )
+                                     }else{
+                                       opts.js_id = opts.name = String(`-janus-${obj.name}_${obj.userData['-janus-tag']}`).replace(/.*janus-/,'-janus-')
+                                       // create room object
+                                       const jo = room.createObject( opts.tag, opts )
+                                       jo.objects['3d'].name = opts.js_id
+                                       jo.visible = false
+                                        
+                                       // replace janusobject with nested THREE obj
+                                       obj.parent.add( jo.objects['3d'] )
+
+                                       // fix unclickable objects (since obj might be nested in the scene-tree)
+                                       if( jo.colliders ){
+                                         jo.removeCollider()
+                                         jo.colliders.parent.children.push( jo.objects['3d'] )
+                                       }
+
+                                       // we need setTimeout otherwise quaternion is not updated 
+                                       // https://github.com/jbaicoianu/janusweb/issues/306
+                                       setTimeout( () => {
+                                         jo.orientation.copy( obj.quaternion)
+                                         jo.position.copy( obj.position )
+                                         //jo.scale.copy( obj.scale )
+                                         jo.visible = true
+                                       },200)
+                                       // mark previously generated geo/materials by janusweb export for deletion
+                                       obj.traverse ( (o) => cleanup.push(o) )
+                                       cleanup.push(obj)
+                                     }
+                                     break;
+      // OBJECTS
+      case "-janus-collision_id":    const collision_id = obj.userData[key]
+                                     if( collision_id != obj.name ){
+                                       console.warn(`xrfragment: ${obj.name}.collision_id can be '${obj.name}' only (for now)..skipping '${collision_id}'`)
+                                     }else{
+                                       const jo = toJanusObject(obj,{noreparent:true})
+                                       jo.collidable = true
+                                       jo.collision_id = collision_id
+                                       jo.removeCollider();
+                                       const collider = obj.clone()
+                                       collider.position.set(0,0,0)
+                                       collider.rotation.set(0,0,0)
+                                       collider.scale.set(1,1,1)
+                                       jo.collision_trigger = true
+                                       jo.setCollider('mesh',{mesh: collider})
+                                       jo.colliders.parent = obj
+                                       //jo.objects.dynamics.mass = 1
+                                       //jo.objects.dynamics.addForce('static', new THREE.Vector3(0, room.gravity, 0));
+                                       //elation.events.add(jo.objects.dynamics, 'physics_collide', elation.bind(jo, jo.handleCollision));
+                                       console.log(`xrfragment: setting collision_id = ${collision_id}`)
+                                     }
+                                     break;
+
+      default:                      match = false                     
+              
+                                    // JANUS property fallthrough
+                                    if( key.match(/^-janus-/) && !key.match("-janus-tag") ){
+                                      // *TODO* more heuristics to determine scene
+                                      if( obj.name == 'Scene' || obj?.parent?.name == '' || obj.userData['-janus-source']){ 
+                                        room[realKey] = obj.userData[key];
+                                      }else{
+                                        toJanusObject(obj)[realKey] = obj.userData[key]
+                                      }
+                                      match = true
+                                    }
+
+                                    // THREE fallthrough
+                                    if( key.match(/^-three-/) ){
+
+                                      if( realKey.match('material.') && obj.material ){ // clone shared materials
+                                        obj.material = obj.material.clone()
+                                        if( realKey.match('material.map') ) obj.material.map = obj.material.map.clone()
+                                      }
+                                      
+                                      const setKeyVal     = (o, path, val       ) => new Function('o', 'v',     `o.${path}  = v               `)(o, val);
+                                      if( scroller ){
+                                        const setKeyValIncr = (o, path, val, delta) => new Function('o', 'speed', `o.${path} += ${delta} * speed`)(o, val);
+                                        try{ 
+                                          const myscroller    = function(path,val,delta){
+                                            setKeyValIncr( this, path, val, delta) 
+                                          }.bind(obj, realKey.replace(/[+]$/,''), obj.userData[key])
+                                          myscroller(0.000001)              // see if it triggers error
+                                          scene.scrollers.push(myscroller)  // otherwise add frame-function
+                                        }catch(e){ 
+                                          console.error(`could not apply engine prefix: ${obj.name} => ${key} (tip: dont use them on <paragraph> objects)`) 
+                                        }
+                                      }else{
+                                        try{ 
+                                          setKeyVal( obj, realKey, obj.userData[key] ) 
+                                        }catch(e){ console.error(e) }
+                                      }
+                                      match = true
+                                    }
+                                    break;
+    }
+
+    if( match ){
+      //console.log(`xrfragment: engine prefix '${key}:${realKey}' = '${obj.userData[key]}'`)
+    }
+  }
+
+  room.gravity = 0 // new default unless specified otherwise
+  let scene = elation.engine.instances.default.systems.world.scene['world-3d'] 
+  const isAsset    = (obj) => String(obj.userData['-janus-tag']).match(/^asset/)
+  const isJanusTag = (obj) => String(obj.userData['-janus-tag']) && !isAsset(obj)
+  applyPrefixes(scene,map, (o) => isAsset(o)                    ) // janus requires first initialzing of assets
+  applyPrefixes(scene,map, (o) => isJanusTag(o)                 ) // then regular janus tags
+  applyPrefixes(scene,map, (o) => !isJanusTag(o) && !isAsset(o) ) // then set properties on the rest
+  applyCleanup(cleanup)
+}
+
+
+xrf_engines.toJanusObject = function(obj,opts){
+  if( room.objects[ obj.name ] ) return room.objects[ obj.name ]
+  opts = opts || {}
+  opts.tag = opts.tag || 'object'
+  const create = () => room.createObject( opts.tag,{ js_id: obj.name, ...opts })
+  let jo = create()
+  jo.objects['3d'] = obj
+  return jo
+}
+
+xrf_engines.applyPrefixes = function(scene,map,criteria){
+  criteria = criteria ? criteria : (obj) => true 
+  scene.traverse( (obj) => {
+    if( criteria(obj) ){
+      for( let field in obj.userData ){
+        if( obj.userData[field] ){ 
+          try{
+            map(obj,field, field.replace(/^-(janus|three)-/,'') )
+          }catch(e){ console.error(e) }
+        }
+      }
+    }
+  })
+}
+
+xrf_engines.applyCleanup = function(cleanup){
+  const clean = (o) => {
+    if( o.geometry ) o.geometry.dispose()
+    if( o.material ) o.material.dispose()
+    o.removeFromParent()
+  }
+  cleanup.map(clean)
+}
+
+
+elation.events.add(null, 'room_load_complete', xrf_engines ) // future scenes
+if( room.loaded ) xrf_engines()                              // current scene

package/media/assets/webui/apps/xrfragment/patch/metaquest-fix-flickering.js

@@ -0,0 +1,15 @@
+// Meta Quest 2 results in rapid flickering when loading a new room
+// therefore we show the shroud while loading
+setActiveRoom = room.janus.setActiveRoom.bind(room.janus)
+room.janus.setActiveRoom = function(url,referer,skipURL){
+  if( url.replace(/#.*/,'') != room.url ){
+    room.fadeAudioOut()
+    setTimeout( function(){ 
+      setActiveRoom.apply(room.janus, [url, referer, skipURL])
+    }, 500)
+  }else{ 
+    room.urlhash = url.match('#') ? url.replace(/.*#/,'') : 'spawn'
+    room.setPlayerPosition()
+    // ignore same-room setActiveRoom-calls (it restarts audio when clicking internal hyperlinks)
+  }
+}

package/media/assets/webui/apps/xrfragment/xrfragment.json

@@ -0,0 +1,14 @@
+{
+  "templates": {
+  },
+  "scripts":  [
+    "./level2-hyperlink.js",
+    "./level0-sidecarfile.js",
+    "./level7-engine-prefixes.import.js",
+    "./level7-engine-prefixes.export.js",
+    "./patch/metaquest-fix-flickering.js"
+  ],
+  "css":      []
+}
+
+

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 }
 ]