janusweb 1.5.30 → 1.5.34

package/CHANGELOG

@@ -1,3 +1,42 @@
+JanusWeb 1.5
+============
+- Threejs upgrade to r133
+- Skeletal and morphtarget animation support
+- Lighting and material improvements
+  - Transmission
+  - Clearcoat
+  - HDRI envmaps (EXR)
+  - Improved shadow mapping
+  - light_style parameter for Quake-style light patterns
+  - DRACO glTF compression
+- Avatar improvements
+  - Ready Player Me
+  - Animation packs
+  - Morph targets for speaking, blinking, etc
+  - Smarter fading
+  - Third person camera option
+- WebXR improvements
+  - Stripped out all legacy WebVR and draft WebXR code
+  - Optimized performance
+  - WebXR Layers for equi video playback
+  - WebXR Navigation
+  - In-VR UI
+- Collision improvements
+  - New collision combos: sphere/mesh, capsule/mesh, capsule/capsule
+- Audio Improvements
+  - Room audio graph support
+  - HiFi VOIP backend support
+  - Configurable VOIP backend per room
+- Experimental / future Stuff
+  - AR with plane detection and lighting estimation
+  - Swappable physics backends
+  - NVIDIA PhysX / multi-threaded physics
+  - TensorFlow.js integration - BlazePose full-body tracking, FacePose, HandPose
+  - Hybrid standalone XR HMD + desktop processing using local network WebRTC
+  - Continued performance improvements
+  - iOS support
+  - Patreon and Gitcoin donation pages
+
 JanusWeb 1.3
 ============
 - Engine improvements

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013-2016 James Baicoianu and JanusVR, Inc.
+Copyright (c) 2013-2021 James Baicoianu and JanusVR, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/media/assets/webui/apps/avatar/avatar.css

