Introduction

What does it look like?

glre simplifies glsl programming via TypeScript, React, Solid and more (live demo).

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

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

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

react-native supported (codesandbox demo)

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

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

registerRootComponent(App)

solid js supported (codesandbox demo)

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

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

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

esm supported (codesandbox demo)

<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 / iResolution), 0, 1)
        function App() {
                const el = document.createElement('canvas')
                createGL({ el, frag }).mount()
                document.body.append(el)
        }
        document.addEventListener('DOMContentLoaded', App)
</script>