glre 0.39.0 → 0.41.0

package/src/utils/program.ts

@@ -1,7 +1,7 @@
 import { is } from './helpers'
 import type { GL } from '../types'
 
-const createShader = (c: WebGLRenderingContext, source: string, type: number, onError = console.warn) => {
+const createShader = (c: WebGL2RenderingContext, source: string, type: number, onError = console.warn) => {
         const shader = c.createShader(type)
         if (!shader) return onError('Failed to create shader')
         c.shaderSource(shader, source.trim())
@@ -12,7 +12,7 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number, on
         onError(`Could not compile shader: ${error}\n\n↓↓↓generated↓↓↓\n${source}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, frag: string, vert: string, gl: GL) => {
+export const createProgram = (c: WebGL2RenderingContext, frag: string, vert: string, gl: GL) => {
         const pg = c.createProgram()
         const fs = createShader(c, frag, c.FRAGMENT_SHADER, gl.error)
         const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
@@ -26,45 +26,38 @@ export const createProgram = (c: WebGLRenderingContext, frag: string, vert: stri
         gl.error(`Could not link program: ${error}`)
 }
 
-const createVbo = (c: WebGLRenderingContext, data: number[]) => {
+export const createArrayBuffer = (c: WebGL2RenderingContext, data: number[]) => {
+        const array = new Float32Array(data)
         const buffer = c.createBuffer()
-        c.bindBuffer(c.ARRAY_BUFFER, buffer)
-        c.bufferData(c.ARRAY_BUFFER, new Float32Array(data), c.STATIC_DRAW)
-        c.bindBuffer(c.ARRAY_BUFFER, null)
-        return buffer
+        return { array, buffer }
 }
 
-const createIbo = (c: WebGLRenderingContext, data: number[]) => {
-        const buffer = c.createBuffer()
-        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, buffer)
-        c.bufferData(c.ELEMENT_ARRAY_BUFFER, new Int16Array(data), c.STATIC_DRAW)
-        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, null)
-        return buffer
+export const setArrayBuffer = (
+        c: WebGL2RenderingContext,
+        array: Float32Array,
+        buffer: WebGLBuffer,
+        value: number[]
+) => {
+        array.set(value)
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
+        c.bufferData(c.ARRAY_BUFFER, array, c.STATIC_DRAW)
+        c.bindBuffer(c.ARRAY_BUFFER, null)
 }
 
-const getStride = (count: number, value: number[], iboValue?: number[]) => {
-        if (iboValue) count = Math.max(...iboValue) + 1
-        const stride = value.length / count
-        return Math.floor(stride)
+export const updateAttrib = (c: WebGL2RenderingContext, loc: number, stride: number, buffer: WebGLBuffer) => {
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
+        c.enableVertexAttribArray(loc)
+        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
 }
 
-export const createAttrib = (
-        c: WebGLRenderingContext,
-        loc: number,
-        count: number,
-        value: number[],
-        iboValue: number[]
-) => {
-        const vbo = createVbo(c, value)
-        const ibo = createIbo(c, iboValue)
-        const str = getStride(count, value, iboValue)
-        c.bindBuffer(c.ARRAY_BUFFER, vbo)
+export const updateInstance = (c: WebGL2RenderingContext, loc: number, stride: number, buffer: WebGLBuffer) => {
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
         c.enableVertexAttribArray(loc)
-        c.vertexAttribPointer(loc, str, c.FLOAT, false, 0, 0)
-        if (ibo) c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, ibo)
+        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
+        c.vertexAttribDivisor(loc, 1) // divisor is 1
 }
 
-export const createUniform = (c: WebGLRenderingContext, loc: WebGLUniformLocation, value: number | number[]) => {
+export const updateUniform = (c: WebGL2RenderingContext, loc: WebGLUniformLocation, value: number | number[]) => {
         if (is.num(value)) return c.uniform1f(loc, value)
         let l = value.length
         if (l <= 4) return c[`uniform${l as 2}fv`](loc, value)
@@ -73,15 +66,16 @@ export const createUniform = (c: WebGLRenderingContext, loc: WebGLUniformLocatio
 }
 
 export const createTexture = (
-        c: WebGLRenderingContext,
-        img: HTMLImageElement,
+        c: WebGL2RenderingContext,
+        el: HTMLImageElement | HTMLVideoElement,
         loc: WebGLUniformLocation,
-        unit: number
+        unit: number,
+        isVideo = false
 ) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, img)
-        c.generateMipmap(c.TEXTURE_2D)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
+        if (!isVideo) c.generateMipmap(c.TEXTURE_2D)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MIN_FILTER, c.LINEAR)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MAG_FILTER, c.LINEAR)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
@@ -90,6 +84,12 @@ export const createTexture = (
         c.uniform1i(loc, unit)
         c.activeTexture(c.TEXTURE0 + unit)
         c.bindTexture(c.TEXTURE_2D, texture)
+        if (isVideo)
+                return () => {
+                        c.activeTexture(c.TEXTURE0 + unit)
+                        c.bindTexture(c.TEXTURE_2D, texture)
+                        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
+                }
 }
 
 /**
@@ -103,28 +103,29 @@ interface TextureBuffer {
 export const createStorage = (
         c: WebGL2RenderingContext,
         value: number[],
-        size: number,
+        width: number,
+        height: number,
         ping: TextureBuffer,
         pong: TextureBuffer,
         unit: number,
         array: Float32Array
 ) => {
-        const particles = size * size
-        const vectorSize = value.length / particles
-        for (let i = 0; i < particles; i++) {
+        const particleCount = width * height
+        const vectorSize = value.length / particleCount
+        for (let i = 0; i < particleCount; i++) {
                 for (let j = 0; j < Math.min(vectorSize, 4); j++) {
                         array[4 * i + j] = value[i * vectorSize + j] || 0
                 }
         }
         c.activeTexture(c.TEXTURE0 + unit)
         c.bindTexture(c.TEXTURE_2D, ping.texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, array)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, width, height, 0, c.RGBA, c.FLOAT, array)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MIN_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MAG_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
         c.bindTexture(c.TEXTURE_2D, pong.texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, array)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, width, height, 0, c.RGBA, c.FLOAT, array)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MIN_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MAG_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
@@ -159,3 +160,28 @@ export const createAttachment = (
         c.framebufferTexture2D(c.FRAMEBUFFER, attachment, c.TEXTURE_2D, o.texture, 0)
         return attachment
 }
+
+/**
+ * utils
+ */
+export const storageSize = (particleCount: number | number[] = 1024) => {
+        if (is.num(particleCount)) {
+                const sqrt = Math.sqrt(particleCount)
+                const size = Math.ceil(sqrt)
+                if (!Number.isInteger(sqrt)) {
+                        console.warn(
+                                `GLRE Storage Warning: particleCount (${particleCount}) is not a square. Using ${size}x${size} texture may waste GPU memory. Consider using [width, height] format for optimal storage.`
+                        )
+                }
+                return { x: size, y: size }
+        }
+        const [x, y, z] = particleCount
+        if (z !== undefined) {
+                const yz = y * z
+                console.warn(
+                        `GLRE Storage Warning: 3D particleCount [${x}, ${y}, ${z}] specified but WebGL storage textures only support 2D. Flattening to 2D by multiplying height=${y} * depth=${z} = ${yz}.`
+                )
+                return { x, y: yz }
+        }
+        return { x, y }
+}

package/src/utils/webgl.ts

@@ -1,34 +1,20 @@
 import { nested as cached } from 'reev'
-import { is, loadingImage } from './helpers'
+import { is, getStride, GLSL_VS, GLSL_FS, loadingTexture } from './helpers'
 import {
+        createArrayBuffer,
         cleanStorage,
         createAttachment,
-        createAttrib,
         createProgram,
         createStorage,
         createTexture,
-        createUniform,
+        setArrayBuffer,
+        storageSize,
+        updateAttrib,
+        updateInstance,
+        updateUniform,
 } from './program'
 import type { GL, WebGLState } from '../types'
 
-const DEFAULT_FRAGMENT = /* cpp */ `
-#version 300 es
-precision mediump float;
-out vec4 fragColor;
-uniform vec2 iResolution;
-void main() {
-  fragColor = vec4(fract((gl_FragCoord.xy / iResolution)), 0.0, 1.0);
-}
-`
-
-const DEFAULT_VERTEX = /* cpp */ `
-#version 300 es
-void main() {
-  float x = float(gl_VertexID % 2) * 4.0 - 1.0;
-  float y = float(gl_VertexID / 2) * 4.0 - 1.0;
-  gl_Position = vec4(x, y, 0.0, 1.0);
-}`
-
 const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
         if (!gl.cs) return null // ignore if no compute shader
         c.getExtension('EXT_color_buffer_float')
@@ -38,12 +24,12 @@ const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
 
         const units = cached(() => activeUnit++)
         const cs = is.str(gl.cs) ? gl.cs : gl.cs!.compute({ isWebGL: true, gl, units })
-        const pg = createProgram(c, cs, DEFAULT_VERTEX, gl)!
-        const size = Math.ceil(Math.sqrt(gl.particles))
+        const pg = createProgram(c, cs, GLSL_VS, gl)!
+        const size = storageSize(gl.particleCount)
 
         const uniforms = cached((key) => c.getUniformLocation(pg, key)!)
         const storages = cached((key) => {
-                const array = new Float32Array(size * size * 4) // RGBA texture data
+                const array = new Float32Array(size.x * size.y * 4) // RGBA texture data
                 const ping = { texture: c.createTexture(), buffer: c.createFramebuffer() }
                 const pong = { texture: c.createTexture(), buffer: c.createFramebuffer() }
                 return { ping, pong, array, loc: uniforms(key), unit: units(key) }
@@ -51,12 +37,12 @@ const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
 
         const _uniform = (key: string, value: number | number[]) => {
                 c.useProgram(pg)
-                createUniform(c, uniforms(key), value)
+                updateUniform(c, uniforms(key), value)
         }
 
         const _storage = (key: string, value: number[]) => {
                 const { ping, pong, unit, array } = storages(key)
-                createStorage(c, value, size, ping, pong, unit, array)
+                createStorage(c, value, size.x, size.y, ping, pong, unit, array)
         }
 
         const clean = () => {
@@ -83,32 +69,49 @@ export const webgl = async (gl: GL) => {
         const config = { isWebGL: true, gl }
         const c = gl.el!.getContext('webgl2')!
         const cp = computeProgram(gl, c)
-        const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs!.fragment(config)) : DEFAULT_FRAGMENT
-        const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs!.vertex(config)) : DEFAULT_VERTEX
+        const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs!.fragment(config)) : GLSL_FS
+        const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs!.vertex(config)) : GLSL_VS
         const pg = createProgram(c, fs, vs, gl)!
         c.useProgram(pg)
 
         let activeUnit = 0 // for texture units
 
         const units = cached(() => activeUnit++)
-        const attribs = cached((key) => c.getAttribLocation(pg, key))
         const uniforms = cached((key) => c.getUniformLocation(pg, key))
 
-        const _attribute = (key = '', value: number[], iboValue: number[]) => {
-                const loc = attribs(key, true)
-                createAttrib(c, loc, gl.count, value, iboValue)
+        const attribs = cached((key, value: number[], isInstance = false) => {
+                const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.count, gl.error)
+                const location = c.getAttribLocation(pg, key)
+                const { array, buffer } = createArrayBuffer(c, value)
+                return { array, buffer, location, stride }
+        })
+
+        const _attribute = (key = '', value: number[]) => {
+                const { array, buffer, location, stride } = attribs(key, value)
+                setArrayBuffer(c, array, buffer, value)
+                updateAttrib(c, location, stride, buffer)
+        }
+
+        const _instance = (key: string, value: number[]) => {
+                const { array, buffer, location, stride } = attribs(key, value, true)
+                setArrayBuffer(c, array, buffer, value)
+                updateInstance(c, location, stride, buffer)
         }
 
         const _uniform = (key: string, value: number | number[]) => {
                 c.useProgram(pg)
-                createUniform(c, uniforms(key)!, value)
+                updateUniform(c, uniforms(key)!, value)
                 cp?._uniform(key, value)
         }
 
         const _texture = (key: string, src: string) => {
+                gl.loading++
                 c.useProgram(pg)
-                loadingImage(gl, src, (source) => {
-                        createTexture(c, source, uniforms(key)!, units(key))
+                loadingTexture(src, (source, isVideo) => {
+                        const unit = units(key)
+                        const loop = createTexture(c, source, uniforms(key)!, unit, isVideo)
+                        if (loop) gl({ loop })
+                        gl.loading--
                 })
         }
 
@@ -122,11 +125,18 @@ export const webgl = async (gl: GL) => {
                 cp?.render()
                 c.useProgram(pg)
                 c.viewport(0, 0, ...gl.size)
-                c.drawArrays(c.TRIANGLES, 0, gl.count)
+                if (gl.instanceCount > 1) {
+                        c.drawArraysInstanced(c.TRIANGLES, 0, gl.count, gl.instanceCount)
+                } else c.drawArrays(c.TRIANGLES, 0, gl.count)
                 c.bindFramebuffer(c.FRAMEBUFFER, null)
         }
 
+        if (gl.isDepth) {
+                c.depthFunc(c.LEQUAL)
+                c.enable(c.CULL_FACE)
+        }
+
         const webgl: WebGLState = { context: c, program: pg, storages: cp?.storages }
 
-        return { webgl, render, clean, _attribute, _uniform, _texture, _storage: cp?._storage }
+        return { webgl, render, clean, _attribute, _instance, _uniform, _texture, _storage: cp?._storage }
 }

package/src/utils/webgpu.ts

@@ -1,5 +1,5 @@
 import { nested as cached } from 'reev'
-import { is, loadingImage } from './helpers'
+import { is, getStride, WGSL_FS, WGSL_VS, loadingTexture } from './helpers'
 import {
         createArrayBuffer,
         createBindGroup,
@@ -11,33 +11,10 @@ import {
         createPipeline,
         createTextureSampler,
         createVertexBuffers,
+        workgroupCount,
 } from './pipeline'
 import type { GL, WebGPUState } from '../types'
 
-const WORKING_GROUP_SIZE = 32
-
-const DEFAULT_VERTEX = /* rust */ `
-struct In { @builtin(vertex_index) vertex_index: u32 }
-struct Out { @builtin(position) position: vec4f }
-@vertex
-fn main(in: In) -> Out {
-  var out: Out;
-  var x = f32(in.vertex_index % 2) * 4.0 - 1.0;
-  var y = f32(in.vertex_index / 2) * 4.0 - 1.0;
-  out.position = vec4f(x, y, 0.0, 1.0);
-  return out;
-}
-`.trim()
-
-const DEFAULT_FRAGMENT = /* rust */ `
-struct Out { @builtin(position) position: vec4f }
-@group(0) @binding(0) var<uniform> iResolution: vec2f;
-@fragment
-fn main(out: Out) -> @location(0) vec4f {
-  return vec4f(fract((out.position.xy / iResolution)), 0.0, 1.0);
-}
-`
-
 const computeProgram = (gl: GL, device: GPUDevice, bindings: any) => {
         let flush = (_pass: GPUComputePassEncoder) => {}
 
@@ -57,8 +34,8 @@ const computeProgram = (gl: GL, device: GPUDevice, bindings: any) => {
                 flush = (pass) => {
                         pass.setPipeline(pipeline)
                         bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
-                        const workgroupCount = Math.ceil(gl.particles / WORKING_GROUP_SIZE)
-                        pass.dispatchWorkgroups(workgroupCount, 1, 1)
+                        const { x, y, z } = workgroupCount(gl.particleCount)
+                        pass.dispatchWorkgroups(x, y, z)
                         pass.end()
                 }
         }
@@ -86,12 +63,12 @@ export const webgpu = async (gl: GL) => {
         let needsUpdate = true
         let depthTexture: GPUTexture
 
-        const attribs = cached((_key, value: number[]) => {
+        const attribs = cached((_key, value: number[], isInstance = false) => {
                 needsUpdate = true
-                const stride = value.length / gl.count
+                const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.count)
                 const { location } = bindings.attrib()
                 const { array, buffer } = createArrayBuffer(device, value, 'attrib')
-                return { array, buffer, location, stride }
+                return { array, buffer, location, stride, isInstance }
         })
 
         const uniforms = cached((_key, value: number[]) => {
@@ -110,21 +87,36 @@ export const webgpu = async (gl: GL) => {
 
         const _attribute = (key = '', value: number[]) => {
                 const { array, buffer } = attribs(key, value)
+                array.set(value)
+                device.queue.writeBuffer(buffer, 0, array as any)
+        }
+
+        const _instance = (key: string, value: number[]) => {
+                const { array, buffer } = attribs(key, value, true)
+                array.set(value)
                 device.queue.writeBuffer(buffer, 0, array as any)
         }
 
         const _uniform = (key: string, value: number | number[]) => {
                 if (is.num(value)) value = [value]
                 const { array, buffer } = uniforms(key, value)
-                array.set(value) // needs to set leatest value
+                array.set(value)
                 device.queue.writeBuffer(buffer, 0, array as any)
         }
 
         const _texture = (key: string, src: string) => {
-                loadingImage(gl, src, (source) => {
-                        const { width, height } = source
+                gl.loading++
+                loadingTexture(src, (source, isVideo) => {
+                        const [width, height] = isVideo
+                                ? [source.videoWidth, source.videoHeight]
+                                : [source.width, source.height]
                         const { texture } = textures(key, width, height)
-                        device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
+                        const loop = () => {
+                                device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
+                        }
+                        loop()
+                        if (isVideo) gl({ loop })
+                        gl.loading--
                 })
         }
 
@@ -141,7 +133,7 @@ export const webgpu = async (gl: GL) => {
                         pass.setPipeline(pipeline)
                         bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
                         vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
-                        pass.draw(gl.count, 1, 0, 0)
+                        pass.draw(gl.count, gl.instanceCount, 0, 0)
                         pass.end()
                 }
                 if (gl.cs) cp.update(bindGroups, bindGroupLayouts, comp)
@@ -150,8 +142,8 @@ export const webgpu = async (gl: GL) => {
         const render = () => {
                 if (!frag || !vert) {
                         const config = { isWebGL: false, gl }
-                        frag = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : DEFAULT_FRAGMENT
-                        vert = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : DEFAULT_VERTEX
+                        frag = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : WGSL_FS
+                        vert = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : WGSL_VS
                         comp = gl.cs ? (is.str(gl.cs) ? gl.cs : gl.cs.compute(config)) : ''
                 }
                 if (gl.loading) return // MEMO: loading after build node
@@ -182,5 +174,5 @@ export const webgpu = async (gl: GL) => {
 
         const webgpu = { device, uniforms, textures, attribs, storages: cp.storages } as WebGPUState
 
-        return { webgpu, render, resize, clean, _attribute, _uniform, _texture, _storage: cp._storage }
+        return { webgpu, render, resize, clean, _attribute, _instance, _uniform, _texture, _storage: cp._storage }
 }