glre 0.45.0 → 0.47.0

package/src/index.ts

@@ -1,18 +1,12 @@
 import { durable, event } from 'reev'
 import { createFrame, createQueue } from 'refr'
-import { is } from './utils/helpers'
-import { webgl } from './utils/webgl'
-import { webgpu } from './utils/webgpu'
+import { is } from './helpers'
+import { webgl } from './webgl'
+import { webgpu } from './webgpu'
 import type { EventState } from 'reev'
 import type { GL } from './types'
 export * from './types'
 
-export const isGL = (a: unknown): a is EventState<GL> => {
-        if (!is.obj(a)) return false
-        if ('isGL' in a) return true
-        return false
-}
-
 export const isServer = () => {
         return typeof window === 'undefined'
 }
@@ -22,9 +16,11 @@ export const isWebGPUSupported = () => {
         return 'gpu' in navigator
 }
 
-let iTime = performance.now()
+const findElement = (arg: Partial<GL>) => {
+        return arg.el || arg.elem || arg.element
+}
 
-export const createGL = (props?: Partial<GL>) => {
+export const createGL = (...args: Partial<GL>[]) => {
         const gl = event({
                 isNative: false,
                 isWebGL: true,
@@ -33,16 +29,9 @@ export const createGL = (props?: Partial<GL>) => {
                 isDebug: false,
                 isDepth: false,
                 wireframe: false,
-                isGL: true,
                 size: [0, 0],
                 mouse: [0, 0],
-                count: 6,
-                instanceCount: 1,
-                particleCount: 1024,
                 precision: 'highp',
-                webgl: {},
-                webgpu: {},
-                loading: 0,
                 error() {
                         gl.isError = true
                         gl.isLoop = false
@@ -51,67 +40,81 @@ export const createGL = (props?: Partial<GL>) => {
                 },
         }) as EventState<GL>
 
+        let iTime = performance.now()
         gl.queue = createQueue()
         gl.frame = createFrame()
 
         gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)), gl)
         gl.instance = durable((k, v, at) => gl.queue(() => gl._instance?.(k, v, at)), 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 = durable((k, v) => gl.queue(() => gl._uniform?.(k, v)), gl)
         gl.uniform({ iResolution: gl.size, iMouse: [0, 0], iTime })
 
-        gl('mount', async () => {
-                if (!isWebGPUSupported()) gl.isWebGL = true
-                gl.vs = gl.vs || gl.vert || gl.vertex
-                gl.fs = gl.fs || gl.frag || gl.fragment
-                gl.cs = gl.cs || gl.comp || gl.compute
-                if (gl.isWebGL) {
-                        gl((await webgl(gl)) as GL)
-                } else gl((await webgpu(gl)) as GL)
-                if (gl.isError) return // stop if error
+        gl('mount', async (el: HTMLCanvasElement) => {
+                gl.el = findElement(gl) || el || args.map(findElement).find(Boolean)
+                const isAppend = !gl.el // Check first: canvas may unmount during WebGPU async processing
+                if (isAppend && !gl.isNative) gl.el = document.createElement('canvas')
+                for (const arg of args) {
+                        gl.fs = arg.fs || arg.frag || arg.fragment || undefined
+                        gl.cs = arg.cs || arg.comp || arg.compute || undefined
+                        gl.vs = arg.vs || arg.vert || arg.vertex || undefined
+                        gl.triangleCount = arg.triangleCount || arg.count || 6
+                        gl.instanceCount = arg.instanceCount || 1
+                        gl.particleCount = arg.particleCount || 1024
+                        gl(arg)
+                        if (is.bol(arg.isWebGL)) gl.isWebGL = arg.isWebGL || !isWebGPUSupported()
+                        if (gl.isWebGL) webgl(gl)
+                        else await webgpu(gl)
+                        if (arg.mount) arg.mount() // events added in mount phase need explicit call to execute
+                }
+                if (!gl.el || gl.isError) return // stop if error or canvas was unmounted during async
                 gl.resize()
                 gl.frame(() => {
-                        gl.loop()
-                        gl.queue.flush()
-                        if (gl.loading) return true // wait for textures @TODO FIX
                         gl.render()
                         return gl.isLoop
                 })
                 if (gl.isNative) return
+                if (isAppend) document.body.appendChild(gl.el)
                 window.addEventListener('resize', gl.resize)
                 gl.el.addEventListener('mousemove', gl.mousemove)
         })
 
         gl('clean', () => {
                 gl.frame.stop()
-                if (gl.isNative) return
+                if (!gl.el || gl.isNative) return
                 window.removeEventListener('resize', gl.resize)
                 gl.el.removeEventListener('mousemove', gl.mousemove)
         })
 
+        gl('ref', (el: HTMLCanvasElement | null) => {
+                if (el) {
+                        gl.el = el
+                        gl.mount()
+                } else gl.clean()
+        })
+
         gl('resize', () => {
-                const w = gl.width || window.innerWidth
-                const h = gl.height || window.innerHeight
-                gl.size[0] = gl.el.width = w
-                gl.size[1] = gl.el.height = h
+                const rect = gl.el.parentElement?.getBoundingClientRect()
+                gl.size[0] = gl.el.width = gl.width || rect?.width || window.innerWidth
+                gl.size[1] = gl.el.height = gl.height || rect?.height || window.innerHeight
                 gl.uniform('iResolution', gl.size)
         })
 
         gl('mousemove', (_e: any, x = _e.clientX, y = _e.clientY) => {
-                const [w, h] = gl.size
-                const { top, left } = gl.el.getBoundingClientRect()
-                gl.mouse[0] = (x - top - w / 2) / (w / 2)
-                gl.mouse[1] = -(y - left - h / 2) / (h / 2)
+                const rect = gl.el.getBoundingClientRect()
+                gl.mouse[0] = (x - rect.left) / rect.width
+                gl.mouse[1] = -(y - rect.top) / rect.height + 1
                 gl.uniform('iMouse', gl.mouse)
         })
 
-        gl('loop', () => {
+        gl('render', () => {
                 iTime = performance.now() / 1000
                 gl.uniform('iTime', iTime)
+                gl.queue.flush()
         })
 
-        return gl(props)
+        return gl
 }
 
 export default createGL

package/src/native.ts

@@ -1,14 +1,13 @@
-import { useState } from 'react' // @ts-ignore
-// import { Dimensions } from 'react-native'
-import { createGL, isGL } from './index'
+import { useState } from 'react'
+import { createGL } from './index'
 import type { GL } from './types'
 export * from './index'
 
-export const useGL = (props: Partial<GL> = {}) => {
+export const useGL = (...args: Partial<GL>[]) => {
         return useState(() => {
-                const gl = isGL(props) ? props : createGL(props)
+                const gl = createGL(...args)
+                gl.isNative = true
                 gl.ref = (ctx: any) => {
-                        gl.el = {} as any
                         gl({
                                 render() {
                                         ctx.flush()
@@ -24,6 +23,6 @@ export const useGL = (props: Partial<GL> = {}) => {
                         resize()
                         // Dimensions.addEventListener('change', resize)
                 }
-                return gl({ isNative: true })
+                return gl()
         })[0]
 }

package/src/node/build.ts

@@ -36,24 +36,9 @@ const generateStruct = (id: string, map: Map<string, string>) => {
         return `struct ${id} {\n  ${Array.from(map.values()).join(',\n  ')}\n}`
 }
 
+const PRECISION = ['float', 'int', 'sampler2D', 'samplerCube', 'sampler3D', 'sampler2DArray', 'sampler2DShadow', 'samplerCubeShadow', 'sampler2DArrayShadow', 'isampler2D', 'isampler3D', 'isamplerCube', 'isampler2DArray', 'usampler2D', 'usampler3D', 'usamplerCube', 'usampler2DArray']
 const precisionHead = (result: string[], precision = 'highp') => {
-        result.push(`precision ${precision} float;`)
-        result.push(`precision ${precision} int;`)
-        result.push(`precision ${precision} sampler2D;`)
-        result.push(`precision ${precision} samplerCube;`)
-        result.push(`precision ${precision} sampler3D;`)
-        result.push(`precision ${precision} sampler2DArray;`)
-        result.push(`precision ${precision} sampler2DShadow;`)
-        result.push(`precision ${precision} samplerCubeShadow;`)
-        result.push(`precision ${precision} sampler2DArrayShadow;`)
-        result.push(`precision ${precision} isampler2D;`)
-        result.push(`precision ${precision} isampler3D;`)
-        result.push(`precision ${precision} isamplerCube;`)
-        result.push(`precision ${precision} isampler2DArray;`)
-        result.push(`precision ${precision} usampler2D;`)
-        result.push(`precision ${precision} usampler3D;`)
-        result.push(`precision ${precision} usamplerCube;`)
-        result.push(`precision ${precision} usampler2DArray;`)
+        for (const key of PRECISION) result.push(`precision ${precision} ${key};`)
 }
 
 // ref: https://github.com/mrdoob/three.js/blob/master/src/renderers/webgl/WebGLCapabilities.js
@@ -69,7 +54,6 @@ const getMaxPrecision = (c?: WebGL2RenderingContext, precision = 'highp') => {
                 const p0 = c.getShaderPrecisionFormat(c.VERTEX_SHADER, c.MEDIUM_FLOAT)
                 const p1 = c.getShaderPrecisionFormat(c.FRAGMENT_SHADER, c.MEDIUM_FLOAT)
                 if (p0 && p0.precision > 0 && p1 && p1.precision > 0) return 'mediump'
-                precision = 'lowp'
         }
         return 'lowp'
 }
@@ -81,7 +65,7 @@ export const fragment = (x: X, c: NodeContext = {}) => {
         const result = []
         if (c.isWebGL) {
                 result.push('#version 300 es')
-                precisionHead(result, getMaxPrecision(c.gl?.webgl?.context, c.gl?.precision))
+                precisionHead(result, getMaxPrecision(c.gl?.gl, c.gl?.precision))
                 result.push('out vec4 fragColor;')
                 for (const code of c.code?.fragInputs?.values() || []) result.push(`in ${code}`)
                 result.push(head)

package/src/node/create.ts

@@ -1,7 +1,7 @@
 import { compute, fragment, vertex } from './build'
 import { addToScope, assign, toVar } from './scope'
 import { code, getConstant, isConversion, isFunction, isOperator, getId, isArrayAccess } from './utils'
-import { is } from '../utils/helpers'
+import { is } from '../helpers'
 import type { Bool, Constants as C, Functions, NodeProps, NodeTypes, Operators, X, Y } from './types'
 
 const toPrimitive = (x: Y, hint: string) => {
@@ -35,9 +35,7 @@ export const create = <T extends C>(type: NodeTypes, props?: NodeProps | null, .
                 if (key === 'assign') return assign.bind(null, x, x.type === 'gather')
                 if (key === 'select') return select.bind(null, x)
                 if (isOperator(key)) {
-                        return key.endsWith('Assign')
-                                ? (...args: Y[]) => addToScope(operator(key, x, ...args))
-                                : (...args: Y[]) => operator(key, x, ...args)
+                        return key.endsWith('Assign') ? (...args: Y[]) => addToScope(operator(key, x, ...args)) : (...args: Y[]) => operator(key, x, ...args)
                 }
                 if (isFunction(key)) return (...args: Y[]) => function_(key, x, ...args)
                 if (isConversion(key)) return () => conversion(getConstant(key), x)

package/src/node/index.ts

@@ -1,6 +1,6 @@
 import { hex2rgb } from './utils'
 import { builtin as b, conversion as c, function_ as f, uniform as u } from './create'
-import { is } from '../utils/helpers'
+import { is } from '../helpers'
 import type { Constants as C, Float, X, Y } from './types'
 export * from './build'
 export * from './create'
@@ -72,12 +72,8 @@ export const any = <T extends C>(x: X<T>) => f<'bool'>('any', x)
 
 // 2. Always return float with WGSL-compliant type constraints and unified parameter types
 export const determinant = <T extends 'mat2' | 'mat3' | 'mat4'>(x: X<T>) => f<'float'>('determinant', x)
-export const distance = <T extends 'vec2' | 'vec3' | 'vec4', U extends C>(x: X<T>, y: number | X<U>) =>
-        f<'float'>('distance', x, y)
-export const dot = <T extends 'vec2' | 'vec3' | 'vec4' | 'ivec2' | 'ivec3' | 'ivec4', U extends C>(
-        x: X<T>,
-        y: number | X<U>
-) => f<T extends `ivec${string}` ? 'int' : 'float'>('dot', x, y)
+export const distance = <T extends 'vec2' | 'vec3' | 'vec4', U extends C>(x: X<T>, y: number | X<U>) => f<'float'>('distance', x, y)
+export const dot = <T extends 'vec2' | 'vec3' | 'vec4' | 'ivec2' | 'ivec3' | 'ivec4', U extends C>(x: X<T>, y: number | X<U>) => f<T extends `ivec${string}` ? 'int' : 'float'>('dot', x, y)
 export const length = <T extends 'vec2' | 'vec3' | 'vec4'>(x: X<T>) => f<'float'>('length', x)
 export const lengthSq = (x: X) => f<'float'>('lengthSq', x)
 export const luminance = (x: X) => f<'float'>('luminance', x)
@@ -134,24 +130,16 @@ export const trunc = <T extends C>(x: X<T>) => f<T>('trunc', x)
 
 // 1. Functions where first argument determines return type with unified parameter types
 export const atan2 = <T extends C, U extends C>(x: X<T>, y: number | X<U>) => f<T>('atan2', x, y)
-export const clamp = <T extends C, U extends C>(x: X<T>, min: number | X<U>, max: number | X<U>) =>
-        f<T>('clamp', x, min, max)
+export const clamp = <T extends C, U extends C>(x: X<T>, min: number | X<U>, max: number | X<U>) => f<T>('clamp', x, min, max)
 export const max = <T extends C, U extends C>(x: X<T>, y: number | X<U>) => f<T>('max', x, y)
 export const min = <T extends C, U extends C>(x: X<T>, y: number | X<U>) => f<T>('min', x, y)
-export const mix = <T extends C, U extends C>(x: X<T>, y: number | X<U>, a: number | Float | X<U>) =>
-        f<T>('mix', x, y, a)
+export const mix = <T extends C, U extends C>(x: X<T>, y: number | X<U>, a: number | Float | X<U>) => f<T>('mix', x, y, a)
 export const pow = <T extends C, U extends C>(x: X<T>, y: number | X<U>) => f<T>('pow', x, y)
-export const reflect = <T extends 'vec2' | 'vec3' | 'vec4', U extends C>(I: X<T>, N: number | X<U>) =>
-        f<T>('reflect', I, N)
-export const refract = <T extends 'vec2' | 'vec3' | 'vec4', U extends C>(
-        I: X<T>,
-        N: number | X<U>,
-        eta: number | Float
-) => f<T>('refract', I, N, eta)
+export const reflect = <T extends 'vec2' | 'vec3' | 'vec4', U extends C>(I: X<T>, N: number | X<U>) => f<T>('reflect', I, N)
+export const refract = <T extends 'vec2' | 'vec3' | 'vec4', U extends C>(I: X<T>, N: number | X<U>, eta: number | Float) => f<T>('refract', I, N, eta)
 
 // 2. Functions where not first argument determines return type with unified parameter types
-export const smoothstep = <T extends C, U extends C>(e0: number | X<U>, e1: number | X<U>, x: X<T>) =>
-        f<T>('smoothstep', e0, e1, x)
+export const smoothstep = <T extends C, U extends C>(e0: number | X<U>, e1: number | X<U>, x: X<T>) => f<T>('smoothstep', e0, e1, x)
 export const step = <T extends C, U extends C>(edge: number | X<U>, x: X<T>) => f<T>('step', edge, x)
 export const mod = <T extends C, U extends C>(x: X<T>, y: number | X<U>) => {
         return (x as any).sub((x as any).div(y).floor().mul(y)) as X<T>

package/src/node/types.ts

@@ -1,5 +1,6 @@
 import { CONSTANTS, CONVERSIONS, FUNCTIONS, OPERATOR_KEYS, OPERATOR_TYPE_RULES } from './utils/const'
 import type { GL } from '../types'
+import type { Binding } from '../webgpu/utils'
 
 export type Constants = (typeof CONSTANTS)[number] | 'void'
 export type Conversions = (typeof CONVERSIONS)[number]
@@ -80,6 +81,7 @@ export interface NodeProps {
 
 export interface NodeContext {
         gl?: Partial<GL>
+        binding?: Binding
         label?: 'vert' | 'frag' | 'compute'
         isWebGL?: boolean
         units?: any // @TODO FIX

package/src/node/utils/index.ts

@@ -1,7 +1,7 @@
 import { infer } from './infer'
 import { parseArray, parseAttribHead, parseConstantHead, parseDeclare, parseDefine, parseGather, parseIf, parseLoop, parseScatter, parseStorageHead, parseStruct, parseStructHead, parseSwitch, parseTexture, parseUniformHead, parseVaryingHead } from './parse'
 import { getBluiltin, getConversions, getOperator, initNodeContext, isX, setupEvent } from './utils'
-import { is } from '../../utils/helpers'
+import { is } from '../../helpers'
 import { mod } from '..'
 import type { Constants as C, NodeContext, Y } from '../types'
 
@@ -114,7 +114,10 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
                 setupEvent(c, id, varType, target, x)
                 head = parseUniformHead(c, id, varType)
         }
-        if (type === 'storage') head = parseStorageHead(c, id, infer(target, c))
+        if (type === 'storage') {
+                setupEvent(c, id, type, target, x)
+                head = parseStorageHead(c, id, infer(target, c))
+        }
         if (type === 'constant') head = parseConstantHead(c, id, infer(target, c), code(x, c))
         if (head) {
                 c.code?.headers.set(id, head)

package/src/node/utils/infer.ts

@@ -1,12 +1,6 @@
 import { isConstants, isElement, isX, isSwizzle } from './utils'
-import {
-        BUILTIN_TYPES,
-        COMPONENT_COUNT_TO_TYPE,
-        FUNCTION_RETURN_TYPES,
-        getOperatorResultType,
-        validateOperatorTypes,
-} from './const'
-import { is, getStride } from '../../utils/helpers'
+import { BUILTIN_TYPES, COMPONENT_COUNT_TO_TYPE, FUNCTION_RETURN_TYPES, getOperatorResultType, validateOperatorTypes } from './const'
+import { is, getStride, isFloat32 } from '../../helpers'
 import type { Constants as C, NodeContext, X, Y } from '../types'
 
 const inferBuiltin = <T extends C>(id: string | undefined) => {
@@ -14,8 +8,7 @@ const inferBuiltin = <T extends C>(id: string | undefined) => {
 }
 
 const inferOperator = <T extends C>(L: T, R: T, op: string): T => {
-        if (!validateOperatorTypes(L, R, op))
-                console.warn(`GLRE Type Warning: Invalid operator '${op}' between types '${L}' and '${R}'`)
+        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
 }
 
@@ -23,15 +16,14 @@ 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
+        if (is.arr(x) || isFloat32(x)) return COMPONENT_COUNT_TO_TYPE[x.length as keyof typeof COMPONENT_COUNT_TO_TYPE] as T
         if (isElement(x)) return 'texture' as T
         return 'void' as T
 }
 
 const inferFromCount = <T extends C>(count: number) => {
         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)`
+        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
 }
 

package/src/node/utils/parse.ts

@@ -1,9 +1,9 @@
 import { code } from '.'
 import { infer } from './infer'
 import { getConversions, addDependency } from './utils'
-import { is } from '../../utils/helpers'
+import { is } from '../../helpers'
 import type { Constants, NodeContext, NodeProps, StructFields, Y } from '../types'
-import { storageSize } from '../../utils/program'
+import { storageSize } from '../../webgl/utils'
 
 export const parseArray = (children: Y[], c: NodeContext) => {
         return children
@@ -60,9 +60,7 @@ 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
-                ret += !isElse
-                        ? ` else if (${code(children[i], c)}) {\n${code(children[i + 1], c)}\n}`
-                        : ` else {\n${code(children[i], c)}\n}`
+                ret += !isElse ? ` else if (${code(children[i], c)}) {\n${code(children[i + 1], c)}\n}` : ` else {\n${code(children[i], c)}\n}`
         }
         return ret
 }
@@ -73,8 +71,7 @@ export const parseSwitch = (c: NodeContext, x: Y, children: Y[]) => {
                 const isDefault = i >= children.length - 1
                 if (isDefault && children.length % 2 === 0) {
                         ret += `default:\n${code(children[i], c)}\nbreak;\n`
-                } else if (i + 1 < children.length)
-                        ret += `case ${code(children[i], c)}:\n${code(children[i + 1], c)}\nbreak;\n`
+                } else if (i + 1 < children.length) ret += `case ${code(children[i], c)}:\n${code(children[i + 1], c)}\nbreak;\n`
         }
         ret += '}'
         return ret
@@ -157,14 +154,12 @@ export const parseDefine = (c: NodeContext, props: NodeProps, target: Y) => {
  * headers
  */
 export const parseVaryingHead = (c: NodeContext, id: string, type: Constants) => {
-        return c.isWebGL
-                ? `${type} ${id};`
-                : `@location(${c.code?.vertVaryings?.size || 0}) ${id}: ${getConversions(type, c)}`
+        return c.isWebGL ? `${type} ${id};` : `@location(${c.code?.vertVaryings?.size || 0}) ${id}: ${getConversions(type, 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 { location = 0 } = c.binding?.attrib(id) || {}
         const wgslType = getConversions(type, c)
         return `@location(${location}) ${id}: ${wgslType}`
 }
@@ -176,13 +171,10 @@ export const parseUniformHead = (c: NodeContext, id: string, type: Constants) =>
                         ? `uniform sampler2D ${id};`
                         : `uniform ${type} ${id};`
         if (isTexture) {
-                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 = 1, binding = 0 } = c.binding?.texture(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.gl?.webgpu?.uniforms.map.get(id) || {}
+        const { group = 0, binding = 0 } = c.binding?.uniform(id) || {}
         const wgslType = getConversions(type, c)
         return `@group(${group}) @binding(${binding}) var<uniform> ${id}: ${wgslType};`
 }
@@ -194,7 +186,7 @@ export const parseStorageHead = (c: NodeContext, id: string, type: Constants) =>
                 const location = c.units?.(id)
                 return `${ret}\nlayout(location = ${location}) out vec4 _${id};` // out texture buffer
         }
-        const { group = 0, binding = 0 } = c.gl?.webgpu?.storages.map.get(id) || {}
+        const { group = 0, binding = 0 } = c.binding?.storage(id) || {}
         const wgslType = getConversions(type, c)
         return `@group(${group}) @binding(${binding}) var<storage, read_write> ${id}: array<${wgslType}>;`
 }
@@ -204,24 +196,16 @@ export const parseLoop = (c: NodeContext, x: Y, y: Y, id: string) => {
         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}`
+                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}`
+        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}`
 }
 

package/src/node/utils/utils.ts

@@ -1,7 +1,7 @@
 import { CONSTANTS, CONVERSIONS, FUNCTIONS, OPERATOR_KEYS, OPERATORS, TYPE_MAPPING, WGSL_TO_GLSL_BUILTIN } from './const'
-import { is } from '../../utils/helpers'
-import type { Constants as C, Conversions, Functions, NodeContext, Operators, Swizzles, VaryingInfo, X, Y } from '../types'
-import { storageSize } from '../../utils/program'
+import { is, isFloat32 } from '../../helpers'
+import { storageSize } from '../../webgl/utils'
+import type { Constants as C, Conversions, Functions, NodeContext, Operators, Swizzles, X, Y } from '../types'
 
 export const isSwizzle = (key: unknown): key is Swizzles => {
         return is.str(key) && /^[xyzwrgbastpq]{1,4}$/.test(key)
@@ -103,28 +103,33 @@ export const addDependency = (c: NodeContext, id = '', type: string) => {
  */
 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)
+                if (type === 'attribute') return c.gl?.attribute?.bind(null, id as any)
+                if (type === 'instance') return c.gl?.instance?.bind(null, id as any)
+                if (type === 'texture') return c.gl?.texture?.bind(null, id as any)
+                if (type === 'storage') return c.gl?.storage?.bind(null, id as any)
                 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)
+        if (type === 'attribute') return c.gl?._attribute?.bind(null, id)
+        if (type === 'instance') return c.gl?._instance?.bind(null, id)
+        if (type === 'texture') return c.gl?._texture?.bind(null, id)
+        if (type === 'storage') return c.gl?._storage?.bind(null, id)
         return (value: any) => c.gl?._uniform?.(id, value)
 }
 
-const safeEventCall = <T extends C>(x: X<T>, fun: (value: unknown) => void) => {
+const safeEventCall = <T extends C>(x: X<T>, fun: (value: any) => 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())
+        if (is.arr(args[0])) return fun(args[0]) // for attribute(vec2([0, 0.73, -1, -1, 1, -1]))
+        if (isFloat32(args[0])) return fun(args[0]) // for storage(float(new Float32Array(1024)))
         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)
+        if (!fun) return
         safeEventCall(child, fun)
         target.listeners.add(fun)
         return fun

package/src/react.ts

@@ -1,17 +1,14 @@
 import { useState } from 'react'
-import { createGL, isGL } from './index'
+import { createGL } from './index'
 import type { GL } from './types'
 export * from './index'
 
-export const useGL = (props: Partial<GL> = {}) => {
-        return useState(() => {
-                const gl = isGL(props) ? props : createGL(props)
-                gl.ref = (el: HTMLCanvasElement | null) => {
-                        if (el) {
-                                gl.el = el
-                                gl.mount()
-                        } else gl.clean()
-                }
-                return gl
-        })[0]
+export const useGL = (...args: Partial<GL>[]) => {
+        const [, set] = useState(null) // for error boundary // ref: https://github.com/facebook/react/issues/14981
+        if (args[0] && !args[0].error)
+                args[0].error = (error = '') =>
+                        set(() => {
+                                throw new Error(error)
+                        })
+        return useState(() => createGL(...args))[0]
 }

package/src/solid.ts

@@ -1,14 +1,7 @@
-import { createGL, isGL } from './index'
+import { createGL } from './index'
 import type { GL } from './types'
 export * from './index'
 
-export const onGL = (props?: Partial<GL>) => {
-        const gl = isGL(props) ? props : createGL(props)
-        gl.ref = (el: HTMLCanvasElement | null) => {
-                if (el) {
-                        gl.el = el
-                        gl.mount()
-                } else gl.clean()
-        }
-        return gl
+export const onGL = (...args: Partial<GL>[]) => {
+        return createGL(...args)
 }