janusweb 1.5.42 → 1.5.43

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 },
       });
 
@@ -50,9 +53,9 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       elation.events.add(this.engine.client.view.container, 'touchend', 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 +104,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 +414,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();
 
@@ -846,11 +860,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 +884,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,8 +898,9 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
           this.setCollider('sphere', {
             radius: this.collision_radius,
           });
-*/
           this.pickable = false;
+          this.collidable = false;
+*/
           this.setCollider('capsule', {
             radius: this.collision_radius,
             length: 1,
@@ -951,6 +976,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++) {
@@ -1112,8 +1138,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 +1164,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) ]

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() {
@@ -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,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
           this.laser.updateColor();
           this.cursor.image_id = 'cursor_dot_active';
           this.cursor.opacity = player.cursor_opacity;
+          this.bonk.opacity = 0.2 * player.cursor_opacity;
           //this.laser.visible = false; // FIXME - hack to disable laser without breaking things
 
 /*
@@ -769,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,
@@ -781,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);
@@ -796,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++) {
@@ -820,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', {