glre 0.28.0 → 0.30.0

package/src/node/node.ts

@@ -1,51 +1,52 @@
 import { code } from './code'
-import { assign, toVar, toConst } from './scope'
-import { getId, isConversion, isFunction, isOperator, isSwizzle } from './utils'
+import { assign, toVar } from './scope'
+import { conversionToConstant, isConversion, isFunction, isOperator, isSwizzle } from './utils'
 import type { Functions, NodeProps, NodeProxy, NodeTypes, Operators, Swizzles, X } from './types'
 
-const toPrimitive = (x: X) => {
-        return (hint: string) => {
-                if (hint === 'string') return code(x)
-        }
+const toPrimitive = (x: X, hint: string) => {
+        if (hint === 'string') return code(x)
 }
 
 export const node = (type: NodeTypes, props?: NodeProps | null, ...args: X[]) => {
         if (!props) props = {}
         if (args.length) props.children = args
-        const x = new Proxy(() => {}, {
-                get(_, key) {
-                        if (key === 'type') return type
-                        if (key === 'props') return props
-                        if (key === 'toVar') return toVar(x)
-                        if (key === 'toConst') return toConst(x)
-                        if (key === 'assign') return assign(x)
-                        if (key === 'isProxy') return true
-                        if (key === 'toString') return code.bind(null, x)
-                        if (key === Symbol.toPrimitive) return toPrimitive(x)
-                        if (isSwizzle(key)) return s(key, x)
-                        if (isOperator(key)) return (...y: X[]) => o(key, x, ...y)
-                        if (isFunction(key)) return (...y: X[]) => f(key, x, ...y)
-                        if (isConversion(key)) return n(key, x)
-                },
-                set(_, key, value) {
-                        if (isSwizzle(key)) {
-                                s(key, x).assign(value)
-                                return true
-                        }
-                        return false
-                },
-        }) as unknown as NodeProxy
+        const get = (_: unknown, key: string | Symbol) => {
+                if (key === 'type') return type
+                if (key === 'props') return props
+                if (key === 'toVar') return toVar.bind(null, x)
+                if (key === 'assign') return assign.bind(null, x)
+                if (key === 'isProxy') return true
+                if (key === 'toString') return code.bind(null, x)
+                if (key === Symbol.toPrimitive) return toPrimitive.bind(null, x)
+                if (isSwizzle(key)) return swizzle(key, x)
+                if (isOperator(key)) return (...y: X[]) => operator(key, x, ...y)
+                if (isFunction(key)) return (...y: X[]) => function_(key, x, ...y)
+                if (isConversion(key)) return () => conversion(conversionToConstant(key), x)
+        }
+        const set = (_: unknown, key: string, y: X) => {
+                if (isSwizzle(key)) {
+                        swizzle(key, x).assign(y)
+                        return true
+                }
+                return false
+        }
+        const x = new Proxy({}, { get, set }) as unknown as NodeProxy
         return x
 }
 
-// Node shorthands
-export const v = (...args: X[]) => node('variable', { id: getId() }, ...args)
-export const s = (key: Swizzles, arg: X) => node('swizzle', null, key, arg)
-export const n = (key: string, ...args: X[]) => node('conversions', null, key, ...args)
-export const o = (key: Operators, ...args: X[]) => node('operator', null, key, ...args)
-export const f = (key: Functions, ...args: X[]) => node('math_fun', null, key, ...args)
+// headers
+export const attribute = (x: X, id?: string) => node('varying', { id }, x)
+export const uniform = (x: X, id?: string) => node('uniform', { id }, x)
+export const varying = (x: X, id?: string) => node('varying', { id }, x)
+export const constant = (x: X, id?: string) => node('constant', { id }, x)
+export const variable = (id: string) => node('variable', { id })
+export const builtin = (id: string) => node('builtin', { id })
 
-// uniform and attribute
-export const u = (id: string, value?: number | number[] | boolean) => node('uniform', { id, value })
+// Node shorthands
+export const swizzle = (key: Swizzles, arg: X) => node('swizzle', null, key, arg)
+export const operator = (key: Operators, ...args: X[]) => node('operator', null, key, ...args)
+export const function_ = (key: Functions, ...args: X[]) => node('function', null, key, ...args)
+export const conversion = (key: string, ...args: X[]) => node('conversion', null, key, ...args)
 
+// x ? y : z
 export const select = (x: X, y: X, z: X) => node('ternary', null, x, y, z)

package/src/node/scope.ts

@@ -1,14 +1,14 @@
-import { infer } from './infer'
-import { node } from './node'
+import { int } from '.'
+import { conversion, node } from './node'
 import { getId } from './utils'
-import type { NodeProxy, X } from './types'
+import type { FnLayout, NodeProps, NodeProxy, X } from './types'
 
 let _scope: NodeProxy | null = null
 
-const scoped = (x: NodeProxy | null, callback = () => {}) => {
+const scoped = (x: NodeProxy | null, fun = () => {}) => {
         const prev = _scope
         _scope = x
-        callback()
+        fun()
         _scope = prev
 }
 
@@ -18,104 +18,94 @@ const addToScope = (x: NodeProxy) => {
         _scope.props.children.push(x)
 }
 
-export const If = (condition: X, callback: () => void) => {
-        const scope = node('scope')
-        scoped(scope, callback)
-        const ifNode = node('if', null, condition, scope)
+export const toVar = (x: X, id?: string) => {
+        if (!id) id = getId()
+        const y = node('variable', { id, inferFrom: x })
+        const z = node('declare', null, x, y)
+        addToScope(z)
+        return y
+}
+
+export const assign = (x: X, y: X) => {
+        const z = node('assign', null, x, y)
+        addToScope(z)
+        return x
+}
+
+export const If = (x: X, fun: () => void) => {
+        const y = node('scope')
+        scoped(y, fun)
+        const ifNode = node('if', null, x, y)
         addToScope(ifNode)
-        const createChain = () => ({
-                ElseIf: (newCondition: X, elseIfCallback: () => void) => {
-                        const elseIfScope = node('scope')
-                        scoped(elseIfScope, elseIfCallback)
-                        ifNode.props.children!.push(newCondition, elseIfScope)
-                        return createChain()
+        const ret = () => ({
+                ElseIf: (_x: X, _fun: () => void) => {
+                        const _y = node('scope')
+                        scoped(_y, _fun)
+                        ifNode.props.children!.push(_x, _y)
+                        return ret()
                 },
-                Else: (elseCallback: () => void) => {
-                        const elseScope = node('scope')
-                        scoped(elseScope, elseCallback)
-                        ifNode.props.children!.push(elseScope)
+                Else: (_fun: () => void) => {
+                        const _x = node('scope')
+                        scoped(_x, _fun)
+                        ifNode.props.children!.push(_x)
                 },
         })
-        return createChain()
+        return ret()
 }
 
-export const Loop = (x: X, callback?: (params: { i: NodeProxy }) => void) => {
+export const Loop = (x: X, fun: (params: { i: NodeProxy }) => void) => {
         const y = node('scope')
-        scoped(y, () => callback?.({ i: node('variable', { id: 'i' }) }))
+        scoped(y, () => fun({ i: node('variable', { id: 'i', inferFrom: int(0) }) }))
         const ret = node('loop', null, x, y)
         addToScope(ret)
         return ret
 }
 
-export const Switch = (value: X) => {
-        const switchNode = node('switch', null, value)
+export const Switch = (x: X) => {
+        const switchNode = node('switch', null, x)
         addToScope(switchNode)
-        const createChain = () => ({
+        const ret = () => ({
                 Case: (...values: X[]) => {
-                        return (callback: () => void) => {
-                                const caseScope = node('scope')
-                                scoped(caseScope, callback)
-                                const caseNode = node('case', null, ...values, caseScope)
-                                switchNode.props.children!.push(caseNode)
-                                return createChain()
+                        return (fun: () => void) => {
+                                const y = node('scope')
+                                scoped(y, fun)
+                                for (const _x of values) switchNode.props.children!.push(_x, y)
+                                return ret()
                         }
                 },
-                Default: (callback: () => void) => {
-                        const defaultScope = node('scope')
-                        scoped(defaultScope, callback)
-                        const defaultNode = node('default', null, defaultScope)
-                        switchNode.props.children!.push(defaultNode)
+                Default: (fun: () => void) => {
+                        const scope = node('scope')
+                        scoped(scope, fun)
+                        switchNode.props.children!.push(scope)
                 },
         })
 
-        return createChain()
+        return ret()
 }
 
-export const Fn = (callback: (args: NodeProxy[]) => NodeProxy) => {
-        const id = getId()
-        return (...args: NodeProxy[]) => {
+export const Fn = (fun: (paramVars: NodeProxy[]) => NodeProxy) => {
+        let layout: FnLayout
+        const ret = (...args: X[]) => {
+                const id = layout?.name || getId()
                 const x = node('scope')
                 let y: NodeProxy | undefined
                 const paramVars: NodeProxy[] = []
-                for (let i = 0; i < args.length; i++) {
-                        const paramId = `p${i}`
-                        const paramVar = node('variable', { id: paramId })
-                        paramVars.push(paramVar)
-                }
-                scoped(x, () => (y = callback(paramVars)))
-                const returnType = y ? infer(y) : 'void'
-                const paramInfo = args.map((arg, i) => ({ name: `p${i}`, type: infer(arg) }))
-                const def = node('fn_def', { id, returnType, paramInfo, args }, x, y)
-                return node('fn_run', { id, returnType }, def, ...paramVars)
+                const paramDefs: NodeProps[] = []
+                if (layout?.inputs)
+                        for (const input of layout.inputs) {
+                                paramDefs.push({ id: input.name, inferFrom: conversion(input.type) })
+                        }
+                else
+                        for (let i = 0; i < args.length; i++) {
+                                paramDefs.push({ id: `p${i}`, inferFrom: args[i] })
+                        }
+                for (const props of paramDefs) paramVars.push(node('variable', props))
+                scoped(x, () => (y = fun(paramVars)))
+                return node('define', { id, layout }, x, y, ...args)
         }
-}
-
-export const toVar = (x: X) => (id?: string) => {
-        if (!id) id = getId()
-        const y = node('variable', { id })
-        const z = node('declare', null, y, x)
-        addToScope(z)
-        return y
-}
-
-export const toConst = (x: X) => (id?: string) => {
-        if (!id) id = getId()
-        const y = node('constant', { id })
-        const z = node('declare', null, y, x)
-        addToScope(z)
-        return y
-}
-
-export const assign = (x: X) => (y: X) => {
-        const assignNode = node('assign', null, x, y)
-        addToScope(assignNode)
-        return x
-}
-
-export const varying = (value: X, name?: string) => {
-        if (!name) name = getId()
-        const varyingVar = node('varying', { id: name })
-        const declaration = node('declare', null, varyingVar, value)
-        addToScope(declaration)
-        return varyingVar
+        ret.setLayout = (newLayout: FnLayout) => {
+                layout = newLayout
+                return ret
+        }
+        return ret
 }

package/src/node/types.ts

@@ -8,21 +8,30 @@ export type Functions = (typeof FUNCTIONS)[number]
 
 export type Operators = (typeof OPERATOR_KEYS)[number]
 
+export interface FnLayout {
+        name: string
+        type: Constants | 'auto'
+        inputs?: Array<{
+                name: string
+                type: Constants
+        }>
+}
+
 export interface NodeProps {
         id?: string
         args?: X[]
         type?: string
         children?: X[]
-        returnType?: Constants
-        value?: number | number[] | boolean
-        paramInfo?: Array<{ name: string; type: string }>
+        inferFrom?: X
+        layout?: FnLayout
 }
 
 export interface NodeConfig {
         isWebGL?: boolean
-        uniforms?: Set<string>
-        functions?: Set<string>
-        onUniform?: (name: string, value: any) => void
+        binding?: number
+        infers?: WeakMap<NodeProxy, Constants>
+        headers?: Map<string, string>
+        onMount?: (name: string) => void
 }
 
 type _Swizzles<T extends string> = T | `${T}${T}` | `${T}${T}${T}` | `${T}${T}${T}${T}`
@@ -34,30 +43,29 @@ export type Swizzles =
         | _Swizzles<'s' | 't'>
 
 export type NodeTypes =
+        // headers
+        | 'attribute'
         | 'uniform'
+        | 'varying'
+        | 'constant'
+        // variables
         | 'variable'
         | 'swizzle'
+        | 'ternary'
+        | 'builtin'
+        | 'conversion'
         | 'operator'
-        | 'conversions'
-        | 'math_fun'
-        | 'declare'
+        | 'function'
+        // scopes
+        | 'scope'
         | 'assign'
-        | 'fn_def'
-        | 'fn_run'
-        | 'if'
         | 'loop'
-        | 'scope'
+        | 'define'
+        | 'if'
         | 'switch'
-        | 'case'
-        | 'default'
-        | 'ternary'
-        | 'attribute'
-        | 'varying'
-        | 'builtin'
-        | 'constant'
-        | 'vertex_stage'
+        | 'declare'
 
-export interface NodeProxy extends Record<Swizzles | Conversions, NodeProxy> {
+export interface NodeProxy extends Record<Swizzles, NodeProxy> {
         // Operators
         add(n: X): NodeProxy
         sub(n: X): NodeProxy
@@ -77,7 +85,6 @@ export interface NodeProxy extends Record<Swizzles | Conversions, NodeProxy> {
         // Variable manipulation
         assign(n: X): NodeProxy
         toVar(name?: string): NodeProxy
-        toConst(name?: string): NodeProxy
 
         // Math function methods
         abs(): NodeProxy
@@ -126,10 +133,30 @@ export interface NodeProxy extends Record<Swizzles | Conversions, 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 X = NodeProxy | number | string | boolean | null | undefined
+export type X = NodeProxy | number | string | boolean | undefined

package/src/node/utils.ts

@@ -1,7 +1,26 @@
 import { is } from '../utils/helpers'
 import { code } from './code'
-import { CONVERSIONS, FUNCTIONS, OPERATOR_KEYS, OPERATORS, TYPE_MAPPING } from './const'
-import type { Conversions, Functions, NodeConfig, NodeProxy, Operators, Swizzles, X } from './types'
+import { infer } from './infer'
+import {
+        CONSTANTS,
+        CONVERSIONS,
+        FUNCTIONS,
+        OPERATOR_KEYS,
+        OPERATORS,
+        TYPE_MAPPING,
+        WGSL_TO_GLSL_BUILTIN,
+} from './const'
+import type {
+        Constants,
+        Conversions,
+        Functions,
+        NodeConfig,
+        NodeProps,
+        NodeProxy,
+        Operators,
+        Swizzles,
+        X,
+} from './types'
 
 export const isSwizzle = (key: unknown): key is Swizzles => {
         return is.str(key) && /^[xyzwrgbastpq]{1,4}$/.test(key)
@@ -21,12 +40,10 @@ export const isConversion = (key: unknown): key is Conversions => {
 
 export const isNodeProxy = (x: unknown): x is NodeProxy => {
         if (!x) return false
-        if (!is.fun(x)) return false // @ts-ignore
+        if (typeof x !== 'object') return false // @ts-ignore
         return x.isProxy
 }
 
-let count = 0
-
 export const hex2rgb = (hex: number) => {
         const r = ((hex >> 16) & 0xff) / 255
         const g = ((hex >> 8) & 0xff) / 255
@@ -34,6 +51,8 @@ export const hex2rgb = (hex: number) => {
         return [r, g, b]
 }
 
+let count = 0
+
 export const getId = () => `i${count++}`
 
 export const joins = (children: X[], c: NodeConfig) => {
@@ -53,43 +72,89 @@ export const getOperator = (op: X) => {
         return OPERATORS[op as keyof typeof OPERATORS] || op
 }
 
+export const getBluiltin = (id: string) => {
+        return WGSL_TO_GLSL_BUILTIN[id as keyof typeof WGSL_TO_GLSL_BUILTIN]
+}
+
+export const conversionToConstant = (conversionKey: string): Constants => {
+        const index = CONVERSIONS.indexOf(conversionKey as Conversions)
+        return index !== -1 ? CONSTANTS[index] : 'float'
+}
+
 const generateHead = (c: NodeConfig) => {
-        const uniforms = Array.from(c.uniforms!)
-                .map((uniform, i) => {
-                        if (c.isWebGL) return `uniform ${uniform};`
-                        else return `@group(0) @binding(${i}) var<uniform> ${uniform};`
-                })
+        return Array.from(c.headers!)
+                .map(([, v]) => v)
                 .join('\n')
-        const functions = Array.from(c.functions!).join('\n')
-        return `${uniforms}\n${functions}`
 }
 
-const generateFragmentMain = (body: string, head: string, isWebGL = true) => {
-        if (isWebGL)
-                return `
+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;
-${head}
-void main() {
-fragColor = ${body};
-}`.trim()
-        return `
-${head}
+`.trim()
+
+const WGSL_FRAGMENT_HEAD = `
 @fragment
 fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-return ${body};
-}`.trim()
+`.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) => {
+export const fragment = (x: X, c: NodeConfig = {}) => {
         const body = code(x, c)
         const head = generateHead(c)
-        return generateFragmentMain(body, head, c.isWebGL)
+        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 generateFragmentMain(body, head, c.isWebGL)
+        return generateVertexMain(body, head, c.isWebGL)
 }

package/src/types.ts

@@ -1,6 +1,6 @@
 import { EventState } from 'reev'
 import type { Fun, Queue, Frame } from 'refr'
-import type { X } from './node'
+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 //
@@ -52,12 +52,12 @@ export type GL = EventState<{
         mouse: [number, number]
         count: number
         el: HTMLCanvasElement
-        vs: string | X
-        fs: string | X
-        vert: string | X
-        frag: string | X
-        vertex: string | X
-        fragment: string | X
+        vs: string | NodeProxy
+        fs: string | NodeProxy
+        vert: string | NodeProxy
+        frag: string | NodeProxy
+        vertex: string | NodeProxy
+        fragment: string | NodeProxy
 
         /**
          * core state

package/src/utils/pipeline.ts

@@ -1,5 +1,5 @@
-import { fragment, vertex, X } from '../node'
-import { is } from './helpers'
+import { fragment, isNodeProxy, vertex } from '../node'
+import type { NodeProxy } from '../node'
 import type { GPUContext, GPUDevice, GPUPipeline } from '../types'
 
 const defaultVertexWGSL = `
@@ -34,11 +34,11 @@ export const createPipeline = (
         format: string,
         bufferLayouts: any[],
         bindGroupLayouts: any[],
-        vs: string | X = defaultVertexWGSL,
-        fs: string | X = defaultFragmentWGSL
+        vs: string | NodeProxy = defaultVertexWGSL,
+        fs: string | NodeProxy = defaultFragmentWGSL
 ) => {
-        if (!is.str(fs)) fs = fragment(fs, { isWebGL: false })
-        if (!is.str(vs)) vs = vertex(vs, { isWebGL: false })
+        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: {

package/src/utils/program.ts

@@ -1,5 +1,5 @@
-import { fragment, vertex, X } from '../node'
-import { is } from './helpers'
+import { fragment, isNodeProxy, vertex } from '../node'
+import type { NodeProxy } from '../node'
 
 export const defaultVertexGLSL = /* cpp */ `
 #version 300 es
@@ -33,12 +33,12 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number) =>
 
 export const createProgram = (
         c: WebGLRenderingContext,
-        vs: string | X = defaultVertexGLSL,
-        fs: string | X = defaultFragmentGLSL,
+        vs: string | NodeProxy = defaultVertexGLSL,
+        fs: string | NodeProxy = defaultFragmentGLSL,
         onError = () => {}
 ) => {
-        if (!is.str(fs)) fs = fragment(fs, { isWebGL: true })
-        if (!is.str(vs)) vs = vertex(fs, { isWebGL: true })
+        if (isNodeProxy(fs)) fs = fragment(fs, { isWebGL: true })
+        if (isNodeProxy(vs)) vs = vertex(fs, { isWebGL: true })
         const pg = c.createProgram()
         const _vs = createShader(c, vs, c.VERTEX_SHADER)
         const _fs = createShader(c, fs, c.FRAGMENT_SHADER)

package/src/webgl.ts

@@ -6,13 +6,12 @@ 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 state = { context: c, program: pg } as WebGLState
         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)