glre 0.39.0 → 0.41.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',
@@ -232,6 +232,7 @@ export const FUNCTIONS = [
         'floor',
         'fract',
         'fwidth',
+        'inverse',
         'inverseSqrt',
         'log',
         'log2',
@@ -241,7 +242,6 @@ export const FUNCTIONS = [
         'radians',
         'reciprocal',
         'round',
-        'saturate',
         'sign',
         'sin',
         'sinh',
@@ -249,6 +249,7 @@ export const FUNCTIONS = [
         'tan',
         'tanh',
         'trunc',
+        'saturate',
         // 1. Functions where first argument determines return type
         'atan2',
         'clamp',

package/src/node/utils/index.ts

@@ -7,6 +7,7 @@ import {
         parseDefine,
         parseGather,
         parseIf,
+        parseLoop,
         parseScatter,
         parseStorageHead,
         parseStruct,
@@ -16,8 +17,9 @@ import {
         parseUniformHead,
         parseVaryingHead,
 } from './parse'
-import { getBluiltin, getConversions, getEventFun, getOperator, initNodeContext, safeEventCall } from './utils'
+import { getBluiltin, getConversions, getOperator, initNodeContext, isElement, setupEvent } from './utils'
 import { is } from '../../utils/helpers'
+import { mod } from '..'
 import type { Constants as C, NodeContext, Y } from '../types'
 
 export * from './utils'
@@ -35,6 +37,7 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
                 return ret + '.0'
         }
         if (is.bol(target)) return target ? 'true' : 'false'
+        if (isElement(target)) throw `` // IGNORE
         if (!target) return ''
         const { type, props = {} } = target
         const { id = 'i', children = [], fields, initialValues } = props
@@ -62,14 +65,21 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
         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)})`
         }
         /**
@@ -80,10 +90,7 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
         if (type === 'return') return `return ${code(x, c)};`
         if (type === 'break') return 'break;'
         if (type === 'continue') return 'continue;'
-        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 === '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)
@@ -115,10 +122,8 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
                 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}`
         }
@@ -126,9 +131,7 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
         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,4 +1,4 @@
