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>