Introduction

What does it look like?

glre simplifies WebGl2 / WebGPU programming via TypeScript, React, Solid and more

React
React Native
Solid.js
ESM

import { createRoot } from 'react-dom/client'
import { useGL, vec4, fract, fragCoord, iResolution } from 'glre/react'
const frag = vec4(fract(fragCoord.xy.div(iResolution)), 0, 1)

const App = () => {
        const gl = useGL({ frag })
        return <canvas ref={gl.ref} />
}

createRoot(document.getElementById('root')).render(<App />)

import { GLView } from 'expo-gl'
import { registerRootComponent } from 'expo'
import { useGL, vec4, fract, fragCoord, iResolution } from 'glre/native'
const frag = vec4(fract(fragCoord.xy.div(iResolution)), 0, 1)

const App = () => {
        const gl = useGL({ frag })
        return <GLView style={{ flex: 1 }} onContextCreate={gl.ref} />
}

registerRootComponent(App)

import { render } from 'solid-js/web'
import { onGL, vec4, fract, fragCoord, iResolution } from 'glre/solid'
const frag = vec4(fract(fragCoord.xy.div(iResolution)), 0, 1)

const App = () => {
        const gl = onGL({ frag })
        return <canvas ref={gl.ref} />
}

render(() => <App />, document.getElementById('root'))

<script type="module">
        import createGL from 'https://esm.sh/glre'
        import { vec4, fract, fragCoord, iResolution } from 'https://esm.sh/glre'
        const frag = vec4(fract(fragCoord.xy.div(iResolution)), 0, 1)
        function App() {
                const el = document.createElement('canvas')
                createGL({ el, frag }).mount()
                document.body.append(el)
        }
        document.addEventListener('DOMContentLoaded', App)
</script>

Varying

WebGL
WebGPU
TSL (TypeScript Shading Language)

Live Editor

function Canvas() {
        const gl = useGL({
                count: 3,
                width: 256,
                height: 256,
                vertex: `
                #version 300 es
                in vec4 a_position;
                in vec4 a_color;
                out vec4 v_color;
                void main() {
                        gl_Position = a_position;
                        v_color = a_color;
                }
                `,
                fragment: `
                #version 300 es
                precision mediump float;
                in vec4 v_color;
                out vec4 fragColor;
                void main() {
                        fragColor = v_color;
                }
                `,
        })
        gl.attribute('a_position', [0, 0.73, -1, -1, 1, -1])
        gl.attribute('a_color', [1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1])
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const gl = useGL({
                count: 3,
                width: 256,
                height: 256,
                vertex: `
                struct Out {
                        @builtin(position) position: vec4f,
                        @location(0) v_color: vec4f,
                }
                @vertex
                fn main(@location(0) a_position: vec2f, @location(1) a_color: vec4f) -> Out {
                        var out: Out;
                        out.position = vec4f(a_position, 0.0, 1.0);
                        out.v_color = a_color;
                        return out;
                }
                `,
                fragment: `
                struct Out {
                        @builtin(position) position: vec4f,
                        @location(0) v_color: vec4f,
                }
                @fragment
                fn main(out: Out) -> @location(0) vec4f {
                        return out.v_color;
                }
                `,
                isWebGL: false,
        })
        gl.attribute('a_position', [0, 0.73, -1, -1, 1, -1])
        gl.attribute('a_color', [1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1])
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const a_position = attribute(vec2(), 'a_position')
        const a_color = attribute(vec4(), 'a_color')
        const gl = useGL({
                count: 3,
                width: 256,
                height: 256,
                isWebGL: true,
                vert: vec4(a_position, 0.0, 1.0),
                frag: vertexStage(a_color),
        })
        gl.attribute('a_position', [0, 0.73, -1, -1, 1, -1])
        gl.attribute('a_color', [1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1])
        return <canvas ref={gl.ref} />
}

Result

Uniforms

WebGL
WebGPU
TSL (TypeScript Shading Language)

Live Editor

