border for View

Border.tsx

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); // local space or something
          }`
        }
        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>
  );
};