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

Introduction

What does it look like?

glre simplifies WebGl2 / WebGPU programming via TypeScript, React, Solid and more

4
import { createRoot } from 'react-dom/client'
import { useGL, vec4, fract, fragCoord, iResolution } from 'glre/react'
const frag = vec4(fract(fragCoord.xy.div(iResolution)), 0, 1)

const App = () => {
const gl = useGL({ frag })
return <canvas ref={gl.ref} />
}

createRoot(document.getElementById('root')).render(<App />)

Uniforms

ライブエディター
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 = fract(gl_FragCoord.xy / iResolution.xy - iMouse);
                        fragColor = vec4(uv, sin(iTime) * 0.5 + 0.5, 1.0);
                }
                `,
        })
        return <canvas ref={gl.ref} />
}
結果
Loading...

Attributes

ライブエディター
function Canvas() {
        const gl = useGL({
                count: 3,
                width: 256,
                height: 256,
                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} />
}
結果
Loading...

Textures

ライブエディター
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} />
}
結果
Loading...