function Canvas() {
        const gl = useGL({
                width: 256,
                height: 256,
                fragment: `
                #version 300 es
                precision mediump float;
                uniform vec2 iResolution;
                uniform vec2 iMouse;
                uniform float iTime;
                out vec4 fragColor;
                void main() {
                        vec2 uv = fract(gl_FragCoord.xy / iResolution.xy - iMouse);
                        fragColor = vec4(uv, sin(iTime) * 0.5 + 0.5, 1.0);
                }
                `,
        })
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const gl = useGL({
                width: 256,
                height: 256,
                fragment: `
                @group(0) @binding(0) var<uniform> iResolution: vec2f;
                @group(0) @binding(1) var<uniform> iMouse: vec2f;
                @group(0) @binding(2) var<uniform> iTime: f32;
                @fragment
                fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
                        let uv = fract(position.xy / iResolution - iMouse);
                        return vec4f(uv, sin(iTime) * 0.5 + 0.5, 1.0);
                }
                `,
                isWebGL: false,
        })
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const gl = useGL({
                width: 256,
                height: 256,
                isWebGL: true,
                frag: vec4(fract(position.xy.div(iResolution).sub(iMouse)), 0, 1),
        })
        return <canvas ref={gl.ref} />
}

Result

Attributes

WebGL
WebGPU
TSL (TypeScript Shading Language)

Live Editor

function Canvas() {
        const gl = useGL({
                count: 3,
                width: 256,
                height: 256,
                vertex: `
                #version 300 es
                in vec4 a_position;
                void main() {
                        gl_Position = a_position;
                }
                `,
        })
        gl.attribute('a_position', [0, 0.73, -1, -1, 1, -1])
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const gl = useGL({
                count: 3,
                width: 256,
                height: 256,
                vertex: `
                @vertex
                fn main(@location(0) position: vec2f) -> @builtin(position) vec4f {
                        return vec4f(position, 0.0, 1.0);
                }
                `,
                isWebGL: false,
        })
        gl.attribute('a_position', [0, 0.73, -1, -1, 1, -1])
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const a_position = attribute(vec2(0), 'a_position')
        const gl = useGL({
                count: 3,
                width: 256,
                height: 256,
                isWebGL: true,
                vert: vec4(a_position, 0, 1),
        })
        gl.attribute('a_position', [0, 0.73, -1, -1, 1, -1])
        return <canvas ref={gl.ref} />
}

Result

Textures

WebGL
WebGPU
TSL (TypeScript Shading Language)

Live Editor

function Canvas() {
        const gl = useGL({
                width: 256,
                height: 256,
                fragment: `
                #version 300 es
                precision mediump float;
                uniform vec2 iResolution;
                uniform sampler2D iTexture;
                out vec4 fragColor;
                void main() {
                        vec2 uv = gl_FragCoord.xy / iResolution.xy;
                        fragColor = texture(iTexture, uv);
                }
                `,
        })
        gl.texture('iTexture', 'https://avatars.githubusercontent.com/u/40712342')
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const gl = useGL({
                width: 256,
                height: 256,
                fragment: `
                @group(0) @binding(0) var<uniform> iResolution: vec2f;
                @group(1) @binding(0) var iSampler: sampler;
                @group(1) @binding(1) var iTexture: texture_2d<f32>;
                @fragment
                fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
                        let uv = position.xy / iResolution;
                        return textureSample(iTexture, iSampler, uv);
                }
                `,
                isWebGL: false,
        })
        gl.texture('iTexture', 'https://avatars.githubusercontent.com/u/40712342')
        return <canvas ref={gl.ref} />
}

Result

Live Editor

function Canvas() {
        const iTexture = uniform(texture2D())
        const gl = useGL({
                width: 256,
                height: 256,
                isWebGL: true,
                frag: texture(iTexture, position.xy.div(iResolution)),
        })
        gl.texture('iTexture', 'https://avatars.githubusercontent.com/u/40712342')
        return <canvas ref={gl.ref} />
}

Result

What does it look like?​

Varying​

Uniforms​

Attributes​

Textures​

What does it look like?

Varying

Uniforms

Attributes

Textures