glre 0.31.0 → 0.33.0

package/src/types.ts

@@ -1,16 +1,7 @@
-import { EventState } from 'reev'
+import type { EventState, Nested } from 'reev'
 import type { Fun, Queue, Frame } from 'refr'
 import type { NodeProxy } from './node'
 export type { Fun, Queue, Frame }
-export type GPUContext = any // GPUCanvasContext https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext
-export type GPUDevice = any //
-export type GPUBuffer = any //
-export type GPUPipeline = any //
-export type GPUBindGroup = any
-export type Uniform = number | number[]
-export type Attribute = number[]
-export type Attributes = Record<string, Attribute>
-export type Uniforms = Record<string, Uniform>
 export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
 export type GLClearMode = 'COLOR_BUFFER_BIT' | 'DEPTH_BUFFER_BIT' | 'STENCIL_BUFFER_BIT'
 export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'
@@ -23,6 +14,28 @@ export type GLDrawMode =
         | 'TRIANGLE_FAN'
         | 'TRIANGLES'
 
+export interface UniformData {
+        array: Float32Array
+        buffer: GPUBuffer
+        binding: number
+        group: number
+}
+
+export interface TextureData {
+        binding: number
+        group: number
+        texture: GPUTexture
+        sampler: GPUSampler
+        view: GPUTextureView
+}
+
+export interface AttribData {
+        array: Float32Array
+        buffer: GPUBuffer
+        location: number
+        stride: number
+}
+
 export interface WebGLState {
         context: WebGLRenderingContext
         program: WebGLProgram
@@ -30,14 +43,16 @@ export interface WebGLState {
 
 export interface WebGPUState {
         device: GPUDevice
-        context: GPUContext
-        pipeline: GPUPipeline
-        groups: any[]
-        resources: any[]
-        loadingImg: number
-        needsUpdate: boolean
+        uniforms: Nested<UniformData>
+        textures: Nested<TextureData>
+        attribs: Nested<AttribData>
 }
 
+export type Uniform = number | number[]
+export type Attribute = number[]
+export type Attributes = Record<string, Attribute>
+export type Uniforms = Record<string, Uniform>
+
 export type GL = EventState<{
         /**
          * initial value
@@ -84,6 +99,7 @@ export type GL = EventState<{
          */
         _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL
         uniform(key: string, value: Uniform, isMatrix?: boolean): GL
+        uniform(node: NodeProxy): GL
         uniform(target: { [key: string]: Uniform }): GL
         _texture?(key: string, value: string): GL
         texture(key: string, value: string): GL

package/src/utils/pipeline.ts

@@ -1,135 +1,176 @@
-import { fragment, isNodeProxy, vertex } from '../node'
-import type { NodeProxy } from '../node'
-import type { GPUContext, GPUDevice, GPUPipeline } from '../types'
+import type { AttribData, TextureData, UniformData } from '../types'
 
-const defaultVertexWGSL = `
-@vertex
-fn main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
-  let x = f32(vertex_index % 2u) * 4.0 - 1.0;
-  let y = f32(vertex_index / 2u) * 4.0 - 1.0;
-  return vec4f(x, y, 0.0, 1.0);
+/**
+ * initialize
+ */
+export const createDevice = async (c: GPUCanvasContext) => {
+        const gpu = navigator.gpu
+        const format = gpu.getPreferredCanvasFormat()
+        const adapter = await gpu.requestAdapter()
+        const device = await adapter!.requestDevice()
+        c.configure({ device, format, alphaMode: 'opaque' })
+        return { device, format }
 }
-`
 
-const defaultFragmentWGSL = `
-@group(0) @binding(0) var<uniform> iResolution: vec2f;
+export const createBindings = () => {
+        let uniform = 0
+        let texture = 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 }
+                },
+                attrib: () => {
+                        const location = attrib
+                        attrib++
+                        return { location }
+                },
+        }
+}
 
-@fragment
-fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-  return vec4f(position.xy / iResolution, 0.0, 1.0);
+/**
+ * pipeline update
+ */
+const getVertexFormat = (stride: number): GPUVertexFormat => {
+        if (stride === 2) return 'float32x2'
+        if (stride === 3) return 'float32x3'
+        if (stride === 4) return 'float32x4'
+        return 'float32'
 }
-`
 
-export const createDevice = 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 createVertexBuffers = (attribs: Iterable<AttribData>) => {
+        const vertexBuffers: GPUBuffer[] = []
+        const bufferLayouts: GPUVertexBufferLayout[] = []
+        for (const { buffer, location, stride } of attribs) {
+                vertexBuffers[location] = buffer
+                bufferLayouts[location] = {
+                        arrayStride: stride * 4,
+                        attributes: [
+                                {
+                                        shaderLocation: location,
+                                        offset: 0,
+                                        format: getVertexFormat(stride),
+                                },
+                        ],
+                }
+        }
+        return { vertexBuffers, bufferLayouts }
+}
+
+export const createBindGroup = (
+        device: GPUDevice,
+        uniforms: Iterable<UniformData>,
+        textures: Iterable<TextureData>
+) => {
+        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) => {
+                if (!groups.has(i)) groups.set(i, { layouts: [], bindings: [] })
+                const { layouts, bindings } = groups.get(i)!
+                layouts.push(layout)
+                bindings.push(binding)
+        }
+        for (const { binding, buffer, group: i } of uniforms) {
+                add(i, { binding, visibility: 3, buffer: { type: 'uniform' } }, { binding, resource: { buffer } })
+        }
+        for (const { binding: b, group: i, sampler, view } of textures) {
+                add(i, { binding: b, visibility: 2, sampler: {} }, { binding: b, resource: sampler })
+                add(i, { binding: b + 1, visibility: 2, texture: {} }, { binding: b + 1, resource: view })
+        }
+        for (const [i, { layouts, bindings }] of groups) {
+                ret.bindGroupLayouts[i] = device.createBindGroupLayout({ entries: layouts })
+                ret.bindGroups[i] = device.createBindGroup({ layout: ret.bindGroupLayouts[i], entries: bindings })
+        }
+        return ret
 }
 
 export const createPipeline = (
         device: GPUDevice,
-        format: string,
-        bufferLayouts: any[],
-        bindGroupLayouts: any[],
-        vs: string | NodeProxy = defaultVertexWGSL,
-        fs: string | NodeProxy = defaultFragmentWGSL
+        format: GPUTextureFormat,
+        bufferLayouts: GPUVertexBufferLayout[],
+        bindGroupLayouts: GPUBindGroupLayout[],
+        vs: string,
+        fs: string
 ) => {
-        if (isNodeProxy(vs)) vs = vertex(vs, { isWebGL: false })
-        if (isNodeProxy(fs)) fs = fragment(fs, { isWebGL: false })
-        const layout = device.createPipelineLayout({ bindGroupLayouts })
         return device.createRenderPipeline({
                 vertex: {
-                        module: device.createShaderModule({ code: vs.trim() }),
+                        module: device.createShaderModule({ label: 'vert', code: vs }),
                         entryPoint: 'main',
                         buffers: bufferLayouts,
                 },
                 fragment: {
-                        module: device.createShaderModule({ code: fs.trim() }),
+                        module: device.createShaderModule({ label: 'frag', code: fs }),
                         entryPoint: 'main',
                         targets: [{ format }],
                 },
-                layout,
+                layout: device.createPipelineLayout({ bindGroupLayouts }),
                 primitive: { topology: 'triangle-list' },
-        }) as GPUPipeline
+                depthStencil: {
+                        depthWriteEnabled: true,
+                        depthCompare: 'less',
+                        format: 'depth24plus',
+                },
+        })
 }
 
