motion-controller: Crude outline effect

mrxz · Mar 21, 2024 · 28430e9 · 28430e9
1 parent 978b773
commit 28430e9
Showing 1 changed file with 36 additions and 5 deletions.
diff --git a/motion-controller/src/utils.ts b/motion-controller/src/utils.ts
@@ -28,6 +28,8 @@ export function hologramMaterialFromStandardMaterial(sourceMaterial: THREE.MeshS
             #include <normal_pars_vertex>
             #include <skinning_pars_vertex>
 
+            uniform float outline;
+
             varying vec3 vObjectPosition;
             varying vec3 vWorldPosition;
 
@@ -39,10 +41,14 @@ export function hologramMaterialFromStandardMaterial(sourceMaterial: THREE.MeshS
                 #include <normal_vertex>
 
                 #include <begin_vertex>
+                if(outline > 0.0) {
+                    transformed += normal*0.001;
+                }
                 #include <skinning_vertex>
                 #include <project_vertex>
 
                 vObjectPosition = position;
+
                 vWorldPosition = mvPosition.xyz;
             }
         `,
@@ -52,29 +58,54 @@ export function hologramMaterialFromStandardMaterial(sourceMaterial: THREE.MeshS
             #include <dithering_pars_fragment>
             #include <normal_pars_fragment>
 
+            uniform float outline;
+
             varying vec3 vObjectPosition;
             varying vec3 vWorldPosition;
 
             void main() {
-                vec3 toCamera = normalize(cameraPosition - vWorldPosition);
-                float factor = pow(1.0 - dot(toCamera, vNormal), 10.0);
 
-                vec3 color = mix(vec3(0.0), vec3(0.8, 0.8, 1.0), factor);
-                float alpha = 0.5 * min((-vObjectPosition.y + 0.06)/0.15, 1.0);
-                gl_FragColor = vec4(color, alpha);
+                if(outline > 0.0) {
+                    float alpha = 0.5 * min((-vObjectPosition.y + 0.09)/0.15, 1.0);
+                    gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
+                } else {
+                    vec3 toCamera = normalize(cameraPosition - vWorldPosition);
+                    float factor = pow(1.0 - dot(toCamera, vNormal), 10.0);
+
+                    float alpha = 0.5 * min((-vObjectPosition.y + 0.06)/0.15, 1.0);
+                    vec3 color = mix(vec3(0.0), vec3(0.8, 0.8, 1.0), factor);
+
+                    gl_FragColor = vec4(color, alpha);
+                }
 
                 #include <tonemapping_fragment>
                 #include <colorspace_fragment>
             }
         `,
+        uniforms: {
+            outline: { value: 1.0 }
+        }
     });
 
     // Note: onBeforeRender on material lacks types (internal for Three.js), but is slightly more convenient
     //       in our case, so use it anyway.
     (hologramMaterial as unknown as MaterialOnBeforeRender).onBeforeRender = (renderer, scene, camera, geometry, object, group) => {
+        // Block depth
         hologramMaterial.colorWrite = false;
         renderer.renderBufferDirect(camera, scene, geometry, hologramMaterial, object, group);
         hologramMaterial.colorWrite = true;
+        // Outline
+        hologramMaterial.side = THREE.BackSide;
+        hologramMaterial.uniforms.outline.value = 1.0;
+        (hologramMaterial.uniforms.outline as any).needsUpdate = true;
+        hologramMaterial.needsUpdate = true;
+        renderer.renderBufferDirect(camera, scene, geometry, hologramMaterial, object, group);
+        // Restore for normal render
+        hologramMaterial.side = THREE.FrontSide;
+        hologramMaterial.uniforms.outline.value = 0.0;
+        (hologramMaterial.uniforms.outline as any).needsUpdate = true;
+        hologramMaterial.needsUpdate = true;
+
     }
 
     return hologramMaterial;