メインコンテンツまでスキップ

Introduction

What does it look like?

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

4
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>