Merge pull request #3948 from mozilla/feature/avatar-webcam-texture

Webcam Avatars: Add ability to target emissive map and set proper texture wrapping
Hubs-Foundation · Feb 23, 2021 · fef69c1 · fef69c1
2 parents a3a36f3 + 49e327e
commit fef69c1
Showing 1 changed file with 35 additions and 7 deletions.
diff --git a/src/components/video-texture-target.js b/src/components/video-texture-target.js
@@ -3,14 +3,16 @@ import { createVideoOrAudioEl } from "../utils/media-utils";
 
 /**
  * @component video-texture-target
- * This compoennt is intended to be used on entities with a mesh/skinned mesh Object3D
+ * This component is intended to be used on entities with a mesh/skinned mesh Object3D
  * The component swaps the base color map on the mesh's material with a video texture
  * Currently the video texture can only be a Webcam stream, but this component could be easily modified
  * to work with normal urls, screensharing, etc.
  */
 AFRAME.registerComponent("video-texture-target", {
   schema: {
-    src: { type: "string" }
+    src: { type: "string" },
+    targetBaseColorMap: { type: "boolean", default: true },
+    targetEmissiveMap: { type: "boolean", default: false }
   },
 
   getMaterial() {
@@ -28,7 +30,8 @@ AFRAME.registerComponent("video-texture-target", {
       console.warn("video-texture-target added to an entity without a material");
     }
 
-    this.originalTexture = material && material.map;
+    this.originalMap = material && material.map;
+    this.originalEmissiveMap = material && material.emissiveMap;
   },
 
   update(prevData) {
@@ -61,24 +64,49 @@ AFRAME.registerComponent("video-texture-target", {
         texture.minFilter = THREE.LinearFilter;
         texture.encoding = THREE.sRGBEncoding;
 
-        material.map = texture;
+        // Copy texture settings from the original texture so that things like texture wrap settings are applied
+        const originalTexture = this.originalMap || this.originalEmissiveMap;
+
+        if (originalTexture) {
+          texture.wrapS = originalTexture.wrapS;
+          texture.wrapT = originalTexture.wrapT;
+        }
+
+        if (this.data.targetBaseColorMap) {
+          material.map = texture;
+        }
+
+        if (this.data.targetEmissiveMap) {
+          material.emissiveMap = texture;
+        }
+
         material.needsUpdate = true;
       });
     } else {
-      if (material.map && material.map !== this.originalTexture) {
+      if (material.map && material.map !== this.originalMap) {
         disposeTexture(material.map);
       }
 
-      material.map = this.originalTexture;
+      if (material.emissiveMap && material.emissiveMap !== this.originalEmissiveMap) {
+        disposeTexture(material.emissiveMap);
+      }
+
+      material.map = this.originalMap;
+      material.emissiveMap = this.originalEmissiveMap;
+
       material.needsUpdate = true;
     }
   },
 
   remove() {
     const material = this.getMaterial();
 
-    if (material && material.map && material.map !== this.originalTexture) {
+    if (material && material.map && material.map !== this.originalMap) {
       disposeTexture(material.map);
     }
+
+    if (material.emissiveMap && material.emissiveMap !== this.originalEmissiveMap) {
+      disposeTexture(material.emissiveMap);
+    }
   }
 });