Add a shader effect when hovering over interactables

package.json

@@ -87,6 +87,7 @@
     "htmlhint": "^0.9.13",
     "node-sass": "^4.9.3",
     "prettier": "^1.7.0",
+    "raw-loader": "^0.5.1",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.7",
     "selfsigned": "^1.10.2",

src/components/interactables/hoverable-visuals.js

@@ -0,0 +1,53 @@
+/**
+ * Listens for hoverable state changes and applies a visual effect to an entity
+ * @namespace interactables
+ * @component hoverable-visuals
+ */
+AFRAME.registerComponent("hoverable-visuals", {
+  schema: {
+    cursorController: { type: "selector" }
+  },
+  init: function() {
+    this.interactorOneTransform = [];
+    this.interactorTwoTransform = [];
+  },
+  remove() {
+    this.interactorOneTransform = null;
+    this.interactorTwoTransform = null;
+  },
+  tick(time) {
+    const uniforms = this.el.components["media-loader"].shaderUniforms;
+
+    if (!uniforms) return;
+
+    const { hoverers } = this.el.components["hoverable"];
+
+    let interactorOne, interactorTwo;
+    for (const hoverer of hoverers) {
+      if (hoverer.id === "player-left-controller") {
+        interactorOne = hoverer.object3D;
+      } else if (hoverer.id === "cursor") {
+        if (this.data.cursorController.components["cursor-controller"].enabled) {
+          interactorTwo = hoverer.object3D;
+        }
+      } else {
+        interactorTwo = hoverer.object3D;
+      }
+    }
+
+    if (interactorOne) {
+      interactorOne.matrixWorld.toArray(this.interactorOneTransform);
+    }
+    if (interactorTwo) {
+      interactorTwo.matrixWorld.toArray(this.interactorTwoTransform);
+    }
+
+    for (const uniform of uniforms) {
+      uniform.hubs_HighlightInteractorOne.value = !!interactorOne;
+      uniform.hubs_InteractorOneTransform.value = this.interactorOneTransform;
+      uniform.hubs_HighlightInteractorTwo.value = !!interactorTwo;
+      uniform.hubs_InteractorTwoTransform.value = this.interactorTwoTransform;
+      uniform.hubs_Time.value = time;
+    }
+  }
+});

src/components/media-highlight-frag.glsl

@@ -0,0 +1,44 @@
+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);
+  }
+
+  if (hubs_HighlightInteractorTwo) {
+    it = hubs_InteractorTwoTransform;
+    ip = vec3(it[3][0], it[3][1], it[3][2]);
+    dist2 = distance(hubs_WorldPosition, ip);
+  }
+
+  float ratio = 0.0;
+  float pulse = sin(hubs_Time / 1000.0) + 1.0;
+  float spacing = 0.5;
+  float line = spacing * pulse - spacing / 2.0;
+  float lineWidth= 0.01;
+  float mody = mod(hubs_WorldPosition.y, spacing);
+
+  if (-lineWidth + line < mody && mody < lineWidth + line) {
+    // Highlight with an animated line effect
+    ratio = 0.5;
+  } else {
+    // Highlight with a gradient falling off with distance.
+    if (hubs_HighlightInteractorOne) {
+      ratio = -min(1.0, pow(dist1 * (9.0 + 3.0 * pulse), 3.0)) + 1.0;
+    } 
+    if (hubs_HighlightInteractorTwo) {
+      ratio += -min(1.0, pow(dist2 * (9.0 + 3.0 * pulse), 3.0)) + 1.0;
+    }
+  }
+
+  ratio = min(1.0, ratio);
+
+  // Gamma corrected highlight color
+  vec3 highlightColor = vec3(0.184, 0.499, 0.933);
+
+  gl_FragColor.rgb = (gl_FragColor.rgb * (1.0 - ratio)) + (highlightColor * ratio);
+}

src/components/media-loader.js

@@ -1,9 +1,11 @@
 import { getBox, getScaleCoefficient } from "../utils/auto-box-collider";
 import { guessContentType, proxiedUrlFor, resolveUrl } from "../utils/media-utils";
 import { addAnimationComponents } from "../utils/animation";
+import mediaHighlightFrag from "./media-highlight-frag.glsl";
 
 import "three/examples/js/loaders/GLTFLoader";
 import loadingObjectSrc from "../assets/LoadingObject_Atom.glb";
