glre 0.44.0 → 0.46.0

package/src/{utils/pipeline.ts → webgpu/utils.ts}

@@ -1,53 +1,68 @@
-import { is, isFloat32 } from './helpers'
+import { nested } from 'reev'
+import { is, isFloat32 } from '../helpers'
 import type { AttribData, TextureData, UniformData, StorageData } from '../types'
 
+type IAttribs = Iterable<AttribData & { isInstance?: boolean }>
+type IUniforms = Iterable<UniformData>
+type ITextures = Iterable<TextureData>
+type IStorages = Iterable<StorageData>
+
+/**
+ * binding
+ */
+export const createBinding = () => {
+        let _uniform = 0
+        let _texture = 0
+        let _storage = 0
+        let _attrib = 0
+        const uniform = nested(() => {
+                const group = Math.floor(_uniform / 12)
+                const binding = _uniform % 12
+                _uniform++
+                return { group, binding }
+        })
+        const texture = nested(() => {
+                const baseGroup = Math.floor(_uniform / 12) + 1
+                const group = baseGroup + Math.floor(_texture / 6)
+                const binding = (_texture % 6) * 2
+                _texture++
+                return { group, binding }
+        })
+        const storage = nested(() => {
+                const baseGroup = Math.floor(_uniform / 12) + Math.floor(_texture / 6) + 2
+                const group = baseGroup + Math.floor(_storage / 12)
+                const binding = _storage % 12
+                _storage++
+                return { group, binding }
+        })
+        const attrib = nested(() => {
+                const location = _attrib
+                _attrib++
+                return { location }
+        })
+        return { uniform, texture, storage, attrib }
+}
+
+export type Binding = ReturnType<typeof createBinding>
+
 /**
  * initialize
  */
