glre 0.46.0 → 0.48.0

package/dist/react.d.ts

@@ -69,28 +69,6 @@ declare const OPERATOR_TYPE_RULES: readonly [readonly ["float", "vec2", "vec2"],
  */
 declare const FUNCTIONS: readonly [...("texture" | "all" | "any" | "determinant" | "distance" | "dot" | "length" | "lengthSq" | "luminance" | "cross" | "cubeTexture" | "texelFetch" | "textureLod")[], "abs", "acos", "acosh", "asin", "asinh", "atan", "atanh", "ceil", "cos", "cosh", "dFdx", "dFdy", "degrees", "exp", "exp2", "floor", "fract", "fwidth", "inverse", "inverseSqrt", "log", "log2", "negate", "normalize", "oneMinus", "radians", "reciprocal", "round", "sign", "sin", "sinh", "sqrt", "tan", "tanh", "trunc", "saturate", "atan2", "clamp", "max", "min", "mix", "pow", "reflect", "refract", "smoothstep", "step"];
 
-/**
- * binding
- */
-declare const createBinding: () => {
-    uniform: reev.Nested<{
-        group: number;
-        binding: number;
-    }, []>;
-    texture: reev.Nested<{
-        group: number;
-        binding: number;
-    }, []>;
-    storage: reev.Nested<{
-        group: number;
-        binding: number;
-    }, []>;
-    attrib: reev.Nested<{
-        location: number;
-    }, []>;
-};
-type Binding = ReturnType<typeof createBinding>;
-
 type Constants = (typeof CONSTANTS)[number] | 'void';
 type Conversions = (typeof CONVERSIONS)[number];
 type Functions = (typeof FUNCTIONS)[number];
@@ -123,7 +101,6 @@ interface NodeProps {
 }
 interface NodeContext {
     gl?: Partial<GL>;
-    binding?: Binding;
     label?: 'vert' | 'frag' | 'compute';
     isWebGL?: boolean;
     units?: any;
@@ -408,6 +385,28 @@ interface _X<T extends C> {
     step<U extends C>(edge: number | X<U>): X<InferOperator<T, U>>;
 }
 
+/**
+ * binding
+ */
+declare const createBinding: () => {
+    uniform: reev.Nested<{
+        group: number;
+        binding: number;
+    }, []>;
+    texture: reev.Nested<{
+        group: number;
+        binding: number;
+    }, []>;
+    storage: reev.Nested<{
+        group: number;
+        binding: number;
+    }, []>;
+    attrib: reev.Nested<{
+        location: number;
+    }, []>;
+};
+type Binding = ReturnType<typeof createBinding>;
+
 type GL = EventState<{
     /**
      * initial value
@@ -445,7 +444,9 @@ type GL = EventState<{
     gpu: GPUCanvasContext;
     device: GPUDevice;
     format: GPUTextureFormat;
-    encoder: GPUCommandEncoder;
+    passEncoder: GPURenderPassEncoder;
+    commandEncoder: GPUCommandEncoder;
+    depthTexture?: GPUTexture;
     binding: Binding;
     /**
      * core state
@@ -499,10 +500,10 @@ type Storage = number[] | Float32Array;
  * for webgpu
  */
 interface UniformData {
-    array: Float32Array;
-    buffer: GPUBuffer;
     binding: number;
     group: number;
+    array: Float32Array;
+    buffer: GPUBuffer;
 }
 interface TextureData {
     binding: number;

package/dist/solid.d.ts

@@ -69,28 +69,6 @@ declare const OPERATOR_TYPE_RULES: readonly [readonly ["float", "vec2", "vec2"],
  */
 declare const FUNCTIONS: readonly [...("texture" | "all" | "any" | "determinant" | "distance" | "dot" | "length" | "lengthSq" | "luminance" | "cross" | "cubeTexture" | "texelFetch" | "textureLod")[], "abs", "acos", "acosh", "asin", "asinh", "atan", "atanh", "ceil", "cos", "cosh", "dFdx", "dFdy", "degrees", "exp", "exp2", "floor", "fract", "fwidth", "inverse", "inverseSqrt", "log", "log2", "negate", "normalize", "oneMinus", "radians", "reciprocal", "round", "sign", "sin", "sinh", "sqrt", "tan", "tanh", "trunc", "saturate", "atan2", "clamp", "max", "min", "mix", "pow", "reflect", "refract", "smoothstep", "step"];
 
-/**
- * binding
- */
-declare const createBinding: () => {
-    uniform: reev.Nested<{
-        group: number;
-        binding: number;
-    }, []>;
-    texture: reev.Nested<{
-        group: number;
-        binding: number;
-    }, []>;
-    storage: reev.Nested<{
-        group: number;
-        binding: number;
-    }, []>;
-    attrib: reev.Nested<{
-        location: number;
-    }, []>;
-};
-type Binding = ReturnType<typeof createBinding>;
-
 type Constants = (typeof CONSTANTS)[number] | 'void';
 type Conversions = (typeof CONVERSIONS)[number];
 type Functions = (typeof FUNCTIONS)[number];
@@ -123,7 +101,6 @@ interface NodeProps {
 }
 interface NodeContext {
     gl?: Partial<GL>;
-    binding?: Binding;
     label?: 'vert' | 'frag' | 'compute';
     isWebGL?: boolean;
     units?: any;
@@ -408,6 +385,28 @@ interface _X<T extends C> {
     step<U extends C>(edge: number | X<U>): X<InferOperator<T, U>>;
 }
 
+/**
+ * binding
+ */
+declare const createBinding: () => {
+    uniform: reev.Nested<{
+        group: number;
+        binding: number;
+    }, []>;
+    texture: reev.Nested<{
+        group: number;
+        binding: number;
+    }, []>;
+    storage: reev.Nested<{
+        group: number;
+        binding: number;
+    }, []>;
+    attrib: reev.Nested<{
+        location: number;
+    }, []>;
+};
+type Binding = ReturnType<typeof createBinding>;
+
 type GL = EventState<{
     /**
      * initial value
@@ -445,7 +444,9 @@ type GL = EventState<{
     gpu: GPUCanvasContext;
     device: GPUDevice;
     format: GPUTextureFormat;
-    encoder: GPUCommandEncoder;
+    passEncoder: GPURenderPassEncoder;
+    commandEncoder: GPUCommandEncoder;
+    depthTexture?: GPUTexture;
     binding: Binding;
     /**
      * core state
@@ -499,10 +500,10 @@ type Storage = number[] | Float32Array;
  * for webgpu
  */
 interface UniformData {
-    array: Float32Array;
-    buffer: GPUBuffer;
     binding: number;
     group: number;
+    array: Float32Array;
+    buffer: GPUBuffer;
 }
 interface TextureData {
     binding: number;

package/package.json

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

package/src/helpers.ts

@@ -64,9 +64,9 @@ const calcStride = (arrayLength: number, count = 3) => {
         return -1
 }
 
-export const getStride = (arrayLength: number, count = 1, error = console.warn) => {
+export const getStride = (arrayLength: number, count = 1, error = console.warn, id = '') => {
         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)`)
+        if (!isValidStride(ret)) error(`glre attribute error: Invalid attribute length ${arrayLength}, ${id ? `${id} ` : ' '}must divide by vertex count (${count}) with valid stride (1,2,3,4,9,16)`)
         return ret
 }
 

package/src/index.ts

@@ -55,17 +55,19 @@ export const createGL = (...args: Partial<GL>[]) => {
                 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) {
+                for (let i = 0; i < args.length; i++) {
+                        const arg = args[i]
                         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.triangleCount = arg.triangleCount || 2
                         gl.instanceCount = arg.instanceCount || 1
                         gl.particleCount = arg.particleCount || 1024
+                        gl.count = arg.count || gl.triangleCount * 3 || 6
                         gl(arg)
                         if (is.bol(arg.isWebGL)) gl.isWebGL = arg.isWebGL || !isWebGPUSupported()
                         if (gl.isWebGL) webgl(gl)
-                        else await webgpu(gl)
+                        else await webgpu(gl, i === args.length - 1)
                         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

package/src/node/types.ts

@@ -1,6 +1,5 @@
 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]
@@ -81,7 +80,6 @@ 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

@@ -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,6 +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 '../../helpers'
+import { is, getStride, isFloat32 } from '../../helpers'
 import type { Constants as C, NodeContext, X, Y } from '../types'
 
 const inferBuiltin = <T extends C>(id: string | undefined) => {
@@ -16,14 +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 inferFromCount = <T extends C>(count: number, error = console.warn, id = '') => {
         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) console.warn(`glre node system error: Cannot infer ${id ? `${id} ` : ''} type from array length ${count}. Check your data size. Supported: 1(float), 2(vec2), 3(vec3), 4(vec4), 9(mat3), 16(mat4)`)
         return ret
 }
 
@@ -54,16 +54,15 @@ 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)) {
-                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 === 'attribute' || type === 'instance')
+                if (is.arr(x)) {
+                        const count = type === 'instance' ? c.gl?.instanceCount : c.gl?.count
+                        const stride = getStride(x.length, count, c.gl?.error, id)
+                        return inferFromCount(stride, c.gl?.error, id)
+                }
+
         if (type === 'member') {
-                if (isSwizzle(y)) return inferFromCount(y.length)
+                if (isSwizzle(y)) return inferFromCount(y.length, c.gl?.error, id)
                 if (isX(x)) {
                         const structType = infer(x, c)
                         const fields = c.code?.structStructFields?.get(structType)
@@ -78,7 +77,7 @@ export const inferImpl = <T extends C>(target: X<T>, c: NodeContext): T => {
 export const infer = <T extends C>(target: Y<T>, c?: NodeContext | null): T => {
         if (!c) c = {}
         if (!isX(target)) return inferPrimitiveType(target)
-        if (is.arr(target)) return inferFromCount(target.length)
+        if (is.arr(target)) return inferFromCount(target.length, c.gl?.error, target.props.id)
         if (!c.infers) c.infers = new WeakMap<X<T>, C>()
         if (c.infers.has(target)) return c.infers.get(target) as T
         const ret = inferImpl(target, c)

package/src/node/utils/parse.ts

@@ -2,8 +2,8 @@ import { code } from '.'
 import { infer } from './infer'
 import { getConversions, addDependency } from './utils'
 import { is } from '../../helpers'
-import type { Constants, NodeContext, NodeProps, StructFields, Y } from '../types'
 import { storageSize } from '../../webgl/utils'
+import type { Constants, NodeContext, NodeProps, StructFields, Y } from '../types'
 
 export const parseArray = (children: Y[], c: NodeContext) => {
         return children
@@ -159,7 +159,7 @@ export const parseVaryingHead = (c: NodeContext, id: string, type: Constants) =>
 
 export const parseAttribHead = (c: NodeContext, id: string, type: Constants) => {
         if (c.isWebGL) return `${type} ${id};`
-        const { location = 0 } = c.binding?.attrib(id) || {}
+        const { location = 0 } = c.gl?.binding?.attrib(id) || {}
         const wgslType = getConversions(type, c)
         return `@location(${location}) ${id}: ${wgslType}`
 }
@@ -171,10 +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.binding?.texture(id) || {}
+                const { group = 1, binding = 0 } = c.gl?.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.binding?.uniform(id) || {}
+        const { group = 0, binding = 0 } = c.gl?.binding?.uniform(id) || {}
         const wgslType = getConversions(type, c)
         return `@group(${group}) @binding(${binding}) var<uniform> ${id}: ${wgslType};`
 }
@@ -186,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.binding?.storage(id) || {}
+        const { group = 0, binding = 0 } = c.gl?.binding?.storage(id) || {}
         const wgslType = getConversions(type, c)
         return `@group(${group}) @binding(${binding}) var<storage, read_write> ${id}: array<${wgslType}>;`
 }

package/src/node/utils/utils.ts

@@ -1,5 +1,5 @@
 import { CONSTANTS, CONVERSIONS, FUNCTIONS, OPERATOR_KEYS, OPERATORS, TYPE_MAPPING, WGSL_TO_GLSL_BUILTIN } from './const'
-import { is } from '../../helpers'
+import { is, isFloat32 } from '../../helpers'
 import { storageSize } from '../../webgl/utils'
 import type { Constants as C, Conversions, Functions, NodeContext, Operators, Swizzles, X, Y } from '../types'
 
@@ -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/types.ts

@@ -18,7 +18,7 @@ export type GL = EventState<{
         height?: number
         size: [number, number]
         mouse: [number, number]
-        count: number
+        count: number // triangleCount × 3
         triangleCount: number
         instanceCount: number
         particleCount: number | [number, number] | [number, number, number]
@@ -40,7 +40,9 @@ export type GL = EventState<{
         gpu: GPUCanvasContext
         device: GPUDevice
         format: GPUTextureFormat
-        encoder: GPUCommandEncoder
+        passEncoder: GPURenderPassEncoder
+        commandEncoder: GPUCommandEncoder
+        depthTexture?: GPUTexture
         binding: Binding
 
         /**
@@ -91,10 +93,10 @@ type Storage = number[] | Float32Array
  * for webgpu
  */
 export interface UniformData {
-        array: Float32Array
-        buffer: GPUBuffer
         binding: number
         group: number
+        array: Float32Array
+        buffer: GPUBuffer
 }
 
 export interface TextureData {

package/src/webgl/compute.ts

@@ -4,17 +4,17 @@ import { GLSL_VS, is } from '../helpers'
 import type { GL } from '../types'
 
 export const compute = (gl: GL) => {
-        if (!gl.cs) return
-        const c = gl.gl
+        let { cs, particleCount, gl: c } = gl
+        if (!cs) return
         c.getExtension('EXT_color_buffer_float') // Enable high precision GPGPU by writing to float textures
 
         let _texture = 0 // for texture active units
         let _storage = 0 // for storage current num
 
         const units = nested(() => _texture++)
-        const cs = is.str(gl.cs) ? gl.cs : gl.cs!.compute({ isWebGL: true, gl, units })
+        cs = is.str(cs) ? cs : cs!.compute({ isWebGL: true, gl, units })
         const pg = createProgram(c, cs, GLSL_VS, gl)!
-        const size = storageSize(gl.particleCount)
+        const size = storageSize(particleCount)
 
         const uniforms = nested((key) => c.getUniformLocation(pg, key)!)
         const storages = nested((key) => {

package/src/webgl/graphic.ts

@@ -4,17 +4,17 @@ import { createBuffer, createProgram, createTexture, updateAttrib, updateBuffer,
 import type { GL } from '../types'
 
 export const graphic = (gl: GL) => {
+        let { fs, vs, gl: c } = gl // @TODO Save this WebGPU instance's count (overwritten per args) but no change now for top page
         const config = { isWebGL: true, gl }
-        const c = gl.gl
-        const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : GLSL_FS
-        const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : GLSL_VS
+        fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : GLSL_FS
+        vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : GLSL_VS
         const pg = createProgram(c, fs, vs, gl)!
         let activeUnit = 0
 
         const units = nested(() => activeUnit++)
         const uniforms = nested((key) => c.getUniformLocation(pg, key))
         const attributes = nested((key, value: number[], isInstance = false) => {
-                const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.triangleCount, gl.error)
+                const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.count, gl.error, key)
                 return { stride, location: c.getAttribLocation(pg, key), ...createBuffer(c, value) }
         })
 
@@ -56,8 +56,8 @@ export const graphic = (gl: GL) => {
         gl('render', () => {
                 c.useProgram((gl.program = pg))
                 if (gl.instanceCount > 1) {
-                        c.drawArraysInstanced(c.TRIANGLES, 0, gl.triangleCount, gl.instanceCount)
-                } else c.drawArrays(c.TRIANGLES, 0, gl.triangleCount)
+                        c.drawArraysInstanced(c.TRIANGLES, 0, gl.count, gl.instanceCount)
+                } else c.drawArrays(c.TRIANGLES, 0, gl.count)
                 c.bindFramebuffer(c.FRAMEBUFFER, null)
         })
 }

package/src/webgpu/compute.ts

@@ -1,14 +1,14 @@
 import { nested } from 'reev'
 import { createBuffer, updateBuffer, workgroupCount } from './utils'
-import type { Binding } from './utils'
 import type { GL } from '../types'
 
-export const compute = (gl: GL, bindings: Binding) => {
+export const compute = (gl: GL) => {
+        const { particleCount } = gl // Save this WebGPU instance's particleCount (overwritten per args)
         let pipeline: GPUComputePipeline | undefined
         let bindGroups: GPUBindGroup[] | undefined
 
         const storages = nested((key, value: number[] | Float32Array) => {
-                return { ...bindings.storage(key), ...createBuffer(gl.device, value, 'storage') }
+                return { ...gl.binding.storage(key), ...createBuffer(gl.device, value, 'storage') }
         })
 
         gl('_storage', (key: string, value: number[] | Float32Array) => {
@@ -18,10 +18,10 @@ export const compute = (gl: GL, bindings: Binding) => {
 
         gl('render', () => {
                 if (!pipeline || !bindGroups) return
-                const pass = gl.encoder.beginComputePass()
+                const pass = gl.commandEncoder.beginComputePass()
                 pass.setPipeline(pipeline)
                 bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
-                const { x, y, z } = workgroupCount(gl.particleCount)
+                const { x, y, z } = workgroupCount(particleCount)
                 pass.dispatchWorkgroups(x, y, z)
                 pass.end()
         })

package/src/webgpu/graphic.ts

@@ -1,28 +1,27 @@
 import { nested } from 'reev'
-import { is, getStride, loadingTexture } from '../helpers'
-import { createBuffer, createDepthTexture, createDescriptor, createTextureSampler, updateBuffer } from './utils'
-import type { Binding } from './utils'
+import { getStride, is, loadingTexture } from '../helpers'
+import { createBuffer, createTextureSampler, updateBuffer } from './utils'
 import type { GL } from '../types'
 
-export const graphic = (gl: GL, bindings: Binding, update = () => {}) => {
+export const graphic = (gl: GL, update = () => {}) => {
+        const { count, instanceCount } = gl // // Save this WebGPU item's count (overwritten per args)
         let pipeline: GPURenderPipeline
         let bindGroups: GPUBindGroup[]
         let vertexBuffers: GPUBuffer[]
-        let depthTexture: GPUTexture
 
-        const attributes = nested((key, value: number[], isInstance = false, stride = getStride(value.length, isInstance ? gl.instanceCount : gl.triangleCount)) => {
+        const attributes = nested((key, value: number[], isInstance = false, stride = getStride(value.length, isInstance ? instanceCount : count, gl.error, key)) => {
                 update()
-                return { ...bindings.attrib(key), ...createBuffer(gl.device, value, 'attrib'), isInstance, stride }
+                return { ...gl.binding.attrib(key), ...createBuffer(gl.device, value, 'attrib'), isInstance, stride }
         })
 
         const uniforms = nested((key, value: number[] | Float32Array) => {
                 update()
-                return { ...bindings.uniform(key), ...createBuffer(gl.device, value, 'uniform') }
+                return { ...gl.binding.uniform(key), ...createBuffer(gl.device, value, 'uniform') }
         })
 
         const textures = nested((key, width = 1, height = 1) => {
                 update()
-                return { ...bindings.texture(key), ...createTextureSampler(gl.device, width, height) }
+                return { ...gl.binding.texture(key), ...createTextureSampler(gl.device, width, height) }
         })
 
         gl('_attribute', (key: string, value: number[] | Float32Array) => {
@@ -45,11 +44,9 @@ export const graphic = (gl: GL, bindings: Binding, update = () => {}) => {
                 const t = textures(key)
                 loadingTexture(src, (source, isVideo) => {
                         const [width, height] = isVideo ? [source.videoWidth, source.videoHeight] : [source.width, source.height]
-                        if (t.texture.width !== width || t.texture.height !== height) {
-                                t.texture.destroy()
-                                Object.assign(t, createTextureSampler(gl.device, width, height))
-                                update() // Rebuilding BindGroups because the texture size has changed
-                        }
+                        t.texture.destroy()
+                        Object.assign(t, createTextureSampler(gl.device, width, height))
+                        update() // Rebuilding BindGroups because the texture size has changed
                         const render = () => void gl.device.queue.copyExternalImageToTexture({ source }, { texture: t.texture }, { width, height })
                         if (isVideo) gl({ render })
                         else render()
@@ -58,22 +55,13 @@ export const graphic = (gl: GL, bindings: Binding, update = () => {}) => {
 
         gl('render', () => {
                 if (!pipeline || !bindGroups || !vertexBuffers) return
-                const pass = gl.encoder.beginRenderPass(createDescriptor(gl.gpu, depthTexture))
-                pass.setPipeline(pipeline)
-                bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
-                vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
-                pass.draw(gl.triangleCount, gl.instanceCount, 0, 0)
-                pass.end()
-        })
-
-        gl('resize', () => {
-                const canvas = gl.el as HTMLCanvasElement
-                depthTexture?.destroy()
-                depthTexture = createDepthTexture(gl.device, canvas.width, canvas.height)
+                gl.passEncoder.setPipeline(pipeline)
+                bindGroups.forEach((v, i) => gl.passEncoder.setBindGroup(i, v))
+                vertexBuffers.forEach((v, i) => gl.passEncoder.setVertexBuffer(i, v))
+                gl.passEncoder.draw(count, instanceCount, 0, 0)
         })
 
         gl('clean', () => {
-                depthTexture?.destroy()
                 for (const { buffer } of attributes.map.values()) buffer.destroy()
                 for (const { texture } of textures.map.values()) texture.destroy()
                 for (const { buffer } of uniforms.map.values()) buffer.destroy()