glre 0.47.0 → 0.49.1

package/src/node/utils/const.ts

@@ -32,8 +32,34 @@ export const TYPE_MAPPING = {
 
 export const CONSTANTS = Object.keys(TYPE_MAPPING) as (keyof typeof TYPE_MAPPING)[]
 
+export const SWIZZLE_BASE_MAP = {
+        float: 'float',
+        vec2: 'float',
+        vec3: 'float',
+        vec4: 'float',
+        int: 'int',
+        ivec2: 'int',
+        ivec3: 'int',
+        ivec4: 'int',
+        uint: 'uint',
+        uvec2: 'uint',
+        uvec3: 'uint',
+        uvec4: 'uint',
+        bool: 'bool',
+        bvec2: 'bool',
+        bvec3: 'bool',
+        bvec4: 'bool',
+} as const
+
+export const SWIZZLE_RESULT_MAP = {
+        float: { 1: 'float', 2: 'vec2', 3: 'vec3', 4: 'vec4', 9: 'mat3', 16: 'mat4' } as const,
+        int: { 1: 'int', 2: 'ivec2', 3: 'ivec3', 4: 'ivec4' } as const,
+        uint: { 1: 'uint', 2: 'uvec2', 3: 'uvec3', 4: 'uvec4' } as const,
+        bool: { 1: 'bool', 2: 'bvec2', 3: 'bvec3', 4: 'bvec4' } as const,
+}
+
 export const OPERATORS = {
-        not: '', // IGNORED
+        not: '!',
         add: '+',
         sub: '-',
         mul: '*',
@@ -66,15 +92,6 @@ export const OPERATORS = {
 
 export const OPERATOR_KEYS = Object.keys(OPERATORS) as (keyof typeof OPERATORS)[]
 
-export const COMPONENT_COUNT_TO_TYPE = {
-        1: 'float',
-        2: 'vec2',
-        3: 'vec3',
-        4: 'vec4',
-        9: 'mat3',
-        16: 'mat4',
-} as const
-
 export const BUILTIN_TYPES = {
         // WGSL builtin variables
         position: 'vec4',

package/src/node/utils/index.ts

@@ -7,18 +7,20 @@ import type { Constants as C, NodeContext, Y } from '../types'
 
 export * from './utils'
 
+const parseNumber = (target = 0) => {
+        const ret = `${target}`
+        if (ret.includes('.')) return ret
+        // Check if this number should be an integer based on the inferred type
+        // For now, keep the original behavior to maintain compatibility
+        return ret + '.0'
+}
+
 export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string => {
         if (!c) c = {}
         initNodeContext(c)
         if (is.arr(target)) return parseArray(target, c)
         if (is.str(target)) return target
-        if (is.num(target)) {
-                const ret = `${target}`
-                if (ret.includes('.')) return ret
-                // Check if this number should be an integer based on the inferred type
-                // For now, keep the original behavior to maintain compatibility
-                return ret + '.0'
-        }
+        if (is.num(target)) return parseNumber(target)
         if (is.bol(target)) return target ? 'true' : 'false'
         if (!target) return ''
         if (!isX(target)) return ''
@@ -42,7 +44,12 @@ export const code = <T extends C>(target: Y<T>, c?: NodeContext | null): string
                         : `${code(storageNode, c)}[${code(indexNode, c)}] = ${code(y, c)};`
         }
         if (type === 'ternary') return c.isWebGL ? `(${code(z, c)} ? ${code(x, c)} : ${code(y, c)})` : `select(${code(x, c)}, ${code(y, c)}, ${code(z, c)})`
-        if (type === 'conversion') return `${getConversions(x, c)}(${parseArray(children.slice(1), c)})`
+        if (type === 'conversion') {
+                if (x === 'float') if (is.num(y)) return parseNumber(y) // no conversion needed, e.g., float(1.0) → 1.0
+                if (x === 'bool') if (is.bol(y)) return y ? 'true' : 'false'
+                if (x === 'int') if (is.num(y)) return `${y << 0}`
+                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)

package/src/node/utils/infer.ts

@@ -1,5 +1,5 @@
 import { isConstants, isElement, isX, isSwizzle } from './utils'
-import { BUILTIN_TYPES, COMPONENT_COUNT_TO_TYPE, FUNCTION_RETURN_TYPES, getOperatorResultType, validateOperatorTypes } from './const'
+import { BUILTIN_TYPES, FUNCTION_RETURN_TYPES, getOperatorResultType, SWIZZLE_BASE_MAP, SWIZZLE_RESULT_MAP, validateOperatorTypes } from './const'
 import { is, getStride, isFloat32 } from '../../helpers'
 import type { Constants as C, NodeContext, X, Y } from '../types'
 
@@ -7,7 +7,14 @@ const inferBuiltin = <T extends C>(id: string | undefined) => {
         return BUILTIN_TYPES[id as keyof typeof BUILTIN_TYPES] as T
 }
 
+// Unified logic with types.ts inferArrayElement type
+const inferSwizzleType = <T extends C>(L: T, len: 1 | 2 | 3 | 4): T => {
+        return SWIZZLE_RESULT_MAP[SWIZZLE_BASE_MAP[L as 'float']][len] as T
+}
+
+// Unified logic with types.ts InferOperator type
 const inferOperator = <T extends C>(L: T, R: T, op: string): T => {
+        if (op === 'not') return 'bool' as T // 'not' operator's right side is none, causing a warning in the next validator
         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
 }
@@ -15,15 +22,15 @@ const inferOperator = <T extends C>(L: T, R: T, op: string): T => {
 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) || isFloat32(x)) return COMPONENT_COUNT_TO_TYPE[x.length as keyof typeof COMPONENT_COUNT_TO_TYPE] as T
+        if (is.num(x)) return 'float' as T // @TODO FIX: Number.isInteger(x) ? 'int' : 'float'
+        if (is.arr(x) || isFloat32(x)) return SWIZZLE_RESULT_MAP.float[x.length as 1 | 2 | 3 | 4 | 9 | 16] 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)`
+const inferFromCount = <T extends C>(count: number, error = console.warn, id = '') => {
+        const ret = SWIZZLE_RESULT_MAP.float[count as 1 | 2 | 3 | 4 | 9 | 16] as T
+        if (!ret) error(`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,22 +61,21 @@ 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 (isX(x)) {
-                        const structType = infer(x, c)
-                        const fields = c.code?.structStructFields?.get(structType)
+                const constant = infer(x, c) // Check if struct first to avoid field/swizzle clash, e.g. Struct({ x: float(), y: float() })
+                if (!isConstants(constant)) {
+                        const fields = c.code?.structStructFields?.get(constant)
                         if (fields && fields[y]) return infer(fields[y], c) as T
                 }
-                return 'float' as T
+                if (isSwizzle(y)) return inferSwizzleType(constant, y.length as 1 | 2 | 3 | 4) as T
+                return 'float' as T // throw Error
         }
         if (inferFrom) return inferFromArray(inferFrom, c)
         return x ? infer(x, c) : ('void' as T) // for uniform and storage gather and scatter
@@ -78,7 +84,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/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()

package/src/webgpu/index.ts

@@ -1,42 +1,61 @@
 import { compute } from './compute'
 import { graphic } from './graphic'
-import { createBinding, createDevice, updatePipeline } from './utils'
+import { createBinding, createDepthTexture, createDescriptor, createDevice, updatePipeline } from './utils'
 import { is, WGSL_FS, WGSL_VS } from '../helpers'
 import type { GL } from '../types'
 
-export const webgpu = async (gl: GL) => {
-        let isUpdate = false
-        const isInit = !gl.gl
+export const webgpu = async (gl: GL, isLast = false) => {
+        let { vs, fs, cs } = gl
+        let isUpdate = true
+        const isInit = !gl.gpu
         if (isInit) {
                 const gpu = gl.el!.getContext('webgpu') as GPUCanvasContext
+                const binding = createBinding()
                 const { device, format } = await createDevice(gpu, gl.error)
-                gl({ device, format, gpu })
+                gl({ device, format, binding, gpu })
+                gl('resize', () => {
+                        gl.depthTexture?.destroy()
+                        if (gl.isDepth) gl.depthTexture = createDepthTexture(gl.device, ...gl.size)
+                })
         }
 
         gl('render', () => {
                 if (isUpdate) update()
-                gl.encoder = gl.device.createCommandEncoder()
         })
 
-        const binding = createBinding()
-        const c = compute(gl, binding)
-        const g = graphic(gl, binding, () => (isUpdate = true))
+        if (isInit)
+                gl('render', () => {
+                        gl.commandEncoder = gl.device.createCommandEncoder()
+                })
+
+        const c = compute(gl)
+
+        if (isInit)
+                gl('render', () => {
+                        gl.passEncoder = gl.commandEncoder.beginRenderPass(createDescriptor(gl.gpu, gl.depthTexture))
+                })
+
+        const g = graphic(gl, () => (isUpdate = true))
+
         const update = () => {
                 isUpdate = false
-                const config = { isWebGL: false, gl, binding }
-                const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : WGSL_FS
-                const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : WGSL_VS
-                const cs = gl.cs ? (is.str(gl.cs) ? gl.cs : gl.cs.compute(config)) : ''
-                const p = updatePipeline(gl.device, gl.format, g.attributes.map.values(), g.uniforms.map.values(), g.textures.map.values(), c.storages.map.values(), fs, cs, vs)
+                const config = { isWebGL: false, gl }
+                fs = fs ? (is.str(fs) ? fs : fs.fragment(config)) : WGSL_FS
+                vs = vs ? (is.str(vs) ? vs : vs.vertex(config)) : WGSL_VS
+                cs = cs ? (is.str(cs) ? cs : cs.compute(config)) : ''
+                const p = updatePipeline(gl.device, gl.format, g.attributes.map.values(), g.uniforms.map.values(), g.textures.map.values(), c.storages.map.values(), fs, cs, vs, gl.isDepth)
                 c.set(p.computePipeline, p.bindGroups)
                 g.set(p.graphicPipeline, p.bindGroups, p.vertexBuffers)
         }
 
-        gl('render', () => {
-                if (gl.encoder) gl.device.queue.submit([gl.encoder.finish()])
-        })
+        if (isLast)
+                gl('render', () => {
+                        gl.passEncoder.end()
+                        gl.device.queue.submit([gl.commandEncoder.finish()])
+                })
 
         gl('clean', () => {
+                gl.depthTexture?.destroy()
                 gl.device.destroy()
         })
 }

package/src/webgpu/utils.ts

@@ -104,15 +104,15 @@ const createBindGroup = (device: GPUDevice, uniforms: IUniforms, textures: IText
                 layouts.push(layout)
                 bindings.push(binding)
         }
-        for (const { binding, buffer, group: i } of uniforms) {
-                add(i, { binding, visibility: 7, buffer: { type: 'uniform' } }, { binding, resource: { buffer } })
+        for (const { binding, buffer, group } of uniforms) {
+                add(group, { binding, visibility: 7, buffer: { type: 'uniform' } }, { binding, resource: { buffer } })
         }
-        for (const { binding, buffer, group: i } of storages) {
-                add(i, { binding, visibility: 6, buffer: { type: 'storage' } }, { binding, resource: { buffer } })
+        for (const { binding, buffer, group } of storages) {
+                add(group, { binding, visibility: 6, buffer: { type: 'storage' } }, { binding, resource: { buffer } })
         }
-        for (const { binding: b, group: i, sampler, view } of textures) {
-                add(i, { binding: b, visibility: 2, sampler: {} }, { binding: b, resource: sampler })
-                add(i, { binding: b + 1, visibility: 2, texture: {} }, { binding: b + 1, resource: view })
+        for (const { binding: b, group, sampler, view } of textures) {
+                add(group, { binding: b, visibility: 2, sampler: {} }, { binding: b, resource: sampler })
+                add(group, { binding: b + 1, visibility: 2, texture: {} }, { binding: b + 1, resource: view })
         }
         for (const [i, { layouts, bindings }] of groups) {
                 ret.bindGroupLayouts[i] = device.createBindGroupLayout({ entries: layouts })
@@ -121,8 +121,10 @@ const createBindGroup = (device: GPUDevice, uniforms: IUniforms, textures: IText
         return ret
 }
 
-const createPipeline = (device: GPUDevice, format: GPUTextureFormat, bufferLayouts: GPUVertexBufferLayout[], bindGroupLayouts: GPUBindGroupLayout[], vs: string, fs: string) => {
-        return device.createRenderPipeline({
+const createPipeline = (device: GPUDevice, format: GPUTextureFormat, bufferLayouts: GPUVertexBufferLayout[], bindGroupLayouts: GPUBindGroupLayout[], vs: string, fs: string, isDepth: boolean) => {
+        const config: GPURenderPipelineDescriptor = {
+                primitive: { topology: 'triangle-list' },
+                layout: device.createPipelineLayout({ bindGroupLayouts }),
                 vertex: {
                         module: device.createShaderModule({ label: 'vert', code: vs.trim() }),
                         entryPoint: 'main',
@@ -133,14 +135,9 @@ const createPipeline = (device: GPUDevice, format: GPUTextureFormat, bufferLayou
                         entryPoint: 'main',
                         targets: [{ format }],
                 },
-                layout: device.createPipelineLayout({ bindGroupLayouts }),
-                primitive: { topology: 'triangle-list' },
-                depthStencil: {
-                        depthWriteEnabled: true,
-                        depthCompare: 'less',
-                        format: 'depth24plus',
-                },
-        })
+        }
+        if (isDepth) config.depthStencil = { depthWriteEnabled: true, depthCompare: 'less', format: 'depth24plus' }
+        return device.createRenderPipeline(config)
 }
 
 const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroupLayout[], cs: string) => {
@@ -154,11 +151,11 @@ const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroup
         })
 }
 
-export const updatePipeline = (device: GPUDevice, format: GPUTextureFormat, attribs: IAttribs, uniforms: IUniforms, textures: ITextures, storages: IStorages, fs: string, cs: string, vs: string) => {
+export const updatePipeline = (device: GPUDevice, format: GPUTextureFormat, attribs: IAttribs, uniforms: IUniforms, textures: ITextures, storages: IStorages, fs: string, cs: string, vs: string, isDepth: boolean) => {
         const { vertexBuffers, bufferLayouts } = createVertexBuffers(attribs)
         const { bindGroups, bindGroupLayouts } = createBindGroup(device, uniforms, textures, storages)
         const computePipeline = createComputePipeline(device, bindGroupLayouts, cs)
-        const graphicPipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, vs, fs)
+        const graphicPipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, vs, fs, isDepth)
         return { bindGroups, vertexBuffers, computePipeline, graphicPipeline }
 }
 
@@ -166,9 +163,9 @@ export const updatePipeline = (device: GPUDevice, format: GPUTextureFormat, attr
  * buffers
  */
 const bufferUsage = (type: 'uniform' | 'storage' | 'attrib') => {
-        if (type === 'uniform') return 72 // GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-        if (type === 'attrib') return 40 // GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-        return 140 // GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
+        if (type === 'uniform') return 72 // 72 is GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        if (type === 'attrib') return 40 // 40 is GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+        return 140 // 140 is GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
 }
 
 export const createBuffer = (device: GPUDevice, array: number[] | Float32Array, type: 'uniform' | 'storage' | 'attrib') => {
@@ -184,11 +181,10 @@ export const updateBuffer = (device: GPUDevice, value: number[] | Float32Array,
         device.queue.writeBuffer(buffer, 0, array as GPUAllowSharedBufferSource)
 }
 
-export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture) => {
-        return {
-                colorAttachments: [{ view: c.getCurrentTexture().createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: 'clear', storeOp: 'store' }],
-                depthStencilAttachment: { view: depthTexture.createView(), depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store' },
-        } as GPURenderPassDescriptor
+export const createDescriptor = (c: GPUCanvasContext, depthTexture?: GPUTexture) => {
+        const ret: GPURenderPassDescriptor = { colorAttachments: [{ view: c.getCurrentTexture().createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: 'clear', storeOp: 'store' }] }
+        if (depthTexture) ret.depthStencilAttachment = { view: depthTexture.createView(), depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store' }
+        return ret
 }
 
 /**