glre 0.34.0 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
         "name": "glre",
-        "version": "0.34.0",
+        "version": "0.36.0",
         "author": "tseijp",
         "license": "MIT",
         "private": false,

package/src/index.ts

@@ -8,9 +8,6 @@ import type { GL } from './types'
 import { float, fract, int, iResolution, position, vec4, vertexIndex } from './node'
 export * from './node'
 export * from './types'
-export * from './utils/helpers'
-export * from './utils/pipeline'
-export * from './utils/program'
 export * from './webgl'
 export * from './webgpu'
 
@@ -45,9 +42,10 @@ const defaultVertex = () =>
         )
 
 export const createGL = (props?: Partial<GL>) => {
-        const gl = event<Partial<GL>>({
+        const gl = event({
                 isNative: false,
                 isWebGL: true,
+                isError: false,
                 isLoop: true,
                 isGL: true,
                 size: [0, 0],
@@ -55,27 +53,37 @@ export const createGL = (props?: Partial<GL>) => {
                 count: 6,
                 webgl: {},
                 webgpu: {},
+                loading: 0,
+                error() {
+                        gl.isError = true
+                        gl.isLoop = false
+                        gl.clean()
+                },
         }) as EventState<GL>
 
         gl.queue = createQueue()
         gl.frame = createFrame()
 
         gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)), gl)
-        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)), gl)
+        gl.storage = durable((k, v) => gl.queue(() => gl._storage?.(k, v)), gl)
+        gl.uniform = durable((k, v) => gl.queue(() => gl._uniform?.(k, v)), gl)
         gl.texture = durable((k, v) => gl.queue(() => gl._texture?.(k, v)), gl)
         gl.uniform({ iResolution: gl.size, iMouse: [0, 0], iTime })
 
         gl('mount', async () => {
                 gl.vs = gl.vs || gl.vert || gl.vertex || defaultVertex()
                 gl.fs = gl.fs || gl.frag || gl.fragment || defaultFragment()
+                gl.cs = gl.cs || gl.comp || gl.compute
                 if (!isWebGPUSupported()) gl.isWebGL = true
                 if (gl.isWebGL) {
                         gl((await webgl(gl)) as GL)
                 } else gl((await webgpu(gl)) as GL)
+                if (gl.isError) return // stop if error
                 gl.resize()
                 gl.frame(() => {
                         gl.loop()
                         gl.queue.flush()
+                        if (gl.loading) return true // wait for textures @TODO FIX
                         gl.render()
                         return gl.isLoop
                 })
@@ -86,7 +94,6 @@ export const createGL = (props?: Partial<GL>) => {
 
         gl('clean', () => {
                 gl.frame.stop()
-                gl.frame.clean(gl.render)
                 if (gl.isNative) return
                 window.removeEventListener('resize', gl.resize)
                 gl.el.removeEventListener('mousemove', gl.mousemove)

package/src/node/core.ts

@@ -0,0 +1,100 @@
+import { code } from './utils'
+import { is } from '../utils/helpers'
+import type { NodeContext, X } from './types'
+
+const GLSL_FRAGMENT_HEAD = `
+#version 300 es
+precision mediump float;
+out vec4 fragColor;
+`.trim()
+
+const topological = (headers: Map<string, string>, dependencies: Map<string, Set<string>>) => {
+        const sorted: [string, string][] = []
+        const visited = new Set<string>()
+        const visiting = new Set<string>()
+        const visit = (id: string) => {
+                if (visiting.has(id)) return
+                if (visited.has(id)) return
+                visiting.add(id)
+                const deps = dependencies.get(id) || new Set()
+                for (const dep of deps) if (headers.has(dep)) visit(dep)
+                visiting.delete(id)
+                visited.add(id)
+                if (headers.has(id)) sorted.push([id, headers.get(id)!])
+        }
+        for (const [id] of headers) visit(id)
+        return sorted
+}
+
+const generateHead = (x: X, c: NodeContext) => {
+        const body = code(x, c)
+        let head = ''
+        if (c.isWebGL && c.code?.dependencies) {
+                const sorted = topological(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]
+}
+
+const generateStruct = (id: string, map: Map<string, string>) => {
+        return `struct ${id} {\n  ${Array.from(map.values()).join(',\n  ')}\n}`
+}
+
+export const fragment = (x: X, c: NodeContext) => {
+        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.code?.fragInputs?.values() || []) ret.push(`in ${code}`)
+                ret.push(head)
+                ret.push(`void main() {\n  fragColor = ${body};`)
+        } else {
+                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').trim()
+        // console.log(`↓↓↓generated↓↓↓\n${main}`)
+        return main
+}
+
+export const vertex = (x: X, c: NodeContext) => {
+        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.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.code?.vertVaryings?.entries() || []) ret.push(`  ${id} = ${code};`)
+        } else {
+                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.code?.vertInputs?.size ? 'in: In' : ''}) -> Out {`)
+                ret.push('  var out: Out;')
+                ret.push(`  out.position = ${body};`)
+                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').trim()
+        // console.log(`↓↓↓generated↓↓↓\n${main}`)
+        return main
+}
+
+export const compute = (x: X, _c: NodeContext) => {
+        if (is.str(x)) return x.trim()
+        return ''
+}

package/src/node/index.ts

@@ -1,107 +1,31 @@
+import { hex2rgb } from './utils'
+import { builtin as b, conversion as c, function_ as f, uniform as u } from './node'
 import { is } from '../utils/helpers'
-import { code } from './code'
-import { builtin, conversion as c, function_ as f, uniform as u } from './node'
-import { hex2rgb, sortHeadersByDependencies } from './utils'
-import type { Constants as C, NodeContext, X, Vec2, Float } from './types'
-export * from './code'
+import type { Constants as C, X, Vec2, Float, NodeProxy } from './types'
+export * from './core'
 export * from './node'
 export * from './scope'
 export * from './types'
-export * from './utils'
-
-const GLSL_FRAGMENT_HEAD = `
-#version 300 es
-precision mediump float;
-out vec4 fragColor;
-`.trim()
-
-const generateHead = (x: X, c: NodeContext) => {
-        const body = code(x, c)
-        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]
-}
-
-const generateStruct = (id: string, map: Map<string, string>) => {
-        return `struct ${id} {\n  ${Array.from(map.values()).join(',\n  ')}\n}`
-}
-
-export const vertex = (x: X, c: NodeContext) => {
-        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.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.code?.vertVaryings?.entries() || []) ret.push(`  ${id} = ${code};`)
-        } else {
-                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.code?.vertInputs?.size ? 'in: In' : ''}) -> Out {`)
-                ret.push('  var out: Out;')
-                ret.push(`  out.position = ${body};`)
-                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').trim()
-        console.log(`↓↓↓generated↓↓↓\n${main}`)
-        return main
-}
-
-export const fragment = (x: X, c: NodeContext) => {
-        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.code?.fragInputs?.values() || []) ret.push(`in ${code}`)
-                ret.push(head)
-                ret.push(`void main() {\n  fragColor = ${body};`)
-        } else {
-                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').trim()
-        console.log(`↓↓↓generated↓↓↓\n${main}`)
-        return main
-}
 
 // Builtin Variables
-export const position = builtin<'vec4'>('position')
-export const vertexIndex = builtin<'uint'>('vertex_index')
-export const instanceIndex = builtin<'uint'>('instance_index')
-export const frontFacing = builtin<'bool'>('front_facing')
-export const fragDepth = builtin<'float'>('frag_depth')
-export const sampleIndex = builtin<'uint'>('sample_index')
-export const sampleMask = builtin<'uint'>('sample_mask')
-export const pointCoord = builtin<'vec2'>('point_coord')
+export const position = b<'vec4'>('position')
+export const vertexIndex = b<'uint'>('vertex_index')
+export const instanceIndex = b<'uint'>('instance_index')
+export const frontFacing = b<'bool'>('front_facing')
+export const fragDepth = b<'float'>('frag_depth')
+export const sampleIndex = b<'uint'>('sample_index')
+export const sampleMask = b<'uint'>('sample_mask')
+export const pointCoord = b<'vec2'>('point_coord')
 
 // TSL Compatible Builtin Variables
-export const positionLocal = builtin<'vec3'>('position')
-export const positionWorld = builtin<'vec3'>('positionWorld')
-export const positionView = builtin<'vec3'>('positionView')
-export const normalLocal = builtin<'vec3'>('normalLocal')
-export const normalWorld = builtin<'vec3'>('normalWorld')
-export const normalView = builtin<'vec3'>('normalView')
-export const screenCoordinate = builtin<'vec2'>('screenCoordinate')
-export const screenUV = builtin<'vec2'>('screenUV')
+export const positionLocal = b<'vec3'>('position')
+export const positionWorld = b<'vec3'>('positionWorld')
+export const positionView = b<'vec3'>('positionView')
+export const normalLocal = b<'vec3'>('normalLocal')
+export const normalWorld = b<'vec3'>('normalWorld')
+export const normalView = b<'vec3'>('normalView')
+export const screenCoordinate = b<'vec2'>('screenCoordinate')
+export const screenUV = b<'vec2'>('screenUV')
 
 // Type constructors with proper type inference
 export const float = (x?: X) => c('float', x)
@@ -204,7 +128,7 @@ export const step = <T extends C>(edge: X, x: X<T>) => f<T>('step', edge, x)
 export const smoothstep = <T extends C>(e0: X, e1: X, x: X<T>) => f<T>('smoothstep', e0, e1, x)
 
 // Two-argument functions with highest priority type
-export const atan2 = <T extends C>(y: X<T>, x: X) => f<T>('atan2', y, x)
+export const atan2 = <T extends C>(x: X<T>, y: X) => f<T>('atan2', x, y)
 export const pow = <T extends C>(x: X<T>, y: X) => f<T>('pow', x, y)
 
 // Component-wise power functions
@@ -219,3 +143,4 @@ export const difference = <T extends C>(x: X<T>, y: X) => f<T>('difference', x,
 export const equals = (x: X, y: X) => f<'bool'>('equals', x, y)
 export const faceforward = <T extends C>(N: X<T>, I: X, Nref: X) => f<T>('faceforward', N, I, Nref)
 export const transformDirection = <T extends C>(dir: X<T>, matrix: X) => f<T>('transformDirection', dir, matrix)
+export const mod = <T extends C>(x: NodeProxy<T>, y: X<T>) => x.sub(x.div(y).floor().mul(y))

package/src/node/node.ts

@@ -1,7 +1,6 @@
-import { is } from '../utils/helpers'
-import { code } from './code'
+import { code, getConstant, isConversion, isFunction, isOperator, getId, isArrayAccess } from './utils'
 import { assign, toVar } from './scope'
-import { conversionToConstant, isConversion, isFunction, isOperator, getId } from './utils'
+import { is } from '../utils/helpers'
 import type { Functions, NodeProps, NodeProxy, NodeTypes, Operators, X, Constants as C } from './types'
 
 const toPrimitive = (x: X, hint: string) => {
@@ -12,23 +11,31 @@ export const node = <T extends C>(type: NodeTypes, props?: NodeProps | null, ...
         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
-                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 (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 and swizzling
+        const get = (_: unknown, y: string | Symbol) => {
+                if (y === 'type') return type
+                if (y === 'props') return props
+                if (y === 'toVar') return toVar.bind(null, x)
+                if (y === 'assign') return assign.bind(null, x)
+                if (y === 'isProxy') return true
+                if (y === 'toString') return code.bind(null, x)
+                if (y === Symbol.toPrimitive) return toPrimitive.bind(null, x)
+                if (y === 'listeners') return listeners
+                if (y === 'attribute') return (id = getId()) => attribute(x, id)
+                if (y === 'constant') return (id = getId()) => constant(x, id)
+                if (y === 'uniform') return (id = getId()) => uniform(x, id)
+                if (y === 'variable') return (id = getId()) => variable(id)
+                if (y === 'builtin') return (id = getId()) => builtin(id)
+                if (y === 'vertexStage') return (id = getId()) => vertexStage(x, id)
+                if (y === 'element') return (z: X) => element(x, z)
+                if (y === 'member') return (z: X) => member(x, z)
+                if (isOperator(y)) return (...z: X[]) => operator(y, x, ...z)
+                if (isFunction(y)) return (...z: X[]) => function_(y, x, ...z)
+                if (isConversion(y)) return () => conversion(getConstant(y), x)
+                if (is.str(y)) return isArrayAccess(y) ? element(x, y) : member(x, y)
         }
-        const set = (_: unknown, key: string, y: X) => {
-                if (key === 'value') listeners.forEach((fun) => fun(y))
-                if (is.str(key)) member(key, x).assign(y)
+        const set = (_: unknown, y: string, z: X) => {
+                if (y === 'value') listeners.forEach((fun) => fun(z))
+                if (is.str(y)) member(x, y).assign(z)
                 return true
         }
         const x = new Proxy({}, { get, set }) as unknown as NodeProxy<T>
@@ -46,7 +53,8 @@ export const vertexStage = <T extends C>(x: X<T>, id = getId()) => {
 }
 
 // Node shorthands with proper typing
-export const member = <T extends C>(key: string, x: X) => node<T>('member', null, key, x)
+export const member = <T extends C>(x: X, index: X) => node<T>('member', null, x, index)
+export const element = <T extends C>(x: X, index: X) => node<T>('element', null, x, index)
 export const select = <T extends C>(x: X<T>, y: X<T>, z: X) => node<T>('ternary', null, x, y, z) // z ? x : y @TODO REMOVE
 export const operator = <T extends C>(key: Operators, ...x: X[]) => node<T>('operator', null, key, ...x)
 export const function_ = <T extends C>(key: Functions, ...x: X[]) => node<T>('function', null, key, ...x)

package/src/node/scope.ts

@@ -1,5 +1,5 @@
-import { conversion, node } from './node'
 import { getId } from './utils'
+import { conversion, node } from './node'
 import type { FnLayout, NodeProps, NodeProxy, X, Constants, Int } from './types'
 
 let scope: NodeProxy | null = null
@@ -45,18 +45,11 @@ export const struct = <T extends Record<string, NodeProxy>>(fields: T, id = getI
 }
 
 const scoped = (x: NodeProxy, fun: () => NodeProxy | void, y = define) => {
-        // cache to revert
-        const _scope = scope
-        const _define = define
-        // update
-        scope = x
-        define = y
-        if (_scope) x.props.parent = _scope
+        const [_scope, _define] = [scope, define]
+        ;[scope, define] = [x, y]
         const z = fun()
         if (z) Return(z)
-        // revert
-        scope = _scope
-        define = _define
+        ;[scope, define] = [_scope, _define]
 }
 
 export const If = (x: NodeProxy, fun: () => void) => {
@@ -82,8 +75,9 @@ export const If = (x: NodeProxy, fun: () => void) => {
 
 export const Loop = (x: NodeProxy, fun: (params: { i: Int }) => void) => {
         const y = node('scope')
-        scoped(y, () => fun({ i: node<'int'>('variable', { id: 'i', inferFrom: [conversion('int', 0)] }) }))
-        const ret = node('loop', null, x, y)
+        const id = getId()
+        scoped(y, () => fun({ i: node<'int'>('variable', { id, inferFrom: [conversion('int', 0)] }) }))
+        const ret = node('loop', { id }, x, y)
         addToScope(ret)
         return ret
 }

package/src/node/types.ts

@@ -1,13 +1,9 @@
-import { GL } from '../types'
-
-import { CONSTANTS, CONVERSIONS, FUNCTIONS, OPERATOR_KEYS } from './const'
+import { CONSTANTS, CONVERSIONS, FUNCTIONS, OPERATOR_KEYS } from './utils/const'
+import type { GL } from '../types'
 
 export type Constants = (typeof CONSTANTS)[number] | 'void'
-
 export type Conversions = (typeof CONVERSIONS)[number]
-
 export type Functions = (typeof FUNCTIONS)[number]
-
 export type Operators = (typeof OPERATOR_KEYS)[number]
 
 export interface FnLayout {
@@ -38,6 +34,7 @@ export type NodeTypes =
         // struct
         | 'struct'
         | 'member'
+        | 'element'
         // scopes
         | 'scope'
         | 'assign'
@@ -55,7 +52,6 @@ export interface NodeProps<T extends Record<string, NodeProxy> = {}> {
         children?: any[]
         inferFrom?: any[]
         layout?: FnLayout
-        parent?: NodeProxy
         // for struct
         fields?: T
         initialValues?: T
@@ -81,6 +77,20 @@ export interface NodeContext {
 /**
  * infer
  */
+type _StringLength<S extends string> = S extends `${infer _}${infer Rest}`
+        ? Rest extends ''
+                ? 1
+                : Rest extends `${infer _}${infer Rest2}`
+                ? Rest2 extends ''
+                        ? 2
+                        : Rest2 extends `${infer _}${infer Rest3}`
+                        ? Rest3 extends ''
+                                ? 3
+                                : 4
+                        : never
+                : never
+        : 0
+
 // Unified logic with infer.ts inferOperator function
 // prettier-ignore
 type InferOperator<L extends Constants, R extends Constants> =
@@ -97,19 +107,13 @@ type InferOperator<L extends Constants, R extends Constants> =
         L extends 'vec3' ? R extends 'mat3' ? L /* default */ : L :
         L extends 'vec2' ? R extends 'mat2' ? L /* default */ : L : L
 
-type _StringLength<S extends string> = S extends `${infer _}${infer Rest}`
-        ? Rest extends ''
-                ? 1
-                : Rest extends `${infer _}${infer Rest2}`
-                ? Rest2 extends ''
-                        ? 2
-                        : Rest2 extends `${infer _}${infer Rest3}`
-                        ? Rest3 extends ''
-                                ? 3
-                                : 4
-                        : never
-                : never
-        : 0
+// Unified logic with infer.ts inferArrayElement function
+// prettier-ignore
+type InferArrayElement<T extends Constants> =
+        T extends 'mat4' ? 'vec4' :
+        T extends 'mat3' ? 'vec3' :
+        T extends 'mat2' ? 'vec2' :
+        'float'
 
 type InferSwizzleType<S extends string> = _StringLength<S> extends 4
         ? 'vec4'
@@ -142,6 +146,7 @@ type NodeProxyMethods =
         | 'assign'
         | 'toVar'
         | 'toString'
+        | 'element'
 
 export interface BaseNodeProxy<T extends Constants> {
         // System properties
@@ -261,6 +266,9 @@ export interface BaseNodeProxy<T extends Constants> {
         pow2(): NodeProxy<T>
         pow3(): NodeProxy<T>
         pow4(): NodeProxy<T>
+
+        // Element access for array/matrix types
+        element<Index extends X>(index: Index): NodeProxy<InferArrayElement<T>>
 }
 
 type ReadNodeProxy = {

package/src/node/{code.ts → utils/index.ts}

@@ -1,4 +1,3 @@
-import { is } from '../utils/helpers'
 import { infer } from './infer'
 import {
         parseArray,
@@ -14,8 +13,11 @@ import {
         parseVaryingHead,
         parseUniformHead,
 } from './parse'
-import { getBluiltin, getOperator, formatConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
-import type { Constants, NodeContext, X } from './types'
+import { getBluiltin, getOperator, getConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
+import { is } from '../../utils/helpers'
+import type { Constants, NodeContext, X } from '../types'
+
+export * from './utils'
 
 export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null): string => {
         if (!c) c = {}
@@ -31,26 +33,29 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         }
         if (is.bol(target)) return target ? 'true' : 'false'
         if (!target) return ''
-        const { type, props } = target
-        const { id = '', children = [], fields, initialValues } = props
+        const { type, props = {} } = target
+        const { id = 'i', children = [], fields, initialValues } = props
         const [x, y, z, w] = children
         /**
          * variables
          */
         if (type === 'variable') return id
-        if (type === 'member') return `${code(y, c)}.${code(x, c)}`
+        if (type === 'member') return `${code(x, c)}.${code(y, c)}`
+        if (type === 'element') return `${code(x, c)}[${code(y, c)}]`
         if (type === 'ternary')
                 return c.isWebGL
                         ? `(${code(z, c)} ? ${code(x, c)} : ${code(y, c)})`
                         : `select(${code(x, c)}, ${code(y, c)}, ${code(z, c)})`
-        if (type === 'conversion') return `${formatConversions(x, c)}(${parseArray(children.slice(1), c)})`
+        if (type === 'conversion') return `${getConversions(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 `(-${parseArray(children.slice(1), c)})`
+                if (x === 'negate') return `(-${code(y, c)})`
+                if (x === 'oneMinus') return `(1.0-${code(y, c)})`
                 if (x === 'texture') return parseTexture(c, y, z, w)
+                if (x === 'atan2' && c.isWebGL) return `atan(${code(y, c)}, ${code(z, c)})`
                 return `${x}(${parseArray(children.slice(1), c)})`
         }
         /**
@@ -61,8 +66,8 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'return') return `return ${code(x, c)};`
         if (type === 'loop')
                 return c.isWebGL
-                        ? `for (int i = 0; i < ${code(x, c)}; i += 1) {\n${code(y, c)}\n}`
-                        : `for (var i: i32 = 0; i < ${code(x, c)}; i++) {\n${code(y, c)}\n}`
+                        ? `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 === 'if') return parseIf(c, x, y, children)
         if (type === 'switch') return parseSwitch(c, x, children)
         if (type === 'declare') return parseDeclare(c, x, y)
@@ -88,7 +93,7 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'builtin') {
                 if (c.isWebGL) return getBluiltin(id)
                 if (id === 'position') return 'out.position'
-                const field = `@builtin(${id}) ${id}: ${formatConversions(infer(target, c), c)}`
+                const field = `@builtin(${id}) ${id}: ${getConversions(infer(target, c), c)}`
                 if (c.isFrag) {
                         c.code?.fragInputs.set(id, field)
                 } else c.code?.vertInputs.set(id, field)

package/src/node/{infer.ts → utils/infer.ts}

@@ -1,4 +1,4 @@
-import { is } from '../utils/helpers'
+import { isConstants, isNodeProxy, isSwizzle } from './utils'
 import {
         BUILTIN_TYPES,
         COMPARISON_OPERATORS,
@@ -6,8 +6,8 @@ import {
         FUNCTION_RETURN_TYPES,
         LOGICAL_OPERATORS,
 } from './const'
-import { isConstants, isNodeProxy, isSwizzle } from './utils'
-import type { Constants as C, NodeContext, NodeProxy, X } from './types'
+import { is } from '../../utils/helpers'
+import type { Constants as C, NodeContext, NodeProxy, X } from '../types'
 
 const inferBuiltin = <T extends C>(id: string | undefined) => {
         return BUILTIN_TYPES[id as keyof typeof BUILTIN_TYPES] as T
@@ -31,6 +31,14 @@ const inferOperator = <T extends C>(L: T, R: T, op: string): T => {
         return L
 }
 
+// Unified logic with infer.ts InferArrayElement type
+const inferArrayElement = <T extends C>(arrayType: T): T => {
+        if (arrayType === 'mat4') return 'vec4' as T
+        if (arrayType === 'mat3') return 'vec3' as T
+        if (arrayType === 'mat2') return 'vec2' as T
+        return 'float' as T
+}
+
 export const inferPrimitiveType = <T extends C>(x: X) => {
         if (is.bol(x)) return 'bool' as T
         if (is.str(x)) return 'texture' as T
@@ -68,10 +76,11 @@ export const inferImpl = <T extends C>(target: NodeProxy<T>, c: NodeContext): T
         if (type === 'function') return inferFunction(x) || infer(y, c)
         if (type === 'define' && isConstants(layout?.type)) return layout?.type as T
         if (type === 'attribute' && is.arr(x) && c.gl?.count) return inferFromCount(x.length / c.gl.count)
+        if (type === 'element') return inferArrayElement(infer(x, c) as T)
         if (type === 'member') {
-                if (isSwizzle(x)) return inferFromCount(x.length)
-                if (isNodeProxy(y) && is.str(x)) {
-                        const field = (y as any).props.fields?.[x] // for variable node of struct member
+                if (isSwizzle(y)) return inferFromCount(y.length)
+                if (isNodeProxy(x)) {
+                        const field = (x as any).props.fields[y] // for variable node of struct member
                         if (field) return infer(field, c)
                 }
                 return 'float' as T // fallback @TODO FIX