-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 }
+/**
+ * buffers
+ */
+export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
+        const array = new Float32Array(value)
+        const size = Math.ceil(array.byteLength / 256) * 256
+        const buffer = device.createBuffer({ size, usage: 72 }) // 72 is GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        return { array, buffer }
+}
+
+export const createAttribBuffer = (device: GPUDevice, value: number[]) => {
+        const array = new Float32Array(value)
+        const buffer = device.createBuffer({ size: array.byteLength, usage: 40 }) // 40 is GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+        return { array, buffer }
 }
 
-export const createDescriptor = (c: GPUContext) => {
+export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture) => {
         return {
                 colorAttachments: [
                         {
                                 view: c.getCurrentTexture().createView(),
                                 clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                                loadOp: 'clear',
-                                storeOp: 'store',
+                                loadOp: 'clear' as GPULoadOp,
+                                storeOp: 'store' as GPUStoreOp,
                         },
                 ],
-        }
-}
-
-export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
-
-export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
-        const array = new Float32Array(value)
-        const buffer = device.createBuffer({ size: array.byteLength, usage: 40 }) // 40 === // GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-        return { array, buffer }
-}
-
-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 }
+                depthStencilAttachment: {
+                        view: depthTexture.createView(),
+                        depthClearValue: 1.0,
+                        depthLoadOp: 'clear' as GPULoadOp,
+                        depthStoreOp: 'store' as GPUStoreOp,
+                },
+        } as GPURenderPassDescriptor
 }
 
+/**
+ * textures
+ */
 export const createTextureSampler = (device: GPUDevice, width = 1280, height = 800) => {
-        const texture = device.createTexture({ size: [width, height], format: 'rgba8unorm', usage: 22 })
+        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 }
 }
 
