janusweb 1.5.42 → 1.5.44

package/scripts/janusparticle.js

@@ -285,7 +285,7 @@ elation.require(['janusweb.janusbase'], function() {
       this.emitted = 0;
     }
     this.updateParticles = function(ev) {
-      if (!this.loaded || !this.started || !this.parent) return;
+      if (!this.loaded || !this.started || !this.parent || !this.visible) return;
       var now = performance.now(),
           elapsed = now - this.lasttime,
           endtime = now + this.duration * 1000,
@@ -553,9 +553,10 @@ elation.require(['janusweb.janusbase'], function() {
 
       point.active = 1;
 
-      var pos = this.geometry.attributes.position.array,
-          color = this.geometry.attributes.customColor.array,
-          size = this.geometry.attributes.size.array;
+      var geo = this.geometry,
+          pos = geo.attributes.position.array,
+          color = geo.attributes.customColor.array,
+          size = geo.attributes.size.array;
 
       if (newpos) {
         point.pos.copy(newpos);
@@ -564,8 +565,14 @@ elation.require(['janusweb.janusbase'], function() {
         pos[offset + 1] = newpos.y;
         pos[offset + 2] = newpos.z;
 
-        this.geometry.attributes.position.needsUpdate = true;
-        this.updateBoundingSphere(newpos);
+        geo.attributes.position.needsUpdate = true;
+        //this.updateBoundingSphere(newpos);
+        if (!this.updateBoundingSphereTimer) {
+          this.updateBoundingSphereTimer = setTimeout(() => {
+            this.updateBoundingSphere(newpos);
+            this.updateBoundingSphereTimer = false;
+          }, 0);
+        }
       }
 
       if (newvel) {
@@ -582,23 +589,119 @@ elation.require(['janusweb.janusbase'], function() {
         color[pointnum*4    ] = newcol.x;
         color[pointnum*4 + 1] = newcol.y;
         color[pointnum*4 + 2] = newcol.z;
-        color[pointnum*4 + 3] = elation.utils.any(point.opacity, this.opacity, 1);
+        color[pointnum*4 + 3] = elation.utils.any(point.opacity, this.properties.opacity, 1);
 
-        this.geometry.attributes.customColor.needsUpdate = true;
+        geo.attributes.customColor.needsUpdate = true;
       }
       if (newsize) {
         point.size = newsize;
         size[pointnum] = newsize;
 
-        this.geometry.attributes.size.needsUpdate = true;
+        geo.attributes.size.needsUpdate = true;
       }
       point.opacity = newopacity;
 
-      if (pointnum >= this.count) {
-        this.count = this.particles.length;
-        this.createParticles(false);
-        this.updateParticles();
+      if (pointnum >= this.properties.count) {
+        if (!this.updateParticleTimer) {
+          this.updateParticleTimer = setTimeout(() => { 
+            this.count = this.particles.length;
+            this.createParticles(false);
+            this.updateParticleTimer = false;
+          }, 0);
+        }
       }
     }
+    this.setPoints = (function() {
+      let furthest = new THREE.Vector3();
+      return function(points) {
+        var geo = this.geometry,
+            pos = geo.attributes.position.array,
+            color = geo.attributes.customColor.array,
+            size = geo.attributes.size.array;
+            furthestDistSq = 0,
+            particles = this.particles;
+        for (let i = 0; i < points.length; i++) {
+          let point = particles[i],
+              newpoint = points[i],
+              offset = i * 3;
+          
+          if (!point) {
+            point = this.createPoint();
+            point.active = 1;
+            particles[i] = point;
+          }
+
+          point.active = 1;
+
+          if ('pos' in newpoint) {
+            //point.pos.copy(newpoint.pos);
+            let p1 = point.pos,
+                p2 = newpoint.pos;
+            pos[offset    ] = p1.x = p2.x;
+            pos[offset + 1] = p1.y = p2.y;
+            pos[offset + 2] = p1.z = p2.z;
+
+  /*
+            point.pos.copy(newpoint.pos);
+            pos[offset    ] = point.pos.x;
+            pos[offset + 1] = point.pos.y;
+            pos[offset + 2] = point.pos.z;
+  */
+
+            //this.updateBoundingSphere(newpos);
+            let distSq = p2.x * p2.x + p2.y * p2.y + p2.z * p2.z;
+            if (distSq > furthestDistSq) {
+              furthest.x = newpoint.pos.x;
+              furthest.y = newpoint.pos.y;
+              furthest.z = newpoint.pos.z;
+              furthestDistSq = distSq;
+            }
+          }
+
+          if ('vel' in newpoint) {
+            //point.vel.copy(newpoint.vel);
+            point.vel.x = newpoint.vel.x;
+            point.vel.y = newpoint.vel.y;
+            point.vel.z = newpoint.vel.z;
+          }
+
+          if ('accel' in newpoint) {
+            //point.accel.copy(newpoint.accel);
+            point.accel.x = newpoint.accel.x;
+            point.accel.y = newpoint.accel.y;
+            point.accel.z = newpoint.accel.z;
+          }
+
+          if ('opacity' in newpoint) {
+            point.opacity = newpoint.opacity;
+          }
+
+
+          if ('col' in newpoint) {
+            point.color.setRGB(newpoint.col.x, newpoint.col.y, newpoint.col.z);
+
+            color[i*4    ] = newpoint.col.x;
+            color[i*4 + 1] = newpoint.col.y;
+            color[i*4 + 2] = newpoint.col.z;
+            color[i*4 + 3] = elation.utils.any(point.opacity, this.properties.opacity, 1);
+
+            geo.attributes.customColor.needsUpdate = true;
+          }
+          if ('size' in newpoint) {
+            point.size = newpoint.size;
+            size[i] = newpoint.size;
+
+            geo.attributes.size.needsUpdate = true;
+          }
+        }
+        geo.attributes.position.needsUpdate = true;
+        this.updateBoundingSphere(furthest);
+        if (points.length >= this.properties.count) {
+          this.count = particles.length;
+          this.createParticles(false);
+          this.updateParticleTimer = false;
+        }
+      }
+    })();
   }, elation.engine.things.janusbase);
 });

package/scripts/janusplayer.js

@@ -3,6 +3,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
 
   elation.component.add('engine.things.janusplayer', function() {
     //this.defaultavatar = '<FireBoxRoom>\n  <Assets>\n    <AssetObject id="screen" src="https://web.janusxr.org/media/assets/hoverscreen.obj" mtl="https://web.janusxr.org/media/assets/hoverscreen.mtl" />\n  </Assets>\n  <Room>\n    <Ghost id="januswebuser" col="#ffffff" lighting="true" head_pos="0 1.4 0" body_id="" eye_pos="0 1.6 0" userid_pos="0 0.5 0" cull_face="back" screen_name="screen_Cube.004">\n      <Object id="screen" js_id="head" />\n    </Ghost>\n  </Room>\n</FireBoxRoom>'
+    //this.defaultavatar = '<FireBoxRoom>\n<Assets>\n<AssetObject id="screen" src="https://vesta.janusxr.org/avatars/static/janusweb/janusweb.obj.gz" mtl="https://vesta.janusxr.org/user_avatar/12689/janusweb.mtl" /></Assets>\n<Room>\n<Ghost id="januswebuser" head_id="screen" head_pos="0 1.4 0" body_id="" eye_pos="0 1.6 0" userid_pos="0 0.5 0" cull_face="back" />\n</Room>\n</FireBoxRoom>';
     this.defaultavatar = `
     <FireBoxRoom>
       <assets>
@@ -35,6 +36,8 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
         party_mode: { type: 'boolean', set: this.updatePartyMode },
         avatarsrc: { type: 'string' },
         cameraview: { type: 'string', default: 'firstperson' },
+        camerazoom: { type: 'float', default: 0 },
+        cameraangle: { type: 'float', default: 0 },
         decouplehead: { type: 'boolean', default: false },
       });
 
@@ -48,11 +51,12 @@ 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_v,keyboard_shift_v', elation.bind(this, this.toggleCamera)],
-        'zoom_out': ['mouse_wheel_down', ev => this.zoomView(-1)],
-        'zoom_in': ['mouse_wheel_up', ev => this.zoomView(1)],
+        'toggle_view': ['keyboard_nomod_v,keyboard_shift_v', elation.bind(this, 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)],
         //'browse_forward': ['gamepad_any_button_5', elation.bind(this, this.browseForward)],
       });
@@ -101,6 +105,17 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       this.cursor_style = 'default';
       this.cursor_object = '';
       this.lookat_object = '';
+      window.addEventListener('blur', ev => {
+        if (document.pointerLockElement && document.activeElement instanceof HTMLIFrameElement) {
+          document.pointerLockElement.focus();
+//this.disable();
+      this.engine.systems.controls.deactivateContext('janusplayer');
+      this.engine.systems.controls.activateContext('janusplayer');
+let click = new MouseEvent('click', { });
+document.body.dispatchEvent(click);
+//setTimeout(() => this.enable(), 100);
+        }
+      });
 
       if (this.usevoip) {
         this.voip = new JanusVOIPRecorder({audioScale: 1024});
@@ -400,7 +415,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       }
       if (this.controlstate.jump && !this.jumping) {
         let jumptime = 1;
-        if (this.ghost && this.ghost.body.animations && this.ghost.body.animations.jump) {
+        if (this.ghost && this.ghost.body && this.ghost.body.animations && this.ghost.body.animations.jump) {
           let jumpanim = this.ghost.body.animations.jump;
           let jumpclip = jumpanim.getClip();
 
@@ -542,8 +557,34 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       }
     }
     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) {
@@ -846,11 +887,18 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       if (proxyobj) {
         //var realobj = this.room.getObjectFromProxy(proxyobj);
         if (proxyobj.parent) {
-          proxyobj.parent.removeChild(proxyobj);
+          if (typeof proxyobj.parent.removeChild == 'function') {
+            proxyobj.parent.removeChild(proxyobj);
+          } else if (typeof proxyobj.parent.remove == 'function') {
+            proxyobj.parent.remove(proxyobj._target);
+          }
         }
         var realobj = proxyobj._target;
         if (realobj) {
           this.add(realobj);
+          if (typeof realobj.start == 'function') {
+            realobj.start();
+          }
         }
       }
     }
@@ -863,6 +911,9 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
         //var realobj = this.room.getObjectFromProxy(proxyobj);
         var realobj = proxyobj._target;
         if (realobj) {
+          if (typeof realobj.stop == 'function') {
+            realobj.stop();
+          }
           this.remove(realobj);
         }
       }
@@ -874,6 +925,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
           this.setCollider('sphere', {
             radius: this.collision_radius,
           });
+          this.collidable = false;
 */
           this.pickable = false;
           this.setCollider('capsule', {
@@ -951,6 +1003,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       }
     }
     this.handleTouchStart = function(ev) {
+      //if (!this.enabled) return;
       let halfscreenwidth = window.innerWidth / 2;
       this.enabled = true;
       for (let i = 0; i < ev.changedTouches.length; i++) {
@@ -963,8 +1016,9 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
         }
       }
       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;
@@ -1000,22 +1054,22 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
           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') {
@@ -1112,8 +1166,10 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
           elapsed = now - this.lookAtLERPstart,
           n = Math.min(1, Math.max(0, elapsed / this.lookAtLERPtime));
 
-      THREE.Quaternion.slerp(this.lookAtLERPq1body, this.lookAtLERPq2body, this.orientation, n);
-      THREE.Quaternion.slerp(this.lookAtLERPq1head, this.lookAtLERPq2head, this.head.orientation, n);
+      //THREE.Quaternion.slerp(this.lookAtLERPq1body, this.lookAtLERPq2body, this.orientation, n);
+      //THREE.Quaternion.slerp(this.lookAtLERPq1head, this.lookAtLERPq2head, this.head.orientation, n);
+      this.orientation.slerpQuaternions(this.lookAtLERPq1body, this.lookAtLERPq2body, n);
+      this.head.orientation.slerpQuaternions(this.lookAtLERPq1head, this.lookAtLERPq2head, n);
       if (n == 1) {
         this.lookAtLERPtime = 0;
       }
@@ -1136,16 +1192,35 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       if (ev.value == 1) {
         if (this.cameraview == 'firstperson') {
           this.cameraview = 'thirdperson';
-          this.camera.position.z = 2;
+          this.cameraangle = 0;
+          this.camerazoom = 2;
         } else {
           this.cameraview = 'firstperson';
-          this.camera.position.z = 0;
+          this.cameraangle = 0;
+          this.camerazoom = 0;
         }
+        this.updateCamera();
       }
     }
-    this.zoomView = function(amount) {
+    this.zoomView = function(amount, ev) {
       if (this.cameraview == 'thirdperson') {
-        this.camera.position.z -= amount / 10;
+        //this.camera.position.z -= amount / 10;
+        //this.camera.position.z = Math.max(0.001, this.camera.position.z * (amount > 0 ? .95 : 1.05));
+        let state = this.engine.systems.controls.state;
+        if (state.keyboard_alt) {
+          this.cameraangle += amount * Math.PI / 64;
+        } else {
+          this.camerazoom = Math.max(0.001, this.camerazoom * (amount > 0 ? .95 : 1.05));
+        }
+        this.updateCamera();
+      }
+    }
+    this.updateCamera = function() {
+      if (this.camera) {
+        this.camera.fov = this.fov;
+        this.camera.position.z = Math.cos(this.cameraangle) * this.camerazoom;
+        this.camera.position.x = Math.sin(this.cameraangle) * this.camerazoom;
+        this.camera.orientation.setFromEuler(new THREE.Euler(0, this.cameraangle, 0));
       }
     }
     this.setAnimationSequence = function(sequence) {

package/scripts/janusweb.js

@@ -90,7 +90,7 @@ elation.require([
       this.engine.systems.controls.addContext('janus', {
         //'load_url': [ 'keyboard_tab', elation.bind(this, this.showLoadURL) ],
         'toggle_menu': [ 'keyboard_esc', elation.bind(this, this.toggleMenu) ],
-        'room_debug': [ 'keyboard_f6', elation.bind(this, this.showRoomDebug) ],
+        //'room_debug': [ 'keyboard_f6', elation.bind(this, this.showRoomDebug) ],
         'chat': [ 'keyboard_t', elation.bind(this, this.showChat) ],
         'bookmark': [ 'keyboard_ctrl_b', elation.bind(this, this.addBookmark) ],
         'mute': [ 'keyboard_ctrl_m', elation.bind(this, this.mute) ]
@@ -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

@@ -265,6 +265,10 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           pos: menupos,
           rotation: menurot,
         });
+        this.menupos = menupos;
+        this.menurot = menurot;
+        this.removeChild(this.menu);
+
         player.setHand(this.device.handedness, this.virtualskeleton);
       },
       updateDevice(device) {
@@ -390,10 +394,34 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
             this.updateMotionControllerModel(this.motionController);
           }
         }
-        if (this.pointer && raypose) {
-          this.pointer.pos.copy(raypose.transform.position);
-          this.pointer.orientation.copy(raypose.transform.orientation);
-          this.pointer.updateCursorOpacity();
+        if (this.pointer) {
+          if (raypose) {
+            this.pointer.pos.copy(raypose.transform.position);
+            this.pointer.orientation.copy(raypose.transform.orientation);
+            this.pointer.updateCursorOpacity();
+            this.pointer.visible = this.visible && this.opacity > 0;
+          } else {
+            this.pointer.visible = false;
+          }
+        }
+        if (this.gamepad && this.gamepad.buttons && this.gamepad.buttons[4]) {
+          let button = this.gamepad.buttons[4];
+          if (button.pressed) {
+            this.buttonwaspressed = true;
+          } else if (this.buttonwaspressed && !button.pressed) {
+            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)));
+              this.menu.billboard = 'y';
+            } else {
+              //this.appendChild(this.menu);
+              player.removeChild(this.menu);
+              this.menu.billboard = '';
+              this.menu.pos.copy(this.menupos);
+              //this.menu.visible = false;
+            }
+          } 
         }
       },
       createButtons() {
@@ -542,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,
@@ -552,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,
         });
@@ -587,6 +615,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         //this.cursor.zdir.copy(player.view_dir).multiplyScalar(-1);
         //this.cursor.zdir = normal;
         this.cursor.visible = true;
+        this.cursor.opacity = .8 * player.cursor_opacity;
       },
       updateCursorOpacity() {
         if (!this.activeobject) return;
@@ -605,6 +634,8 @@ 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
 
 /*
@@ -620,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
         }
       },
@@ -769,6 +801,34 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
       fingernames: ['THUMB', 'INDEX', 'MIDDLE', 'RING', 'LITTLE'],
       phalanxnames: ['METACARPAL', 'PHALANX_PROXIMAL', 'PHALANX_DISTAL', 'PHALANX_TIP'],
 
+      jointnames: [
+        'wrist',
+        'thumb-metacarpal',
+        'thumb-phalanx-proximal',
+        'thumb-phalanx-distal',
+        'thumb-tip',
+        'index-finger-metacarpal',
+        'index-finger-phalanx-proximal',
+        'index-finger-phalanx-intermediate',
+        'index-finger-phalanx-distal',
+        'index-finger-tip',
+        'middle-finger-metacarpal',
+        'middle-finger-phalanx-proximal',
+        'middle-finger-phalanx-intermediate',
+        'middle-finger-phalanx-distal',
+        'middle-finger-tip',
+        'ring-finger-metacarpal',
+        'ring-finger-phalanx-proximal',
+        'ring-finger-phalanx-intermediate',
+        'ring-finger-phalanx-distal',
+        'ring-finger-tip',
+        'pinky-finger-metacarpal',
+        'pinky-finger-phalanx-proximal',
+        'pinky-finger-phalanx-intermediate',
+        'pinky-finger-phalanx-distal',
+        'pinky-finger-tip',
+      ],
+
       isactive: true,
       handpos: null,
       p0: null,
@@ -781,11 +841,24 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         this.handmodel = this.parent.createObject('object', {
           id: 'cube',
           scale: V(.075, .025, .075),
-          col: 'green'
+          col: 'green',
+          visible: false
         });
         this.tmpobj = new THREE.Object3D();
-        this.joints = new THREE.InstancedMesh(new THREE.SphereBufferGeometry(1), new THREE.MeshPhysicalMaterial({color: 0xccffcc, metalness: .2, roughness: .5}), 26);
+        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);
+        let tmpobj = this.tmpobj;
+        for (let i = 0; i < 26; i++) {
+          tmpobj.position.set(Math.random(), Math.random(), Math.random());
+          tmpobj.scale.set(.0001, .0001, .0001);
+          tmpobj.updateMatrix();
+          this.joints.setMatrixAt(i, tmpobj.matrix);
+        }
+
         this.jointposes = {};
         this.objects['3d'].add(this.joints);
         this.handpos = new THREE.Vector3(0, 0, 0);
@@ -796,11 +869,14 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         this.p4 = new THREE.Vector3(0, 0, 0);
       },
       updatePose(xrFrame, xrReferenceFrame) {
-        if (!this.hand || !this.joints || !this.hand[0]) return;
+        if (!this.hand || !this.joints || !this.tmpobj) {
+          return;
+        }
 
-        let tmpobj = this.tmpobj,
+        let tmpobj = this.tmpobj, tmpquat = this.tmpquat,
             i = 0;
         let poses = this.jointposes;
+/*
         let wristpose = xrFrame.getJointPose(this.hand[XRHand['WRIST']], xrReferenceFrame);
         this.jointposes['WRIST'] = wristpose;
         for (let fingernum = 0; fingernum < this.fingernames.length; fingernum++) {
@@ -820,15 +896,39 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
             this.jointposes[jointname] = jointpose;
           }
         }
+*/
+        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++;
+          jointposes[jointname] = jointpose;
+        }
         this.joints.instanceMatrix.needsUpdate = true;
-
-        if (this.jointposes['WRIST']) this.localToWorld(this.handpos.copy(this.jointposes['WRIST'].transform.position));
-        if (this.jointposes['THUMB_PHALANX_TIP']) this.localToWorld(this.p0.copy(this.jointposes['THUMB_PHALANX_TIP'].transform.position));
-        if (this.jointposes['INDEX_PHALANX_TIP']) this.localToWorld(this.p1.copy(this.jointposes['INDEX_PHALANX_TIP'].transform.position));
-        if (this.jointposes['MIDDLE_PHALANX_TIP']) this.localToWorld(this.p2.copy(this.jointposes['MIDDLE_PHALANX_TIP'].transform.position));
-        if (this.jointposes['RING_PHALANX_TIP']) this.localToWorld(this.p3.copy(this.jointposes['RING_PHALANX_TIP'].transform.position));
-        if (this.jointposes['LITTLE_PHALANX_TIP']) this.localToWorld(this.p4.copy(this.jointposes['LITTLE_PHALANX_TIP'].transform.position));
+        //this.joints.computeBoundingSphere();
+
+        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;
       }
     });
     janus.registerElement('trackedplayer_hand_virtualskeleton', {