+
 const gltfLoader = new THREE.GLTFLoader();
 let loadingObject;
 gltfLoader.load(loadingObjectSrc, gltf => {
@@ -18,6 +20,67 @@ const fetchMaxContentIndex = url => {
   return fetch(url).then(r => parseInt(r.headers.get("x-max-content-index")));
 };
 
+function injectCustomShaderChunks(obj) {
+  const vertexRegex = /\bbegin_vertex\b/;
+  const fragRegex = /\bgl_FragColor\b/;
+
+  const materialsSeen = new Set();
+  const shaderUniforms = [];
+
+  obj.traverse(object => {
+    if (!object.material || !["MeshStandardMaterial", "MeshBasicMaterial"].includes(object.material.type)) {
+      return;
+    }
+    object.material = object.material.clone();
+    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_HighlightInteractorOne = { value: false };
+      shader.uniforms.hubs_HighlightInteractorTwo = { value: false };
+      shader.uniforms.hubs_Time = { value: 0 };
+
+      const vchunk = `
+        if (hubs_HighlightInteractorOne || hubs_HighlightInteractorTwo) {
+          vec4 wt = modelMatrix * vec4(transformed, 1);
+
+          // Used in the fragment shader below.
+          hubs_WorldPosition = wt.xyz;
+        }
+      `;
+
+      const vlines = shader.vertexShader.split("\n");
+      const vindex = vlines.findIndex(line => vertexRegex.test(line));
+      vlines.splice(vindex + 1, 0, vchunk);
+      vlines.unshift("varying vec3 hubs_WorldPosition;");
+      vlines.unshift("uniform bool hubs_HighlightInteractorOne;");
+      vlines.unshift("uniform bool hubs_HighlightInteractorTwo;");
+      shader.vertexShader = vlines.join("\n");
+
+      const flines = shader.fragmentShader.split("\n");
+      const findex = flines.findIndex(line => fragRegex.test(line));
+      flines.splice(findex + 1, 0, mediaHighlightFrag);
+      flines.unshift("varying vec3 hubs_WorldPosition;");
+      flines.unshift("uniform bool hubs_HighlightInteractorOne;");
+      flines.unshift("uniform mat4 hubs_InteractorOneTransform;");
+      flines.unshift("uniform bool hubs_HighlightInteractorTwo;");
+      flines.unshift("uniform mat4 hubs_InteractorTwoTransform;");
+      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);
+      }
+    };
+    object.material.needsUpdate = true;
+  });
+
+  return shaderUniforms;
+}
+
 AFRAME.registerComponent("media-loader", {
   schema: {
     src: { type: "string" },
@@ -30,6 +93,7 @@ AFRAME.registerComponent("media-loader", {
     this.onError = this.onError.bind(this);
     this.showLoader = this.showLoader.bind(this);
     this.clearLoadingTimeout = this.clearLoadingTimeout.bind(this);
+    this.onMediaLoaded = this.onMediaLoaded.bind(this);
     this.shapeAdded = false;
     this.hasBakedShapes = false;
   },
@@ -100,6 +164,11 @@ AFRAME.registerComponent("media-loader", {
     delete this.showLoaderTimeout;
   },
 
+  onMediaLoaded() {
+    this.clearLoadingTimeout();
+    this.shaderUniforms = injectCustomShaderChunks(this.el.object3D);
+  },
+
   async update(oldData) {
     try {
       const { src } = this.data;
@@ -135,13 +204,13 @@ AFRAME.registerComponent("media-loader", {
       if (contentType.startsWith("video/") || contentType.startsWith("audio/")) {
         this.el.removeAttribute("gltf-model-plus");
         this.el.removeAttribute("media-image");
-        this.el.addEventListener("video-loaded", this.clearLoadingTimeout, { once: true });
+        this.el.addEventListener("video-loaded", this.onMediaLoaded, { once: true });
         this.el.setAttribute("media-video", { src: accessibleUrl });
         this.el.setAttribute("position-at-box-shape-border", { dirs: ["forward", "back"] });
       } else if (contentType.startsWith("image/")) {
         this.el.removeAttribute("gltf-model-plus");
         this.el.removeAttribute("media-video");
-        this.el.addEventListener("image-loaded", this.clearLoadingTimeout, { once: true });
+        this.el.addEventListener("image-loaded", this.onMediaLoaded, { once: true });
         this.el.removeAttribute("media-pager");
         this.el.setAttribute("media-image", { src: accessibleUrl, contentType });
         this.el.setAttribute("position-at-box-shape-border", { dirs: ["forward", "back"] });
@@ -152,7 +221,7 @@ AFRAME.registerComponent("media-loader", {
         // 1. we pass the canonical URL to the pager so it can easily make subresource URLs
         // 2. we don't remove the media-image component -- media-pager uses that internally
         this.el.setAttribute("media-pager", { src: canonicalUrl });
-        this.el.addEventListener("preview-loaded", this.clearLoadingTimeout, { once: true });
+        this.el.addEventListener("preview-loaded", this.onMediaLoaded, { once: true });
         this.el.setAttribute("position-at-box-shape-border", { dirs: ["forward", "back"] });
       } else if (
         contentType.includes("application/octet-stream") ||
@@ -165,7 +234,7 @@ AFRAME.registerComponent("media-loader", {
         this.el.addEventListener(
           "model-loaded",
           () => {
-            this.clearLoadingTimeout();
+            this.onMediaLoaded();
             this.hasBakedShapes = !!(this.el.body && this.el.body.shapes.length > (this.shapeAdded ? 1 : 0));
             this.setShapeAndScale(this.data.resize);
             addAnimationComponents(this.el);

src/hub.html

@@ -144,6 +144,7 @@
                     grabbable
                     stretchable="useWorldPosition: true; usePhysics: never"
                     hoverable
+                    hoverable-visuals="cursorController: #cursor-controller"
                     auto-scale-cannon-physics-body
                     sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
                     position-at-box-shape-border="target:.delete-button"

src/hub.js

@@ -33,6 +33,7 @@ import "./components/virtual-gamepad-controls";
 import "./components/ik-controller";
 import "./components/hand-controls2";
 import "./components/character-controller";
+import "./components/interactables/hoverable-visuals";
 import "./components/haptic-feedback";
 import "./components/networked-video-player";
 import "./components/offset-relative-to";

webpack.config.js

@@ -77,6 +77,7 @@ module.exports = (env, argv) => ({
   devServer: {
     https: createHTTPSConfig(),
     host: "0.0.0.0",
+    public: "hubs.local:8080",
     useLocalIp: true,
     allowedHosts: ["hubs.local"],
     before: function(app) {
@@ -153,6 +154,10 @@ module.exports = (env, argv) => ({
             context: path.join(__dirname, "src")
           }
         }
+      },
+      {
+        test: /\.(glsl)$/,
+        use: { loader: "raw-loader" }
       }
     ]
   },