From 7671f91e3d78e2ff3103d20c92b7d1a66df6a596 Mon Sep 17 00:00:00 2001 From: Manuel Martin Date: Thu, 4 Nov 2021 15:55:06 +0100 Subject: [PATCH 1/3] Fix bubble transparency issues --- src/systems/personal-space-bubble.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/systems/personal-space-bubble.js b/src/systems/personal-space-bubble.js index 512ad19a53..7168749f3f 100644 --- a/src/systems/personal-space-bubble.js +++ b/src/systems/personal-space-bubble.js @@ -254,7 +254,10 @@ AFRAME.registerComponent("personal-space-invader", { if (!material.userData.originalProps) { originalProps = material.userData.originalProps = { opacity: material.opacity, - transparent: material.transparent + transparent: material.transparent, + format: material.format, + blending: material.blending, + side: material.side }; } @@ -263,6 +266,9 @@ AFRAME.registerComponent("personal-space-invader", { // not across avatars in the room. material.opacity = invading ? this.data.invadingOpacity : originalProps.opacity; material.transparent = invading || originalProps.transparent; + material.format = invading ? THREE.RGBAFormat : originalProps.format; + material.blending = invading ? THREE.NormalBlending : originalProps.blending; + material.side = invading ? THREE.DoubleSide : originalProps.side; }); }); } else { From ffc296501ecfe7d9322511cf95631892bfc85660 Mon Sep 17 00:00:00 2001 From: Manuel Martin Date: Thu, 4 Nov 2021 16:49:42 +0100 Subject: [PATCH 2/3] Add Comment --- src/systems/personal-space-bubble.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/systems/personal-space-bubble.js b/src/systems/personal-space-bubble.js index 7168749f3f..b86f48fbac 100644 --- a/src/systems/personal-space-bubble.js +++ b/src/systems/personal-space-bubble.js @@ -266,6 +266,9 @@ AFRAME.registerComponent("personal-space-invader", { // not across avatars in the room. material.opacity = invading ? this.data.invadingOpacity : originalProps.opacity; material.transparent = invading || originalProps.transparent; + + // Note: Since 0.132 the default format for GLTF imported opaque materials is RGBFormat + // so we need to switch before enabling transparency. material.format = invading ? THREE.RGBAFormat : originalProps.format; material.blending = invading ? THREE.NormalBlending : originalProps.blending; material.side = invading ? THREE.DoubleSide : originalProps.side; From 1b74385615b06903841430dbb0e9b89b7003edfd Mon Sep 17 00:00:00 2001 From: Manuel Martin Date: Thu, 4 Nov 2021 16:51:46 +0100 Subject: [PATCH 3/3] Comment 2 --- src/systems/personal-space-bubble.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/systems/personal-space-bubble.js b/src/systems/personal-space-bubble.js index b86f48fbac..91ea548f0c 100644 --- a/src/systems/personal-space-bubble.js +++ b/src/systems/personal-space-bubble.js @@ -267,10 +267,11 @@ AFRAME.registerComponent("personal-space-invader", { material.opacity = invading ? this.data.invadingOpacity : originalProps.opacity; material.transparent = invading || originalProps.transparent; - // Note: Since 0.132 the default format for GLTF imported opaque materials is RGBFormat + // Note: Since ThreeJS 0.132 the default format for GLTF imported opaque materials is RGBFormat // so we need to switch before enabling transparency. material.format = invading ? THREE.RGBAFormat : originalProps.format; material.blending = invading ? THREE.NormalBlending : originalProps.blending; + // This shouldn't be necessary but for some reason transparency doens't work on some models if they are single sided. material.side = invading ? THREE.DoubleSide : originalProps.side; }); });