0.21.0 • Published 2 months ago
glre v0.21.0
🌇 glre
glre is a simple glsl Reactive Engine on the web and native via TypeScript, React, Solid and more.
Installation
npm install glre
Documentation
Docs : glre Introduction
API : glre API and feature
Guide : Creating a scene
Ecosystem
⛪️ reev: reactive event state manager
🔮 refr: request animation frame
Staying informed
github discussions welcome✨
@tseijp twitter
tsei.jp articles
PRs
welcome✨
What does it look like?
import { createRoot } from 'react-dom/client'
import { useGL, useFrame } from 'glre/react'
const fragment = `
precision highp float;
uniform vec2 iResolution;
void main() {
gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
}
`
const App = () => {
const gl = useGL({ fragment })
useFrame(() => {
gl.clear()
gl.viewport()
gl.drawArrays()
})
return <canvas ref={gl.ref} />
}
createRoot(document.getElementById('root')).render(<App />)
react-native supported (codesandbox demo)
import { GLView } from 'expo-gl'
import { useGL, useFrame } from 'glre/native'
import { registerRootComponent } from 'expo'
const fragment = `
precision highp float;
uniform vec2 iResolution;
void main() {
gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
}
`
const App = () => {
const self = useGL({ fragment })
useFrame(() => {
self.clear()
self.viewport()
self.drawArrays()
self.gl.flush()
self.gl.endFrameEXP()
})
return <GLView style={{ flex: 1 }} onContextCreate={self.ref} />
}
registerRootComponent(App)
solid js supported (codesandbox demo)
import { render } from 'solid-js/web'
import { onGL, onFrame } from 'glre/solid'
const fragment = `
precision highp float;
uniform vec2 iResolution;
void main() {
gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
}
`
const App = () => {
const gl = onGL({ fragment })
onFrame(() => {
gl.clear()
gl.viewport()
gl.drawArrays()
})
return <canvas ref={gl.ref} />
}
render(() => <App />, document.getElementById('root'))
pure js supported (codesandbox demo)
<canvas id="id" style="top: 0; left: 0; position: fixed" />
<script type="module">
import self from 'https://cdn.skypack.dev/glre@latest'
const fragment = `
precision highp float;
uniform vec2 iResolution;
void main() {
gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
}
`
function setup() {
const el = document.getElementById('id')
const gl = el.getContext('webgl2')
self({ el, gl, fragment })
self.init()
self.resize()
draw()
}
function draw() {
requestAnimationFrame(draw)
self.render()
self.clear()
self.viewport()
self.drawArrays()
}
document.addEventListener('DOMContentLoaded', setup)
</script>
0.21.0
2 months ago
0.20.0
3 months ago
0.19.0
5 months ago
0.17.0
5 months ago
0.18.0
5 months ago
0.14.0
10 months ago
0.15.0
10 months ago
0.16.0
9 months ago
0.13.0
1 year ago
0.13.1
1 year ago
0.10.0
1 year ago
0.3.0
1 year ago
0.11.0
1 year ago
0.9.0
1 year ago
0.12.0
1 year ago
0.8.0
1 year ago
0.5.0
1 year ago
0.4.0
1 year ago
0.3.1
1 year ago
0.7.0
1 year ago
0.6.0
1 year ago
0.2.0
1 year ago
0.1.0
1 year ago