glre 0.24.0 → 0.25.0

package/src/utils/pipeline.ts

@@ -1,4 +1,7 @@
-import { GPUContext, GPUDevice, GPUPipeline } from '../types'
+import { wgsl } from '../code/wgsl'
+import { X } from '../node'
+import { is } from './helpers'
+import type { GPUContext, GPUDevice, GPUPipeline } from '../types'
 
 const defaultVertexWGSL = `
 @vertex
@@ -10,13 +13,7 @@ fn main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
 `
 
 const defaultFragmentWGSL = `
-struct Uniforms {
-  iResolution: vec2f,
-  iMouse: vec2f,
-  iTime: f32,
-}
-
-@group(0) @binding(0) var<uniform> u: Uniforms;
+@group(0) @binding(0) var<uniform> iResolution: vec2f;
 
 @fragment
 fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
@@ -24,13 +21,26 @@ fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
 }
 `
 
+export const createDevive = async (c: GPUContext) => {
+        const gpu = (navigator as any).gpu
+        const format = gpu.getPreferredCanvasFormat()
+        const adapter = await gpu.requestAdapter()
+        const device = await adapter.requestDevice()
+        c.configure({ device, format, alphaMode: 'opaque' })
+        return { device, format }
+}
+
 export const createPipeline = (
         device: GPUDevice,
         format: string,
-        vs = defaultVertexWGSL,
-        fs = defaultFragmentWGSL,
-        buffers: any[]
+        buffers: any[],
+        layouts: any[],
+        vs: string | X = defaultVertexWGSL,
+        fs: string | X = defaultFragmentWGSL
 ) => {
+        if (is.obj(fs)) fs = wgsl(fs)
+        if (is.obj(vs)) vs = wgsl(vs)
+        const layout = device.createPipelineLayout({ bindGroupLayouts: layouts })
         return device.createRenderPipeline({
                 vertex: {
                         module: device.createShaderModule({ code: vs.trim() }),
@@ -42,11 +52,30 @@ export const createPipeline = (
                         entryPoint: 'main',
                         targets: [{ format }],
                 },
-                layout: 'auto',
+                layout,
                 primitive: { topology: 'triangle-list' },
         }) as GPUPipeline
 }
 
+export const createBindGroup = (device: GPUDevice, resources: any[]) => {
+        const entries0 = [] as any[]
+        const entries1 = [] as any[]
+        resources.forEach((resource, binding) => {
+                if (!resource) return
+                const isUniform = 'buffer' in resource // @ts-ignore
+                const isTexture = resource instanceof GPUTextureView // @ts-ignore
+                const isSampler = resource instanceof GPUSampler // @ts-ignore
+                if (isUniform) entries0.push({ binding, visibility: 3, buffer: { type: 'uniform' } })
+                else if (isTexture) entries0.push({ binding, visibility: 2, texture: {} })
+                else if (isSampler) entries0.push({ binding, visibility: 2, sampler: {} })
+                else return
+                entries1.push({ binding, resource })
+        })
+        const layout = device.createBindGroupLayout({ entries: entries0 })
+        const bindGroup = device.createBindGroup({ layout, entries: entries1 })
+        return [layout, bindGroup]
+}
+
 export const createDescriptor = (c: GPUContext) => {
         return {
                 colorAttachments: [
@@ -60,65 +89,24 @@ export const createDescriptor = (c: GPUContext) => {
         }
 }
 
-// export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
-//
-// export const createUniformBuffer = (device: GPUDevice, size: number) => {
-//         return device.createBuffer({ size: alignTo256(size), usage: 0x40 | 0x4 }) as Buffer
-// }
-//
+export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
+
+export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
+        const array = new Float32Array(value)
+        const size = alignTo256(array.byteLength)
+        const buffer = device.createBuffer({ size, usage: 72 }) as Buffer // 72 === GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        return { array, buffer }
+}
+
+export const createTextureSampler = (device: GPUDevice, width = 1280, height = 800) => {
+        const texture = device.createTexture({ size: [width, height], format: 'rgba8unorm', usage: 22 })
+        const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' })
+        return [texture, sampler] as const
+}
+
 // export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
 //         const array = new Float32Array(value)
 //         const buffer = device.createBuffer({ size: array.byteLength, usage: 0x20 | 0x4 })
 //         device.queue.writeBuffer(buffer, 0, array)
 //         return buffer as Buffer
 // }
-//
-// export const createBindGroup = (device: GPUDevice, pipeline: GPUPipeline, entries: any[]) => {
-//         const layout = pipeline.getBindGroupLayout(0)
-//         return device.createBindGroup({ layout, entries })
-// }
-//
-// export const updateBindGroup = (
-//         device: GPUDevice,
-//         pipeline: GPUPipeline,
-//         uniformBuffer: Buffer,
-//         textures: any = {},
-//         sampler: any = null
-// ) => {
-//         const entries = [{ binding: 0, resource: { buffer: uniformBuffer } }]
-//         let binding = 1
-//         Object.values(textures).forEach((texture: any) => {
-//                 entries.push({ binding: binding++, resource: texture.createView() })
-//         })
-//         if (sampler && Object.keys(textures).length > 0) entries.push({ binding: binding++, resource: sampler })
-//         return createBindGroup(device, pipeline, entries)
-// }
-//
-// export const createUniform = (device: GPUDevice, buffer: any, data: Float32Array, offset = 0) => {
-//         device.queue.writeBuffer(buffer, offset, data)
-// }
-//
-// export const createDeviceTexture = (device: GPUDevice, image: HTMLImageElement) => {
-//         const texture = device.createTexture({
-//                 size: { width: image.width, height: image.height },
-//                 format: 'rgba8unorm',
-//                 usage: 0x4 | 0x2,
-//         })
-//         device.queue.copyExternalImageToTexture(
-//                 { source: image },
-//                 { texture },
-//                 { width: image.width, height: image.height }
-//         )
-//         return texture
-// }
-//
-// export const createSampler = (device: GPUDevice) => {
-//         return device.createSampler({
-//                 magFilter: 'linear',
-//                 minFilter: 'linear',
-//                 addressModeU: 'clamp-to-edge',
-//                 addressModeV: 'clamp-to-edge',
-//         })
-// }
-//
-// export const getDefaultVertices = () => new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])

package/src/utils/program.ts

@@ -1,3 +1,7 @@
+import { glsl } from '../code/glsl'
+import { X } from '../node'
+import { is } from './helpers'
+
 export const defaultVertexGLSL = /* cpp */ `
 #version 300 es
 void main() {
@@ -17,7 +21,7 @@ void main() {
 }
 `
 
-export const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
+const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
         const shader = c.createShader(type)
         if (!shader) throw new Error('Failed to create shader')
         c.shaderSource(shader, source.trim())
@@ -28,7 +32,13 @@ export const createShader = (c: WebGLRenderingContext, source: string, type: num
         throw new Error(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vs = defaultVertexGLSL, fs = defaultFragmentGLSL) => {
+export const createProgram = (
+        c: WebGLRenderingContext,
+        vs: string | X = defaultVertexGLSL,
+        fs: string | X = defaultFragmentGLSL
+) => {
+        if (is.obj(fs)) fs = glsl(fs as X)
+        if (is.obj(vs)) vs = glsl(vs as X)
         const pg = c.createProgram()
         c.attachShader(pg, createShader(c, vs, c.VERTEX_SHADER))
         c.attachShader(pg, createShader(c, fs, c.FRAGMENT_SHADER))
@@ -55,20 +65,26 @@ export const createIbo = (c: WebGLRenderingContext, data: number[]) => {
         return buffer
 }
 
+export 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 createAttrib = (
         c: WebGLRenderingContext,
         stride: number,
-        location: any,
+        loc: any,
         vbo: WebGLBuffer,
         ibo?: WebGLBuffer
 ) => {
         c.bindBuffer(c.ARRAY_BUFFER, vbo)
-        c.enableVertexAttribArray(location)
-        c.vertexAttribPointer(location, stride, c.FLOAT, false, 0, 0)
+        c.enableVertexAttribArray(loc)
+        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
         if (ibo) c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, ibo)
 }
 
-export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement) => {
+export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, loc: any, unit: number) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
         c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, img)
@@ -78,17 +94,7 @@ export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement) =
         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, null)