-export const createDevice = async (c: GPUCanvasContext, log = console.log) => {
+export const createDevice = async (c: GPUCanvasContext, log = console.log, signal?: AbortSignal) => {
         const gpu = navigator.gpu
         const format = gpu.getPreferredCanvasFormat()
         const adapter = await gpu.requestAdapter()
+        if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
         const device = await adapter!.requestDevice()
+        if (signal?.aborted) {
+                device.destroy()
+                if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+        }
         device.onuncapturederror = (e) => log(e.error.message)
-        c.configure({ device, format, alphaMode: 'opaque' })
+        c.configure({ device, format, alphaMode: 'premultiplied' })
         return { device, format }
 }
 
-export const createBindings = () => {
-        let uniform = 0
-        let texture = 0
-        let storage = 0
-        let attrib = 0
-        return {
-                uniform: () => {
-                        const group = Math.floor(uniform / 12)
-                        const binding = uniform % 12
-                        uniform++
-                        return { group, binding }
-                },
-                texture: () => {
-                        const baseGroup = Math.floor(uniform / 12) + 1
-                        const group = baseGroup + Math.floor(texture / 6)
-                        const binding = (texture % 6) * 2
-                        texture++
-                        return { group, binding }
-                },
-                storage: () => {
-                        const baseGroup = Math.floor(uniform / 12) + Math.floor(texture / 6) + 2
-                        const group = baseGroup + Math.floor(storage / 12)
-                        const binding = storage % 12
-                        storage++
-                        return { group, binding }
-                },
-                attrib: () => {
-                        const location = attrib
-                        attrib++
-                        return { location }
-                },
-        }
-}
-
 /**
  * pipeline update
  */
@@ -58,7 +73,7 @@ const getVertexFormat = (stride: number): GPUVertexFormat => {
         return 'float32'
 }
 
-export const createVertexBuffers = (attribs: Iterable<AttribData & { isInstance?: boolean }>) => {
+const createVertexBuffers = (attribs: IAttribs) => {
         const vertexBuffers: GPUBuffer[] = []
         const bufferLayouts: GPUVertexBufferLayout[] = []
         for (const { buffer, location, stride, isInstance } of attribs) {
@@ -80,12 +95,7 @@ export const createVertexBuffers = (attribs: Iterable<AttribData & { isInstance?
         return { vertexBuffers, bufferLayouts }
 }
 
-export const createBindGroup = (
-        device: GPUDevice,
-        uniforms: Iterable<UniformData>,
-        textures: Iterable<TextureData>,
-        storages: Iterable<StorageData> = []
-) => {
+const createBindGroup = (device: GPUDevice, uniforms: IUniforms, textures: ITextures, storages: IStorages = []) => {
         const groups = new Map<number, { layouts: GPUBindGroupLayoutEntry[]; bindings: GPUBindGroupEntry[] }>()
         const ret = { bindGroups: [] as GPUBindGroup[], bindGroupLayouts: [] as GPUBindGroupLayout[] }
         const add = (i: number, layout: GPUBindGroupLayoutEntry, binding: GPUBindGroupEntry) => {
@@ -111,14 +121,7 @@ export const createBindGroup = (
         return ret
 }
 
-export const createPipeline = (
-        device: GPUDevice,
-        format: GPUTextureFormat,
-        bufferLayouts: GPUVertexBufferLayout[],
-        bindGroupLayouts: GPUBindGroupLayout[],
-        vs: string,
-        fs: string
-) => {
+const createPipeline = (device: GPUDevice, format: GPUTextureFormat, bufferLayouts: GPUVertexBufferLayout[], bindGroupLayouts: GPUBindGroupLayout[], vs: string, fs: string) => {
         return device.createRenderPipeline({
                 vertex: {
                         module: device.createShaderModule({ label: 'vert', code: vs.trim() }),
@@ -140,7 +143,8 @@ export const createPipeline = (
         })
 }
 
-export const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroupLayout[], cs: string) => {
+const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroupLayout[], cs: string) => {
+        if (!cs) return
         return device.createComputePipeline({
                 compute: {
                         module: device.createShaderModule({ label: 'compute', code: cs.trim() }),
@@ -150,6 +154,14 @@ export const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBi
         })
 }
 
+export const updatePipeline = (device: GPUDevice, format: GPUTextureFormat, attribs: IAttribs, uniforms: IUniforms, textures: ITextures, storages: IStorages, fs: string, cs: string, vs: string) => {
+        const { vertexBuffers, bufferLayouts } = createVertexBuffers(attribs)
+        const { bindGroups, bindGroupLayouts } = createBindGroup(device, uniforms, textures, storages)
+        const computePipeline = createComputePipeline(device, bindGroupLayouts, cs)
+        const graphicPipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, vs, fs)
+        return { bindGroups, vertexBuffers, computePipeline, graphicPipeline }
+}
+
 /**
  * buffers
  */
@@ -159,11 +171,7 @@ const bufferUsage = (type: 'uniform' | 'storage' | 'attrib') => {
         return 140 // GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
 }
 
-export const createArrayBuffer = (
-        device: GPUDevice,
-        array: number[] | Float32Array,
-        type: 'uniform' | 'storage' | 'attrib'
-) => {
+export const createBuffer = (device: GPUDevice, array: number[] | Float32Array, type: 'uniform' | 'storage' | 'attrib') => {
         if (!isFloat32(array)) array = new Float32Array(array)
         const usage = bufferUsage(type)
         const size = type === 'uniform' ? Math.ceil(array.byteLength / 256) * 256 : array.byteLength
@@ -171,22 +179,15 @@ export const createArrayBuffer = (
         return { array, buffer }
 }
 
+export const updateBuffer = (device: GPUDevice, value: number[] | Float32Array, array: Float32Array, buffer: GPUBuffer) => {
+        array.set(value)
+        device.queue.writeBuffer(buffer, 0, array as GPUAllowSharedBufferSource)
+}
+
 export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture) => {
         return {
-                colorAttachments: [
-                        {
-                                view: c.getCurrentTexture().createView(),
-                                clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                                loadOp: 'clear' as GPULoadOp,
-                                storeOp: 'store' as GPUStoreOp,
-                        },
-                ],
-                depthStencilAttachment: {
-                        view: depthTexture.createView(),
-                        depthClearValue: 1.0,
-                        depthLoadOp: 'clear' as GPULoadOp,
-                        depthStoreOp: 'store' as GPUStoreOp,
-                },
+                colorAttachments: [{ view: c.getCurrentTexture().createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: 'clear', storeOp: 'store' }],
+                depthStencilAttachment: { view: depthTexture.createView(), depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store' },
         } as GPURenderPassDescriptor
 }
 
@@ -196,15 +197,11 @@ export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture)
 export const createTextureSampler = (device: GPUDevice, width = 1280, height = 800) => {
         const texture = device.createTexture({ size: [width, height], format: 'rgba8unorm', usage: 22 }) // 22 is GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
         const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' })
-        return { texture, sampler }
+        return { texture, sampler, view: texture.createView() }
 }
 
 export const createDepthTexture = (device: GPUDevice, width: number, height: number) => {
-        return device.createTexture({
-                size: [width, height],
-                format: 'depth24plus',
-                usage: GPUTextureUsage.RENDER_ATTACHMENT,
-        })
+        return device.createTexture({ size: [width, height], format: 'depth24plus', usage: 16 }) // 16 is GPUTextureUsage.RENDER_ATTACHMENT
 }
 
 /**

package/src/utils/webgl.ts

@@ -1,135 +0,0 @@
-import { nested as cached } from 'reev'
-import { is, getStride, GLSL_VS, GLSL_FS, loadingTexture } from './helpers'
-import { createArrayBuffer, cleanStorage, createAttachment, createProgram, createStorage, createTexture, setArrayBuffer, storageSize, updateAttrib, updateInstance, updateUniform } from './program'
-import type { GL } from '../types'
-
-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
-
-        const units = cached(() => activeUnit++)
-        const cs = is.str(gl.cs) ? gl.cs : gl.cs!.compute({ isWebGL: true, gl, units })
-        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.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) }
-        })
-
-        const _uniform = (key: string, value: number | number[]) => {
-                c.useProgram(pg)
-                updateUniform(c, uniforms(key), value)
-        }
-
-        const _storage = (key: string, value: number[]) => {
-                const { ping, pong, unit, array } = storages(key)
-                createStorage(c, value, size.x, size.y, ping, pong, unit, array)
-        }
-
-        const clean = () => {
-                c.deleteProgram(pg)
-                cleanStorage(c, storages.map.values())
-        }
-
-        const render = () => {
-                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.webgl.context = gl.el!.getContext('webgl2')!)
-        const cp = computeProgram(gl, c)
-        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 = (gl.webgl.program = createProgram(c, fs, vs, gl)!)
-        c.useProgram(pg)
-
-        let activeUnit = 0 // for texture units
-
-        const units = cached(() => activeUnit++)
-        const uniforms = (gl.webgl.uniforms = cached((key) => c.getUniformLocation(pg, key)))
-
-        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)
-                updateUniform(c, uniforms(key)!, value)
-                cp?._uniform(key, value)
-        }
-
-        const _texture = (key: string, src: string) => {
-                gl.loading++
-                c.useProgram(pg)
-                loadingTexture(src, (source, isVideo) => {
-                        const unit = units(key)
-                        const loop = createTexture(c, source, uniforms(key)!, unit, isVideo)
-                        if (loop) gl({ loop })
-                        gl.loading--
-                })
-        }
-
-        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)
-                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.enable(c.DEPTH_TEST)
-                c.depthFunc(c.LEQUAL)
-                c.enable(c.CULL_FACE)
-                c.cullFace(c.BACK)
-        }
-
-        if (gl.wireframe) {
-                const ext = c.getExtension('WEBGL_polygon_mode')
-                ext.polygonModeWEBGL(c.FRONT_AND_BACK, ext.LINE_WEBGL)
-        }
-
-        return { render, clean, _attribute, _instance, _uniform, _texture, _storage: cp?._storage }
-}

package/src/utils/webgpu.ts

@@ -1,178 +0,0 @@
-import { nested as cached } from 'reev'
-import { is, getStride, WGSL_FS, WGSL_VS, loadingTexture } from './helpers'
-import {
-        createArrayBuffer,
-        createBindGroup,
-        createBindings,
-        createComputePipeline,
-        createDepthTexture,
-        createDescriptor,
-        createDevice,
-        createPipeline,
-        createTextureSampler,
-        createVertexBuffers,
-        workgroupCount,
-} from './pipeline'
-import type { GL, WebGPUState } from '../types'
-
-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 { x, y, z } = workgroupCount(gl.particleCount)
-                        pass.dispatchWorkgroups(x, y, z)
-                        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, 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[], isInstance = false) => {
-                needsUpdate = true
-                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, isInstance }
-        })
-
-        const uniforms = cached((_key, value: number[]) => {
-                needsUpdate = true
-                const { binding, group } = bindings.uniform()
-                const { array, buffer } = createArrayBuffer(device, value, 'uniform')
-                return { array, buffer, binding, group }
-        })
-
-        const textures = cached((_key, width = 0, height = 0) => {
-                needsUpdate = true
-                const { binding, group } = bindings.texture()
-                const { texture, sampler } = createTextureSampler(device, width, height)
-                return { texture, sampler, binding, group, view: texture.createView() }
-        })
-
-        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)
-                device.queue.writeBuffer(buffer, 0, array as any)
-        }
-
-        const _texture = (key: string, src: string) => {
-                gl.loading++
-                loadingTexture(src, (source, isVideo) => {
-                        const [width, height] = isVideo
-                                ? [source.videoWidth, source.videoHeight]
-                                : [source.width, source.height]
-                        const { texture } = textures(key, width, height)
-                        const loop = () => {
-                                device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
-                        }
-                        loop()
-                        if (isVideo) gl({ loop })
-                        gl.loading--
-                })
-        }
-
-        const update = () => {
-                const { vertexBuffers, bufferLayouts } = createVertexBuffers(attribs.map.values())
-                const { bindGroups, bindGroupLayouts } = createBindGroup(
-                        device,
-                        uniforms.map.values(),
-                        textures.map.values(),
-                        cp.storages.map.values()
-                )
-                const pipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, vert, frag)
-                flush = (pass) => {
-                        pass.setPipeline(pipeline)
-                        bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
-                        vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
-                        pass.draw(gl.count, gl.instanceCount, 0, 0)
-                        pass.end()
-                }
-                if (gl.cs) cp.update(bindGroups, bindGroupLayouts, comp)
-        }
-
-        const render = () => {
-                if (!frag || !vert) {
-                        const config = { isWebGL: false, gl }
-                        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
-                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()])
-        }
-
-        const resize = () => {
-                const canvas = gl.el as HTMLCanvasElement
-                depthTexture?.destroy()
-                depthTexture = createDepthTexture(device, canvas.width, canvas.height)
-        }
-
-        const clean = () => {
-                device.destroy()
-                depthTexture?.destroy()
-                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()
-                cp.clean()
-        }
-
-        resize()
-
-        const webgpu = { device, uniforms, textures, attribs, storages: cp.storages } as WebGPUState
-
-        return { webgpu, render, resize, clean, _attribute, _instance, _uniform, _texture, _storage: cp._storage }
-}