a-big-triangle React / react-three-fiber

fullscreentriangle.tsx

import * as React from "react"
import {useEffect, useMemo,} from "react"
import {Sphere, Vector2, GLSL3} from "three";
import {useThree} from "@react-three/fiber";

/**
 * A port of a-big-triangle to react-three-fiber.
 *
 * https://github.com/mikolalysenko/a-big-triangle
 *
 * @param props
 */
export default function (props) {

    const {texture} = props
    const {size} = useThree()

    const positions = useMemo(() => {
        const verts = new Float32Array([
            -1, -1, -1, 4, 4, -1
        ]);

        return verts;
    }, [])

    const vertex = `
    
        in vec2 position;
        out vec2 uv;
        void main(){
            uv = vec2((gl_VertexID<< 1) & 2, gl_VertexID & 2);
            gl_Position = vec4(uv * 2.0f + -1.0f, 0.0f, 1.0f);
        }
      
    `;
    const fragment = `
     
         precision highp float;
        
         uniform sampler2D uTex0;
         in vec2 uv;
         out vec4 glFragColor;
         void main(){
            vec4 image = texture(uTex0,uv);
            glFragColor = image;     
            
         }
    
    `


    const uniforms = useMemo(() => {
        return {
            resolution: {
                value: new Vector2(size.width, size.height)
            },
            uTex0: {
                value: texture
            }
        }

    }, [props])

    useEffect(() => {
        uniforms.resolution.value.x = size.width;
        uniforms.resolution.value.y = size.height;
    }, [size])

    return (
        <>
            <mesh>

                <bufferGeometry
                    boundingSphere={new Sphere()}
                    attach={"geometry"}>
                    <bufferAttribute
                        attach='attributes-position'
                        array={positions}
                        itemSize={2}
                        count={positions.length / 2}/>
                </bufferGeometry>
                <rawShaderMaterial
                    glslVersion={GLSL3}
                    uniformsNeedUpdate={true}
                    vertexShader={vertex}
                    fragmentShader={fragment}
                    uniforms={uniforms}/>
            </mesh>

        </>
    )

}