Skip to content

Instantly share code, notes, and snippets.

@seantai

seantai/Border.tsx

Last active September 22, 2024 13:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save seantai/6fd1e2a7de5af1ed5d2158aad5cb786d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save seantai/6fd1e2a7de5af1ed5d2158aad5cb786d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. seantai revised this gist Sep 21, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Border.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -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={
  2. seantai created this gist Sep 21, 2024.
    64 changes: 64 additions & 0 deletions Border.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -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>
    );
    };