-import { isConstants, isX, isSwizzle } from './utils'
+import { isConstants, isElement, isX, isSwizzle } from './utils'
 import {
         BUILTIN_TYPES,
         COMPONENT_COUNT_TO_TYPE,
@@ -6,7 +6,7 @@ import {
         getOperatorResultType,
         validateOperatorTypes,
 } from './const'
-import { is } from '../../utils/helpers'
+import { is, getStride } from '../../utils/helpers'
 import type { Constants as C, NodeContext, X, Y } from '../types'
 
 const inferBuiltin = <T extends C>(id: string | undefined) => {
@@ -24,11 +24,15 @@ export const inferPrimitiveType = <T extends C>(x: Y<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
+        if (isElement(x)) return 'texture' 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: Y<T>[], c: NodeContext) => {
@@ -37,7 +41,7 @@ const inferFromArray = <T extends C>(arr: Y<T>[], c: NodeContext) => {
         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
 }
 
@@ -58,7 +62,14 @@ export const inferImpl = <T extends C>(target: X<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 (isX(x)) {

package/src/node/utils/parse.ts

@@ -3,6 +3,7 @@ import { infer } from './infer'
 import { getConversions, addDependency } from './utils'
 import { is } from '../../utils/helpers'
 import type { Constants, NodeContext, NodeProps, StructFields, Y } from '../types'
+import { storageSize } from '../../utils/program'
 
 export const parseArray = (children: Y[], c: NodeContext) => {
         return children
@@ -22,9 +23,9 @@ export const parseGather = (c: NodeContext, x: Y, y: Y, target: Y) => {
                 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()}`
 }
 
@@ -123,16 +124,13 @@ export const parseStruct = (c: NodeContext, id: string, instanceId = '', initial
 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: Y) => {
 /**
  * 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

@@ -9,6 +9,7 @@ import {
 } from './const'
 import { is } from '../../utils/helpers'
 import type { Constants as C, Conversions, Functions, NodeContext, 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)
@@ -22,6 +23,11 @@ export const isFunction = (key: unknown): key is Functions => {
         return FUNCTIONS.includes(key as Functions)
 }
 
+export const isElement = (x: unknown): x is Element => {
+        if (is.obj(x)) return false
+        return x instanceof Element
+}
+
 export const isConversion = (key: unknown): key is Conversions => {
         return CONVERSIONS.includes(key as Conversions)
 }
@@ -50,8 +56,8 @@ 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}`)
@@ -73,26 +79,6 @@ export const getConstant = (conversionKey: string): C => {
         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 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 initNodeContext = (c: NodeContext) => {
         if (c.code) return c
         c.code = {
@@ -119,3 +105,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
+}

package/src/types.ts

@@ -10,14 +10,17 @@ export type GL = EventState<{
         isWebGL: boolean
         isError: boolean
         isLoop: boolean
+        isDebug: boolean
+        isDepth: boolean
         isGL: true
         width?: number
         height?: number
         size: [number, number]
         mouse: [number, number]
         count: number
+        instanceCount: number
+        particleCount: number | [number, number] | [number, number, number]
         loading: number
-        particles: 64 | 256 | 576 | 1024 | 1600 | 2304 | 3136 | 4096 | 4096 | 5184 | 6400 // (8k)^2
         el: HTMLCanvasElement
         vs?: string | Vec4
         cs?: string | Void
@@ -46,7 +49,7 @@ export type GL = EventState<{
         error(e?: string): void
         render(): void
         resize(e?: Event): void
-        mousemove(e: Event): void
+        mousemove(e: MouseEvent): void
         loop(): void
 
         /**
@@ -55,18 +58,22 @@ export type GL = EventState<{
         _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL
         uniform(key: string, value: Uniform, isMatrix?: boolean): GL
         uniform(target: { [key: string]: Uniform }): GL
-        _texture?(key: string, value: string): GL
-        texture(key: string, value: string): GL
-        texture(target: { [key: string]: string }): GL
+        _texture?(key: string, value: Texture): GL
+        texture(key: string, value: Texture): GL
+        texture(target: { [key: string]: Texture }): GL
         _attribute?(key: string, value: Attribute, iboValue?: Attribute): GL
         attribute(key: string, value: Attribute, iboValue?: Attribute): GL
         attribute(target: { [key: string]: Attribute }): GL
+        _instance?(key: string, value: Attribute, at?: number): GL
+        instance(key: string, value: Attribute, at?: number): GL
+        instance(target: { [key: string]: Attribute }): GL
         _storage?(key: string, value: Storage): GL
         storage(key: string, value: Storage): GL
         storage(target: { [key: string]: Storage }): GL
 }>
 
 type Uniform = number | number[] | Float32Array
+type Texture = string | HTMLImageElement | HTMLVideoElement
 type Attribute = number[] | Float32Array
 type Storage = number[] | Float32Array
 
@@ -93,6 +100,7 @@ export interface AttribData {
         buffer: GPUBuffer
         location: number
         stride: number
+        isInstance?: boolean
 }
 
 export interface StorageData {

package/src/utils/helpers.ts

@@ -1,5 +1,3 @@
-import type { GL } from './../types'
-
 export const is = {
         arr: Array.isArray,
         bol: (a: unknown): a is boolean => typeof a === 'boolean',
@@ -49,12 +47,87 @@ export const isFloat32 = (value: unknown): value is Float32Array => {
         return value instanceof Float32Array
 }
 
-export const loadingImage = (gl: GL, src: string, fun: (source: HTMLImageElement) => void) => {
-        gl.loading++
+const loadingImage = (src: string, fun: (source: HTMLImageElement) => void) => {
         const source = new Image()
         Object.assign(source, { src, crossOrigin: 'anonymous' })
-        source.decode().then(() => {
-                fun(source)
-                gl.loading--
+        source.decode().then(() => fun(source))
+}
+
+const loadingVideo = (src: string, fun: (source: HTMLVideoElement) => void) => {
+        const source = document.createElement('video')
+        source.crossOrigin = 'anonymous'
+        source.muted = true
+        source.loop = true
+        source.src = src
+        source.load()
+        source.play()
+        source.addEventListener('canplay', fun.bind(null, source), { once: true })
+}
+
+export function loadingTexture(src: string, fun: (source: HTMLVideoElement, isVideo: true) => void): void
+
+export function loadingTexture(src: string, fun: (source: HTMLImageElement, isVideo: false) => void): void
+
+export function loadingTexture(src: string | HTMLImageElement | HTMLVideoElement, fun: Function) {
+        if (!is.str(src)) return fun(src, src instanceof HTMLVideoElement)
+        const isVideo = /\.(mp4|webm|ogg|avi|mov)$/i.test(src)
+        const loader = isVideo ? loadingVideo : loadingImage
+        loader(src, (el: HTMLImageElement | HTMLVideoElement) => {
+                fun(el as HTMLVideoElement, isVideo)
         })
 }
+const isValidStride = (stride: number) => [1, 2, 3, 4, 9, 16].includes(stride)
+
+const calcStride = (arrayLength: number, count = 3) => {
+        if (arrayLength % count === 0) return Math.floor(arrayLength / count)
+        return -1
+}
+
+export const getStride = (arrayLength: number, count = 1, error = console.warn) => {
+        const ret = calcStride(arrayLength, count)
+        if (!isValidStride(ret))
+                error(
+                        `glre attribute error: Invalid attribute length ${arrayLength}. Must divide by vertex count (${count}) with valid stride (1,2,3,4,9,16)`
+                )
+        return ret
+}
+
+export const GLSL_FS = /* cpp */ `
+#version 300 es
+precision mediump float;
+out vec4 fragColor;
+uniform vec2 iResolution;
+void main() {
+  fragColor = vec4(fract((gl_FragCoord.xy / iResolution)), 0.0, 1.0);
+}
+`
+
+export const GLSL_VS = /* cpp */ `
+#version 300 es
+void main() {
+  float x = float(gl_VertexID % 2) * 4.0 - 1.0;
+  float y = float(gl_VertexID / 2) * 4.0 - 1.0;
+  gl_Position = vec4(x, y, 0.0, 1.0);
+}`
+
+export const WGSL_VS = /* rust */ `
+struct In { @builtin(vertex_index) vertex_index: u32 }
+struct Out { @builtin(position) position: vec4f }
+@vertex
+fn main(in: In) -> Out {
+  var out: Out;
+  var x = f32(in.vertex_index % 2) * 4.0 - 1.0;
+  var y = f32(in.vertex_index / 2) * 4.0 - 1.0;
+  out.position = vec4f(x, y, 0.0, 1.0);
+  return out;
+}
+`.trim()
+
+export const WGSL_FS = /* rust */ `
+struct Out { @builtin(position) position: vec4f }
+@group(0) @binding(0) var<uniform> iResolution: vec2f;
+@fragment
+fn main(out: Out) -> @location(0) vec4f {
+  return vec4f(fract((out.position.xy / iResolution)), 0.0, 1.0);
+}
+`

package/src/utils/pipeline.ts

@@ -1,4 +1,4 @@
-import { isFloat32 } from './helpers'
+import { is, isFloat32 } from './helpers'
 import type { AttribData, TextureData, UniformData, StorageData } from '../types'
 
 /**
@@ -58,18 +58,21 @@ const getVertexFormat = (stride: number): GPUVertexFormat => {
         return 'float32'
 }
 
-export const createVertexBuffers = (attribs: Iterable<AttribData>) => {
+export const createVertexBuffers = (attribs: Iterable<AttribData & { isInstance?: boolean }>) => {
         const vertexBuffers: GPUBuffer[] = []
         const bufferLayouts: GPUVertexBufferLayout[] = []
-        for (const { buffer, location, stride } of attribs) {
+        for (const { buffer, location, stride, isInstance } of attribs) {
                 vertexBuffers[location] = buffer
+                const componentSize = Math.min(Math.max(Math.floor(stride), 1), 4)
+                const arrayStride = Math.max(4, Math.ceil((componentSize * 4) / 4) * 4)
                 bufferLayouts[location] = {
-                        arrayStride: stride * 4,
+                        arrayStride,
+                        stepMode: isInstance ? 'instance' : 'vertex',
                         attributes: [
                                 {
                                         shaderLocation: location,
                                         offset: 0,
-                                        format: getVertexFormat(stride),
+                                        format: getVertexFormat(componentSize),
                                 },
                         ],
                 }
@@ -203,3 +206,16 @@ export const createDepthTexture = (device: GPUDevice, width: number, height: num
                 usage: GPUTextureUsage.RENDER_ATTACHMENT,
         })
 }
+
+/**
+ * utils
+ */
+export const workgroupCount = (particleCount: number | number[], workgroupSize = 32) => {
+        if (is.num(particleCount)) particleCount = [particleCount]
+        const [x, y = 1, z = 1] = particleCount
+        return {
+                x: Math.min((x * y * z) / workgroupSize, 65535),
+                y: 1,
+                z: 1,
+        }
+}