glre 0.32.0 → 0.33.0

package/src/node/code.ts

@@ -1,32 +1,26 @@
 import { is } from '../utils/helpers'
 import { infer } from './infer'
-import { getBluiltin, getOperator, formatConversions, joins } from './utils'
-import type { NodeContext, X } from './types'
 import {
+        parseArray,
         parseAttribHead,
         parseConstantHead,
-        parseUniformHead,
         parseDeclare,
         parseDefine,
         parseIf,
+        parseStruct,
+        parseStructHead,
         parseSwitch,
         parseTexture,
         parseVaryingHead,
+        parseUniformHead,
 } from './parse'
+import { getBluiltin, getOperator, formatConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
+import type { NodeContext, NodeProxy, X } from './types'
 
 export const code = (target: X, c?: NodeContext | null): string => {
         if (!c) c = {}
-        if (!c.headers) c.headers = new Map()
-        if (!c.vertVaryings) c.vertVaryings = new Map()
-        if (!c.fragInputs) c.fragInputs = new Map()
-        if (!c.vertInputs) c.vertInputs = new Map()
-        if (!c.vertOutputs) {
-                c.vertOutputs = new Map()
-                if (!c.isWebGL) {
-                        c.fragInputs.set('position', '@builtin(position) position: vec4f')
-                        c.vertOutputs.set('position', '@builtin(position) position: vec4f')
-                }
-        }
+        initNodeContext(c)
+        if (is.arr(target)) return parseArray(target, c)
         if (is.str(target)) return target
         if (is.num(target)) {
                 const ret = `${target}`
@@ -36,26 +30,26 @@ export const code = (target: X, c?: NodeContext | null): string => {
         if (is.bol(target)) return target ? 'true' : 'false'
         if (!target) return ''
         const { type, props } = target
-        const { id = '', children = [] } = props
+        const { id = '', children = [], fields, initialValues } = props
         const [x, y, z, w] = children
         /**
          * variables
          */
         if (type === 'variable') return id
-        if (type === 'swizzle') return `${code(y, c)}.${code(x, c)}`
+        if (type === 'member') return `${code(y, c)}.${code(x, c)}`
         if (type === 'ternary')
                 return c.isWebGL
                         ? `(${code(x, c)} ? ${code(y, c)} : ${code(z, c)})`
-                        : `select(${code(x, c)}, ${code(y, c)}, ${code(z, c)})`
-        if (type === 'conversion') return `${formatConversions(x, c)}(${joins(children.slice(1), c)})`
+                        : `select(${code(z, c)}, ${code(y, c)}, ${code(x, c)})`
+        if (type === 'conversion') return `${formatConversions(x, c)}(${parseArray(children.slice(1), c)})`
         if (type === 'operator') {
                 if (x === 'not' || x === 'bitNot') return `!${code(y, c)}`
                 return `(${code(y, c)} ${getOperator(x)} ${code(z, c)})`
         }
         if (type === 'function') {
-                if (x === 'negate') return `(-${joins(children.slice(1), c)})`
+                if (x === 'negate') return `(-${parseArray(children.slice(1), c)})`
                 if (x === 'texture') return parseTexture(c, y, z, w)
-                return `${x}(${joins(children.slice(1), c)})`
+                return `${x}(${parseArray(children.slice(1), c)})`
         }
         /**
          * scopes
@@ -71,20 +65,22 @@ export const code = (target: X, c?: NodeContext | null): string => {
         if (type === 'switch') return parseSwitch(c, x, children)
         if (type === 'declare') return parseDeclare(c, x, y)
         if (type === 'define') {
-                const ret = `${id}(${joins(children.slice(1), c)})`
-                if (c.headers.has(id)) return ret
-                c.headers.set(id, parseDefine(c, props, infer(target, c)))
-                return ret
+                if (!c.code?.headers.has(id)) c.code?.headers.set(id, parseDefine(c, props, infer(target, c)))
+                return `${id}(${parseArray(children.slice(1), c)})`
+        }
+        if (type === 'struct') {
+                if (!c.code?.headers.has(id)) c.code?.headers.set(id, parseStructHead(c, id, fields))
+                return parseStruct(c, id, (x as NodeProxy).props.id, fields, initialValues)
         }
         /**
          * headers
          */
         if (type === 'varying') {
-                if (c.vertOutputs.has(id)) return c.isWebGL ? `${id}` : `out.${id}`
+                if (c.code?.vertOutputs.has(id)) return c.isWebGL ? `${id}` : `out.${id}`
                 const field = parseVaryingHead(c, id, infer(target, c))
-                c.fragInputs.set(id, field)
-                c.vertOutputs.set(id, field)
-                c.vertVaryings.set(id, code(x, c))
+                c.code?.fragInputs.set(id, field)
+                c.code?.vertOutputs.set(id, field)
+                c.code?.vertVaryings.set(id, code(x, c))
                 return c.isWebGL ? `${id}` : `out.${id}`
         }
         if (type === 'builtin') {
@@ -92,20 +88,29 @@ export const code = (target: X, c?: NodeContext | null): string => {
                 if (id === 'position') return 'out.position'
                 const field = `@builtin(${id}) ${id}: ${formatConversions(infer(target, c), c)}`
                 if (c.isFrag) {
-                        c.fragInputs.set(id, field)
-                } else c.vertInputs.set(id, field)
+                        c.code?.fragInputs.set(id, field)
+                } else c.code?.vertInputs.set(id, field)
                 return `in.${id}`
         }
         if (type === 'attribute') {
-                c.vertInputs.set(id, parseAttribHead(c, id, infer(target, c)))
+                const fun = getEventFun(c, id, true)
+                safeEventCall(x, fun)
+                target.listeners.add(fun)
+                c.code?.vertInputs.set(id, parseAttribHead(c, id, infer(target, c)))
                 return c.isWebGL ? `${id}` : `in.${id}`
         }
-        if (c.headers.has(id)) return id // must last
+        if (c.code?.headers.has(id)) return id // must last
         let head = ''
-        if (type === 'uniform') head = parseUniformHead(c, id, infer(target, c))
+        if (type === 'uniform') {
+                const varType = infer(target, c)
+                const fun = getEventFun(c, id, false, varType === 'texture')
+                safeEventCall(x, fun)
+                target.listeners.add(fun)
+                head = parseUniformHead(c, id, varType)
+        }
         if (type === 'constant') head = parseConstantHead(c, id, infer(target, c), code(x, c))
         if (head) {
-                c.headers.set(id, head)
+                c.code?.headers.set(id, head)
                 return id
         }
         return code(x, c)

package/src/node/const.ts

@@ -1,29 +1,32 @@
 export const SWIZZLES = ['x', 'y', 'z', 'w', 'r', 'g', 'b', 'a', 's', 't', 'p', 'q'] as const
 
-export const CONSTANTS = [
-        'bool',
-        'uint',
-        'int',
-        'float',
-        'bvec2',
-        'ivec2',
-        'uvec2',
-        'vec2',
-        'bvec3',
-        'ivec3',
-        'uvec3',
-        'vec3',
-        'bvec4',
-        'ivec4',
-        'uvec4',
-        'vec4',
-        'color',
-        'mat2',
-        'mat3',
-        'mat4',
-        'texture',
-        'sampler2D',
-] as const
+export const TYPE_MAPPING = {
+        bool: 'bool',
+        uint: 'u32',
+        int: 'i32',
+        float: 'f32',
+        bvec2: 'vec2<bool>',
+        ivec2: 'vec2i',
+        uvec2: 'vec2u',
+        vec2: 'vec2f',
+        bvec3: 'vec3<bool>',
+        ivec3: 'vec3i',
+        uvec3: 'vec3u',
+        vec3: 'vec3f',
+        bvec4: 'vec4<bool>',
+        ivec4: 'vec4i',
+        uvec4: 'vec4u',
+        vec4: 'vec4f',
+        color: 'color',
+        mat2: 'mat2x2f',
+        mat3: 'mat3x3f',
+        mat4: 'mat4x4f',
+        texture: 'texture_2d<f32>',
+        sampler2D: 'sampler',
+        struct: 'struct',
+} as const
+
+export const CONSTANTS = Object.keys(TYPE_MAPPING) as unknown as keyof typeof TYPE_MAPPING
 
 export const CONVERSIONS = [
         'toBool',
@@ -140,28 +143,6 @@ export const FUNCTIONS = [
         ...ADDITIONAL_FUNCTIONS,
 ] as const
 
-export const TYPE_MAPPING = {
-        float: 'f32',
-        int: 'i32',
-        uint: 'u32',
-        bool: 'bool',
-        vec2: 'vec2f',
-        vec3: 'vec3f',
-        vec4: 'vec4f',
-        mat2: 'mat2x2f',
-        mat3: 'mat3x3f',
-        mat4: 'mat4x4f',
-        ivec2: 'vec2i',
-        ivec3: 'vec3i',
-        ivec4: 'vec4i',
-        uvec2: 'vec2u',
-        uvec3: 'vec3u',
-        uvec4: 'vec4u',
-        bvec2: 'vec2<bool>',
-        bvec3: 'vec3<bool>',
-        bvec4: 'vec4<bool>',
-} as const
-
 export const COMPONENT_COUNT_TO_TYPE = {
         1: 'float',
         2: 'vec2',

package/src/node/index.ts

@@ -1,7 +1,7 @@
 import { is } from '../utils/helpers'
 import { code } from './code'
 import { builtin, conversion as c, function_ as f, uniform as u } from './node'
-import { hex2rgb } from './utils'
+import { hex2rgb, sortHeadersByDependencies } from './utils'
 import type { NodeContext, X } from './types'
 export * from './code'
 export * from './node'
@@ -17,7 +17,11 @@ out vec4 fragColor;
 
 const generateHead = (x: X, c: NodeContext) => {
         const body = code(x, c)
-        const head = Array.from(c.headers!.values()).join('\n')
+        let head = ''
+        if (c.isWebGL && c.code?.dependencies) {
+                const sorted = sortHeadersByDependencies(c.code.headers, c.code.dependencies)
+                head = sorted.map(([, value]) => value).join('\n')
+        } else head = Array.from(c.code?.headers?.values() || []).join('\n')
         return [head, body]
 }
 
@@ -26,53 +30,55 @@ const generateStruct = (id: string, map: Map<string, string>) => {
 }
 
 export const vertex = (x: X, c: NodeContext) => {
-        c.headers?.clear()
+        if (is.str(x)) return x.trim()
+        c.code?.headers?.clear()
         c.isFrag = false // for varying inputs or outputs
         const [head, body] = generateHead(x, c)
         const ret = []
         if (c.isWebGL) {
                 ret.push('#version 300 es')
-                for (const code of c.vertInputs!.values()) ret.push(`in ${code}`)
-                for (const code of c.vertOutputs!.values()) ret.push(`out ${code}`)
+                for (const code of c.code?.vertInputs?.values() || []) ret.push(`in ${code}`)
+                for (const code of c.code?.vertOutputs?.values() || []) ret.push(`out ${code}`)
                 ret.push(head)
                 ret.push('void main() {')
                 ret.push(`  gl_Position = ${body};`)
-                for (const [id, code] of c.vertVaryings!.entries()) ret.push(`  ${id} = ${code};`)
+                for (const [id, code] of c.code?.vertVaryings?.entries() || []) ret.push(`  ${id} = ${code};`)
         } else {
-                if (c.vertInputs?.size) ret.push(generateStruct('In', c.vertInputs))
-                if (c.vertOutputs?.size) ret.push(generateStruct('Out', c.vertOutputs))
+                if (c.code?.vertInputs?.size) ret.push(generateStruct('In', c.code.vertInputs))
+                if (c.code?.vertOutputs?.size) ret.push(generateStruct('Out', c.code.vertOutputs))
                 ret.push(head)
                 ret.push('@vertex')
-                ret.push(`fn main(${c.vertInputs?.size ? 'in: In' : ''}) -> Out {`)
+                ret.push(`fn main(${c.code?.vertInputs?.size ? 'in: In' : ''}) -> Out {`)
                 ret.push('  var out: Out;')
                 ret.push(`  out.position = ${body};`)
-                for (const [id, code] of c.vertVaryings!.entries()) ret.push(`  out.${id} = ${code};`)
+                for (const [id, code] of c.code?.vertVaryings?.entries() || []) ret.push(`  out.${id} = ${code};`)
                 ret.push('  return out;')
         }
         ret.push('}')
-        const main = ret.filter(Boolean).join('\n')
+        const main = ret.filter(Boolean).join('\n').trim()
         console.log(`↓↓↓generated↓↓↓\n${main}`)
         return main
 }
 
 export const fragment = (x: X, c: NodeContext) => {
-        c.headers?.clear()
+        if (is.str(x)) return x.trim()
+        c.code?.headers?.clear()
         c.isFrag = true // for varying inputs or outputs
         const [head, body] = generateHead(x, c)
         const ret = []
         if (c.isWebGL) {
                 ret.push(GLSL_FRAGMENT_HEAD)
-                for (const code of c.fragInputs!.values()) ret.push(`in ${code}`)
+                for (const code of c.code?.fragInputs?.values() || []) ret.push(`in ${code}`)
                 ret.push(head)
                 ret.push(`void main() {\n  fragColor = ${body};`)
         } else {
-                if (c.fragInputs?.size) ret.push(generateStruct('Out', c.fragInputs))
+                if (c.code?.fragInputs?.size) ret.push(generateStruct('Out', c.code.fragInputs))
                 ret.push(head)
                 ret.push(`@fragment\nfn main(out: Out) -> @location(0) vec4f {`)
                 ret.push(`  return ${body};`)
         }
         ret.push('}')
-        const main = ret.filter(Boolean).join('\n')
+        const main = ret.filter(Boolean).join('\n').trim()
         console.log(`↓↓↓generated↓↓↓\n${main}`)
         return main
 }
@@ -98,10 +104,10 @@ export const screenCoordinate = builtin('screenCoordinate')
 export const screenUV = builtin('screenUV')
 
 // Type constructors
-export const float = (x: X) => c('float', x)
-export const int = (x: X) => c('int', x)
-export const uint = (x: X) => c('uint', x)
-export const bool = (x: X) => c('bool', x)
+export const float = (x?: X) => c('float', x)
+export const int = (x?: X) => c('int', x)
+export const uint = (x?: X) => c('uint', x)
+export const bool = (x?: X) => c('bool', x)
 export const vec2 = (x?: X, y?: X) => c('vec2', x, y)
 export const vec3 = (x?: X, y?: X, z?: X) => c('vec3', x, y, z)
 export const vec4 = (x?: X, y?: X, z?: X, w?: X) => c('vec4', x, y, z, w)
@@ -117,7 +123,7 @@ export const uvec4 = (x?: X, y?: X, z?: X, w?: X) => c('uvec4', x, y, z, w)
 export const bvec2 = (x?: X, y?: X) => c('bvec2', x, y)
 export const bvec3 = (x?: X, y?: X, z?: X) => c('bvec3', x, y, z)
 export const bvec4 = (x?: X, y?: X, z?: X, w?: X) => c('bvec4', x, y, z, w)
-export const texture2D = () => c('texture')
+export const texture2D = (x?: X) => c('texture', x)
 export const sampler2D = () => c('sampler2D')
 export const color = (r?: X, g?: X, b?: X) => {
         if (is.num(r) && is.und(g) && is.und(b)) return vec3(...hex2rgb(r))
@@ -125,9 +131,9 @@ export const color = (r?: X, g?: X, b?: X) => {
 }
 
 // Default uniforms
-export const iResolution = u(vec2(1280, 800), 'iResolution')
-export const iMouse = u(vec2(0, 0), 'iMouse')
-export const iTime = u(float(0), 'iTime')
+export const iResolution = u(vec2(), 'iResolution')
+export const iMouse = u(vec2(), 'iMouse')
+export const iTime = u(float(), 'iTime')
 export const uv = () => position.xy.div(iResolution)
 
 // Texture Functions
@@ -191,3 +197,13 @@ export const step = (edge: X, x: X) => f('step', edge, x)
 export const tan = (x: X) => f('tan', x)
 export const transformDirection = (dir: X, matrix: X) => f('transformDirection', dir, matrix)
 export const trunc = (x: X) => f('trunc', x)
+
+// // Struct functions
+// export const struct = (fields: Record<string, X>) => {
+//         const id = getId()
+//         const structNode = node('struct', { id, fields })
+//         // Create constructor function
+//         const constructor = () => node('struct', { id: getId(), type: id })
+//         Object.assign(constructor, structNode)
+//         return constructor as any
+// }

package/src/node/infer.ts

@@ -13,7 +13,7 @@ import {
         VEC3_RETURN_FUNCTIONS,
         VEC4_RETURN_FUNCTIONS,
 } from './const'
-import { isConstantsType, isNodeProxy } from './utils'
+import { isConstants, isNodeProxy, isSwizzle } from './utils'
 import type { Constants, NodeContext, NodeProxy, X } from './types'
 
 const getHighestPriorityType = (args: X[], c: NodeContext) => {
@@ -54,20 +54,23 @@ const inferOperator = (leftType: string, rightType: string, op: string): Constan
 
 export const inferPrimitiveType = (x: any): Constants => {
         if (is.bol(x)) return 'bool'
-        if (is.num(x)) return 'float'
+        if (is.str(x)) return 'texture'
+        if (is.num(x)) return Number.isInteger(x) ? 'int' : 'float'
         if (is.arr(x)) return COMPONENT_COUNT_TO_TYPE[x.length as keyof typeof COMPONENT_COUNT_TO_TYPE] || 'float'
         return 'float'
 }
 
-const inferSwizzle = (count: number): Constants => {
+const inferFromCount = (count: number): Constants => {
         return COMPONENT_COUNT_TO_TYPE[count as keyof typeof COMPONENT_COUNT_TO_TYPE]!
 }
 
 const inferFromArray = (arr: X[], c: NodeContext): Constants => {
         if (arr.length === 0) return 'void'
-        const ret = infer(arr[0], c)
+        const [x] = arr
+        if (is.str(x)) return x as Constants // for struct
+        const ret = infer(x, c)
         for (const x of arr.slice(1))
-                if (ret !== infer(x)) throw new Error(`glre node system error: defined scope return mismatch`)
+                if (ret !== infer(x, c)) throw new Error(`glre node system error: defined scope return mismatch`)
         return ret
 }
 
@@ -78,10 +81,18 @@ export const inferImpl = (target: NodeProxy, c: NodeContext): Constants => {
         if (type === 'conversion') return x as Constants
         if (type === 'operator') return inferOperator(infer(y, c), infer(z, c), x as string)
         if (type === 'function') return inferFunction(x as string, children.slice(1), c)
-        if (type === 'swizzle') return inferSwizzle((x as string).length)
         if (type === 'ternary') return inferOperator(infer(y, c), infer(z, c), 'add')
         if (type === 'builtin') return inferBuiltin(id)
-        if (type === 'define' && isConstantsType(layout?.type)) return layout?.type
+        if (type === 'define' && isConstants(layout?.type)) return layout?.type
+        if (type === 'attribute' && is.arr(x) && c.gl?.count) return inferFromCount(x.length / c.gl.count)
+        if (type === 'member') {
+                if (isSwizzle(x)) return inferFromCount(x.length)
+                if (isNodeProxy(y) && is.str(x)) {
+                        const field = y.props.fields?.[x] // for variable node of struct member
+                        if (field) return infer(field, c)
+                }
+                return 'float' // fallback @TODO FIX
+        }
         if (inferFrom) return inferFromArray(inferFrom, c)
         return infer(x, c)
 }
@@ -89,6 +100,7 @@ export const inferImpl = (target: NodeProxy, c: NodeContext): Constants => {
 export const infer = (target: X, c?: NodeContext | null): Constants => {
         if (!c) c = {}
         if (!isNodeProxy(target)) return inferPrimitiveType(target)
+        if (is.arr(target)) return inferFromCount(target.length)
         if (!c.infers) c.infers = new WeakMap<NodeProxy, Constants>()
         if (c.infers.has(target)) return c.infers.get(target)!
         const ret = inferImpl(target, c)

package/src/node/node.ts

@@ -1,7 +1,8 @@
+import { is } from '../utils/helpers'
 import { code } from './code'
 import { assign, toVar } from './scope'
-import { conversionToConstant, isConversion, isFunction, isOperator, isSwizzle, getId, isNodeProxy } from './utils'
-import type { Functions, NodeProps, NodeProxy, NodeTypes, Operators, Swizzles, X } from './types'
+import { conversionToConstant, isConversion, isFunction, isOperator, getId } from './utils'
+import type { Functions, NodeProps, NodeProxy, NodeTypes, Operators, X } from './types'
 
 const toPrimitive = (x: X, hint: string) => {
         if (hint === 'string') return code(x)
@@ -10,6 +11,7 @@ const toPrimitive = (x: X, hint: string) => {
 export const node = (type: NodeTypes, props?: NodeProps | null, ...args: X[]) => {
         if (!props) props = {}
         if (args.length) props.children = args
+        const listeners = new Set<(value: any) => void>()
         const get = (_: unknown, key: string | Symbol) => {
                 if (key === 'type') return type
                 if (key === 'props') return props
@@ -18,17 +20,16 @@ export const node = (type: NodeTypes, props?: NodeProps | null, ...args: 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 (key === 'listeners') return listeners
                 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)
+                if (is.str(key)) return member(key, x) // for struct
         }
         const set = (_: unknown, key: string, y: X) => {
-                if (isSwizzle(key)) {
-                        swizzle(key, x).assign(y)
-                        return true
-                }
-                return false
+                if (key === 'value') listeners.forEach((fun) => fun(y))
+                if (is.str(key)) member(key, x).assign(y)
+                return true
         }
         const x = new Proxy({}, { get, set }) as unknown as NodeProxy
         return x
@@ -43,8 +44,8 @@ export const builtin = (id = getId()) => node('builtin', { id })
 export const vertexStage = (x: X, id = getId()) => node('varying', { id, inferFrom: [x] }, x)
 
 // Node shorthands
-export const swizzle = (key: Swizzles, x: X) => node('swizzle', null, key, x)
 export const operator = (key: Operators, ...x: X[]) => node('operator', null, key, ...x)
 export const function_ = (key: Functions, ...x: X[]) => node('function', null, key, ...x)
 export const conversion = (key: string, ...x: X[]) => node('conversion', null, key, ...x)
-export const select = (x: X, y: X, z: X) => node('ternary', null, x, y, z) // x ? y : z
+export const member = (key: string, x: X) => node('member', null, key, x)
+export const select = (x: X, y: X, z: X) => node('ternary', null, x, y, z) // x ? y : z @TODO REMOVE

package/src/node/parse.ts

@@ -1,12 +1,20 @@
-import { infer } from './infer'
-import { formatConversions, joins } from './utils'
+import { is } from '../utils/helpers'
 import { code } from './code'
-import type { Constants, NodeContext, NodeProps, X } from './types'
+import { infer } from './infer'
+import { formatConversions, isConstants, addDependency } from './utils'
+import type { Constants, NodeContext, NodeProps, NodeProxy, X } from './types'
+
+export const parseArray = (children: X[], c: NodeContext) => {
+        return children
+                .filter((x) => !is.und(x) && !is.nul(x))
+                .map((x) => code(x, c))
+                .join(', ')
+}
 
 export const parseTexture = (c: NodeContext, y: X, z: X, w: X) => {
         if (c.isWebGL) {
                 const args = w ? [y, z, w] : [y, z]
-                return `texture(${joins(args, c)})`
+                return `texture(${parseArray(args, c)})`
         }
         const _y = code(y, c)
         const args = [_y, _y + 'Sampler', code(z, c)]
@@ -43,14 +51,14 @@ export const parseSwitch = (c: NodeContext, x: X, children: X[]) => {
 }
 
 export const parseDeclare = (c: NodeContext, x: X, y: X) => {
-        const varType = infer(x, c)
+        const type = infer(x, c)
         const varName = (y as any)?.props?.id
-        if (c.isWebGL) return `${varType} ${varName} = ${code(x, c)};`
-        const wgslType = formatConversions(varType)
+        if (c.isWebGL) return `${type} ${varName} = ${code(x, c)};`
+        const wgslType = formatConversions(type)
         return `var ${varName}: ${wgslType} = ${code(x, c)};`
 }
 
-export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Constants) => {
+export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Constants | string) => {
         const { id, children = [], layout } = props
         const [x, ...args] = children
         const argParams: [name: string, type: string][] = []
@@ -65,10 +73,14 @@ export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Consta
                 }
         const ret = []
         if (c?.isWebGL) {
-                for (const [id, type] of argParams) params.push(`${type} ${id}`)
+                for (const [paramId, type] of argParams) {
+                        addDependency(c, id!, type)
+                        params.push(`${type} ${paramId}`)
+                }
+                addDependency(c, id!, returnType)
                 ret.push(`${returnType} ${id}(${params}) {`)
         } else {
-                for (const [id, type] of argParams) params.push(`${id}: ${formatConversions(type, c)}`)
+                for (const [paramId, type] of argParams) params.push(`${paramId}: ${formatConversions(type, c)}`)
                 ret.push(`fn ${id}(${params}) -> ${formatConversions(returnType, c)} {`)
         }
         const scopeCode = code(x, c)
@@ -77,42 +89,72 @@ export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Consta
         return ret.join('\n')
 }
 
+export const parseStructHead = (c: NodeContext, id: string, fields: Record<string, NodeProxy> = {}) => {
+        const lines: string[] = []
+        for (const key in fields) {
+                const fieldType = fields[key]
+                const type = infer(fieldType, c)
+                if (c.isWebGL) addDependency(c, id, type)
+                lines.push(c.isWebGL ? `${type} ${key};` : `${key}: ${formatConversions(type, c)},`)
+        }
+        const ret = lines.join('\n  ')
+        return `struct ${id} {\n  ${ret}\n};`
+}
+
+export const parseStruct = (
+        c: NodeContext,
+        id: string,
+        instanceId = '',
+        fields?: Record<string, NodeProxy>,
+        initialValues?: Record<string, NodeProxy>
+) => {
+        if (c.isWebGL) {
+                if (initialValues) {
+                        const ordered = []
+                        for (const key in fields) ordered.push(initialValues[key])
+                        return `${id} ${instanceId} = ${id}(${parseArray(ordered, c)});`
+                } else return `${id} ${instanceId};`
+        } else {
+                if (initialValues) {
+                        const ordered = []
+                        for (const key in fields) ordered.push(initialValues[key])
+                        return `var ${instanceId}: ${id} = ${id}(${parseArray(ordered, c)});`
+                } else return `var ${instanceId}: ${id};`
+        }
+}
+
 /**
  * headers
  */
-export const parseVaryingHead = (c: NodeContext, id: string, varType: string) => {
-        return c.isWebGL
-                ? `${varType} ${id};`
-                : `@location(${c.vertVaryings!.size}) ${id}: ${formatConversions(varType, c)}`
+export const parseVaryingHead = (c: NodeContext, id: string, type: string) => {
+        return c.isWebGL ? `${type} ${id};` : `@location(${c.code?.vertVaryings?.size || 0}) ${id}: ${formatConversions(type, c)}`
 }
 
-export const parseUniformHead = (c: NodeContext, id: string, varType: Constants) => {
-        const isTexture = varType === 'sampler2D' || varType === 'texture'
+export const parseUniformHead = (c: NodeContext, id: string, type: Constants) => {
+        const isTexture = type === 'sampler2D' || type === 'texture'
         if (c.isWebGL)
                 return isTexture //
                         ? `uniform sampler2D ${id};`
-                        : `uniform ${varType} ${id};`
+                        : `uniform ${type} ${id};`
         if (isTexture) {
-                const { group = 1, binding = 0 } = c.webgpu?.textures.map.get(id) || {}
+                const { group = 1, binding = 0 } = c.gl?.webgpu?.textures.map.get(id) || {}
                 return (
                         `@group(${group}) @binding(${binding}) var ${id}Sampler: sampler;\n` +
                         `@group(${group}) @binding(${binding + 1}) var ${id}: texture_2d<f32>;`
                 )
         }
-        const { group = 0, binding = 0 } = c.webgpu?.uniforms.map.get(id) || {}
-        const wgslType = formatConversions(varType, c)
+        const { group = 0, binding = 0 } = c.gl?.webgpu?.uniforms.map.get(id) || {}
+        const wgslType = formatConversions(type, c)
         return `@group(${group}) @binding(${binding}) var<uniform> ${id}: ${wgslType};`
 }
 
-export const parseAttribHead = (c: NodeContext, id: string, varType: Constants) => {
-        if (c.isWebGL) return `${varType} ${id};`
-        const { location = 0 } = c.webgpu?.attribs.map.get(id) || {}
-        const wgslType = formatConversions(varType, c)
+export const parseAttribHead = (c: NodeContext, id: string, type: Constants) => {
+        if (c.isWebGL) return `${type} ${id};`
+        const { location = 0 } = c.gl?.webgpu?.attribs.map.get(id) || {}
+        const wgslType = formatConversions(type, c)
         return `@location(${location}) ${id}: ${wgslType}`
 }
 
-export const parseConstantHead = (c: NodeContext, id: string, varType: Constants, value: string) => {
-        return c.isWebGL
-                ? `const ${varType} ${id} = ${value};`
-                : `const ${id}: ${formatConversions(varType, c)} = ${value};`
+export const parseConstantHead = (c: NodeContext, id: string, type: Constants, value: string) => {
+        return c.isWebGL ? `const ${type} ${id} = ${value};` : `const ${id}: ${formatConversions(type, c)} = ${value};`
 }