-        return texture
-}
-
-export const activeTexture = (
-        c: WebGLRenderingContext,
-        location: WebGLUniformLocation | null,
-        unit: number,
-        texture: WebGLTexture
-) => {
-        if (!location) return
-        c.uniform1i(location, unit)
+        c.uniform1i(loc, unit)
         c.activeTexture(c.TEXTURE0 + unit)
         c.bindTexture(c.TEXTURE_2D, texture)
 }

package/src/webgl.ts

@@ -1,77 +1,54 @@
-import { nested } from 'reev'
-import { glsl } from './code/glsl'
+import { nested as cached } from 'reev'
 import { is } from './utils/helpers'
-import type { X } from './node'
-import type { GL } from './types'
-import { activeTexture, createAttrib, createIbo, createProgram, createTexture, createVbo } from './utils/program'
+import { createAttrib, createIbo, createProgram, createTexture, createVbo, getStride } from './utils/program'
+import type { GL, WebGLState } from './types'
 
-export const webgl = async (gl: GL) => {
-        let vs = gl.vs || gl.vert || gl.vertex
-        let fs = gl.fs || gl.frag || gl.fragment
-        if (is.obj(fs)) fs = glsl(fs as X)
-        if (is.obj(vs)) vs = glsl(vs as X)
-        const c = gl.el.getContext('webgl2')!
-        const pg = createProgram(c, vs, fs)
+export const webgl = async (gl: Partial<GL>) => {
+        const c = gl.el!.getContext('webgl2')!
+        const pg = createProgram(c, gl.vs, gl.fs)
+        const state = { context: c, program: pg } as WebGLState
+        c.useProgram(pg)
 
         let _activeUnit = 0
-        const activeUnits = nested(() => _activeUnit++)
+        const activeUnits = cached(() => _activeUnit++)
 
-        const locations = nested((key, bool = false) => {
-                if (bool) return c.getAttribLocation(pg, key)
-                return c.getUniformLocation(pg, key) as WebGLUniformLocation
-        })
+        const uniformLocations = cached((key) => c.getUniformLocation(pg, key))
+        const attribLocations = cached((key) => c.getAttribLocation(pg, key))
 
-        const strides = nested((_, count: number, value: number[], iboValue?: number[]) => {
-                if (iboValue) count = Math.max(...iboValue) + 1
-                const stride = value.length / count
-                if (stride !== Math.floor(stride)) console.warn(`Vertex Stride Error: count ${count} is mismatch`)
-                return Math.floor(stride)
-        })
+        const clean = () => c.deleteProgram(pg)
 
-        const uniforms = nested((key, value: number | number[]) => {
-                const loc = locations(key)
-                if (is.num(value)) return (value: any) => c.uniform1f(loc, value)
-                let l = value.length as 3
-                if (l <= 4) return (value: any) => c[`uniform${l}fv`](loc, value)
-                l = (Math.sqrt(l) << 0) as 3
-                return (value: any) => c[`uniformMatrix${l}fv`](loc, false, value)
-        })
-
-        gl('clean', () => c.deleteProgram(pg))
-
-        gl('render', () => {
-                c.useProgram(pg)
+        const render = () => {
                 c.clear(c.COLOR_BUFFER_BIT)
-                c.viewport(0, 0, ...gl.size)
+                c.viewport(0, 0, ...gl.size!)
                 c.drawArrays(c.TRIANGLES, 0, 3)
-        })
+        }
 
-        gl('_attribute', (key = '', value: number[], iboValue: number[]) => {
-                const loc = locations(key, true)
+        const _attribute = (key = '', value: number[], iboValue: number[]) => {
+                const loc = attribLocations(key, true)
                 const vbo = createVbo(c, value)
                 const ibo = createIbo(c, iboValue)
-                const str = strides(key, gl.count, value, iboValue)
+                const str = getStride(gl.count!, value, iboValue)
                 createAttrib(c, str, loc, vbo, ibo)
-        })
-
-        gl('_uniform', (key: string, value: number | number[]) => {
-                uniforms(key, value)(value)
-        })
+        }
 
-        const _loadFn = (image: HTMLImageElement) => {
-                const loc = locations(image.alt)
-                const unit = activeUnits(image.alt)
-                const tex = createTexture(c, image)
-                activeTexture(c, loc, unit, tex)
+        const _uniform = (key: string, value: number | number[]) => {
+                const loc = uniformLocations(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)
         }
 
-        gl('_texture', (alt: string, src: string) => {
+        const _texture = (alt: string, src: string) => {
                 const image = new Image()
-                image.addEventListener('load', _loadFn.bind(null, image), false)
                 Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
-        })
-
-        gl.webgl = { context: c, program: pg }
+                image.decode().then(() => {
+                        const loc = uniformLocations(image.alt)
+                        const unit = activeUnits(image.alt)
+                        createTexture(c, image, loc, unit)
+                })
+        }
 
-        return gl
+        return { webgl: state, render, clean, _attribute, _uniform, _texture }
 }

package/src/webgpu.ts

@@ -1,102 +1,92 @@
-import { wgsl } from './code/wgsl'
 import { is } from './utils/helpers'
 import {
+        createDevive,
         createPipeline,
         createDescriptor,
-        // createUniformBuffer,
-        // updateBindGroup,
-        // createVertexBuffer,
-        // createUniform,
-        // createDeviceTexture,
-        // createSampler,
+        createUniformBuffer,
+        createBindGroup,
+        createTextureSampler,
 } from './utils/pipeline'
-import type { X } from './node'
-import type { GL, GPUBindGroup, GPUPipeline } from './types'
-import { nested } from 'reev'
+import type { GL, WebGPUState } from './types'
 
-const quadVertexCount = 3
+export const webgpu = async (gl: Partial<GL>) => {
+        const c = gl.el!.getContext('webgpu') as any
+        const { device, format } = await createDevive(c)
+        const state = {
+                device,
+                context: c,
+                uniforms: {},
+                textures: {},
+                resources: [[], []],
+                loadingImg: 0,
+                needsUpdate: true,
+        } as WebGPUState
 
-export const webgpu = async (gl: GL) => {
-        let vs = gl.vs || gl.vert || gl.vertex
-        let fs = gl.fs || gl.frag || gl.fragment
-        if (is.obj(vs)) vs = wgsl(vs as X)
-        if (is.obj(fs)) fs = wgsl(fs as X)
-        const c = gl.el.getContext('webgpu') as any
-        const gpu = (navigator as any).gpu
-        const adapter = await gpu.requestAdapter()
-        const device = await adapter.requestDevice()
-        const format = gpu.getPreferredCanvasFormat()
-        c.configure({ device, format, alphaMode: 'opaque' })
+        const initUniform = (value: number[]) => {
+                const { array, buffer } = createUniformBuffer(device, value)
+                state.resources[0].push({ buffer })
+                state.needsUpdate = true
+                return { array, buffer }
+        }
 
-        // Uniform buffer setup
-        // WebGPU 16-byte alignment requirement: iTime(4) + padding(12) + iMouse(8) + iPrevTime(4) + iDeltaTime(4) + iResolution(8) = 40 bytes, rounded to 48
+        const initTexutre = (source: HTMLImageElement) => {
+                const { width, height } = source
+                const [texture, sampler] = createTextureSampler(device, width, height)
+                state.resources[1].push(sampler, texture.createView())
+                state.needsUpdate = true
+                return { texture, width, height }
+        }
 
-        const buffer = device.createBuffer({
-                size: 64, // @ts-ignore
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        })
-
-        gl('clean', () => {})
-
-        const activeUnit = nested((_, size) => (_activeUnit += size))
-        let _activeUnit = 0
-        let pipeline: GPUPipeline
-        let bindGroup: GPUBindGroup
-        let uniformData = new Float32Array(0)
-
-        gl('render', () => {
-                if (!pipeline) {
-                        pipeline = createPipeline(device, format, vs, fs, [])
-                        bindGroup = device.createBindGroup({
-                                layout: pipeline.getBindGroupLayout(0),
-                                entries: [
-                                        {
-                                                binding: 0,
-                                                resource: { buffer },
-                                        },
-                                ],
-                        })
-                }
+        const update = () => {
+                const layouts = [] as any
+                state.groups = []
+                state.resources.forEach((resource) => {
+                        if (!resource.length) return
+                        const [layout, group] = createBindGroup(device, resource)
+                        layouts.push(layout)
+                        state.groups.push(group)
+                })
+                state.pipeline = createPipeline(device, format, [], layouts, gl.vs, gl.fs)
+        }
 
+        const render = () => {
+                if (state.loadingImg) return // ignore if loading img
+                if (state.needsUpdate) update() // first rendering
+                state.needsUpdate = false
                 const encoder = device.createCommandEncoder()
                 const pass = encoder.beginRenderPass(createDescriptor(c))
-                pass.setPipeline(pipeline)
-                pass.setBindGroup(0, bindGroup)
-                pass.draw(quadVertexCount, 1, 0, 0)
+                pass.setPipeline(state.pipeline)
+                state.groups.forEach((v, i) => pass.setBindGroup(i, v))
+                pass.draw(gl.count, 1, 0, 0)
                 pass.end()
                 device.queue.submit([encoder.finish()])
-                return true
-        })
+        }
 
-        gl('_attribute', (key = '', value: number[]) => {
+        const clean = () => {}
+
+        const _attribute = (key = '', value: number[]) => {
                 // @TODO FIX
                 // vertexBuffers(key, value)
-        })
+        }
 
-        gl('_uniform', (key: string, value: number | number[]) => {
+        const _uniform = (key: string, value: number | number[]) => {
                 if (is.num(value)) value = [value]
-                const size = value.length
-                const unit = activeUnit(key, size)
-                if (unit === _activeUnit) {
-                        const array = new Float32Array(_activeUnit)
-                        if (uniformData) array.set(uniformData)
-                        uniformData = array
-                }
-                for (let i = 0; i < size; i++) uniformData[unit - size + i] = value[i]
-                device.queue.writeBuffer(buffer, 0, uniformData)
-        })
-
-        // const _loadFun = (image: HTMLImageElement, gl: GL) => {
-        //         const texture = createDeviceTexture(device, image)
-        //         // bindGroup = updateBindGroup(device, pipeline, buffer, textures, sampler)
-        // }
+                if (!state.uniforms[key]) state.uniforms[key] = initUniform(value)
+                const { array, buffer } = state.uniforms[key]
+                array.set(value)
+                device.queue.writeBuffer(buffer, 0, array)
+        }
 
-        gl('_texture', (alt: string, src: string) => {
-                // @TODO FIX
-                // const image = new Image()
-                // image.addEventListener('load', _loadFun.bind(null, image, gl), false)
-                // Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
-        })
+        const _texture = (key: string, src: string) => {
+                state.loadingImg++
+                const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
+                source.decode().then(() => {
+                        if (!state.textures[key]) state.textures[key] = initTexutre(source)
+                        const { texture, width, height } = state.textures[key]
+                        device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
+                        state.loadingImg--
+                })
+        }
 
-        return gl
+        return { webgpu: state, render, clean, _attribute, _uniform, _texture }
 }