Support React.js

Code Example

import { useMemo } from 'react'
import { useGL, useFrame } from 'glre/react'

export const frag = `
precision mediump float;
uniform vec2 iResolution;
uniform float iTime;
uniform float ellipseRadius;
uniform float ellipseXCoord;
uniform float ellipseYCoord;
uniform float ellipseStroke;
#define PI 3.141592
#define M(X, Y, A) mat2(1. / X, 0, 0, 1. / Y) * mat2(cos(A), -sin(A), sin(A), cos(A))
#define circle(p) length(p) - ellipseRadius
#define ellipse(p, A) circle(M(ellipseXCoord, ellipseYCoord, A) * p)
#define onion(p, A) d = min(d, abs(ellipse(p, A)) - ellipseStroke)
void main() {
        vec2 uv = fract(gl_FragCoord.xy / iResolution);
        vec2 p = uv * 2.4 - 1.2;
        p.x *= iResolution.x / iResolution.y;
        float d = circle(p);
        onion(p, PI / 2. + iTime);
        onion(p, PI / 6. + iTime);
        onion(p, -PI / 6. + iTime);
        if (d < 0.)
                gl_FragColor = vec4(96. / 255., 219. / 255., 251. / 255., 0.8);
}
`

export const Canvas = () => {
        const gl = useGL({ frag })

        useFrame(() => {
                gl.clear()
                gl.viewport()
                gl.drawArrays()
                return true
        })

        return <canvas ref={gl.ref} />
}