glre 0.36.0 → 0.37.0

package/src/node/utils/const.ts

@@ -1,5 +1,30 @@
 export const SWIZZLES = ['x', 'y', 'z', 'w', 'r', 'g', 'b', 'a', 's', 't', 'p', 'q'] as const
 
+// Unified order with TYPE_MAPPING array
+export const CONVERSIONS = [
+        'toBool',
+        'toUint',
+        'toInt',
+        'toFloat',
+        'toBvec2',
+        'toIvec2',
+        'toUvec2',
+        'toVec2',
+        'toBvec3',
+        'toIvec3',
+        'toUvec3',
+        'toVec3',
+        'toBvec4',
+        'toIvec4',
+        'toUvec4',
+        'toVec4',
+        'toColor',
+        'toMat2',
+        'toMat3',
+        'toMat4',
+] as const
+
+// Unified order with CONVERSIONS array
 export const TYPE_MAPPING = {
         bool: 'bool',
         uint: 'u32',
@@ -28,29 +53,6 @@ export const TYPE_MAPPING = {
 
 export const CONSTANTS = Object.keys(TYPE_MAPPING) as unknown as keyof typeof TYPE_MAPPING
 
-export const CONVERSIONS = [
-        'toBool',
-        'toUint',
-        'toInt',
-        'toFloat',
-        'toBvec2',
-        'toIvec2',
-        'toUvec2',
-        'toVec2',
-        'toBvec3',
-        'toIvec3',
-        'toUvec3',
-        'toVec3',
-        'toBvec4',
-        'toIvec4',
-        'toUvec4',
-        'toVec4',
-        'toColor',
-        'toMat2',
-        'toMat3',
-        'toMat4',
-] as const
-
 export const OPERATORS = {
         add: '+',
         sub: '-',
@@ -74,84 +76,6 @@ export const OPERATORS = {
 
 export const OPERATOR_KEYS = Object.keys(OPERATORS) as (keyof typeof OPERATORS)[]
 
-// All shader functions (type inference now handled by inferFrom)
-export const FUNCTIONS = [
-        // Float return functions
-        'dot',
-        'distance',
-        'length',
-        'lengthSq',
-        'determinant',
-        'luminance',
-        // Bool return functions
-        'all',
-        'any',
-        // Component-wise functions (preserve input type)
-        'abs',
-        'sign',
-        'floor',
-        'ceil',
-        'round',
-        'fract',
-        'trunc',
-        'sin',
-        'cos',
-        'tan',
-        'asin',
-        'acos',
-        'atan',
-        'sinh',
-        'cosh',
-        'tanh',
-        'asinh',
-        'acosh',
-        'atanh',
-        'exp',
-        'exp2',
-        'log',
-        'log2',
-        'sqrt',
-        'inverseSqrt',
-        'normalize',
-        'oneMinus',
-        'saturate',
-        'negate',
-        'reciprocal',
-        'dFdx',
-        'dFdy',
-        'fwidth',
-        'degrees',
-        'radians',
-        // Vector functions
-        'cross',
-        'reflect',
-        'refract',
-        // Multi-argument functions
-        'min',
-        'max',
-        'mix',
-        'clamp',
-        'step',
-        'smoothstep',
-        'pow',
-        'atan2',
-        // Texture functions
-        'texture',
-        'textureLod',
-        'textureSize',
-        'cubeTexture',
-        // Utility functions
-        'faceforward',
-        'bitcast',
-        'cbrt',
-        'difference',
-        'equals',
-        'pow2',
-        'pow3',
-        'pow4',
-        'transformDirection',
-] as const
-
 export const COMPONENT_COUNT_TO_TYPE = {
         1: 'float',
         2: 'vec2',
@@ -161,24 +85,6 @@ export const COMPONENT_COUNT_TO_TYPE = {
         16: 'mat4',
 } as const
 
-// Function return type mapping for method chaining
-export const FUNCTION_RETURN_TYPES = {
-        // Always return vec4
-        texture: 'vec4',
-        cubeTexture: 'vec4',
-        textureSize: 'vec4',
-        // Always return float
-        length: 'float',
-        lengthSq: 'float',
-        distance: 'float',
-        dot: 'float',
-        // Always return bool
-        all: 'bool',
-        any: 'bool',
-        // Always return vec3
-        cross: 'vec3',
-} as const
-
 export const BUILTIN_TYPES = {
         // WGSL builtin variables
         position: 'vec4',
@@ -189,6 +95,7 @@ export const BUILTIN_TYPES = {
         sample_index: 'uint',
         sample_mask: 'uint',
         point_coord: 'vec2',
+        global_invocation_id: 'uvec3',
 
         // TSL compatible variables
         positionLocal: 'vec3',
@@ -238,3 +145,88 @@ export const WGSL_TO_GLSL_BUILTIN = {
         point_coord: 'gl_PointCoord',
         uv: 'gl_FragCoord.xy',
 } as const
+
+/**
+ * 2.1. unified with:
+ * 1.1. index.ts functions and
+ * 3.1. types.ts BaseNodeProxy
+ */
+// Function return type mapping for method chaining
+export const FUNCTION_RETURN_TYPES = {
+        // 0. Always return bool
+        all: 'bool',
+        any: 'bool',
+        // 2. Always return float
+        determinant: 'float',
+        distance: 'float',
+        dot: 'float',
+        length: 'float',
+        lengthSq: 'float',
+        luminance: 'float',
+        // 3. Always return vec3
+        cross: 'vec3',
+        // 4. Always return vec4
+        cubeTexture: 'vec4',
+        texture: 'vec4',
+        texelFetch: 'vec4',
+        textureLod: 'vec4',
+} as const
+
+/**
+ * 2.2. unified with:
+ * 1.2. index.ts functions and
+ * 3.2. types.ts BaseNodeProxy
+ */
+// All shader functions (type inference now handled by inferFrom)
+export const FUNCTIONS = [
+        ...(Object.keys(FUNCTION_RETURN_TYPES) as (keyof typeof FUNCTION_RETURN_TYPES)[]),
+        // 0. Component-wise functions
+        'abs',
+        'acos',
+        'acosh',
+        'asin',
+        'asinh',
+        'atan',
+        'atanh',
+        'ceil',
+        'cos',
+        'cosh',
+        'dFdx',
+        'dFdy',
+        'degrees',
+        'exp',
+        'exp2',
+        'floor',
+        'fract',
+        'fwidth',
+        'inverseSqrt',
+        'log',
+        'log2',
+        'negate',
+        'normalize',
+        'oneMinus',
+        'radians',
+        'reciprocal',
+        'round',
+        'saturate',
+        'sign',
+        'sin',
+        'sinh',
+        'sqrt',
+        'tan',
+        'tanh',
+        'trunc',
+        // 1. Functions where first argument determines return type
+        'atan2',
+        'clamp',
+        'max',
+        'min',
+        'mix',
+        'pow',
+        'reflect',
+        'refract',
+        // 2. Functions where not first argument determines return type
+        'smoothstep',
+        'step',
+        // @NOTE: mod is operator
+] as const

package/src/node/utils/index.ts

@@ -5,13 +5,16 @@ import {
         parseConstantHead,
         parseDeclare,
         parseDefine,
+        parseGather,
         parseIf,
+        parseScatter,
+        parseStorageHead,
         parseStruct,
         parseStructHead,
         parseSwitch,
         parseTexture,
-        parseVaryingHead,
         parseUniformHead,
+        parseVaryingHead,
 } from './parse'
 import { getBluiltin, getOperator, getConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
 import { is } from '../../utils/helpers'
@@ -42,6 +45,16 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'variable') return id
         if (type === 'member') return `${code(x, c)}.${code(y, c)}`
         if (type === 'element') return `${code(x, c)}[${code(y, c)}]`
+        if (type === 'gather')
+                return c.isWebGL //
+                        ? parseGather(c, x, y, target)
+                        : `${code(x, c)}[${code(y, c)}]`
+        if (type === 'scatter') {
+                const [storageNode, indexNode] = x.props.children ?? [] // x is gather node
+                return c.isWebGL
+                        ? parseScatter(c, storageNode, y) // indexNode is not using
+                        : `${code(storageNode, c)}[${code(indexNode, c)}] = ${code(y, c)};`
+        }
         if (type === 'ternary')
                 return c.isWebGL
                         ? `(${code(z, c)} ? ${code(x, c)} : ${code(y, c)})`
@@ -91,12 +104,12 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
                 return c.isWebGL ? `${id}` : `out.${id}`
         }
         if (type === 'builtin') {
-                if (c.isWebGL) return getBluiltin(id)
+                if (c.isWebGL) return getBluiltin(c, id)
                 if (id === 'position') return 'out.position'
                 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)
+                if (c.label === 'compute') c.code?.computeInputs.set(id, field)
+                else if (c.label === 'frag') c.code?.fragInputs.set(id, field)
+                else if (c.label === 'vert') c.code?.vertInputs.set(id, field)
                 return `in.${id}`
         }
         if (type === 'attribute') {
@@ -115,6 +128,7 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
                 target.listeners.add(fun)
                 head = parseUniformHead(c, id, varType)
         }
+        if (type === 'storage') 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

@@ -31,14 +31,6 @@ 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
@@ -74,9 +66,12 @@ export const inferImpl = <T extends C>(target: NodeProxy<T>, c: NodeContext): T
         if (type === 'ternary') return inferOperator(infer(y, c), infer(z, c), 'add')
         if (type === 'builtin') return inferBuiltin(id)
         if (type === 'function') return inferFunction(x) || infer(y, c)
-        if (type === 'define' && isConstants(layout?.type)) return layout?.type as T
+        if (type === 'define') {
+                if (isConstants(layout?.type)) return layout?.type as 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 === 'element') return inferArrayElement(infer(x, c) as T)
         if (type === 'member') {
                 if (isSwizzle(y)) return inferFromCount(y.length)
                 if (isNodeProxy(x)) {
@@ -86,7 +81,7 @@ export const inferImpl = <T extends C>(target: NodeProxy<T>, c: NodeContext): T
                 return 'float' as T // fallback @TODO FIX
         }
         if (inferFrom) return inferFromArray(inferFrom, c)
-        return infer(x, c) // for uniform
+        return infer(x, c) // for uniform and storage gather and scatter
 }
 
 export const infer = <T extends C>(target: X<T>, c?: NodeContext | null): T => {

package/src/node/utils/parse.ts

@@ -11,6 +11,35 @@ export const parseArray = (children: X[], c: NodeContext) => {
                 .join(', ')
 }
 
+// only for webgl
+export const parseGather = (c: NodeContext, x: X, y: X, target: X) => {
+        const parseSwizzle = () => {
+                const valueType = infer(target, c)
+                if (valueType === 'float') return '.x'
+                if (valueType === 'vec2') return '.xy'
+                if (valueType === 'vec3') return '.xyz'
+                if (valueType === 'vec4') return ''
+                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}`
+        return `texelFetch(${code(x, c)}, ivec2(${coordX}, ${coordY}), 0)${parseSwizzle()}`
+}
+
+// only for webgl
+export const parseScatter = (c: NodeContext, storageNode: X, valueNode: X) => {
+        const storageId = code(storageNode, c)
+        const valueCode = code(valueNode, c)
+        const valueType = infer(valueNode, c)
+        if (valueType === 'float') return `_${storageId} = vec4(${valueCode}, 0.0, 0.0, 1.0);`
+        if (valueType === 'vec2') return `_${storageId} = vec4(${valueCode}, 0.0, 1.0);`
+        if (valueType === 'vec3') return `_${storageId} = vec4(${valueCode}, 1.0);`
+        if (valueType === 'vec4') return `_${storageId} = ${valueCode};`
+        throw new Error(`Unsupported storage scatter type: ${valueType}`)
+}
+
 export const parseTexture = (c: NodeContext, y: X, z: X, w: X) => {
         if (c.isWebGL) {
                 const args = w ? [y, z, w] : [y, z]
@@ -118,7 +147,10 @@ export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Consta
                 ret.push(`${returnType} ${id}(${params}) {`)
         } else {
                 for (const [paramId, type] of argParams) params.push(`${paramId}: ${getConversions(type, c)}`)
-                ret.push(`fn ${id}(${params}) -> ${getConversions(returnType, c)} {`)
+                const isVoid = returnType === 'void'
+                if (isVoid) {
+                        ret.push(`fn ${id}(${params}) {`)
+                } else ret.push(`fn ${id}(${params}) -> ${getConversions(returnType, c)} {`)
         }
         const scopeCode = code(x, c)
         if (scopeCode) ret.push(scopeCode)
@@ -135,6 +167,13 @@ export const parseVaryingHead = (c: NodeContext, id: string, type: string) => {
                 : `@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 wgslType = getConversions(type, c)
+        return `@location(${location}) ${id}: ${wgslType}`
+}
+
 export const parseUniformHead = (c: NodeContext, id: string, type: Constants) => {
         const isTexture = type === 'sampler2D' || type === 'texture'
         if (c.isWebGL)
@@ -153,11 +192,16 @@ export const parseUniformHead = (c: NodeContext, id: string, type: Constants) =>
         return `@group(${group}) @binding(${binding}) var<uniform> ${id}: ${wgslType};`
 }
 
-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) || {}
+export const parseStorageHead = (c: NodeContext, id: string, type: Constants) => {
+        if (c.isWebGL) {
+                const ret = `uniform sampler2D ${id};`
+                if (c.label !== 'compute') return ret
+                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 wgslType = getConversions(type, c)
-        return `@location(${location}) ${id}: ${wgslType}`
+        return `@group(${group}) @binding(${binding}) var<storage, read_write> ${id}: array<${wgslType}>;`
 }
 
 export const parseConstantHead = (c: NodeContext, id: string, type: Constants, value: string) => {

package/src/node/utils/utils.ts

@@ -48,8 +48,14 @@ let count = 0
 
 export const getId = () => `x${count++}`
 
-export const getBluiltin = (id: string) => {
-        return WGSL_TO_GLSL_BUILTIN[id as keyof typeof WGSL_TO_GLSL_BUILTIN]
+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 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) => {
@@ -95,6 +101,7 @@ export const initNodeContext = (c: NodeContext) => {
                 vertInputs: new Map(),
                 vertOutputs: new Map(),
                 vertVaryings: new Map(),
+                computeInputs: new Map(),
                 dependencies: new Map(),
         }
         if (c.isWebGL) return c

package/src/types.ts

@@ -18,6 +18,7 @@ export type GL = EventState<{
         mouse: [number, number]
         count: number
         loading: number
+        particles: 64 | 256 | 576 | 1024 | 1600 | 2304 | 3136 | 4096 | 4096 | 5184 | 6400 // (8k)^2
         el: HTMLCanvasElement
         vs?: string | Vec4
         cs?: string | Vec4
@@ -117,4 +118,5 @@ export interface WebGPUState {
 export interface WebGLState {
         context: WebGLRenderingContext
         program: WebGLProgram
+        storages: any
 }

package/src/utils/program.ts

@@ -1,6 +1,4 @@
-import { fragment, vertex } from '../node'
 import { is } from './helpers'
-import type { X } from '../node'
 import type { GL } from '../types'
 
 const createShader = (c: WebGLRenderingContext, source: string, type: number, onError = console.warn) => {
@@ -14,17 +12,13 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number, on
         onError(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vert: X, frag: X, gl: GL) => {
-        if (!vert || !frag) return
-        const config = { isWebGL: true, gl }
-        frag = fragment(frag, config) // needs to be before vertex
-        vert = vertex(vert, config)
+export const createProgram = (c: WebGLRenderingContext, frag: string, vert: string, gl: GL) => {
         const pg = c.createProgram()
-        const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
         const fs = createShader(c, frag, c.FRAGMENT_SHADER, gl.error)
+        const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
         if (!fs || !vs) return
-        c.attachShader(pg, vs!)
         c.attachShader(pg, fs!)
+        c.attachShader(pg, vs!)
         c.linkProgram(pg)
         if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
         const error = c.getProgramInfoLog(pg)
@@ -93,20 +87,70 @@ export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, l
         c.bindTexture(c.TEXTURE_2D, texture)
 }
 
-export const createStorage = (c: WebGL2RenderingContext, size: number, storage: any, array: any) => {
-        const data = new Float32Array(size * size * 4)
-        for (let i = 0; i < array.length; i++) data[i * 4] = array[i]
-        c.activeTexture(c.TEXTURE0 + storage.unit)
-        c.bindTexture(c.TEXTURE_2D, storage.a.texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, data)
+/**
+ * for gpgpu
+ */
+interface TextureBuffer {
+        texture: WebGLTexture
+        buffer: WebGLFramebuffer
+}
+
+export const createStorage = (
+        c: WebGL2RenderingContext,
+        value: number[],
+        size: number,
+        ping: TextureBuffer,
+        pong: TextureBuffer,
+        unit: number,
+        array: Float32Array
+) => {
+        const particles = size * size
+        const vectorSize = value.length / particles
+        for (let i = 0; i < particles; i++) {
+                for (let j = 0; j < Math.min(vectorSize, 4); j++) {
+                        array[4 * i + j] = value[i * vectorSize + j] || 0
+                }
+        }
+        c.activeTexture(c.TEXTURE0 + unit)
+        c.bindTexture(c.TEXTURE_2D, ping.texture)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, array)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MIN_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MAG_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
-        c.bindTexture(c.TEXTURE_2D, storage.b.texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, null)
+        c.bindTexture(c.TEXTURE_2D, pong.texture)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, array)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MIN_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MAG_FILTER, c.NEAREST)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
 }
+
+export const cleanStorage = (
+        c: WebGL2RenderingContext,
+        map: Iterable<{ ping: TextureBuffer; pong: TextureBuffer }>
+) => {
+        for (const { ping, pong } of map) {
+                c.deleteTexture(ping.texture)
+                c.deleteTexture(pong.texture)
+                c.deleteFramebuffer(ping.buffer)
+                c.deleteFramebuffer(pong.buffer)
+        }
+}
+
+export const createAttachment = (
+        c: WebGL2RenderingContext,
+        i: TextureBuffer,
+        o: TextureBuffer,
+        loc: WebGLUniformLocation,
+        unit: number,
+        index: number
+) => {
+        c.activeTexture(c.TEXTURE0 + unit)
+        c.bindTexture(c.TEXTURE_2D, i.texture)
+        c.uniform1i(loc, unit)
+        if (index === 0) c.bindFramebuffer(c.FRAMEBUFFER, o.buffer)
+        const attachment = c.COLOR_ATTACHMENT0 + index
+        c.framebufferTexture2D(c.FRAMEBUFFER, attachment, c.TEXTURE_2D, o.texture, 0)
+        return attachment
+}