glre 0.30.0 → 0.32.0

package/src/node/types.ts

@@ -1,3 +1,4 @@
+import { WebGPUState } from '../types'
 import { CONSTANTS, CONVERSIONS, FUNCTIONS, OPERATOR_KEYS } from './const'
 
 export type Constants = (typeof CONSTANTS)[number] | 'void'
@@ -17,23 +18,60 @@ export interface FnLayout {
         }>
 }
 
+/**
+ * Node
+ */
+export type NodeTypes =
+        // headers
+        | 'attribute'
+        | 'uniform'
+        | 'constant'
+        // variables
+        | 'variable'
+        | 'varying'
+        | 'swizzle'
+        | 'ternary'
+        | 'builtin'
+        | 'conversion'
+        | 'operator'
+        | 'function'
+        // scopes
+        | 'scope'
+        | 'assign'
+        | 'loop'
+        | 'define'
+        | 'if'
+        | 'switch'
+        | 'declare'
+        | 'return'
+
 export interface NodeProps {
         id?: string
         args?: X[]
         type?: string
         children?: X[]
-        inferFrom?: X
+        inferFrom?: X[]
         layout?: FnLayout
+        parent?: NodeProxy
 }
 
-export interface NodeConfig {
+export interface NodeContext {
+        isFrag?: boolean
         isWebGL?: boolean
         binding?: number
         infers?: WeakMap<NodeProxy, Constants>
-        headers?: Map<string, string>
         onMount?: (name: string) => void
+        webgpu?: WebGPUState
+        headers?: Map<string, string>
+        fragInputs?: Map<string, string>
+        vertInputs?: Map<string, string>
+        vertOutputs?: Map<string, string>
+        vertVaryings?: Map<string, string>
 }
 
+/**
+ * NodeProxy
+ */
 type _Swizzles<T extends string> = T | `${T}${T}` | `${T}${T}${T}` | `${T}${T}${T}${T}`
 
 export type Swizzles =
@@ -42,31 +80,33 @@ export type Swizzles =
         | _Swizzles<'p' | 'q'>
         | _Swizzles<'s' | 't'>
 
-export type NodeTypes =
-        // headers
-        | 'attribute'
-        | 'uniform'
-        | 'varying'
-        | 'constant'
-        // variables
-        | 'variable'
-        | 'swizzle'
-        | 'ternary'
-        | 'builtin'
-        | 'conversion'
-        | 'operator'
-        | 'function'
-        // scopes
-        | 'scope'
+type NodeProxyMethods =
+        | Functions
+        | Operators
+        | Conversions
+        | Swizzles
+        // system property
+        | 'type'
+        | 'props'
+        | 'isProxy'
         | 'assign'
-        | 'loop'
-        | 'define'
-        | 'if'
-        | 'switch'
-        | 'declare'
+        | 'toVar'
+        | 'toString'
 
-export interface NodeProxy extends Record<Swizzles, NodeProxy> {
-        // Operators
+export type DynamicProperties = {
+        [K in string as K extends NodeProxyMethods ? never : K]: NodeProxy
+}
+
+export interface BaseNodeProxy extends Record<Swizzles, NodeProxy> {
+        // System properties
+        assign(n: X): NodeProxy
+        toVar(name?: string): NodeProxy
+        toString(c?: NodeContext): string
+        type: NodeTypes
+        props: NodeProps
+        isProxy: true
+
+        // Operators methods
         add(n: X): NodeProxy
         sub(n: X): NodeProxy
         mul(n: X): NodeProxy
@@ -82,11 +122,29 @@ export interface NodeProxy extends Record<Swizzles, NodeProxy> {
         or(n: X): NodeProxy
         not(): NodeProxy
 
-        // Variable manipulation
-        assign(n: X): NodeProxy
-        toVar(name?: string): NodeProxy
+        // Conversations methods
+        toBool(): NodeProxy
+        toUint(): NodeProxy
+        toInt(): NodeProxy
+        toFloat(): NodeProxy
+        toBvec2(): NodeProxy
+        toIvec2(): NodeProxy
+        toUvec2(): NodeProxy
+        toVec2(): NodeProxy
+        toBvec3(): NodeProxy
+        toIvec3(): NodeProxy
+        toUvec3(): NodeProxy
+        toVec3(): NodeProxy
+        toBvec4(): NodeProxy
+        toIvec4(): NodeProxy
+        toUvec4(): NodeProxy
+        toVec4(): NodeProxy
+        toColor(): NodeProxy
+        toMat2(): NodeProxy
+        toMat3(): NodeProxy
+        toMat4(): NodeProxy
 
-        // Math function methods
+        // Function methods
         abs(): NodeProxy
         sin(): NodeProxy
         cos(): NodeProxy
@@ -131,32 +189,8 @@ export interface NodeProxy extends Record<Swizzles, NodeProxy> {
         dFdx(): NodeProxy
         dFdy(): NodeProxy
         fwidth(): NodeProxy
-
-        // System properties
-        toBool(): NodeProxy
-        toUint(): NodeProxy
-        toInt(): NodeProxy
-        toFloat(): NodeProxy
-        toBvec2(): NodeProxy
-        toIvec2(): NodeProxy
-        toUvec2(): NodeProxy
-        toVec2(): NodeProxy
-        toBvec3(): NodeProxy
-        toIvec3(): NodeProxy
-        toUvec3(): NodeProxy
-        toVec3(): NodeProxy
-        toBvec4(): NodeProxy
-        toIvec4(): NodeProxy
-        toUvec4(): NodeProxy
-        toVec4(): NodeProxy
-        toColor(): NodeProxy
-        toMat2(): NodeProxy
-        toMat3(): NodeProxy
-        toMat4(): NodeProxy
-        toString(c?: NodeConfig): string
-        type: NodeTypes
-        props: NodeProps
-        isProxy: true
 }
 
+export type NodeProxy = BaseNodeProxy & DynamicProperties
+
 export type X = NodeProxy | number | string | boolean | undefined

package/src/node/utils.ts

@@ -1,6 +1,5 @@
 import { is } from '../utils/helpers'
 import { code } from './code'
-import { infer } from './infer'
 import {
         CONSTANTS,
         CONVERSIONS,
@@ -10,17 +9,7 @@ import {
         TYPE_MAPPING,
         WGSL_TO_GLSL_BUILTIN,
 } from './const'
-import type {
-        Constants,
-        Conversions,
-        Functions,
-        NodeConfig,
-        NodeProps,
-        NodeProxy,
-        Operators,
-        Swizzles,
-        X,
-} from './types'
+import type { Constants, Conversions, Functions, NodeContext, NodeProxy, Operators, Swizzles, X } from './types'
 
 export const isSwizzle = (key: unknown): key is Swizzles => {
         return is.str(key) && /^[xyzwrgbastpq]{1,4}$/.test(key)
@@ -44,6 +33,12 @@ export const isNodeProxy = (x: unknown): x is NodeProxy => {
         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 hex2rgb = (hex: number) => {
         const r = ((hex >> 16) & 0xff) / 255
         const g = ((hex >> 8) & 0xff) / 255
@@ -55,14 +50,14 @@ let count = 0
 
 export const getId = () => `i${count++}`
 
-export const joins = (children: X[], c: NodeConfig) => {
+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?: NodeConfig) => {
+export const formatConversions = (x: X, c?: NodeContext) => {
         if (!is.str(x)) return ''
         if (c?.isWebGL) return x
         return TYPE_MAPPING[x as keyof typeof TYPE_MAPPING]
@@ -80,81 +75,3 @@ export const conversionToConstant = (conversionKey: string): Constants => {
         const index = CONVERSIONS.indexOf(conversionKey as Conversions)
         return index !== -1 ? CONSTANTS[index] : 'float'
 }
-
-const generateHead = (c: NodeConfig) => {
-        return Array.from(c.headers!)
-                .map(([, v]) => v)
-                .join('\n')
-}
-
-export const generateDefine = (props: NodeProps, c: NodeConfig) => {
-        const { id, children = [], layout } = props
-        const [x, y, ...args] = children
-        const returnType = layout?.type && layout?.type !== 'auto' ? layout?.type : y ? infer(y, c) : 'void'
-        const argParams: [name: string, type: string][] = []
-        const params: string[] = []
-        if (layout?.inputs)
-                for (const input of layout.inputs) {
-                        argParams.push([input.name, input.type])
-                }
-        else
-                for (let i = 0; i < args.length; i++) {
-                        argParams.push([`p${i}`, infer(args[i], c)])
-                }
-        let ret = ''
-        if (c?.isWebGL) {
-                for (const [id, type] of argParams) params.push(`${type} ${id}`)
-                ret += `${returnType} ${id}(${params}) {\n`
-        } else {
-                for (const [id, type] of argParams) params.push(`${id}: ${formatConversions(type, c)}`)
-                ret += `fn ${id}(${params}) -> ${formatConversions(returnType, c)} {\n`
-        }
-        const scopeCode = code(x, c)
-        if (scopeCode) ret += scopeCode + '\n'
-        if (y) ret += `return ${code(y, c)};`
-        ret += '\n}'
-        return ret
-}
-
-const GLSL_FRAGMENT_HEAD = `
-#version 300 es
-precision mediump float;
-out vec4 fragColor;
-`.trim()
-
-const WGSL_FRAGMENT_HEAD = `
-@fragment
-fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-`.trim()
-
-const generateFragmentMain = (body: string, head: string, isWebGL = true) => {
-        let ret = ''
-        if (isWebGL) ret += GLSL_FRAGMENT_HEAD
-        if (head) ret += '\n' + head + '\n'
-        if (isWebGL) ret += `void main() {\n  fragColor = ${body};`
-        else {
-                ret += WGSL_FRAGMENT_HEAD + '\n'
-                ret += `  return ${body};`
-        }
-        ret += '\n}'
-        return ret
-}
-
-const generateVertexMain = (_body: string, _head: string, isWebGL = true) => {
-        if (isWebGL) return ``
-        return ``
-}
-
-export const fragment = (x: X, c: NodeConfig = {}) => {
-        const body = code(x, c)
-        const head = generateHead(c)
-        const main = generateFragmentMain(body, head, c.isWebGL)
-        console.log(`// ↓↓↓ generated ↓↓↓\n\n${main}\n\n`)
-        return main
-}
-
-export const vertex = (x: X, c: NodeConfig) => {
-        const body = code(x, c)
-        const head = generateHead(c)
-        return generateVertexMain(body, head, c.isWebGL)
-}

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,27 @@ 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
+}
+
+export interface AttribData {
+        array: Float32Array
+        buffer: GPUBuffer
+        location: number
+        stride: number
+}
+
 export interface WebGLState {
         context: WebGLRenderingContext
         program: WebGLProgram
@@ -30,14 +42,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 +98,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,44 +1,58 @@
-import { fragment, isNodeProxy, vertex } from '../node'
-import type { NodeProxy } from '../node'
-import type { GPUContext, GPUDevice, GPUPipeline } from '../types'
+import { fragment, vertex } from '../node'
+import type { X } from '../node'
+import type { AttribData, TextureData, UniformData, WebGPUState } from '../types'
+import { is } from './helpers'
 
-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);
-}
-`
-
-const defaultFragmentWGSL = `
-@group(0) @binding(0) var<uniform> iResolution: vec2f;
-
-@fragment
-fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-  return vec4f(position.xy / iResolution, 0.0, 1.0);
-}
-`
-
-export const createDevice = async (c: GPUContext) => {
-        const gpu = (navigator as any).gpu
+/**
+ * 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()
+        const device = await adapter!.requestDevice()
         c.configure({ device, format, alphaMode: 'opaque' })
         return { device, format }
 }
 
+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 }
+                },
+        }
+}
+
 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[],
+        webgpu: WebGPUState,
+        vs: string | X,
+        fs: string | X
 ) => {
-        if (isNodeProxy(vs)) vs = vertex(vs, { isWebGL: false })
-        if (isNodeProxy(fs)) fs = fragment(fs, { isWebGL: false })
+        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: {
@@ -53,83 +67,121 @@ export const createPipeline = (
                 },
                 layout,
                 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 createDescriptor = (c: GPUContext) => {
+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 }
+}
+
+/**
+ * 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: [
                         {
                                 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
 }
 
 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
+export const createDepthTexture = (device: GPUDevice, width: number, height: number) => {
+        return device.createTexture({
+                size: [width, height],
+                format: 'depth24plus',
+                usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        })
 }
 
-const getVertexFormat = (stride: number) => {
+/**
+ * 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 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 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 }
 }