glre 0.35.0 → 0.37.0

package/src/utils/program.ts

@@ -1,3 +1,6 @@
+import { is } from './helpers'
+import type { GL } from '../types'
+
 const createShader = (c: WebGLRenderingContext, source: string, type: number, onError = console.warn) => {
         const shader = c.createShader(type)
         if (!shader) return onError('Failed to create shader')
@@ -9,21 +12,21 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number, on
         onError(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vert: string, frag: string, onError = console.warn) => {
+export const createProgram = (c: WebGLRenderingContext, frag: string, vert: string, gl: GL) => {
         const pg = c.createProgram()
-        const fs = createShader(c, frag, c.FRAGMENT_SHADER, onError)
-        const vs = createShader(c, vert, c.VERTEX_SHADER, onError)
+        const fs = createShader(c, frag, c.FRAGMENT_SHADER, gl.error)
+        const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
         if (!fs || !vs) return
-        c.attachShader(pg, vs!)
         c.attachShader(pg, fs!)
+        c.attachShader(pg, vs!)
         c.linkProgram(pg)
         if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
         const error = c.getProgramInfoLog(pg)
         c.deleteProgram(pg)
-        onError(`Could not link program: ${error}`)
+        gl.error(`Could not link program: ${error}`)
 }
 
-export const createVbo = (c: WebGLRenderingContext, data: number[]) => {
+const createVbo = (c: WebGLRenderingContext, data: number[]) => {
         const buffer = c.createBuffer()
         c.bindBuffer(c.ARRAY_BUFFER, buffer)
         c.bufferData(c.ARRAY_BUFFER, new Float32Array(data), c.STATIC_DRAW)
@@ -31,7 +34,7 @@ export const createVbo = (c: WebGLRenderingContext, data: number[]) => {
         return buffer
 }
 
-export const createIbo = (c: WebGLRenderingContext, data: number[]) => {
+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)
@@ -39,7 +42,7 @@ export const createIbo = (c: WebGLRenderingContext, data: number[]) => {
         return buffer
 }
 
-export const getStride = (count: number, value: number[], iboValue?: number[]) => {
+const getStride = (count: number, value: number[], iboValue?: number[]) => {
         if (iboValue) count = Math.max(...iboValue) + 1
         const stride = value.length / count
         return Math.floor(stride)
@@ -47,17 +50,28 @@ export const getStride = (count: number, value: number[], iboValue?: number[]) =
 
 export const createAttrib = (
         c: WebGLRenderingContext,
-        stride: number,
-        loc: any,
-        vbo: WebGLBuffer,
-        ibo?: WebGLBuffer
+        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)
         c.enableVertexAttribArray(loc)
-        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
+        c.vertexAttribPointer(loc, str, c.FLOAT, false, 0, 0)
         if (ibo) c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, ibo)
 }
 
+export const createUniform = (c: WebGLRenderingContext, 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)
+        l = Math.sqrt(l) << 0
+        c[`uniformMatrix${l as 2}fv`](loc, false, value)
+}
+
 export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, loc: any, unit: number) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
@@ -72,3 +86,71 @@ export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, l
         c.activeTexture(c.TEXTURE0 + unit)
         c.bindTexture(c.TEXTURE_2D, texture)
 }
+
+/**
+ * for gpgpu
+ */
+interface TextureBuffer {
+        texture: WebGLTexture
+        buffer: WebGLFramebuffer
+}
+
+export const createStorage = (
+        c: WebGL2RenderingContext,
+        value: number[],
+        size: 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++) {
+                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.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.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)
+}
+
+export const cleanStorage = (
+        c: WebGL2RenderingContext,
+        map: Iterable<{ ping: TextureBuffer; pong: TextureBuffer }>
+) => {
+        for (const { ping, pong } of map) {
+                c.deleteTexture(ping.texture)
+                c.deleteTexture(pong.texture)
+                c.deleteFramebuffer(ping.buffer)
+                c.deleteFramebuffer(pong.buffer)
+        }
+}
+
+export const createAttachment = (
+        c: WebGL2RenderingContext,
+        i: TextureBuffer,
+        o: TextureBuffer,
+        loc: WebGLUniformLocation,
+        unit: number,
+        index: number
+) => {
+        c.activeTexture(c.TEXTURE0 + unit)
+        c.bindTexture(c.TEXTURE_2D, i.texture)
+        c.uniform1i(loc, unit)
+        if (index === 0) c.bindFramebuffer(c.FRAMEBUFFER, o.buffer)
+        const attachment = c.COLOR_ATTACHMENT0 + index
+        c.framebufferTexture2D(c.FRAMEBUFFER, attachment, c.TEXTURE_2D, o.texture, 0)
+        return attachment
+}

