davo · September 22, 2024 13:09 · Sep 21, 2024 · Sep 21, 2024
diff --git a/Border.tsx b/Border.tsx
@@ -37,7 +37,7 @@ export const Border = () => {
           varying vec2 vUv;
           void main() {
             vUv = uv;
-            gl_Position = vec4(position, 1.0);
+            gl_Position = vec4(position, 1.0); // local space or something
           }`
         }
         fragmentShader={

diff --git a/Border.tsx b/Border.tsx
@@ -0,0 +1,64 @@
+import { Plane } from '@react-three/drei';
+import { useMemo } from 'react';
+
+export const Border = () => {
+  const uniforms = useMemo(
+    () => ({
+      u_color: {
+        value: [0.129, 0.129, 0.129] //same color as my background
+      },
+      u_outline_color: {
+        value: [0.2, 0.2, 0.2]
+      },
+      u_radius: {
+        value: 0.1
+      },
+      u_border: {
+        value: 0.05
+      },
+      u_outline_thickness: {
+        value: 0.02
+      },
+      u_outline_offset: {
+        value: 0.03
+      }
+    }),
+    []
+  );
+
+  return (
+    <Plane args={[2, 2]}>
+      <shaderMaterial
+        transparent
+        uniforms={uniforms}
+        depthTest={false}
+        vertexShader={
+          /* glsl */ `
+          varying vec2 vUv;
+          void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+          }`
+        }
+        fragmentShader={
+          /* glsl */ `
+          varying vec2 vUv;
+          uniform vec3 u_color;
+          uniform vec3 u_outline_color;
+          uniform float u_border;
+          uniform float u_radius;
+          uniform float u_outline_thickness;
+          uniform float u_outline_offset;
+          void main() {
+            vec2 uv = vUv * 2.0 - 1.0;
+            float dist = length(max(abs(uv) - (1.0 - u_radius), 0.0)) - u_radius;
+            float alpha = smoothstep(-u_border, 0.0, dist);
+            float outline = smoothstep(-u_border + u_outline_offset, -u_border + u_outline_offset + u_outline_thickness, dist);
+            vec3 color = mix(u_outline_color, u_color, outline);
+            gl_FragColor = vec4(color, alpha);
+          }`
+        }
+      />
+    </Plane>
+  );
+};