Optimize shader uniforms

src/components/hover-visuals.js

+const interactorTransform = [];
+
 /**
  * Applies effects to a hoverer based on hover state.
  * @namespace interactables
@@ -8,27 +10,30 @@ AFRAME.registerComponent("hover-visuals", {
     hand: { type: "string" },
     controller: { type: "selector" }
   },
-  init: function() {
+  init() {
     // uniforms are set from the component responsible for loading the mesh.
     this.uniforms = null;
-    this.interactorTransform = [];
   },
   remove() {
-    this.interactorTransform = null;
+    this.uniforms = null;
   },
   tick() {
-    if (!this.uniforms) return;
+    if (!this.uniforms || !this.uniforms.size) return;
 
-    this.el.object3D.matrixWorld.toArray(this.interactorTransform);
+    this.el.object3D.matrixWorld.toArray(interactorTransform);
     const hovering = this.data.controller.components["super-hands"].state.has("hover-start");
 
-    for (const uniform of this.uniforms) {
+    for (const uniform of this.uniforms.values()) {
       if (this.data.hand === "left") {
         uniform.hubs_HighlightInteractorOne.value = hovering;
-        uniform.hubs_InteractorOneTransform.value = this.interactorTransform;
+        uniform.hubs_InteractorOnePos[0] = interactorTransform[12];
+        uniform.hubs_InteractorOnePos[1] = interactorTransform[13];
+        uniform.hubs_InteractorOnePos[2] = interactorTransform[14];
       } else {
         uniform.hubs_HighlightInteractorTwo.value = hovering;
-        uniform.hubs_InteractorTwoTransform.value = this.interactorTransform;
+        uniform.hubs_InteractorTwoPos[0] = interactorTransform[12];
+        uniform.hubs_InteractorTwoPos[1] = interactorTransform[13];
+        uniform.hubs_InteractorTwoPos[2] = interactorTransform[14];
       }
     }
   }

src/components/hoverable-visuals.js

+const interactorOneTransform = [];
+const interactorTwoTransform = [];
+
 /**
  * Applies effects to a hoverable based on hover state.
  * @namespace interactables
@@ -7,23 +10,19 @@ AFRAME.registerComponent("hoverable-visuals", {
   schema: {
     cursorController: { type: "selector" }
   },
-  init: function() {
+  init() {
     // uniforms and boundingSphere are set from the component responsible for loading the mesh.
     this.uniforms = null;
     this.boundingSphere = new THREE.Sphere();
 
-    this.interactorOneTransform = [];
-    this.interactorTwoTransform = [];
-    this.sweepParams = [];
+    this.sweepParams = [0, 0];
   },
   remove() {
     this.uniforms = null;
     this.boundingBox = null;
-    this.interactorOneTransform = null;
-    this.interactorTwoTransform = null;
   },
   tick(time) {
-    if (!this.uniforms) return;
+    if (!this.uniforms || !this.uniforms.size) return;
 
     const { hoverers } = this.el.components["hoverable"];
 
@@ -41,10 +40,10 @@ AFRAME.registerComponent("hoverable-visuals", {
     }
 
     if (interactorOne) {
-      interactorOne.matrixWorld.toArray(this.interactorOneTransform);
+      interactorOne.matrixWorld.toArray(interactorOneTransform);
     }
     if (interactorTwo) {
-      interactorTwo.matrixWorld.toArray(this.interactorTwoTransform);
+      interactorTwo.matrixWorld.toArray(interactorTwoTransform);
     }
 
     if (interactorOne || interactorTwo) {
@@ -54,14 +53,23 @@ AFRAME.registerComponent("hoverable-visuals", {
       this.sweepParams[1] = worldY + scaledRadius;
     }
 
-    for (const uniform of this.uniforms) {
+    for (const uniform of this.uniforms.values()) {
       uniform.hubs_EnableSweepingEffect.value = true;
       uniform.hubs_SweepParams.value = this.sweepParams;
+
       uniform.hubs_HighlightInteractorOne.value = !!interactorOne;
-      uniform.hubs_InteractorOneTransform.value = this.interactorOneTransform;
+      uniform.hubs_InteractorOnePos.value[0] = interactorOneTransform[12];
+      uniform.hubs_InteractorOnePos.value[1] = interactorOneTransform[13];
+      uniform.hubs_InteractorOnePos.value[2] = interactorOneTransform[14];
+
       uniform.hubs_HighlightInteractorTwo.value = !!interactorTwo;
-      uniform.hubs_InteractorTwoTransform.value = this.interactorTwoTransform;
-      uniform.hubs_Time.value = time;
+      uniform.hubs_InteractorTwoPos.value[0] = interactorTwoTransform[12];
+      uniform.hubs_InteractorTwoPos.value[1] = interactorTwoTransform[13];
+      uniform.hubs_InteractorTwoPos.value[2] = interactorTwoTransform[14];
+
+      if (interactorOne || interactorTwo) {
+        uniform.hubs_Time.value = time;
+      }
     }
   }
 });

src/utils/media-highlight-frag.glsl

 if (hubs_HighlightInteractorOne || hubs_HighlightInteractorTwo) {
-  mat4 it;
-  vec3 ip;
   float dist1, dist2;
 
   if (hubs_HighlightInteractorOne) {
-    it = hubs_InteractorOneTransform;
-    ip = vec3(it[3][0], it[3][1], it[3][2]);
-    dist1 = distance(hubs_WorldPosition, ip);
+    dist1 = distance(hubs_WorldPosition, hubs_InteractorOnePos);
   }
 
   if (hubs_HighlightInteractorTwo) {
-    it = hubs_InteractorTwoTransform;
-    ip = vec3(it[3][0], it[3][1], it[3][2]);
-    dist2 = distance(hubs_WorldPosition, ip);
+    dist2 = distance(hubs_WorldPosition, hubs_InteractorTwoPos);
   }
 
   float size = hubs_SweepParams.t - hubs_SweepParams.s;

src/utils/media-utils.js

@@ -144,8 +144,7 @@ export function injectCustomShaderChunks(obj) {
   const fragRegex = /\bgl_FragColor\b/;
   const validMaterials = ["MeshStandardMaterial", "MeshBasicMaterial", "MobileStandardMaterial"];
 
-  const materialsSeen = new Set();
-  const shaderUniforms = [];
+  const shaderUniforms = new Map();
 
   obj.traverse(object => {
     if (!object.material || !validMaterials.includes(object.material.type)) {
@@ -155,11 +154,10 @@ export function injectCustomShaderChunks(obj) {
     object.material.onBeforeCompile = shader => {
       if (!vertexRegex.test(shader.vertexShader)) return;
 
-      shader.uniforms.hubs_InteractorOneTransform = { value: [] };
-      shader.uniforms.hubs_InteractorTwoTransform = { value: [] };
-      shader.uniforms.hubs_InteractorTwoPos = { value: [] };
       shader.uniforms.hubs_EnableSweepingEffect = { value: false };
-      shader.uniforms.hubs_SweepParams = { value: [] };
+      shader.uniforms.hubs_SweepParams = { value: [0, 0] };
+      shader.uniforms.hubs_InteractorOnePos = { value: [0, 0, 0] };
+      shader.uniforms.hubs_InteractorTwoPos = { value: [0, 0, 0] };
       shader.uniforms.hubs_HighlightInteractorOne = { value: false };
       shader.uniforms.hubs_HighlightInteractorTwo = { value: false };
       shader.uniforms.hubs_Time = { value: 0 };
@@ -188,16 +186,13 @@ export function injectCustomShaderChunks(obj) {
       flines.unshift("uniform bool hubs_EnableSweepingEffect;");
       flines.unshift("uniform vec2 hubs_SweepParams;");
       flines.unshift("uniform bool hubs_HighlightInteractorOne;");
-      flines.unshift("uniform mat4 hubs_InteractorOneTransform;");
+      flines.unshift("uniform vec3 hubs_InteractorOnePos;");
       flines.unshift("uniform bool hubs_HighlightInteractorTwo;");
-      flines.unshift("uniform mat4 hubs_InteractorTwoTransform;");
+      flines.unshift("uniform vec3 hubs_InteractorTwoPos;");
       flines.unshift("uniform float hubs_Time;");
       shader.fragmentShader = flines.join("\n");
 
-      if (!materialsSeen.has(object.material.uuid)) {
-        shaderUniforms.push(shader.uniforms);
-        materialsSeen.add(object.material.uuid);
-      }
+      shaderUniforms.set(object.material.uuid, shader.uniforms);
     };
     object.material.needsUpdate = true;
   });