janusweb 1.5.41 → 1.5.43

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) {
@@ -282,7 +286,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         janus.engine.systems.controls.removeVirtualGamepad(this.device.gamepad);
       },
       async createMotionController(xrInputSource) {
-        let uri = 'https://baicoianu.com/~bai/webxr-input-profiles/packages/assets/dist/profiles';
+        let uri = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/assets@latest/dist/profiles';
         const { profile, assetPath } = await elation.janusweb.external.webxrinput.fetchProfile(xrInputSource, uri);
         const motionController = new elation.janusweb.external.webxrinput.MotionController(xrInputSource, profile, assetPath);
         this.motionController = motionController;
@@ -291,6 +295,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
 
         this.controller = this.createObject('object', {
           id: 'blah-' + this.device.handedness,
+          cull_face: 'back',
           visible: true,
         });
         this.controller.addEventListener('load', (ev) => { this.controller.visible = true; });
@@ -375,7 +380,10 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
             if (this.controller) this.controller.visible = false;
             if (this.skeleton) this.skeleton.visible = true;
           } else {
-            if (this.controller) this.controller.visible = true;
+            if (this.controller) {
+              this.controller.visible = true;
+              this.controller.opacity = player.cursor_opacity;
+            }
             if (this.skeleton) {
               this.skeleton.die();
               this.skeleton = false;
@@ -386,9 +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);
+        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() {
@@ -541,6 +574,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           opacity: .8,
           col: this.lasercolor,
           visible: false,
+          transparent: true,
         });
         this.bonk = this.createObject('object', {
           id: 'cylinder',
@@ -563,6 +597,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           opacity: .5,
           cull_face: 'none',
           billboard: 'y',
+          transparent: true,
         });
         this.raycaster = this.createObject('raycaster', {});
         this.raycaster.addEventListener('raycastenter', (ev) => this.handleRaycastEnter(ev));
@@ -580,6 +615,43 @@ 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;
+        let proxyobj = this.activeobject,
+            obj = proxyobj._target;
+        if (obj && proxyobj && (
+              obj.onclick ||
+              elation.events.hasEventListener(obj, 'click') ||
+              elation.events.hasEventListener(proxyobj, 'click') ||
+              obj.onmousedown ||
+              elation.events.hasEventListener(obj, 'mousedown') ||
+              elation.events.hasEventListener(proxyobj, 'mousedown')
+            )) {
+          this.laser.col.setRGB(0,255,0);
+          this.laser.opacity = player.cursor_opacity * .8;
+          this.laser.updateColor();
+          this.cursor.image_id = 'cursor_dot_active';
+          this.cursor.opacity = player.cursor_opacity;
+          this.bonk.opacity = 0.2 * player.cursor_opacity;
+          //this.laser.visible = false; // FIXME - hack to disable laser without breaking things
+
+/*
+          let gamepad = this.device.gamepad;
+          if ("hapticActuators" in gamepad && gamepad.hapticActuators.length > 0) {
+            gamepad.hapticActuators[0].pulse(1, 100);
+          }
+*/
+
+        } else {
+          this.laser.col.setRGB(255,0,0);
+          this.laser.opacity = player.cursor_opacity * .4;
+          this.laser.updateColor();
+          this.cursor.image_id = 'cursor_dot_inactive';
+          this.cursor.opacity = player.cursor_opacity / 2;
+          //this.laser.visible = false; // FIXME - hack to disable laser without breaking things
+        }
       },
       handleRaycastEnter(ev) {
         let proxyobj = ev.data.object,
@@ -607,10 +679,10 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
               elation.events.hasEventListener(proxyobj, 'mousedown')
             )) {
           this.laser.col.setRGB(0,1,0);
-          this.laser.opacity = .8;
+          this.laser.opacity = player.cursor_opacity * .8;
           this.laser.updateColor();
           this.cursor.image_id = 'cursor_dot_active';
-          this.cursor.opacity = 1;
+          this.cursor.opacity = player.cursor_opacity;
           //this.laser.visible = false; // FIXME - hack to disable laser without breaking things
 
 /*
@@ -622,10 +694,10 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
 
         } else {
           this.laser.col.setRGB(1,0,0);
-          this.laser.opacity = .4;
+          this.laser.opacity = player.cursor_opacity * .4;
           this.laser.updateColor();
           this.cursor.image_id = 'cursor_dot_inactive';
-          this.cursor.opacity = .5;
+          this.cursor.opacity = player.cursor_opacity / 2;
           //this.laser.visible = false; // FIXME - hack to disable laser without breaking things
         }
 
@@ -669,7 +741,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
       },
       handleRaycastLeave(ev) {
         this.laser.col.setRGB(0,1,1);
-        this.laser.opacity = .2;
+        this.laser.opacity = player.cursor_opacity * .2;
         this.laser.updateColor();
       },
       handleSelectStart(ev) {
@@ -727,6 +799,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,
@@ -739,11 +839,22 @@ 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.jointmaterial = new THREE.MeshPhysicalMaterial({color: 0xccffcc, metalness: 1, roughness: .5, emissive: 0xccffcc, transparent: true});
+        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);
@@ -754,11 +865,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,
             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++) {
@@ -778,15 +892,33 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
             this.jointposes[jointname] = jointpose;
           }
         }
+*/
+        for ( const inputjoint of this.hand.values() ) {
+          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();
+            this.joints.setMatrixAt(i, tmpobj.matrix);
+            //FIVARSlog('xr.debug', 'update joint: ' + i + ', ' + jointname + ', ' + tmpobj.matrix.elements.join(', '));
+          }
+          i++;
+          this.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 (this.jointposes['wrist']) this.localToWorld(this.handpos.copy(this.jointposes['wrist'].transform.position));
+        if (this.jointposes['thumb-tip']) this.localToWorld(this.p0.copy(this.jointposes['thumb-tip'].transform.position));
+        if (this.jointposes['index-finger-tip']) this.localToWorld(this.p1.copy(this.jointposes['index-finger-tip'].transform.position));
+        if (this.jointposes['middle-finger-tip']) this.localToWorld(this.p2.copy(this.jointposes['middle-finger-tip'].transform.position));
+        if (this.jointposes['ring-finger-tip']) this.localToWorld(this.p3.copy(this.jointposes['ring-finger-tip'].transform.position));
+        if (this.jointposes['pinky-finger-tip']) this.localToWorld(this.p4.copy(this.jointposes['pinky-finger-tip'].transform.position));
         this.isactive = true;
+        this.jointmaterial.opacity = player.cursor_opacity;
       }
     });
     janus.registerElement('trackedplayer_hand_virtualskeleton', {

package/scripts/multiplayermanager.js

@@ -272,6 +272,10 @@ console.log('[MultiplayerManager] set active room:', room, this.activeroom);
           };
         }
       } 
+      let morphtargetdata = player.getMorphTargetData();
+      if (morphtargetdata) {
+        moveData.morphtargets = morphtargetdata
+      }
 
 //console.log(moveData, server, room);
       server.send({'method': 'move', 'data': moveData});