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 / 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 / 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 / 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 / iResolution), 0, 1)
function App() {
const el = document.createElement('canvas')
createGL({ el, frag }).mount()
document.body.append(el)
}
document.addEventListener('DOMContentLoaded', App)
</script>
Uniforms
- WebGL
- WebGPU
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 = gl_FragCoord.xy / iResolution.xy; fragColor = vec4(iMouse + uv, sin(iTime), 1.0); } `, }) return <canvas ref={gl.ref} /> }
Result
Loading...
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 = position.xy / iResolution; return vec4f(iMouse + uv, sin(iTime), 1.0); } `, isWebGL: false, }) return <canvas ref={gl.ref} /> }
Result
Loading...
Attributes
- WebGL
- WebGPU
Live Editor
function Canvas() { const gl = useGL({ width: 256, height: 256, count: 3, 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
Loading...
Live Editor
function Canvas() { const gl = useGL({ width: 256, height: 256, count: 3, 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
Loading...
Textures
- WebGL
- WebGPU
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
Loading...
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
Loading...