[Three.js] 테두리 생성 유틸 추가

projects/find-waffle/src/utils/three.ts

@@ -25,3 +25,44 @@ export function resize(
     camera.updateProjectionMatrix();
   }
 }
+
+/**
+ * Material 에 테두리를 추가합니다.
+ * @param material 테두리를 추가할 Material
+ * @param color 테두리 색상
+ * @param width 테두리 두께
+ * @returns 테두리가 추가된 Material
+ */
+export function addBorderToMaterial(
+  material: THREE.Material,
+  color: THREE.ColorRepresentation,
+  width: number,
+): THREE.Material {
+  if (material.defines === undefined) material.defines = {};
+  material.defines.USE_UV = '';
+  material.onBeforeCompile = (shader) => {
+    shader.uniforms.size = { value: new THREE.Vector2(1, 1) };
+    shader.uniforms.borderWidth = { value: width };
+    shader.uniforms.borderColor = { value: new THREE.Color(color) };
+    shader.fragmentShader = `
+    uniform vec2 size;
+    uniform float borderWidth;
+    uniform vec3 borderColor;
+    ${shader.fragmentShader}
+  `.replace(
+      '#include <color_fragment>',
+      `
+  #include <color_fragment>
+  vec3 col = diffuseColor.rgb;
+  vec2 s = (size * 0.5) - borderWidth;
+
+  vec2 ruv = abs((vUv - 0.5) * size);
+  vec2 fe = fwidth(ruv);
+  float e = min(fe.x, fe.y) * 0.5;
+  float border = smoothstep(s.x + e, s.x - e, ruv.x) * smoothstep(s.y + e, s.y - e, ruv.y);
+  diffuseColor.rgb = mix(borderColor, col, clamp(border, 0., 1.));   
+    `,
+    );
+  };
+  return material;
+}