From d81cb539a0c61dca58d930d7e49ad2c54e76a449 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Tue, 23 Feb 2021 17:49:30 -0800
Subject: [PATCH 1/5] Fix personal space bubble opacity

---
 src/components/tags.js                |  3 +-
 src/hub.html                          |  4 +--
 src/systems/personal-space-bubble.js  | 48 +++++++++++++++++++++------
 src/utils/traverseFilteredSubtrees.js | 11 ++++++
 4 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/traverseFilteredSubtrees.js

diff --git a/src/components/tags.js b/src/components/tags.js
index 8d9a281b30..4502934122 100644
--- a/src/components/tags.js
+++ b/src/components/tags.js
@@ -19,7 +19,8 @@ AFRAME.registerComponent("tags", {
     isHoverMenuChild: { default: false },
     isStatic: { default: false },
     inspectable: { default: false },
-    preventAudioBoost: { default: false }
+    preventAudioBoost: { default: false },
+    spaceBubbleIgnore: { default: false }
   },
   update() {
     if (this.didUpdateOnce) {
diff --git a/src/hub.html b/src/hub.html
index 6ffd4e7fa2..b3c7a3376d 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -137,7 +137,7 @@
                         </template>
 
                         <template data-name="Neck">
-                            <a-entity>
+                            <a-entity tags="spaceBubbleIgnore: true;">
                                 <a-entity
                                     billboard
                                     class="nametag"
@@ -173,7 +173,7 @@
                         </template>
 
                         <template data-name="Spine">
-                            <a-entity is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
+                            <a-entity tags="spaceBubbleIgnore: true;" is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
                                 <a-entity class="avatar-inspect-collider" avatar-inspect-collider tags="togglesHoveredActionSet: true;" is-remote-hover-target inspect-button></a-entity>
                                 <a-entity class="chest-image" scale="0.18 0.18 0.18" position="0 -0.025 0.13"></a-entity>
                                 <a-entity class="interactable ui interactable-ui">
diff --git a/src/systems/personal-space-bubble.js b/src/systems/personal-space-bubble.js
index a75e73e87f..9b434a29b1 100644
--- a/src/systems/personal-space-bubble.js
+++ b/src/systems/personal-space-bubble.js
@@ -1,5 +1,6 @@
 import { forEachMaterial } from "../utils/material-utils";
 import qsTruthy from "../utils/qs_truthy";
+import traverseFilteredSubtrees from "../utils/traverseFilteredSubtrees";
 
 const invaderPos = new AFRAME.THREE.Vector3();
 const bubblePos = new AFRAME.THREE.Vector3();
@@ -151,12 +152,12 @@ function createSphereGizmo(radius) {
   return line;
 }
 
-function findInvaderMesh(entity) {
+function getGLTFModelRoot(entity) {
   while (entity && !(entity.components && entity.components["gltf-model-plus"])) {
     entity = entity.parentNode;
   }
-  // TODO this assumes a single skinned mesh, should be some way for avatar to override this
-  return entity && entity.object3D.getObjectByProperty("type", "SkinnedMesh");
+
+  return entity;
 }
 
 const DEBUG_OBJ = "psb-debug";
@@ -177,12 +178,11 @@ AFRAME.registerComponent("personal-space-invader", {
   init() {
     const system = this.el.sceneEl.systems["personal-space-bubble"];
     system.registerInvader(this);
+
     if (this.data.useMaterial) {
-      const mesh = findInvaderMesh(this.el);
-      if (mesh) {
-        this.targetMesh = mesh;
-      }
+      this.gltfRootEl = getGLTFModelRoot(this.el);
     }
+
     this.invading = false;
     this.alwaysHidden = false;
   },
@@ -234,10 +234,36 @@ AFRAME.registerComponent("personal-space-invader", {
   applyInvasionToMesh(invading) {
     if (this.disabled) return;
 
-    if (this.targetMesh && this.targetMesh.material && !this.alwaysHidden) {
-      forEachMaterial(this.targetMesh, material => {
-        material.opacity = invading ? this.data.invadingOpacity : 1;
-        material.transparent = invading;
+    // Note: Model isn't loaded on init because this object is inflated before the root is.
+    // object3DMap.mesh is not initially set and must be checked before traversing.
+    if (this.gltfRootEl && this.gltfRootEl.object3DMap.mesh && !this.alwaysHidden) {
+      traverseFilteredSubtrees(this.gltfRootEl.object3DMap.mesh, obj => {
+        // Prevents changing the opacity of ui elements
+        if (obj.el && obj.el.components.tags && obj.el.components.tags.data.spaceBubbleIgnore) {
+          // Skip all objects under this branch by returning false
+          return false;
+        }
+
+        if (!obj.material) {
+          return;
+        }
+
+        forEachMaterial(obj, material => {
+          let originalProps = material.userData.originalProps;
+
+          if (!material.userData.originalProps) {
+            originalProps = material.userData.originalProps = {
+              opacity: material.opacity,
+              transparent: material.transparent
+            };
+          }
+
+          // Note: Sharing materials will cause all objects with the material to turn transparent / opaque
+          // This is generally fine for avatars since a material will only be shared within a glTF model,
+          // not across avatars in the room.
+          material.opacity = invading ? this.data.invadingOpacity : originalProps.opacity;
+          material.transparent = invading ? true : originalProps.transparent;
+        });
       });
     } else {
       this.el.object3D.visible = !invading && !this.alwaysHidden;
diff --git a/src/utils/traverseFilteredSubtrees.js b/src/utils/traverseFilteredSubtrees.js
new file mode 100644
index 0000000000..1fc2969f00
--- /dev/null
+++ b/src/utils/traverseFilteredSubtrees.js
@@ -0,0 +1,11 @@
+export default function traverseFilteredSubtrees(object, cb) {
+  if (cb(object) === false) {
+    return;
+  }
+
+  const children = object.children;
+
+  for (let i = 0; i < children.length; i++) {
+    traverseFilteredSubtrees(children[i], cb);
+  }
+}

From b8716fe2be6704984900f6db3a1d0733e64b661c Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Tue, 23 Feb 2021 17:52:42 -0800
Subject: [PATCH 2/5] spaceBubbleIgnore -> ignoreSpaceBubble

---
 src/components/tags.js               | 2 +-
 src/hub.html                         | 4 ++--
 src/systems/personal-space-bubble.js | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/tags.js b/src/components/tags.js
index 4502934122..5d9d14f7d8 100644
--- a/src/components/tags.js
+++ b/src/components/tags.js
@@ -20,7 +20,7 @@ AFRAME.registerComponent("tags", {
     isStatic: { default: false },
     inspectable: { default: false },
     preventAudioBoost: { default: false },
-    spaceBubbleIgnore: { default: false }
+    ignoreSpaceBubble: { default: false }
   },
   update() {
     if (this.didUpdateOnce) {
diff --git a/src/hub.html b/src/hub.html
index b3c7a3376d..08d203a772 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -137,7 +137,7 @@
                         </template>
 
                         <template data-name="Neck">
-                            <a-entity tags="spaceBubbleIgnore: true;">
+                            <a-entity tags="ignoreSpaceBubble: true;">
                                 <a-entity
                                     billboard
                                     class="nametag"
@@ -173,7 +173,7 @@
                         </template>
 
                         <template data-name="Spine">
-                            <a-entity tags="spaceBubbleIgnore: true;" is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
+                            <a-entity tags="ignoreSpaceBubble: true;" is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
                                 <a-entity class="avatar-inspect-collider" avatar-inspect-collider tags="togglesHoveredActionSet: true;" is-remote-hover-target inspect-button></a-entity>
                                 <a-entity class="chest-image" scale="0.18 0.18 0.18" position="0 -0.025 0.13"></a-entity>
                                 <a-entity class="interactable ui interactable-ui">
diff --git a/src/systems/personal-space-bubble.js b/src/systems/personal-space-bubble.js
index 9b434a29b1..a29abf8c0a 100644
--- a/src/systems/personal-space-bubble.js
+++ b/src/systems/personal-space-bubble.js
@@ -239,7 +239,7 @@ AFRAME.registerComponent("personal-space-invader", {
     if (this.gltfRootEl && this.gltfRootEl.object3DMap.mesh && !this.alwaysHidden) {
       traverseFilteredSubtrees(this.gltfRootEl.object3DMap.mesh, obj => {
         // Prevents changing the opacity of ui elements
-        if (obj.el && obj.el.components.tags && obj.el.components.tags.data.spaceBubbleIgnore) {
+        if (obj.el && obj.el.components.tags && obj.el.components.tags.data.ignoreSpaceBubble) {
           // Skip all objects under this branch by returning false
           return false;
         }

From 6930e87dade4379f96d77ca6a02ba5628fe85cad Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 24 Feb 2021 15:19:12 -0800
Subject: [PATCH 3/5] Clean up boolean logic

---
 src/systems/personal-space-bubble.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/systems/personal-space-bubble.js b/src/systems/personal-space-bubble.js
index a29abf8c0a..512ad19a53 100644
--- a/src/systems/personal-space-bubble.js
+++ b/src/systems/personal-space-bubble.js
@@ -262,7 +262,7 @@ AFRAME.registerComponent("personal-space-invader", {
           // This is generally fine for avatars since a material will only be shared within a glTF model,
           // not across avatars in the room.
           material.opacity = invading ? this.data.invadingOpacity : originalProps.opacity;
-          material.transparent = invading ? true : originalProps.transparent;
+          material.transparent = invading || originalProps.transparent;
         });
       });
     } else {

From f0b5a109528558f08bdba96cf88249d84f4f5305 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 24 Feb 2021 15:19:31 -0800
Subject: [PATCH 4/5] Move ignore space bubble tag to correct entities

---
 src/hub.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/hub.html b/src/hub.html
index 08d203a772..46c8e24b01 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -173,10 +173,10 @@
                         </template>
 
                         <template data-name="Spine">
-                            <a-entity tags="ignoreSpaceBubble: true;" is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
-                                <a-entity class="avatar-inspect-collider" avatar-inspect-collider tags="togglesHoveredActionSet: true;" is-remote-hover-target inspect-button></a-entity>
+                            <a-entity is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
+                                <a-entity tags="ignoreSpaceBubble: true;" class="avatar-inspect-collider" avatar-inspect-collider tags="togglesHoveredActionSet: true;" is-remote-hover-target inspect-button></a-entity>
                                 <a-entity class="chest-image" scale="0.18 0.18 0.18" position="0 -0.025 0.13"></a-entity>
-                                <a-entity class="interactable ui interactable-ui">
+                                <a-entity tags="ignoreSpaceBubble: true;" class="interactable ui interactable-ui">
                                     <a-entity billboard class="freeze-menu" visibility-while-frozen="withinDistance: 100; requireHoverOnNonMobile: false;" avatar-volume-controls>
                                         <a-entity class="avatar-volume-label" text="value: 0%; anchor: center; align: center; color: #ff3464; letterSpacing: 4; width:1.5;" text-raycast-hack position="0.0 0.675 0.35" scale="1.25 1.25 1.25"></a-entity>
                                         <a-entity mixin="rounded-button" is-remote-hover-target tags="singleActionButton: true;" position="-0.45 0.675 0.35" class="avatar-volume-down-button">

From bd35ecc01b99d52bfebeb7f6ca5bf604ff90b773 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 24 Feb 2021 15:28:00 -0800
Subject: [PATCH 5/5] Fix duplicate tag

---
 src/hub.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hub.html b/src/hub.html
index 46c8e24b01..9e209b6b1e 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -174,7 +174,7 @@
 
                         <template data-name="Spine">
                             <a-entity is-remote-hover-target personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
-                                <a-entity tags="ignoreSpaceBubble: true;" class="avatar-inspect-collider" avatar-inspect-collider tags="togglesHoveredActionSet: true;" is-remote-hover-target inspect-button></a-entity>
+                                <a-entity class="avatar-inspect-collider" avatar-inspect-collider tags="togglesHoveredActionSet: true; ignoreSpaceBubble: true;" is-remote-hover-target inspect-button></a-entity>
                                 <a-entity class="chest-image" scale="0.18 0.18 0.18" position="0 -0.025 0.13"></a-entity>
                                 <a-entity tags="ignoreSpaceBubble: true;" class="interactable ui interactable-ui">
                                     <a-entity billboard class="freeze-menu" visibility-while-frozen="withinDistance: 100; requireHoverOnNonMobile: false;" avatar-volume-controls>