glre 0.38.0 → 0.40.0

package/src/node/utils/const.ts

@@ -3,20 +3,20 @@ export const SWIZZLES = ['x', 'y', 'z', 'w', 'r', 'g', 'b', 'a', 's', 't', 'p',
 // Unified order with TYPE_MAPPING array
 export const CONVERSIONS = [
         'toBool',
-        'toUint',
+        'toUInt',
         'toInt',
         'toFloat',
-        'toBvec2',
-        'toIvec2',
-        'toUvec2',
+        'toBVec2',
+        'toIVec2',
+        'toUVec2',
         'toVec2',
-        'toBvec3',
-        'toIvec3',
-        'toUvec3',
+        'toBVec3',
+        'toIVec3',
+        'toUVec3',
         'toVec3',
-        'toBvec4',
-        'toIvec4',
-        'toUvec4',
+        'toBVec4',
+        'toIVec4',
+        'toUVec4',
         'toVec4',
         'toColor',
         'toMat2',
@@ -73,6 +73,16 @@ export const OPERATORS = {
         bitXor: '^',
         shiftLeft: '<<',
         shiftRight: '>>',
+        addAssign: '+=',
+        subAssign: '-=',
+        mulAssign: '*=',
+        divAssign: '/=',
+        modAssign: '%=',
+        bitAndAssign: '&=',
+        bitOrAssign: '|=',
+        bitXorAssign: '^=',
+        shiftLeftAssign: '<<=',
+        shiftRightAssign: '>>=',
 } as const
 
 export const OPERATOR_KEYS = Object.keys(OPERATORS) as (keyof typeof OPERATORS)[]
@@ -135,6 +145,28 @@ export const COMPARISON_OPERATORS = [
 
 export const LOGICAL_OPERATORS = ['and', 'or'] as const
 
+// Operator type rules [L, R, Result] format (no duplicates, same-type handled by logic)
+export const OPERATOR_TYPE_RULES = [
+        // Scalar broadcast operations (result follows vector type)
+        ['float', 'vec2', 'vec2'],
+        ['float', 'vec3', 'vec3'],
+        ['float', 'vec4', 'vec4'],
+        ['int', 'ivec2', 'ivec2'],
+        ['int', 'ivec3', 'ivec3'],
+        ['int', 'ivec4', 'ivec4'],
+        ['uint', 'uvec2', 'uvec2'],
+        ['uint', 'uvec3', 'uvec3'],
+        ['uint', 'uvec4', 'uvec4'],
+        // Matrix-vector operations (mat * vec → vec)
+        ['mat2', 'vec2', 'vec2'],
+        ['mat3', 'vec3', 'vec3'],
+        ['mat4', 'vec4', 'vec4'],
+        // Vector-matrix operations (vec * mat → vec)
+        ['vec2', 'mat2', 'vec2'],
+        ['vec3', 'mat3', 'vec3'],
+        ['vec4', 'mat4', 'vec4'],
+] as const
+
 export const WGSL_TO_GLSL_BUILTIN = {
         position: 'gl_FragCoord',
         vertex_index: 'gl_VertexID',
@@ -150,7 +182,7 @@ export const WGSL_TO_GLSL_BUILTIN = {
 /**
  * 2.1. unified with:
  * 1.1. index.ts functions and
- * 3.1. types.ts BaseNodeProxy
+ * 3.1. types.ts _N
  */
 // Function return type mapping for method chaining
 export const FUNCTION_RETURN_TYPES = {
@@ -176,7 +208,7 @@ export const FUNCTION_RETURN_TYPES = {
 /**
  * 2.2. unified with:
  * 1.2. index.ts functions and
- * 3.2. types.ts BaseNodeProxy
+ * 3.2. types.ts _N
  */
 // All shader functions (type inference now handled by inferFrom)
 export const FUNCTIONS = [
@@ -200,6 +232,7 @@ export const FUNCTIONS = [
         'floor',
         'fract',
         'fwidth',
+        'inverse',
         'inverseSqrt',
         'log',
         'log2',
@@ -209,7 +242,6 @@ export const FUNCTIONS = [
         'radians',
         'reciprocal',
         'round',
-        'saturate',
         'sign',
         'sin',
         'sinh',
@@ -217,6 +249,7 @@ export const FUNCTIONS = [
         'tan',
         'tanh',
         'trunc',
+        'saturate',
         // 1. Functions where first argument determines return type
         'atan2',
         'clamp',
@@ -231,3 +264,31 @@ export const FUNCTIONS = [
         'step',
         // @NOTE: mod is operator
 ] as const
+
+// Check if two types are the same (for same-type operations)
+const isSameType = (L: string, R: string): boolean => L === R
+
+// Check if combination exists in rules (handles bidirectional matching)
+const isValidCombination = (L: string, R: string): boolean => {
+        return OPERATOR_TYPE_RULES.some(
+                ([left, right, _]) => (left === L && right === R) || (left === R && right === L)
+        )
+}
+
+// Type constraint validation for operators ([L, R, Result] format)
+export const validateOperatorTypes = (L: string, R: string, op: string): boolean => {
+        if (COMPARISON_OPERATORS.includes(op as any) || LOGICAL_OPERATORS.includes(op as any)) return isSameType(L, R)
+        if (isSameType(L, R)) return true
+        return isValidCombination(L, R)
+}
+
+// Get result type for operator (used by inferOperator)
+export const getOperatorResultType = (L: string, R: string, op: string): string => {
+        if (COMPARISON_OPERATORS.includes(op as any) || LOGICAL_OPERATORS.includes(op as any)) return 'bool'
+        // Same type operations return the same type
+        if (isSameType(L, R)) return L
+        const rule = OPERATOR_TYPE_RULES.find(
+                ([left, right, _]) => (left === L && right === R) || (left === R && right === L)
+        )
+        return rule ? rule[2] : L
+}

package/src/node/utils/index.ts

@@ -7,6 +7,7 @@ import {
         parseDefine,
         parseGather,
         parseIf,
+        parseLoop,
         parseScatter,
         parseStorageHead,
         parseStruct,
@@ -16,13 +17,14 @@ import {
         parseUniformHead,
         parseVaryingHead,
 } from './parse'
-import { getBluiltin, getOperator, getConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
+import { getBluiltin, getConversions, getOperator, initNodeContext, setupEvent } from './utils'
 import { is } from '../../utils/helpers'
-import type { Constants, NodeContext, X } from '../types'
+import { mod } from '..'
+import type { Constants as C, NodeContext, Y } from '../types'
 
 export * from './utils'
 
-export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null): string => {
+export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string => {
         if (!c) c = {}
         initNodeContext(c)
         if (is.arr(target)) return parseArray(target, c)
@@ -62,13 +64,21 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'conversion') return `${getConversions(x, c)}(${parseArray(children.slice(1), c)})`
         if (type === 'operator') {
                 if (x === 'not' || x === 'bitNot') return `!${code(y, c)}`
+                if (x === 'mod') return code(mod(y, z), c)
+                if (x.endsWith('Assign')) return `${code(y, c)} ${getOperator(x)} ${code(z, c)};`
                 return `(${code(y, c)} ${getOperator(x)} ${code(z, c)})`
         }
         if (type === 'function') {
                 if (x === 'negate') return `(-${code(y, c)})`
+                if (x === 'reciprocal') return `(1.0 / ${code(y, c)})`
                 if (x === 'oneMinus') return `(1.0-${code(y, c)})`
+                if (x === 'saturate') return `clamp(${code(y, c)}, 0.0, 1.0)`
                 if (x === 'texture') return parseTexture(c, y, z, w)
                 if (x === 'atan2' && c.isWebGL) return `atan(${code(y, c)}, ${code(z, c)})`
+                if (!c.isWebGL) {
+                        if (x === 'dFdx') return `dpdx(${code(y, c)})`
+                        if (x === 'dFdy') return `dpdy(${code(y, c)})`
+                }
                 return `${x}(${parseArray(children.slice(1), c)})`
         }
         /**
@@ -77,10 +87,9 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'scope') return children.map((child: any) => code(child, c)).join('\n')
         if (type === 'assign') return `${code(x, c)} = ${code(y, c)};`
         if (type === 'return') return `return ${code(x, c)};`
-        if (type === 'loop')
-                return c.isWebGL
-                        ? `for (int ${id} = 0; ${id} < ${code(x, c)}; ${id} += 1) {\n${code(y, c)}\n}`
-                        : `for (var ${id}: i32 = 0; ${id} < ${code(x, c)}; ${id}++) {\n${code(y, c)}\n}`
+        if (type === 'break') return 'break;'
+        if (type === 'continue') return 'continue;'
+        if (type === 'loop') return parseLoop(c, x, y, id)
         if (type === 'if') return parseIf(c, x, y, children)
         if (type === 'switch') return parseSwitch(c, x, children)
         if (type === 'declare') return parseDeclare(c, x, y)
@@ -112,10 +121,8 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
                 else if (c.label === 'vert') c.code?.vertInputs.set(id, field)
                 return `in.${id}`
         }
-        if (type === 'attribute') {
-                const fun = getEventFun(c, id, true)
-                safeEventCall(x, fun)
-                target.listeners.add(fun)
+        if (type === 'attribute' || type === 'instance') {
+                setupEvent(c, id, type, target, x)
                 c.code?.vertInputs.set(id, parseAttribHead(c, id, infer(target, c)))
                 return c.isWebGL ? `${id}` : `in.${id}`
         }
@@ -123,9 +130,7 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         let head = ''
         if (type === 'uniform') {
                 const varType = infer(target, c)
-                const fun = getEventFun(c, id, false, varType === 'texture')
-                safeEventCall(x, fun)
-                target.listeners.add(fun)
+                setupEvent(c, id, varType, target, x)
                 head = parseUniformHead(c, id, varType)
         }
         if (type === 'storage') head = parseStorageHead(c, id, infer(target, c))

package/src/node/utils/infer.ts

@@ -1,63 +1,54 @@
-import { isConstants, isNodeProxy, isSwizzle } from './utils'
+import { isConstants, isX, isSwizzle } from './utils'
 import {
         BUILTIN_TYPES,
-        COMPARISON_OPERATORS,
         COMPONENT_COUNT_TO_TYPE,
         FUNCTION_RETURN_TYPES,
-        LOGICAL_OPERATORS,
+        getOperatorResultType,
+        validateOperatorTypes,
 } from './const'
-import { is } from '../../utils/helpers'
-import type { Constants as C, NodeContext, NodeProxy, X } from '../types'
+import { is, getStride } from '../../utils/helpers'
+import type { Constants as C, NodeContext, X, Y } from '../types'
 
 const inferBuiltin = <T extends C>(id: string | undefined) => {
         return BUILTIN_TYPES[id as keyof typeof BUILTIN_TYPES] as T
 }
 
-// Unified logic with types.ts InferOperator type
 const inferOperator = <T extends C>(L: T, R: T, op: string): T => {
-        if (COMPARISON_OPERATORS.includes(op as any) || LOGICAL_OPERATORS.includes(op as any)) return 'bool' as T
-        if (L === R) return L
-        // broadcast
-        if (L === 'float' || L === 'int') return R
-        if (R === 'float' || R === 'int') return L
-        // mat * vec → vec
-        if (L === 'mat4' && R === 'vec4') return R
-        if (L === 'mat3' && R === 'vec3') return R
-        if (L === 'mat2' && R === 'vec2') return R
-        // vec * mat → vec
-        if (L === 'vec4' && R === 'mat4') return L
-        if (L === 'vec3' && R === 'mat3') return L
-        if (L === 'vec2' && R === 'mat2') return L
-        return L
+        if (!validateOperatorTypes(L, R, op))
+                console.warn(`GLRE Type Warning: Invalid operator '${op}' between types '${L}' and '${R}'`)
+        return getOperatorResultType(L, R, op) as T
 }
 
-export const inferPrimitiveType = <T extends C>(x: X) => {
+export const inferPrimitiveType = <T extends C>(x: Y<T>) => {
         if (is.bol(x)) return 'bool' as T
         if (is.str(x)) return 'texture' as T
         if (is.num(x)) return 'float' as T // @TODO FIX:  Number.isInteger(x) ? 'int' : 'float'
         if (is.arr(x)) return COMPONENT_COUNT_TO_TYPE[x.length as keyof typeof COMPONENT_COUNT_TO_TYPE] as T
-        return 'float' as T
+        return 'void' as T
 }
 
 const inferFromCount = <T extends C>(count: number) => {
-        return COMPONENT_COUNT_TO_TYPE[count as keyof typeof COMPONENT_COUNT_TO_TYPE] as T
+        const ret = COMPONENT_COUNT_TO_TYPE[count as keyof typeof COMPONENT_COUNT_TO_TYPE] as T
+        if (!ret)
+                throw `glre node system error: Cannot infer type from array length ${count}. Check your data size. Supported: 1(float), 2(vec2), 3(vec3), 4(vec4), 9(mat3), 16(mat4)`
+        return ret
 }
 
-const inferFromArray = <T extends C>(arr: X<T>[], c: NodeContext) => {
+const inferFromArray = <T extends C>(arr: Y<T>[], c: NodeContext) => {
         if (arr.length === 0) return 'void' as T
         const [x] = arr
         if (is.str(x)) return x as T // for struct
         const ret = infer(x, c)
         // for (const x of arr.slice(1))
-        //         if (ret !== infer(x, c)) throw new Error(`glre node system error: defined scope return mismatch`)
+        //         if (ret !== infer(x, c)) throw `glre node system error: defined scope return mismatch`
         return ret
 }
 
-export const inferFunction = <T extends C>(x: X) => {
+export const inferFunction = <T extends C>(x: Y) => {
         return FUNCTION_RETURN_TYPES[x as keyof typeof FUNCTION_RETURN_TYPES] as T
 }
 
-export const inferImpl = <T extends C>(target: NodeProxy<T>, c: NodeContext): T => {
+export const inferImpl = <T extends C>(target: X<T>, c: NodeContext): T => {
         const { type, props } = target
         const { id, children = [], inferFrom, layout } = props
         const [x, y, z] = children
@@ -70,25 +61,32 @@ export const inferImpl = <T extends C>(target: NodeProxy<T>, c: NodeContext): T
                 if (!inferFrom || inferFrom.length === 0) return 'void' as T
                 return inferFromArray(inferFrom, c)
         }
-        if (type === 'attribute' && is.arr(x) && c.gl?.count) return inferFromCount(x.length / c.gl.count)
+        if (type === 'attribute' && is.arr(x)) {
+                const stride = getStride(x.length, c.gl?.count, c.gl?.error)
+                return inferFromCount(stride)
+        }
+        if (type === 'instance' && is.arr(x)) {
+                const stride = getStride(x.length, c.gl?.instanceCount, c.gl?.error)
+                return inferFromCount(stride)
+        }
         if (type === 'member') {
                 if (isSwizzle(y)) return inferFromCount(y.length)
-                if (isNodeProxy(x)) {
+                if (isX(x)) {
                         const structType = infer(x, c)
-                        const fields = c.code?.structFields?.get(structType)
+                        const fields = c.code?.structStructFields?.get(structType)
                         if (fields && fields[y]) return infer(fields[y], c) as T
                 }
                 return 'float' as T
         }
         if (inferFrom) return inferFromArray(inferFrom, c)
-        return infer(x, c) // for uniform and storage gather and scatter
+        return x ? infer(x, c) : ('void' as T) // for uniform and storage gather and scatter
 }
 
-export const infer = <T extends C>(target: X<T>, c?: NodeContext | null): T => {
+export const infer = <T extends C>(target: Y<T>, c?: NodeContext | null): T => {
         if (!c) c = {}
-        if (!isNodeProxy(target)) return inferPrimitiveType(target)
+        if (!isX(target)) return inferPrimitiveType(target)
         if (is.arr(target)) return inferFromCount(target.length)
-        if (!c.infers) c.infers = new WeakMap<NodeProxy<T>, C>()
+        if (!c.infers) c.infers = new WeakMap<X<T>, C>()
         if (c.infers.has(target)) return c.infers.get(target) as T
         const ret = inferImpl(target, c)
         c.infers.set(target, ret)

package/src/node/utils/parse.ts

@@ -2,9 +2,10 @@ import { code } from '.'
 import { infer } from './infer'
 import { getConversions, addDependency } from './utils'
 import { is } from '../../utils/helpers'
-import type { Constants, NodeContext, NodeProps, NodeProxy, StructFields, X } from '../types'
+import type { Constants, NodeContext, NodeProps, StructFields, Y } from '../types'
+import { storageSize } from '../../utils/program'
 
-export const parseArray = (children: X[], c: NodeContext) => {
+export const parseArray = (children: Y[], c: NodeContext) => {
         return children
                 .filter((x) => !is.und(x) && !is.nul(x))
                 .map((x) => code(x, c))
@@ -12,7 +13,7 @@ export const parseArray = (children: X[], c: NodeContext) => {
 }
 
 // only for webgl
-export const parseGather = (c: NodeContext, x: X, y: X, target: X) => {
+export const parseGather = (c: NodeContext, x: Y, y: Y, target: Y) => {
         const parseSwizzle = () => {
                 const valueType = infer(target, c)
                 if (valueType === 'float') return '.x'
@@ -22,14 +23,14 @@ export const parseGather = (c: NodeContext, x: X, y: X, target: X) => {
                 throw new Error(`Unsupported storage scatter type: ${valueType}`)
         }
         const indexVar = code(y, c)
-        const texSize = Math.floor(Math.sqrt(c.gl?.particles || 1024))
-        const coordX = `int(${indexVar}) % ${texSize}`
-        const coordY = `int(${indexVar}) / ${texSize}`
+        const size = storageSize(c.gl?.particleCount)
+        const coordX = `int(${indexVar}) % ${size.x}`
+        const coordY = `int(${indexVar}) / ${size.x}`
         return `texelFetch(${code(x, c)}, ivec2(${coordX}, ${coordY}), 0)${parseSwizzle()}`
 }
 
 // only for webgl
-export const parseScatter = (c: NodeContext, storageNode: X, valueNode: X) => {
+export const parseScatter = (c: NodeContext, storageNode: Y, valueNode: Y) => {
         const storageId = code(storageNode, c)
         const valueCode = code(valueNode, c)
         const valueType = infer(valueNode, c)
@@ -40,7 +41,7 @@ export const parseScatter = (c: NodeContext, storageNode: X, valueNode: X) => {
         throw new Error(`Unsupported storage scatter type: ${valueType}`)
 }
 
-export const parseTexture = (c: NodeContext, y: X, z: X, w: X) => {
+export const parseTexture = (c: NodeContext, y: Y, z: Y, w: Y) => {
         if (c.isWebGL) {
                 const args = w ? [y, z, w] : [y, z]
                 return `texture(${parseArray(args, c)})`
@@ -55,7 +56,7 @@ export const parseTexture = (c: NodeContext, y: X, z: X, w: X) => {
 /**
  * scopes
  */
-export const parseIf = (c: NodeContext, x: X, y: X, children: X[]) => {
+export const parseIf = (c: NodeContext, x: Y, y: Y, children: Y[]) => {
         let ret = `if (${code(x, c)}) {\n${code(y, c)}\n}`
         for (let i = 2; i < children.length; i += 2) {
                 const isElse = i >= children.length - 1
@@ -66,7 +67,7 @@ export const parseIf = (c: NodeContext, x: X, y: X, children: X[]) => {
         return ret
 }
 
-export const parseSwitch = (c: NodeContext, x: X, children: X[]) => {
+export const parseSwitch = (c: NodeContext, x: Y, children: Y[]) => {
         let ret = `switch (${code(x, c)}) {\n`
         for (let i = 1; i < children.length; i += 2) {
                 const isDefault = i >= children.length - 1
@@ -79,7 +80,7 @@ export const parseSwitch = (c: NodeContext, x: X, children: X[]) => {
         return ret
 }
 
-export const parseDeclare = (c: NodeContext, x: X, y: X) => {
+export const parseDeclare = (c: NodeContext, x: Y, y: Y) => {
         const type = infer(x, c)
         const varName = (y as any)?.props?.id
         if (c.isWebGL) return `${type} ${varName} = ${code(x, c)};`
@@ -88,7 +89,7 @@ export const parseDeclare = (c: NodeContext, x: X, y: X) => {
 }
 
 export const parseStructHead = (c: NodeContext, id: string, fields: StructFields = {}) => {
-        c.code?.structFields?.set(id, fields)
+        c.code?.structStructFields?.set(id, fields)
         const lines: string[] = []
         for (const key in fields) {
                 const fieldType = fields[key]
@@ -101,7 +102,7 @@ export const parseStructHead = (c: NodeContext, id: string, fields: StructFields
 }
 
 export const parseStruct = (c: NodeContext, id: string, instanceId = '', initialValues?: StructFields) => {
-        const fields = c.code?.structFields?.get(id) || {}
+        const fields = c.code?.structStructFields?.get(id) || {}
         if (c.isWebGL) {
                 if (initialValues) {
                         const ordered = []
@@ -120,19 +121,16 @@ export const parseStruct = (c: NodeContext, id: string, instanceId = '', initial
 /**
  * define
  */
-export const parseDefine = (c: NodeContext, props: NodeProps, target: NodeProxy) => {
+export const parseDefine = (c: NodeContext, props: NodeProps, target: Y) => {
         const { id, children = [], layout } = props
         const [x, ...args] = children
-        const argParams: [name: string, type: string][] = []
+        const argParams: [name: string, type: Constants][] = []
         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)])
-                }
+        for (let i = 0; i < args.length; i++) {
+                const input = layout?.inputs?.[i]
+                if (!input) argParams.push([`p${i}`, infer(args[i], c)])
+                else argParams.push([input.name, input.type === 'auto' ? infer(args[i], c) : input.type])
+        }
         const scopeCode = code(x, c) // build struct headers before inferring returnType
         const returnType = infer(target, c)
         const ret = []
@@ -158,7 +156,7 @@ export const parseDefine = (c: NodeContext, props: NodeProps, target: NodeProxy)
 /**
  * headers
  */
-export const parseVaryingHead = (c: NodeContext, id: string, type: string) => {
+export const parseVaryingHead = (c: NodeContext, id: string, type: Constants) => {
         return c.isWebGL
                 ? `${type} ${id};`
                 : `@location(${c.code?.vertVaryings?.size || 0}) ${id}: ${getConversions(type, c)}`
@@ -201,6 +199,32 @@ export const parseStorageHead = (c: NodeContext, id: string, type: Constants) =>
         return `@group(${group}) @binding(${binding}) var<storage, read_write> ${id}: array<${wgslType}>;`
 }
 
+export const parseLoop = (c: NodeContext, x: Y, y: Y, id: string) => {
+        const conditionType = infer(x, c)
+        const bodyCode = code(y, c)
+        const conditionCode = code(x, c)
+        if (c.isWebGL) {
+                if (conditionType === 'int')
+                        return `for (int ${id} = 0; ${id} < ${conditionCode}; ${id} += 1) {\n${bodyCode}\n}`
+                if (conditionType === 'float')
+                        return `for (float ${id} = 0.0; ${id} < ${conditionCode}; ${id} += 1.0) {\n${bodyCode}\n}`
+                if (conditionType === 'vec2')
+                        return `for (vec2 ${id} = vec2(0.0); ${id}.x < ${conditionCode}.x && ${id}.y < ${conditionCode}.y; ${id} += vec2(1.0)) {\n${bodyCode}\n}`
+                if (conditionType === 'vec3')
+                        return `for (vec3 ${id} = vec3(0.0); ${id}.x < ${conditionCode}.x && ${id}.y < ${conditionCode}.y && ${id}.z < ${conditionCode}.z; ${id} += vec3(1.0)) {\n${bodyCode}\n}`
+                return `for (int ${id} = 0; ${id} < ${conditionCode}; ${id} += 1) {\n${bodyCode}\n}`
+        }
+        if (conditionType === 'int')
+                return `for (var ${id}: i32 = 0; ${id} < ${conditionCode}; ${id}++) {\n${bodyCode}\n}`
+        if (conditionType === 'float')
+                return `for (var ${id}: f32 = 0.0; ${id} < ${conditionCode}; ${id} += 1.0) {\n${bodyCode}\n}`
+        if (conditionType === 'vec2')
+                return `for (var ${id}: vec2f = vec2f(0.0); ${id}.x < ${conditionCode}.x && ${id}.y < ${conditionCode}.y; ${id} += vec2f(1.0)) {\n${bodyCode}\n}`
+        if (conditionType === 'vec3')
+                return `for (var ${id}: vec3f = vec3f(0.0); ${id}.x < ${conditionCode}.x && ${id}.y < ${conditionCode}.y && ${id}.z < ${conditionCode}.z; ${id} += vec3f(1.0)) {\n${bodyCode}\n}`
+        return `for (var ${id}: i32 = 0; ${id} < ${conditionCode}; ${id}++) {\n${bodyCode}\n}`
+}
+
 export const parseConstantHead = (c: NodeContext, id: string, type: Constants, value: string) => {
         return c.isWebGL ? `const ${type} ${id} = ${value};` : `const ${id}: ${getConversions(type, c)} = ${value};`
 }

package/src/node/utils/utils.ts

@@ -8,7 +8,18 @@ import {
         WGSL_TO_GLSL_BUILTIN,
 } from './const'
 import { is } from '../../utils/helpers'
-import type { Constants, Conversions, Functions, NodeContext, NodeProxy, Operators, Swizzles, X } from '../types'
+import type {
+        Constants as C,
+        Conversions,
+        Functions,
+        NodeContext,
+        NodeTypes,
+        Operators,
+        Swizzles,
+        X,
+        Y,
+} from '../types'
+import { storageSize } from '../../utils/program'
 
 export const isSwizzle = (key: unknown): key is Swizzles => {
         return is.str(key) && /^[xyzwrgbastpq]{1,4}$/.test(key)
@@ -26,13 +37,13 @@ export const isConversion = (key: unknown): key is Conversions => {
         return CONVERSIONS.includes(key as Conversions)
 }
 
-export const isNodeProxy = <T extends Constants>(x: unknown): x is NodeProxy<T> => {
+export const isX = (x: unknown): x is X => {
         if (!x) return false
         if (typeof x !== 'object') return false // @ts-ignore
         return x.isProxy
 }
 
-export const isConstants = (type?: unknown): type is Constants => {
+export const isConstants = (type?: unknown): type is C => {
         if (!is.str(type)) return false
         return CONSTANTS.includes(type as any)
 }
@@ -50,49 +61,29 @@ export const getId = () => `x${count++}`
 
 export const getBluiltin = (c: NodeContext, id: string) => {
         if (id === 'global_invocation_id') {
-                const size = Math.floor(Math.sqrt(c.gl?.particles || 1024))
-                return `uvec3(uint(gl_FragCoord.y) * uint(${size}) + uint(gl_FragCoord.x), 0u, 0u)`
+                const size = storageSize(c.gl?.particleCount)
+                return `uvec3(uint(gl_FragCoord.y) * uint(${size.x}) + uint(gl_FragCoord.x), 0u, 0u)`
         }
         const ret = WGSL_TO_GLSL_BUILTIN[id as keyof typeof WGSL_TO_GLSL_BUILTIN]
         if (!ret) throw new Error(`Error: unknown builtin variable ${id}`)
         return ret
 }
 
-export const getConversions = <T extends Constants>(x: X<T>, c?: NodeContext) => {
+export const getConversions = <T extends C>(x: T, c?: NodeContext) => {
         if (!is.str(x)) return ''
         if (c?.isWebGL) return x
         return TYPE_MAPPING[x as keyof typeof TYPE_MAPPING] || x // for struct type
 }
 
-export const getOperator = (op: X) => {
+export const getOperator = (op: Y) => {
         return OPERATORS[op as keyof typeof OPERATORS] || op
 }
 
-export const getConstant = (conversionKey: string): Constants => {
+export const getConstant = (conversionKey: string): C => {
         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 (is.und(x)) return
-        if (!isNodeProxy(x)) return fun(x) // for uniform(0) or uniform([0, 1])
-        if (x.type !== 'conversion') return
-        const args = x.props.children?.slice(1)
-        if (is.und(args?.[0])) return // ignore if uniform(vec2())
-        fun(args.map((x) => x ?? args[0])) // for uniform(vec2(1)) or uniform(vec2(1, 1))
-}
-
 export const initNodeContext = (c: NodeContext) => {
         if (c.code) return c
         c.code = {
@@ -103,7 +94,7 @@ export const initNodeContext = (c: NodeContext) => {
                 vertVaryings: new Map(),
                 computeInputs: new Map(),
                 dependencies: new Map(),
-                structFields: new Map(),
+                structStructFields: new Map(),
         }
         if (c.isWebGL) return c
         c.code.fragInputs.set('position', '@builtin(position) position: vec4f')
@@ -119,3 +110,35 @@ 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)
 }
+
+/**
+ * uniform ant attribute event listeners
+ */
+const getEventFun = (c: NodeContext, id: string, type: string) => {
+        if (c.isWebGL) {
+                if (type === 'attribute') return (value: any) => c.gl?.attribute?.(id, value)
+                if (type === 'instance') return (value: any) => c.gl?.instance?.(id, value)
+                if (type === 'texture') return (value: any) => c.gl?.texture?.(id, value)
+                return (value: any) => c.gl?.uniform?.(id, value)
+        }
+        if (type === 'attribute') return (value: any) => c.gl?._attribute?.(id, value)
+        if (type === 'instance') return (value: any) => c.gl?._instance?.(id, value)
+        if (type === 'texture') return (value: any) => c.gl?._texture?.(id, value)
+        return (value: any) => c.gl?._uniform?.(id, value)
+}
+
+const safeEventCall = <T extends C>(x: X<T>, fun: (value: unknown) => void) => {
+        if (is.und(x)) return
+        if (!isX(x)) return fun(x) // for uniform(0) or uniform([0, 1])
+        if (x.type !== 'conversion') return
+        const args = x.props.children?.slice(1)
+        if (is.und(args?.[0])) return // ignore if uniform(vec2())
+        fun(args.map((x) => x ?? args[0])) // for uniform(vec2(1)) or uniform(vec2(1, 1))
+}
+
+export const setupEvent = (c: NodeContext, id: string, type: string, target: X, child: X) => {
+        const fun = getEventFun(c, id, type)
+        safeEventCall(child, fun)
+        target.listeners.add(fun)
+        return fun
+}