package/src/webgl.ts

@@ -1,65 +1,122 @@
 import { nested as cached } from 'reev'
-import { fragment, vertex } from './node'
-import { is } from './utils/helpers'
-import { createAttrib, createIbo, createProgram, createTexture, createVbo, getStride } from './utils/program'
+import { loadingImage } from './utils/helpers'
+import {
+        cleanStorage,
+        createAttachment,
+        createAttrib,
+        createProgram,
+        createStorage,
+        createTexture,
+        createUniform,
+} from './utils/program'
+import { compute, fragment, vertex } from './node'
 import type { GL, WebGLState } from './types'
 
-export const webgl = async (gl: GL) => {
-        const c = gl.el!.getContext('webgl2')!
-        const config = { isWebGL: true, gl }
-        const fs = fragment(gl.fs, config)
-        const vs = vertex(gl.vs, config)
-        const pg = createProgram(c, vs, fs, gl.error)!
-        c.useProgram(pg)
+const vert = /* 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);
+}`.trim()
+
+const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
+        if (!gl.cs) return null // ignore if no compute shader
+        c.getExtension('EXT_color_buffer_float')
+
+        let activeUnit = 0 // for texture units
+        let currentNum = 0 // for storage buffers
 
-        let activeUnit = 0
-        const uniforms = cached((key) => c.getUniformLocation(pg, key))
-        const attribs = cached((key) => c.getAttribLocation(pg, key))
         const units = cached(() => activeUnit++)
+        const config = { isWebGL: true, gl, units }
+
+        const pg = createProgram(c, compute(gl.cs, config), vert, gl)!
+        const size = Math.ceil(Math.sqrt(gl.particles))
+
+        const uniforms = cached((key) => c.getUniformLocation(pg, key)!)
+        const storages = cached((key) => {
+                const array = new Float32Array(size * size * 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) }
+        })
+
+        const _uniform = (key: string, value: number | number[]) => {
+                c.useProgram(pg)
+                createUniform(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)
+        }
 
         const clean = () => {
                 c.deleteProgram(pg)
-                c.getExtension('WEBGL_lose_context')?.loseContext()
-                gl.el.width = 1
-                gl.el.height = 1
+                cleanStorage(c, storages.map.values())
         }
 
         const render = () => {
-                c.clear(c.COLOR_BUFFER_BIT)
-                c.viewport(0, 0, ...gl.size)
+                c.useProgram(pg)
+                const attachments = storages.map.values().map(({ ping, pong, loc, unit }, index) => {
+                        const [i, o] = currentNum % 2 ? [ping, pong] : [pong, ping]
+                        return createAttachment(c, i, o, loc, unit, index)
+                })
+                c.drawBuffers(attachments)
                 c.drawArrays(c.TRIANGLES, 0, 3)
+                c.bindFramebuffer(c.FRAMEBUFFER, null)
+                currentNum++
         }
 
+        return { render, clean, _uniform, _storage, storages }
+}
+
+export const webgl = async (gl: GL) => {
+        const config = { isWebGL: true, gl }
+        const c = gl.el!.getContext('webgl2')!
+        const cp = computeProgram(gl, c)
+        const pg = createProgram(c, fragment(gl.fs, config), vertex(gl.vs, config), 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)
-                const vbo = createVbo(c, value)
-                const ibo = createIbo(c, iboValue)
-                const str = getStride(gl.count, value, iboValue)
-                createAttrib(c, str, loc, vbo, ibo)
+                createAttrib(c, loc, gl.count, value, iboValue)
         }
 
         const _uniform = (key: string, value: number | number[]) => {
-                const loc = uniforms(key)
-                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)
-                l = Math.sqrt(l) << 0
-                c[`uniformMatrix${l as 2}fv`](loc, false, value)
+                c.useProgram(pg)
+                createUniform(c, uniforms(key)!, value)
+                cp?._uniform(key, value)
         }
 
         const _texture = (key: string, src: string) => {
-                gl.loading++
-                const image = new Image()
-                Object.assign(image, { src, crossOrigin: 'anonymous' })
-                image.decode().then(() => {
-                        const loc = uniforms(key)
-                        const unit = units(key)
-                        createTexture(c, image, loc, unit)
-                        gl.loading--
+                c.useProgram(pg)
+                loadingImage(gl, src, (source) => {
+                        createTexture(c, source, uniforms(key), units(key))
                 })
         }
 
-        const webgl: WebGLState = { context: c, program: pg }
+        const clean = () => {
+                cp?.clean()
+                c.deleteProgram(pg)
+                c.getExtension('WEBGL_lose_context')?.loseContext()
+        }
+
+        const render = () => {
+                cp?.render()
+                c.useProgram(pg)
+                c.viewport(0, 0, ...gl.size)
+                c.drawArrays(c.TRIANGLES, 0, gl.count)
+                c.bindFramebuffer(c.FRAMEBUFFER, null)
+        }
+
+        const webgl: WebGLState = { context: c, program: pg, storages: cp?.storages }
 
-        return { webgl, render, clean, _attribute, _uniform, _texture }
+        return { webgl, render, clean, _attribute, _uniform, _texture, _storage: cp?._storage }
 }

package/src/webgpu.ts

@@ -1,59 +1,119 @@
 import { nested as cached } from 'reev'
-import { is } from './utils/helpers'
+import { is, loadingImage } from './utils/helpers'
 import {
-        createAttribBuffer,
-        createBindings,
+        createArrayBuffer,
         createBindGroup,
+        createBindings,
+        createComputePipeline,
         createDepthTexture,
         createDescriptor,
         createDevice,
         createPipeline,
         createTextureSampler,
-        createUniformBuffer,
         createVertexBuffers,
 } from './utils/pipeline'
 import type { GL, WebGPUState } from './types'
-import { fragment, vertex } from './node'
+import { compute, fragment, vertex } from './node'
+
+const WORKING_GROUP_SIZE = 32
+
+const computeProgram = (gl: GL, device: GPUDevice, bindings: any) => {
+        let flush = (_pass: GPUComputePassEncoder) => {}
+
+        const storages = cached((_key, value: number[] | Float32Array) => {
+                const { array, buffer } = createArrayBuffer(device, value, 'storage')
+                const { binding, group } = bindings.storage()
+                return { array, buffer, binding, group }
+        })
+
+        const _storage = (key: string, value: number[] | Float32Array) => {
+                const { array, buffer } = storages(key, value)
+                device.queue.writeBuffer(buffer, 0, array as any)
+        }
+
+        const update = (bindGroups: GPUBindGroup[], bindGroupLayouts: GPUBindGroupLayout[], comp: string) => {
+                const pipeline = createComputePipeline(device, bindGroupLayouts, comp!)
+                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)
+                        pass.end()
+                }
+        }
+
+        const render = (pass: GPUComputePassEncoder) => {
+                flush(pass)
+        }
+
+        const clean = () => {
+                for (const { buffer } of storages.map.values()) buffer.destroy()
+        }
+
+        return { storages, _storage, update, render, clean }
+}
 
 export const webgpu = async (gl: GL) => {
         const context = gl.el!.getContext('webgpu') as GPUCanvasContext
-        const { device, format } = await createDevice(context)
-        device.onuncapturederror = (e) => gl.error(e.error.message)
+        const { device, format } = await createDevice(context, gl.error)
         const bindings = createBindings()
+        const cp = computeProgram(gl, device, bindings)
         let frag: string
+        let comp: string
         let vert: string
         let flush = (_pass: GPURenderPassEncoder) => {}
         let needsUpdate = true
         let depthTexture: GPUTexture
 
+        const attribs = cached((_key, value: number[]) => {
+                needsUpdate = true
+                const stride = value.length / gl.count
+                const { location } = bindings.attrib()
+                const { array, buffer } = createArrayBuffer(device, value, 'attrib')
+                return { array, buffer, location, stride }
+        })
+
         const uniforms = cached((_key, value: number[]) => {
                 needsUpdate = true
-                const { array, buffer } = createUniformBuffer(device, value)
                 const { binding, group } = bindings.uniform()
-                return { binding, group, array, buffer }
+                const { array, buffer } = createArrayBuffer(device, value, 'uniform')
+                return { array, buffer, binding, group }
         })
 
         const textures = cached((_key, width = 0, height = 0) => {
                 needsUpdate = true
-                const { texture, sampler } = createTextureSampler(device, width, height)
                 const { binding, group } = bindings.texture()
-                return { binding, group, texture, sampler, view: texture.createView() }
+                const { texture, sampler } = createTextureSampler(device, width, height)
+                return { texture, sampler, binding, group, view: texture.createView() }
         })
 
-        const attribs = cached((_key, value: number[]) => {
-                needsUpdate = true
-                const stride = value.length / gl.count
-                const { location } = bindings.attrib()
-                const { array, buffer } = createAttribBuffer(device, value)
-                return { array, buffer, location, stride }
-        })
+        const _attribute = (key = '', value: number[]) => {
+                const { array, buffer } = attribs(key, 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
+                device.queue.writeBuffer(buffer, 0, array as any)
+        }
+
+        const _texture = (key: string, src: string) => {
+                loadingImage(gl, src, (source) => {
+                        const { width, height } = source
+                        const { texture } = textures(key, width, height)
+                        device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
+                })
+        }
 
         const update = () => {
                 const { vertexBuffers, bufferLayouts } = createVertexBuffers(attribs.map.values())
                 const { bindGroups, bindGroupLayouts } = createBindGroup(
                         device,
                         uniforms.map.values(),
-                        textures.map.values()
+                        textures.map.values(),
+                        cp.storages.map.values()
                 )
                 const pipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, vert, frag)
                 flush = (pass) => {
@@ -63,18 +123,21 @@ export const webgpu = async (gl: GL) => {
                         pass.draw(gl.count, 1, 0, 0)
                         pass.end()
                 }
+                if (gl.cs) cp.update(bindGroups, bindGroupLayouts, comp)
         }
 
         const render = () => {
                 if (!frag || !vert) {
                         const config = { isWebGL: false, gl }
-                        frag = fragment(gl.fs, config)
+                        frag = fragment(gl.fs, config) // needs to be before vertex
                         vert = vertex(gl.vs, config)
+                        comp = compute(gl.cs, config)
                 }
                 if (gl.loading) return // MEMO: loading after build node
                 if (needsUpdate) update()
                 needsUpdate = false
                 const encoder = device.createCommandEncoder()
+                if (gl.cs) cp.render(encoder.beginComputePass())
                 flush(encoder.beginRenderPass(createDescriptor(context, depthTexture)))
                 device.queue.submit([encoder.finish()])
         }
@@ -91,41 +154,12 @@ export const webgpu = async (gl: GL) => {
                 for (const { texture } of textures.map.values()) texture.destroy()
                 for (const { buffer } of uniforms.map.values()) buffer.destroy()
                 for (const { buffer } of attribs.map.values()) buffer.destroy()
-        }
-
-        const _attribute = (key = '', value: number[]) => {
-                const { array, buffer } = attribs(key, value)
-                array.set(value)
-                device.queue.writeBuffer(buffer, 0, array)
-        }
-
-        const _uniform = (key: string, value: number | number[]) => {
-                if (is.num(value)) value = [value]
-                const { array, buffer } = uniforms(key, value)
-                array.set(value)
-                device.queue.writeBuffer(buffer, 0, array)
-        }
-
-        const _texture = (key: string, src: string) => {
-                gl.loading++
-                const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
-                source.decode().then(() => {
-                        const { width, height } = source
-                        const { texture } = textures(key, width, height)
-                        device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
-                        gl.loading--
-                })
+                cp.clean()
         }
 
         resize()
 
-        return {
-                webgpu: { device, uniforms, textures, attribs } as WebGPUState,
-                render,
-                resize,
-                clean,
-                _attribute,
-                _uniform,
-                _texture,
-        }
+        const webgpu = { device, uniforms, textures, attribs, storages: cp.storages } as WebGPUState
+
+        return { webgpu, render, resize, clean, _attribute, _uniform, _texture, _storage: cp._storage }
 }