glre 0.32.0 → 0.34.0

package/src/node/utils.ts

@@ -1,5 +1,4 @@
 import { is } from '../utils/helpers'
-import { code } from './code'
 import {
         CONSTANTS,
         CONVERSIONS,
@@ -27,16 +26,15 @@ export const isConversion = (key: unknown): key is Conversions => {
         return CONVERSIONS.includes(key as Conversions)
 }
 
-export const isNodeProxy = (x: unknown): x is NodeProxy => {
+export const isNodeProxy = <T extends Constants>(x: unknown): x is NodeProxy<T> => {
         if (!x) return false
         if (typeof x !== 'object') return false // @ts-ignore
         return x.isProxy
 }
 
-export const isConstantsType = (type?: Constants | 'auto'): type is Constants => {
-        if (!type) return false
-        if (type === 'auto') return false
-        return true
+export const isConstants = (type?: unknown): type is Constants => {
+        if (!is.str(type)) return false
+        return CONSTANTS.includes(type)
 }
 
 export const hex2rgb = (hex: number) => {
@@ -50,20 +48,13 @@ let count = 0
 
 export const getId = () => `i${count++}`
 
-export const joins = (children: X[], c: NodeContext) => {
-        return children
-                .filter((x) => !is.und(x) && !is.nul(x))
-                .map((x) => code(x, c))
-                .join(', ')
-}
-
-export const formatConversions = (x: X, c?: NodeContext) => {
+export const formatConversions = <T extends Constants>(x: X<T>, c?: NodeContext) => {
         if (!is.str(x)) return ''
         if (c?.isWebGL) return x
-        return TYPE_MAPPING[x as keyof typeof TYPE_MAPPING]
+        return TYPE_MAPPING[x as keyof typeof TYPE_MAPPING] || x // for struct type
 }
 
-export const getOperator = (op: X) => {
+export const getOperator = (op: X<string>) => {
         return OPERATORS[op as keyof typeof OPERATORS] || op
 }
 
@@ -75,3 +66,64 @@ export const conversionToConstant = (conversionKey: string): Constants => {
         const index = CONVERSIONS.indexOf(conversionKey as Conversions)
         return index !== -1 ? CONSTANTS[index] : 'float'
 }
+
+export const getEventFun = (c: NodeContext, id: string, isAttribute = false, isTexture = false) => {
+        if (c.isWebGL) {
+                if (isAttribute) return (value: any) => c.gl?.attribute?.(id, value)
+                if (isTexture) return (value: any) => c.gl?.texture?.(id, value)
+                return (value: any) => c.gl?.uniform?.(id, value)
+        }
+        if (isAttribute) return (value: any) => c.gl?._attribute?.(id, value)
+        if (isTexture) return (value: any) => c.gl?._texture?.(id, value)
+        return (value: any) => c.gl?._uniform?.(id, value)
+}
+
+export const safeEventCall = <T extends Constants>(x: X<T>, fun: (value: unknown) => void) => {
+        if (!x) return
+        if (!isNodeProxy(x)) return fun(x) // for uniform(1)
+        if (x.type !== 'conversion') return
+        const value = x.props.children?.slice(1).filter(Boolean)
+        if (!value?.length) return // for uniform(vec2())
+        fun(value)
+}
+
+export const initNodeContext = (c: NodeContext) => {
+        if (!c.code) {
+                c.code = {
+                        headers: new Map(),
+                        fragInputs: new Map(),
+                        vertInputs: new Map(),
+                        vertOutputs: new Map(),
+                        vertVaryings: new Map(),
+                        dependencies: new Map(),
+                }
+                if (!c.isWebGL) {
+                        c.code.fragInputs.set('position', '@builtin(position) position: vec4f')
+                        c.code.vertOutputs.set('position', '@builtin(position) position: vec4f')
+                }
+        }
+        return c
+}
+
+export const addDependency = (c: NodeContext, id = '', type: string) => {
+        if (!c.code?.dependencies?.has(id)) c.code!.dependencies.set(id, new Set())
+        if (!isConstants(type)) c.code!.dependencies.get(id)!.add(type)
+}
+
+export const sortHeadersByDependencies = (headers: Map<string, string>, dependencies: Map<string, Set<string>>) => {
+        const sorted: [string, string][] = []
+        const visited = new Set<string>()
+        const visiting = new Set<string>()
+        const visit = (id: string) => {
+                if (visiting.has(id)) return
+                if (visited.has(id)) return
+                visiting.add(id)
+                const deps = dependencies.get(id) || new Set()
+                for (const dep of deps) if (headers.has(dep)) visit(dep)
+                visiting.delete(id)
+                visited.add(id)
+                if (headers.has(id)) sorted.push([id, headers.get(id)!])
+        }
+        for (const [id] of headers) visit(id)
+        return sorted
+}

package/src/types.ts

@@ -1,6 +1,6 @@
 import type { EventState, Nested } from 'reev'
 import type { Fun, Queue, Frame } from 'refr'
-import type { NodeProxy } from './node'
+import type { NodeProxy, Vec4 } from './node'
 export type { Fun, Queue, Frame }
 export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
 export type GLClearMode = 'COLOR_BUFFER_BIT' | 'DEPTH_BUFFER_BIT' | 'STENCIL_BUFFER_BIT'
@@ -26,6 +26,7 @@ export interface TextureData {
         group: number
         texture: GPUTexture
         sampler: GPUSampler
+        view: GPUTextureView
 }
 
 export interface AttribData {
@@ -66,12 +67,12 @@ export type GL = EventState<{
         mouse: [number, number]
         count: number
         el: HTMLCanvasElement
-        vs: string | NodeProxy
-        fs: string | NodeProxy
-        vert: string | NodeProxy
-        frag: string | NodeProxy
-        vertex: string | NodeProxy
-        fragment: string | NodeProxy
+        vs: string | Vec4
+        fs: string | Vec4
+        vert: string | Vec4
+        frag: string | Vec4
+        vertex: string | Vec4
+        fragment: string | Vec4
 
         /**
          * core state

package/src/utils/pipeline.ts

@@ -1,7 +1,4 @@
-import { fragment, vertex } from '../node'
-import type { X } from '../node'
-import type { AttribData, TextureData, UniformData, WebGPUState } from '../types'
-import { is } from './helpers'
+import type { AttribData, TextureData, UniformData } from '../types'
 
 /**
  * initialize
@@ -41,31 +38,82 @@ export const createBindings = () => {
         }
 }
 
+/**
+ * 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 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: GPUTextureFormat,
         bufferLayouts: GPUVertexBufferLayout[],
         bindGroupLayouts: GPUBindGroupLayout[],
-        webgpu: WebGPUState,
-        vs: string | X,
-        fs: string | X
+        vs: string,
+        fs: string
 ) => {
-        const config = { isWebGL: false, webgpu }
-        if (!is.str(fs)) fs = fragment(fs, config)
-        if (!is.str(vs)) vs = vertex(vs, config)
-        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' },
                 depthStencil: {
                         depthWriteEnabled: true,
@@ -91,39 +139,6 @@ export const createAttribBuffer = (device: GPUDevice, value: number[]) => {
         return { array, buffer }
 }
 
-/**
- * uniforms
- */
-export const createBindGroup = (
-        device: GPUDevice,
-        uniforms: Map<string, UniformData>,
-        textures: Map<string, TextureData>
-) => {
-        const groups = new Map<number, any>()
-        const getGroup = (i = 0) => {
-                if (!groups.has(i)) groups.set(i, { entries0: [], entries1: [] })
-                return groups.get(i)
-        }
-        for (const { binding, buffer, group: i } of uniforms.values()) {
-                const { entries0, entries1 } = getGroup(i)
-                entries0.push({ binding, visibility: 3, buffer: { type: 'uniform' } })
-                entries1.push({ binding, resource: { buffer } })
-        }
-        for (const { binding, group: i, sampler, texture } of textures.values()) {
-                const { entries0, entries1 } = getGroup(i)
-                entries0.push({ binding, visibility: 2, sampler: {} })
-                entries0.push({ binding: binding + 1, visibility: 2, texture: {} })
-                entries1.push({ binding, resource: sampler })
-                entries1.push({ binding: binding + 1, resource: texture.createView() })
-        }
-        const ret = { bindGroups: [] as GPUBindGroup[], bindGroupLayouts: [] as GPUBindGroupLayout[] }
-        for (const [i, { entries0, entries1 }] of groups) {
-                ret.bindGroupLayouts[i] = device.createBindGroupLayout({ entries: entries0 })
-                ret.bindGroups[i] = device.createBindGroup({ layout: ret.bindGroupLayouts[i], entries: entries1 })
-        }
-        return ret
-}
-
 export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture) => {
         return {
                 colorAttachments: [
@@ -143,6 +158,9 @@ export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture)
         } as GPURenderPassDescriptor
 }
 
+/**
+ * textures
+ */
 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' })
@@ -156,32 +174,3 @@ export const createDepthTexture = (device: GPUDevice, width: number, height: num
                 usage: GPUTextureUsage.RENDER_ATTACHMENT,
         })
 }
-
-/**
- * attribs
- */
-const getVertexFormat = (stride: number): GPUVertexFormat => {
-        if (stride === 2) return 'float32x2'
-        if (stride === 3) return 'float32x3'
-        if (stride === 4) return 'float32x4'
-        return 'float32'
-}
-
-export const createVertexBuffers = (attribs: Map<string, 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 }
-}

package/src/utils/program.ts

@@ -1,7 +1,3 @@
-import { fragment, vertex } from '../node'
-import type { X } from '../node'
-import { is } from './helpers'
-
 const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
         const shader = c.createShader(type)
         if (!shader) throw new Error('Failed to create shader')
@@ -13,22 +9,19 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number) =>
         console.warn(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vs: X, fs: string | X, onError = () => {}, gl?: any) => {
-        const config = { isWebGL: true, gl }
-        if (!is.str(fs)) fs = fragment(fs, config)
-        if (!is.str(vs)) vs = vertex(vs, config)
+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,12 +1,17 @@
 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), gl)!
+        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))

