glre

glre is a simple glsl Reactive Engine on the web and native via TypeScript, React, Solid and more.

<img alt="test1" width="256" src="https://user-images.githubusercontent.com/40712342/212297558-15a1e721-55d6-4b6f-aab4-9f5d7cede2cb.gif"></img>

<img alt="test2" width="256" src="https://user-images.githubusercontent.com/40712342/212297576-e12cef1b-b0e0-40cb-ac0f-7fb387ae6da8.gif"></img>

<img alt="test3" width="256" src="https://user-images.githubusercontent.com/40712342/212297587-0227d536-5cef-447a-be3e-4c93dad002a2.gif"></img>

<img alt="raymarch1" width="256" src="https://user-images.githubusercontent.com/40712342/215024903-90f25934-1018-4f2a-81e6-f16e5c64c378.gif"></img>

<img alt="raymarch2" width="256" src="https://user-images.githubusercontent.com/40712342/215024942-27766b2b-7b85-4725-bb3d-865bf137ea29.gif"></img>

<img alt="raymarch3" width="256" src="https://user-images.githubusercontent.com/40712342/215025052-c2fa46e5-5e0e-4de8-baee-869ca6135a61.gif"></img>

<img alt="raymarch4" width="256" src="https://user-images.githubusercontent.com/40712342/215025289-132b4213-aabc-48f2-bbe3-05764a8dae42.gif"></img>

<img alt="raymarch5" width="256" src="https://user-images.githubusercontent.com/40712342/215025456-8ab75328-ca7a-41f6-b5fe-98dd58410b38.gif"></img>

<img alt="raymarch6" width="256" src="https://user-images.githubusercontent.com/40712342/215025517-343fdfbf-af54-497c-a759-267acc450366.gif"></img>

Installation

npm install glre

PRs

welcome✨

What does it look like?

<td width="7500px" align="center" valign="center">
  glre simplifies glsl programming via TypeScript, React, Solid and more (<a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">live demo</a>).
</td>
<td width="2500px" valign="top">
  <a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">
    <img alt="4" src="https://i.imgur.com/Lb3h9fs.jpg"></img>
  </a>
</td>

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 />)

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)

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'))

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