-const getVertexStride = (dataLength: number, vertexCount: number) => {
-        return dataLength / vertexCount
-}
-
-const getVertexFormat = (stride: number) => {
-        if (stride === 2) return 'float32x2'
-        if (stride === 3) return 'float32x3'
-        if (stride === 4) return 'float32x4'
-        return 'float32'
-}
-
-export const createBufferLayout = (shaderLocation: number, dataLength: number, count = 6) => {
-        const stride = getVertexStride(dataLength, count)
-        return {
-                arrayStride: stride * 4,
-                attributes: [
-                        {
-                                shaderLocation,
-                                offset: 0,
-                                format: getVertexFormat(stride),
-                        },
-                ],
-        }
+export const createDepthTexture = (device: GPUDevice, width: number, height: number) => {
+        return device.createTexture({
+                size: [width, height],
+                format: 'depth24plus',
+                usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        })
 }

package/src/utils/program.ts

@@ -1,25 +1,3 @@
-import { fragment, isNodeProxy, vertex } from '../node'
-import type { NodeProxy } from '../node'
-
-export const defaultVertexGLSL = /* 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);
-}
-`
-
-export const defaultFragmentGLSL = /* cpp */ `
-#version 300 es
-precision mediump float;
-uniform vec2 iResolution;
-out vec4 fragColor;
-void main() {
-  fragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-}
-`
-
 const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
         const shader = c.createShader(type)
         if (!shader) throw new Error('Failed to create shader')
@@ -31,26 +9,19 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number) =>
         console.warn(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (
-        c: WebGLRenderingContext,
-        vs: string | NodeProxy = defaultVertexGLSL,
-        fs: string | NodeProxy = defaultFragmentGLSL,
-        onError = () => {}
-) => {
-        if (isNodeProxy(fs)) fs = fragment(fs, { isWebGL: true })
-        if (isNodeProxy(vs)) vs = vertex(fs, { isWebGL: true })
+export const createProgram = (c: WebGLRenderingContext, vert: string, frag: string, onError = () => {}) => {
         const pg = c.createProgram()
-        const _vs = createShader(c, vs, c.VERTEX_SHADER)
-        const _fs = createShader(c, fs, c.FRAGMENT_SHADER)
-        if (!_vs || !_fs) return onError()
-        c.attachShader(pg, _vs)
-        c.attachShader(pg, _fs)
+        const fs = createShader(c, frag, c.FRAGMENT_SHADER)
+        const vs = createShader(c, vert, c.VERTEX_SHADER)
+        if (!fs || !vs) return onError()
+        c.attachShader(pg, vs)
+        c.attachShader(pg, fs)
         c.linkProgram(pg)
         if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
         const error = c.getProgramInfoLog(pg)
         c.deleteProgram(pg)
         onError()
-        console.warn(`Could not link pg: ${error}`)
+        console.warn(`Could not link program: ${error}`)
 }
 
 export const createVbo = (c: WebGLRenderingContext, data: number[]) => {

package/src/webgl.ts

@@ -1,17 +1,21 @@
 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 type { GL, WebGLState } from './types'
 
 export const webgl = async (gl: Partial<GL>) => {
         const c = gl.el!.getContext('webgl2')!
-        const pg = createProgram(c, gl.vs, gl.fs, () => void (gl.isLoop = false))!
+        const config = { isWebGL: true, gl }
+        const fs = fragment(gl.fs, config)
+        const vs = vertex(gl.vs, config)
+        const pg = createProgram(c, vs, fs, () => void (gl.isLoop = false))!
         c.useProgram(pg)
+
         let _activeUnit = 0
         const uniforms = cached((key) => c.getUniformLocation(pg, key))
         const attribs = cached((key) => c.getAttribLocation(pg, key))
         const units = cached(() => _activeUnit++)
-        const state = { context: c, program: pg } as WebGLState
 
         const clean = () => c.deleteProgram(pg)
 
@@ -48,5 +52,5 @@ export const webgl = async (gl: Partial<GL>) => {
                 })
         }
 
-        return { webgl: state, render, clean, _attribute, _uniform, _texture }
+        return { render, clean, _attribute, _uniform, _texture, webgl: { context: c, program: pg } as WebGLState }
 }

package/src/webgpu.ts

@@ -1,84 +1,97 @@
 import { nested as cached } from 'reev'
 import { is } from './utils/helpers'
 import {
+        createAttribBuffer,
+        createBindings,
+        createBindGroup,
+        createDepthTexture,
+        createDescriptor,
         createDevice,
         createPipeline,
-        createDescriptor,
-        createUniformBuffer,
-        createBindGroup,
         createTextureSampler,
-        createVertexBuffer,
-        createBufferLayout,
+        createUniformBuffer,
+        createVertexBuffers,
 } from './utils/pipeline'
 import type { GL, WebGPUState } from './types'
+import { fragment, vertex } from './node'
 
 export const webgpu = async (gl: Partial<GL>) => {
-        const c = gl.el!.getContext('webgpu') as any
-        const { device, format } = await createDevice(c)
-        const state = {
-                device,
-                context: c,
-                resources: [[], []],
-                loadingImg: 0,
-                needsUpdate: true,
-        } as WebGPUState
-
-        const bindGroups = [] as any[]
-        const vertexBuffers = [] as any[]
-        const bufferLayouts = [] as any[]
-
-        const attributes = cached((_, value: number[]) => {
-                const { array, buffer } = createVertexBuffer(device, value)
-                vertexBuffers.push(buffer)
-                bufferLayouts.push(createBufferLayout(bufferLayouts.length, array.length, gl.count))
-                state.needsUpdate = true
-                return { array, buffer }
-        })
+        const context = gl.el!.getContext('webgpu') as GPUCanvasContext
+        const { device, format } = await createDevice(context)
+        const bindings = createBindings()
+        let frag: string
+        let vert: string
+        let flush = (_pass: GPURenderPassEncoder) => {}
+        let imageLoading = 0
+        let needsUpdate = true
+        let depthTexture: GPUTexture
 
-        const uniforms = cached((_, value: number[]) => {
+        const uniforms = cached((_key, value: number[]) => {
+                needsUpdate = true
                 const { array, buffer } = createUniformBuffer(device, value)
-                state.resources[0].push({ buffer })
-                state.needsUpdate = true
-                return { array, buffer }
+                const { binding, group } = bindings.uniform()
+                return { binding, group, array, buffer }
         })
 
-        const textures = cached((_, { width, height }: HTMLImageElement) => {
+        const textures = cached((_key, width = 0, height = 0) => {
+                needsUpdate = true
                 const { texture, sampler } = createTextureSampler(device, width, height)
-                state.resources[1].push(sampler, texture.createView())
-                state.needsUpdate = true
-                return { texture, width, height }
+                const { binding, group } = bindings.texture()
+                return { binding, group, texture, sampler, 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 update = () => {
-                const bindGroupLayouts = [] as any
-                bindGroups.length = 0
-                state.resources.forEach((resource) => {
-                        if (!resource.length) return
-                        const { layout, bindGroup } = createBindGroup(device, resource)
-                        bindGroupLayouts.push(layout)
-                        bindGroups.push(bindGroup)
-                })
-                state.pipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, gl.vs, gl.fs)
+                const { vertexBuffers, bufferLayouts } = createVertexBuffers(attribs.map.values())
+                const { bindGroups, bindGroupLayouts } = createBindGroup(
+                        device,
+                        uniforms.map.values(),
+                        textures.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!, 1, 0, 0)
+                        pass.end()
+                }
         }
 
         const render = () => {
-                if (state.loadingImg) return // ignore if loading img
-                if (state.needsUpdate) update() // first rendering
-                state.needsUpdate = false
+                if (!frag || !vert) {
+                        const config = { isWebGL: false, gl }
+                        frag = fragment(gl.fs, config)
+                        vert = vertex(gl.vs, config)
+                }
+                if (imageLoading) return // MEMO: loading after build node
+                if (needsUpdate) update()
+                needsUpdate = false
                 const encoder = device.createCommandEncoder()
-                const pass = encoder.beginRenderPass(createDescriptor(c))
-                pass.setPipeline(state.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.end()
+                flush(encoder.beginRenderPass(createDescriptor(context, depthTexture)))
                 device.queue.submit([encoder.finish()])
         }
 
-        const clean = () => {}
+        const resize = () => {
+                const canvas = gl.el as HTMLCanvasElement
+                depthTexture?.destroy()
+                depthTexture = createDepthTexture(device, canvas.width, canvas.height)
+        }
+
+        const clean = () => {
+                depthTexture?.destroy()
+        }
 
         const _attribute = (key = '', value: number[]) => {
-                const { array, buffer } = attributes(key, value)
+                const { array, buffer } = attribs(key, value)
+                array.set(value)
                 device.queue.writeBuffer(buffer, 0, array)
         }
 
@@ -90,14 +103,25 @@ export const webgpu = async (gl: Partial<GL>) => {
         }
 
         const _texture = (key: string, src: string) => {
-                state.loadingImg++
+                imageLoading++
                 const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
                 source.decode().then(() => {
-                        const { texture, width, height } = textures(key, source)
+                        const { width, height } = source
+                        const { texture } = textures(key, width, height)
                         device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
-                        state.loadingImg--
+                        imageLoading--
                 })
         }
 
-        return { webgpu: state, render, clean, _attribute, _uniform, _texture }
+        resize()
+
+        return {
+                webgpu: { device, uniforms, textures, attribs } as WebGPUState,
+                render,
+                resize,
+                clean,
+                _attribute,
+                _uniform,
+                _texture,
+        }
 }