package/src/webgpu.ts

@@ -2,8 +2,8 @@ import { nested as cached } from 'reev'
 import { is } from './utils/helpers'
 import {
         createAttribBuffer,
-        createBindGroup,
         createBindings,
+        createBindGroup,
         createDepthTexture,
         createDescriptor,
         createDevice,
@@ -13,28 +13,31 @@ import {
         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 GPUCanvasContext
-        const { device, format } = await createDevice(c)
+        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
-        let _render = (_pass: GPURenderPassEncoder) => {}
 
         const uniforms = cached((_key, value: number[]) => {
                 needsUpdate = true
-                const { group, binding } = bindings.uniform()
                 const { array, buffer } = createUniformBuffer(device, value)
-                return { array, buffer, binding, group }
+                const { binding, group } = bindings.uniform()
+                return { binding, group, array, buffer }
         })
 
-        const textures = cached((_key, { width, height }: HTMLImageElement) => {
+        const textures = cached((_key, width = 0, height = 0) => {
                 needsUpdate = true
-                const { group, binding } = bindings.texture()
                 const { texture, sampler } = createTextureSampler(device, width, height)
-                return { texture, sampler, binding, group }
+                const { binding, group } = bindings.texture()
+                return { binding, group, texture, sampler, view: texture.createView() }
         })
 
         const attribs = cached((_key, value: number[]) => {
@@ -46,10 +49,14 @@ export const webgpu = async (gl: Partial<GL>) => {
         })
 
         const update = () => {
-                const { vertexBuffers, bufferLayouts } = createVertexBuffers(attribs.map)
-                const { bindGroups, bindGroupLayouts } = createBindGroup(device, uniforms.map, textures.map)
-                const pipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, webgpu, gl.vs, gl.fs)
-                _render = (pass) => {
+                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))
@@ -59,11 +66,16 @@ export const webgpu = async (gl: Partial<GL>) => {
         }
 
         const render = () => {
-                if (imageLoading) return
+                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()
-                _render(encoder.beginRenderPass(createDescriptor(c, depthTexture)))
+                flush(encoder.beginRenderPass(createDescriptor(context, depthTexture)))
                 device.queue.submit([encoder.finish()])
         }
 
@@ -94,19 +106,22 @@ export const webgpu = async (gl: Partial<GL>) => {
                 imageLoading++
                 const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
                 source.decode().then(() => {
-                        const texture = textures(key, source)
-                        device.queue.copyExternalImageToTexture(
-                                { source },
-                                { texture: texture.texture },
-                                { width: source.width, height: source.height }
-                        )
+                        const { width, height } = source
+                        const { texture } = textures(key, width, height)
+                        device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
                         imageLoading--
                 })
         }
 
         resize()
 
-        const webgpu = { device, uniforms, textures, attribs } as WebGPUState
-
-        return { webgpu, render, resize, clean, _attribute, _uniform, _texture }
+        return {
+                webgpu: { device, uniforms, textures, attribs } as WebGPUState,
+                render,
+                resize,
+                clean,
+                _attribute,
+                _uniform,
+                _texture,
+        }
 }