@@ -1,8 +1,6 @@
 janus-avatar-picker {
   display: block;
   width: 100%;
-  max-width: 40em;
-  text-align: center;
 }
 janus-avatar-picker ui-list {
   height: 20vh;
@@ -48,3 +46,9 @@ janus-avatar-picker-item h2 {
 janus-avatar-picker ui-button {
   font-size: 2em;
 }
+janus-avatar-picker iframe {
+  width: 100%;
+  height: 38em;
+  max-height: 80%;
+  border: 0;
+}

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

@@ -1,3 +1,4 @@
+/*
 janus.registerElement('avatar_simple', {
   headsrc: 'media/assets/hoverscreen.obj',
   bodysrc: '',
@@ -35,27 +36,57 @@ janus.registerElement('avatar_rigged', {
   updateXR(pose, referenceSpace) {
   }
 });
-
+*/
 elation.elements.define('janus-avatar-picker', class extends elation.elements.base {
   init() {
     this.defineAttribute('src', { type: 'string' });
+    this.defineAttribute('sources', { type: 'object' });
     this.defineAttribute('previewpos', { type: 'vector3', default: V(-2, 0, -3) });
+    this.defineAttribute('hideconfirm', { type: 'boolean', default: false });
     this.defineAttribute('hidereset', { type: 'boolean', default: false });
     this.selected = false;
   }
   create() {
-    let tpl = `
-      <collection-jsonapi id="avatarlist" endpoint="${this.src}"></collection-jsonapi>
-      <ui-list name="avatar" selectable="1" collection="avatarlist" itemcomponent="janus-avatar-picker-item"></ui-list>
-      <ui-button name="confirm" disabled="1">Confirm</ui-button>
-    `;
+    let tpl = '';
+    if (this.sources) {
+      let sources = (elation.utils.isString(this.sources) ? JSON.parse(this.sources) : this.sources);
+      console.log('HI YES', sources);
+      if (sources.length > 1) {
+        tpl += '<ui-tabs>';
+        sources.forEach(source => {
+          let sourcestr = this.getSourceString(source);
+          tpl += `<ui-tab label="${source.name}">${sourcestr}</ui-tab>`;
+        });
+      } else {
+        tpl = this.getSourceString(sources[0]);
+      }
+    } else {
+      tpl = `
+        <ui-tabs>
+          <ui-tab label="Chibis">
+            <collection-jsonapi id="avatarlist" endpoint="${this.src}"></collection-jsonapi>
+            <ui-list name="avatar" selectable="1" collection="avatarlist" itemcomponent="janus-avatar-picker-item"></ui-list>
+          </ui-tab>
+          <ui-tab label="Ready Player Me">
+            <iframe src="https://demo.readyplayer.me/avatar" allow="camera"></iframe>
+          </ui-tab>
+        </ui-tabs>
+      `;
+    }
+    if (!this.hideconfirm) {
+      tpl += `<ui-button name="confirm" disabled="1">Confirm</ui-button>`;
+    }
     if (!this.hidereset) {
-      tpl += '<ui-button name="reset">Reset</ui-button>';
+      tpl += `<ui-button name="reset">Reset</ui-button>`;
     }
     this.elements = elation.elements.fromString(tpl, this);
 
-    elation.events.add(this.elements['avatar'], 'select', (ev) => this.handleAvatarSelect(ev));
-    elation.events.add(this.elements['confirm'], 'click', (ev) => this.handleAvatarConfirm(ev));
+    if (this.elements['avatar']) {
+      elation.events.add(this.elements['avatar'], 'select', (ev) => this.handleAvatarSelect(ev));
+    }
+    if (this.elements['confirm']) {
+      elation.events.add(this.elements['confirm'], 'click', (ev) => this.handleAvatarConfirm(ev));
+    }
     if (this.elements['reset']) {
       elation.events.add(this.elements['reset'], 'click', (ev) => this.handleAvatarReset(ev));
     }
@@ -66,6 +97,19 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
     let observer = new IntersectionObserver(ev => this.handleIntersectionChange(ev), { root: document, rootMargin: '0px', threshold: threshold });
     observer.observe(this);
     document.addEventListener('scroll', ev => this.handleScroll(ev));
+    window.addEventListener('message', ev => this.handleWindowMessage(ev));
+  }
+  getSourceString(source) {
+    let tpl = '';
+    if (source.type == 'list') {
+      tpl = `
+          <collection-jsonapi id="avatarlist" endpoint="${source.src}"></collection-jsonapi>
+          <ui-list name="avatar" selectable="1" collection="avatarlist" itemcomponent="janus-avatar-picker-item"></ui-list>
+      `;
+    } else if (source.type == 'iframe') {
+      tpl = `<iframe src="${source.src}" allow="camera"></iframe>`;
+    }
+    return tpl;
   }
   selectAvatar(avatar) {
     let items = this.elements.avatarlist.items,
@@ -83,6 +127,7 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
     }
   }
   showPreview(src) {
+/*
     if (!src) {
       src = 'data:text/plain,' + escape(player.getCurrentAvatarData());
     }
@@ -99,6 +144,28 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
       });
     }
     this.updatePreviewPosition();
+*/
+/*
+    let preview = this.previewwindow;
+    if (!preview) {
+console.log('append preview', this);
+        let avatarPreviewRoom = `
+          <fireboxroom>
+            <assets>
+            </assets>
+            <room skybox_left_id="black" skybox_right_id="black" skybox_up_id="black" skybox_down_id="black" skybox_front_id="black" skybox_back_id="black" use_local_asset="room_plane" zdir="0 0 -1">
+              <ghost id="{userid}" avatar_src="{src}" lighting="true" pos="0 0 4" rotate_deg_per_sec="20" />
+            </room>
+          </fireboxroom>`;
+      this.previewwindow = elation.elements.create('janus-viewer-avatar', {
+        src: 'data:text/plain,' + avatarPreviewRoom, //escape(player.getCurrentAvatarData()),
+        shownavigation: false,
+        uiconfig: 'https://baicoianu.com/~bai/janusweb/build/media/assets/webui/none.json',
+      });
+console.log('bleh', this.previewwindow);
+this.appendChild(this.previewwindow);
+    }
+*/
   }
   updatePreviewPosition() {
     if (this.avatarpreview) {
@@ -112,7 +179,10 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
     console.log('selected an avatar', ev.data);
     this.selected = ev.data;
     this.showPreview(ev.data.url);
-    this.elements.confirm.disabled = false;
+    if (this.elements.confirm) {
+      this.elements.confirm.disabled = false;
+    }
+    this.dispatchEvent(new CustomEvent("select", { detail: this.selected }));
   }
   handleAvatarConfirm(ev) {
     this.hidePreview(true);
@@ -126,7 +196,7 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
     }
   }
   handleAvatarReset(ev) {
-    player.setAvatar(player.defaultAvatar);
+    player.setAvatar(player.defaultavatar);
   }
   handleIntersectionChange(intersections) {
     if (this.avatarpreview && !intersections[0].isIntersecting) {
@@ -138,6 +208,24 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
   handleScroll(ev) {
     this.updatePreviewPosition();
   }
+  handleWindowMessage(ev) {
+    if (ev.origin.match(/https:\/\/.*\.readyplayer\.me/)) {
+      let avatarurl = ev.data;
+      let avatarstr = `
+<FireBoxRoom>
+  <assets>
+    <assetobject id="body" src="${avatarurl}" />
+    <assetobject id="avatar_animations" src="https://assets.metacade.com/james/readyplayerme/animations.glb" />
+  </assets>
+  <room>
+    <ghost body_id="body" bone_head="Head" morphtarget_mouth="mouthOpen" morphtarget_eyes="eyesClosed" />
+  </room>
+</FireBoxRoom>
+`;
+      player.setAvatar(avatarstr);
+      this.handleAvatarSelect({data: { url: 'data:text/plain,' + avatarstr } });
+    }
+  }
 });
 elation.elements.define('janus-avatar-picker-item', class extends elation.elements.ui.item {
   create() {

package/media/assets/webui/apps/buttons/buttons.html

@@ -1,12 +1,12 @@
       <ui-buttonbar>
         {#showedit}<janus-ui-editor-button title="Edit">Edit</janus-ui-editor-button>{/showedit}
-        {#showshare}<janus-button-share title="Share Link">Share</janus-button-share>{/showshare}
+        <!-- {#showshare}<janus-button-share title="Share Link">Share</janus-button-share>{/showshare} -->
         {#showfullscreen}<ui-button name="fullscreen" onclick="janus.engine.client.toggleFullscreen()" title="Fullscreen">⛶</ui-button>{/showfullscreen}
         {#showvr}<janus-button-webvr title="Enter VR"></janus-button-webvr>{/showvr}
         {#showar}<janus-button-webar title="Enter AR"></janus-button-webar>{/showar}
         {#showaudio}<janus-button-audio title="Audio Settings">Audio</janus-button-audio>{/showaudio}
         {#showvoip}<janus-button-voip title="Voice Settings">Voice</janus-button-voip>{/showvoip}
         {#showsettings}<janus-ui-settings-button title="Settings">Config</janus-ui-settings-button>{/showsettings}
-        {#showdebug}<janus-button-debug title="Debug">Debug</janus-button-debug>{/showdebug}
+        <!-- {#showdebug}<janus-button-debug title="Debug">Debug</janus-button-debug>{/showdebug} -->
       </ui-buttonbar>
 

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

@@ -3,14 +3,14 @@ elation.elements.define('janus.ui.buttons', class extends elation.elements.base
     super.init();
     this.defineAttributes({
       showedit: { type: 'boolean', default: true },
-      showshare: { type: 'boolean', default: true },
+      showshare: { type: 'boolean', default: false },
       showfullscreen: { type: 'boolean', default: true },
       showvr: { type: 'boolean', default: true },
       showar: { type: 'boolean', default: true },
       showsettings: { type: 'boolean', default: true },
       showaudio: { type: 'boolean', default: true },
       showvoip: { type: 'boolean', default: true },
-      showdebug: { type: 'boolean', default: true },
+      showdebug: { type: 'boolean', default: false },
     });
   }
   create() {
@@ -162,7 +162,7 @@ elation.elements.define('janus-button-webar', class extends elation.elements.ui.
   onactivate(ev) {
     this.label = this.activelabel;
     if (this.xr) {
-      janus.engine.client.startXR('immersive-ar', { requiredFeatures: ['plane-detection'], optionalFeatures: ['local-floor'] });
+      janus.engine.client.startXR('immersive-ar', { requiredFeatures: [], optionalFeatures: ['local-floor', 'plane-detection'] });
     }
   }
   ondeactivate(ev) {

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

@@ -290,6 +290,7 @@ elation.elements.define('janus-comms-voip', class extends elation.elements.base
 janus.registerElement('playerlabel', {
   player_name: '',
   font: 'monospace',
+  threshold: .2,
 
   create() {
     this.currentcolor = V(255,255,255);
@@ -297,7 +298,7 @@ janus.registerElement('playerlabel', {
     this.canvas.width = 512;
     this.canvas.height = 64;
     let imageid = this.player_name + '_playerlabel';
-    room.loadNewAsset('image', {
+    this.loadNewAsset('image', {
       id: imageid,
       canvas: this.canvas,
       hasalpha: true,
@@ -308,8 +309,8 @@ janus.registerElement('playerlabel', {
       //collision_id: 'cube',
       collision_scale: V(.85,7,.1),
       collision_pos: V(0,-3,0),
-      //collidable: true,
-      //pickable: true,
+      collidable: false,
+      pickable: true,
       scale: V(2,.25,1),
       image_id: imageid,
       billboard: 'y',
@@ -375,7 +376,9 @@ janus.registerElement('playerlabel', {
     console.log('got an audio source', source);
   },
   setAudioVolume(volume) {
-    if (volume > .1) {
+    let scale = 1 + (volume > this.threshold ? volume / 2.5 : 0);
+    this.scale.set(scale, scale, scale);
+    if (volume > this.threshold) {
       this.label.col = '#0f0';
       if (this.colorreset) {
         clearTimeout(this.colorreset);