glre 0.38.0 → 0.40.0

package/src/types.ts

@@ -1,7 +1,6 @@
 import type { EventState, Nested } from 'reev'
-import type { Fun, Queue, Frame } from 'refr'
-import type { NodeProxy, Vec4, Void } from './node'
-export type { Fun, Queue, Frame }
+import type { Queue, Frame } from 'refr'
+import type { Vec4, Void } from './node'
 
 export type GL = EventState<{
         /**
@@ -11,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
@@ -47,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,7 +57,6 @@ export type GL = EventState<{
          */
         _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL
         uniform(key: string, value: Uniform, isMatrix?: boolean): GL
-        uniform(node: NodeProxy): GL
         uniform(target: { [key: string]: Uniform }): GL
         _texture?(key: string, value: string): GL
         texture(key: string, value: string): GL
@@ -63,6 +64,9 @@ export type GL = EventState<{
         _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
@@ -95,6 +99,7 @@ export interface AttribData {
         buffer: GPUBuffer
         location: number
         stride: number
+        isInstance?: boolean
 }
 
 export interface StorageData {

package/src/utils/helpers.ts

@@ -58,3 +58,59 @@ export const loadingImage = (gl: GL, src: string, fun: (source: HTMLImageElement
                 gl.loading--
         })
 }
+
+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),
                                 },
                         ],
                 }
@@ -118,12 +121,12 @@ export const createPipeline = (
 ) => {
         return device.createRenderPipeline({
                 vertex: {
-                        module: device.createShaderModule({ label: 'vert', code: vs }),
+                        module: device.createShaderModule({ label: 'vert', code: vs.trim() }),
                         entryPoint: 'main',
                         buffers: bufferLayouts,
                 },
                 fragment: {
-                        module: device.createShaderModule({ label: 'frag', code: fs }),
+                        module: device.createShaderModule({ label: 'frag', code: fs.trim() }),
                         entryPoint: 'main',
                         targets: [{ format }],
                 },
@@ -140,7 +143,7 @@ export const createPipeline = (
 export const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroupLayout[], cs: string) => {
         return device.createComputePipeline({
                 compute: {
-                        module: device.createShaderModule({ label: 'compute', code: cs }),
+                        module: device.createShaderModule({ label: 'compute', code: cs.trim() }),
                         entryPoint: 'main',
                 },
                 layout: device.createPipelineLayout({ bindGroupLayouts }),
@@ -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,
+        }
+}

package/src/utils/program.ts

@@ -1,7 +1,7 @@
 import { is } from './helpers'
 import type { GL } from '../types'
 
-const createShader = (c: WebGLRenderingContext, source: string, type: number, onError = console.warn) => {
+const createShader = (c: WebGL2RenderingContext, source: string, type: number, onError = console.warn) => {
         const shader = c.createShader(type)
         if (!shader) return onError('Failed to create shader')
         c.shaderSource(shader, source.trim())
@@ -12,7 +12,7 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number, on
         onError(`Could not compile shader: ${error}\n\n↓↓↓generated↓↓↓\n${source}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, frag: string, vert: string, gl: GL) => {
+export const createProgram = (c: WebGL2RenderingContext, frag: string, vert: string, gl: GL) => {
         const pg = c.createProgram()
         const fs = createShader(c, frag, c.FRAGMENT_SHADER, gl.error)
         const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
@@ -26,45 +26,38 @@ export const createProgram = (c: WebGLRenderingContext, frag: string, vert: stri
         gl.error(`Could not link program: ${error}`)
 }
 
-const createVbo = (c: WebGLRenderingContext, data: number[]) => {
+export const createArrayBuffer = (c: WebGL2RenderingContext, data: number[]) => {
+        const array = new Float32Array(data)
         const buffer = c.createBuffer()
-        c.bindBuffer(c.ARRAY_BUFFER, buffer)
-        c.bufferData(c.ARRAY_BUFFER, new Float32Array(data), c.STATIC_DRAW)
-        c.bindBuffer(c.ARRAY_BUFFER, null)
-        return buffer
+        return { array, buffer }
 }
 
-const createIbo = (c: WebGLRenderingContext, data: number[]) => {
-        const buffer = c.createBuffer()
-        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, buffer)
-        c.bufferData(c.ELEMENT_ARRAY_BUFFER, new Int16Array(data), c.STATIC_DRAW)
-        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, null)
-        return buffer
+export const setArrayBuffer = (
+        c: WebGL2RenderingContext,
+        array: Float32Array,
+        buffer: WebGLBuffer,
+        value: number[]
+) => {
+        array.set(value)
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
+        c.bufferData(c.ARRAY_BUFFER, array, c.STATIC_DRAW)
+        c.bindBuffer(c.ARRAY_BUFFER, null)
 }
 
-const getStride = (count: number, value: number[], iboValue?: number[]) => {
-        if (iboValue) count = Math.max(...iboValue) + 1
-        const stride = value.length / count
-        return Math.floor(stride)
+export const updateAttrib = (c: WebGL2RenderingContext, loc: number, stride: number, buffer: WebGLBuffer) => {
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
+        c.enableVertexAttribArray(loc)
+        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
 }
 
-export const createAttrib = (
-        c: WebGLRenderingContext,
-        loc: number,
-        count: number,
-        value: number[],
-        iboValue: number[]
-) => {
-        const vbo = createVbo(c, value)
-        const ibo = createIbo(c, iboValue)
-        const str = getStride(count, value, iboValue)
-        c.bindBuffer(c.ARRAY_BUFFER, vbo)
+export const updateInstance = (c: WebGL2RenderingContext, loc: number, stride: number, buffer: WebGLBuffer) => {
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
         c.enableVertexAttribArray(loc)
-        c.vertexAttribPointer(loc, str, c.FLOAT, false, 0, 0)
-        if (ibo) c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, ibo)
+        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
+        c.vertexAttribDivisor(loc, 1) // divisor is 1
 }
 
-export const createUniform = (c: WebGLRenderingContext, loc: WebGLUniformLocation, value: number | number[]) => {
+export const updateUniform = (c: WebGL2RenderingContext, loc: WebGLUniformLocation, value: number | number[]) => {
         if (is.num(value)) return c.uniform1f(loc, value)
         let l = value.length
         if (l <= 4) return c[`uniform${l as 2}fv`](loc, value)
@@ -72,7 +65,12 @@ export const createUniform = (c: WebGLRenderingContext, loc: WebGLUniformLocatio
         c[`uniformMatrix${l as 2}fv`](loc, false, value)
 }
 
-export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, loc: any, unit: number) => {
+export const createTexture = (
+        c: WebGL2RenderingContext,
+        img: HTMLImageElement,
+        loc: WebGLUniformLocation,
+        unit: number
+) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
         c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, img)
@@ -98,28 +96,29 @@ interface TextureBuffer {
 export const createStorage = (
         c: WebGL2RenderingContext,
         value: number[],
-        size: number,
+        width: number,
+        height: 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++) {
+        const particleCount = width * height
+        const vectorSize = value.length / particleCount
+        for (let i = 0; i < particleCount; 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.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, width, height, 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, pong.texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, array)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, width, height, 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)
@@ -154,3 +153,28 @@ export const createAttachment = (
         c.framebufferTexture2D(c.FRAMEBUFFER, attachment, c.TEXTURE_2D, o.texture, 0)
         return attachment
 }
+
+/**
+ * utils
+ */
+export const storageSize = (particleCount: number | number[] = 1024) => {
+        if (is.num(particleCount)) {
+                const sqrt = Math.sqrt(particleCount)
+                const size = Math.ceil(sqrt)
+                if (!Number.isInteger(sqrt)) {
+                        console.warn(
+                                `GLRE Storage Warning: particleCount (${particleCount}) is not a square. Using ${size}x${size} texture may waste GPU memory. Consider using [width, height] format for optimal storage.`
+                        )
+                }
+                return { x: size, y: size }
+        }
+        const [x, y, z] = particleCount
+        if (z !== undefined) {
+                const yz = y * z
+                console.warn(
+                        `GLRE Storage Warning: 3D particleCount [${x}, ${y}, ${z}] specified but WebGL storage textures only support 2D. Flattening to 2D by multiplying height=${y} * depth=${z} = ${yz}.`
+                )
+                return { x, y: yz }
+        }
+        return { x, y }
+}

package/src/{webgl.ts → utils/webgl.ts}

@@ -1,24 +1,19 @@
 import { nested as cached } from 'reev'
-import { loadingImage } from './utils/helpers'
+import { is, loadingImage, getStride, GLSL_VS, GLSL_FS } from './helpers'
 import {
+        createArrayBuffer,
         cleanStorage,
         createAttachment,
-        createAttrib,
         createProgram,
         createStorage,
         createTexture,
-        createUniform,
-} from './utils/program'
-import { compute, fragment, vertex } from './node'
-import type { GL, WebGLState } from './types'
-
-const vert = /* 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);
-}`.trim()
+        setArrayBuffer,
+        storageSize,
+        updateAttrib,
+        updateInstance,
+        updateUniform,
+} from './program'
+import type { GL, WebGLState } from '../types'
 
 const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
         if (!gl.cs) return null // ignore if no compute shader
@@ -28,14 +23,13 @@ const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
         let currentNum = 0 // for storage buffers
 
         const units = cached(() => activeUnit++)
-        const config = { isWebGL: true, gl, units }
-
-        const pg = createProgram(c, compute(gl.cs, config), vert, gl)!
-        const size = Math.ceil(Math.sqrt(gl.particles))
+        const cs = is.str(gl.cs) ? gl.cs : gl.cs!.compute({ isWebGL: true, gl, units })
+        const pg = createProgram(c, cs, GLSL_VS, gl)!
+        const size = storageSize(gl.particleCount)
 
         const uniforms = cached((key) => c.getUniformLocation(pg, key)!)
         const storages = cached((key) => {
-                const array = new Float32Array(size * size * 4) // RGBA texture data
+                const array = new Float32Array(size.x * size.y * 4) // RGBA texture data
                 const ping = { texture: c.createTexture(), buffer: c.createFramebuffer() }
                 const pong = { texture: c.createTexture(), buffer: c.createFramebuffer() }
                 return { ping, pong, array, loc: uniforms(key), unit: units(key) }
@@ -43,12 +37,12 @@ const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
 
         const _uniform = (key: string, value: number | number[]) => {
                 c.useProgram(pg)
-                createUniform(c, uniforms(key), value)
+                updateUniform(c, uniforms(key), value)
         }
 
         const _storage = (key: string, value: number[]) => {
                 const { ping, pong, unit, array } = storages(key)
-                createStorage(c, value, size, ping, pong, unit, array)
+                createStorage(c, value, size.x, size.y, ping, pong, unit, array)
         }
 
         const clean = () => {
@@ -75,30 +69,45 @@ export const webgl = async (gl: GL) => {
         const config = { isWebGL: true, gl }
         const c = gl.el!.getContext('webgl2')!
         const cp = computeProgram(gl, c)
-        const pg = createProgram(c, fragment(gl.fs, config), vertex(gl.vs, config), 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
+        const pg = createProgram(c, fs, vs, gl)!
         c.useProgram(pg)
 
         let activeUnit = 0 // for texture units
 
         const units = cached(() => activeUnit++)
-        const attribs = cached((key) => c.getAttribLocation(pg, key))
         const uniforms = cached((key) => c.getUniformLocation(pg, key))
 
-        const _attribute = (key = '', value: number[], iboValue: number[]) => {
-                const loc = attribs(key, true)
-                createAttrib(c, loc, gl.count, value, iboValue)
+        const attribs = cached((key, value: number[], isInstance = false) => {
+                const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.count, gl.error)
+                const location = c.getAttribLocation(pg, key)
+                const { array, buffer } = createArrayBuffer(c, value)
+                return { array, buffer, location, stride }
+        })
+
+        const _attribute = (key = '', value: number[]) => {
+                const { array, buffer, location, stride } = attribs(key, value)
+                setArrayBuffer(c, array, buffer, value)
+                updateAttrib(c, location, stride, buffer)
+        }
+
+        const _instance = (key: string, value: number[]) => {
+                const { array, buffer, location, stride } = attribs(key, value, true)
+                setArrayBuffer(c, array, buffer, value)
+                updateInstance(c, location, stride, buffer)
         }
 
         const _uniform = (key: string, value: number | number[]) => {
                 c.useProgram(pg)
-                createUniform(c, uniforms(key)!, value)
+                updateUniform(c, uniforms(key)!, value)
                 cp?._uniform(key, value)
         }
 
         const _texture = (key: string, src: string) => {
                 c.useProgram(pg)
                 loadingImage(gl, src, (source) => {
-                        createTexture(c, source, uniforms(key), units(key))
+                        createTexture(c, source, uniforms(key)!, units(key))
                 })
         }
 
@@ -112,11 +121,18 @@ export const webgl = async (gl: GL) => {
                 cp?.render()
                 c.useProgram(pg)
                 c.viewport(0, 0, ...gl.size)
-                c.drawArrays(c.TRIANGLES, 0, gl.count)
+                if (gl.instanceCount > 1) {
+                        c.drawArraysInstanced(c.TRIANGLES, 0, gl.count, gl.instanceCount)
+                } else c.drawArrays(c.TRIANGLES, 0, gl.count)
                 c.bindFramebuffer(c.FRAMEBUFFER, null)
         }
 
+        if (gl.isDepth) {
+                c.depthFunc(c.LEQUAL)
+                c.enable(c.CULL_FACE)
+        }
+
         const webgl: WebGLState = { context: c, program: pg, storages: cp?.storages }
 
-        return { webgl, render, clean, _attribute, _uniform, _texture, _storage: cp?._storage }
+        return { webgl, render, clean, _attribute, _instance, _uniform, _texture, _storage: cp?._storage }
 }

package/src/{webgpu.ts → utils/webgpu.ts}

@@ -1,5 +1,5 @@
 import { nested as cached } from 'reev'
-import { is, loadingImage } from './utils/helpers'
+import { is, loadingImage, getStride, WGSL_FS, WGSL_VS } from './helpers'
 import {
         createArrayBuffer,
         createBindGroup,
@@ -11,11 +11,9 @@ import {
         createPipeline,
         createTextureSampler,
         createVertexBuffers,
-} from './utils/pipeline'
-import type { GL, WebGPUState } from './types'
-import { compute, fragment, vertex } from './node'
-
-const WORKING_GROUP_SIZE = 32
+        workgroupCount,
+} from './pipeline'
+import type { GL, WebGPUState } from '../types'
 
 const computeProgram = (gl: GL, device: GPUDevice, bindings: any) => {
         let flush = (_pass: GPUComputePassEncoder) => {}
@@ -36,8 +34,8 @@ const computeProgram = (gl: GL, device: GPUDevice, bindings: any) => {
                 flush = (pass) => {
                         pass.setPipeline(pipeline)
                         bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
-                        const workgroupCount = Math.ceil(gl.particles / WORKING_GROUP_SIZE)
-                        pass.dispatchWorkgroups(workgroupCount, 1, 1)
+                        const { x, y, z } = workgroupCount(gl.particleCount)
+                        pass.dispatchWorkgroups(x, y, z)
                         pass.end()
                 }
         }
@@ -65,12 +63,12 @@ export const webgpu = async (gl: GL) => {
         let needsUpdate = true
         let depthTexture: GPUTexture
 
-        const attribs = cached((_key, value: number[]) => {
+        const attribs = cached((_key, value: number[], isInstance = false) => {
                 needsUpdate = true
-                const stride = value.length / gl.count
+                const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.count)
                 const { location } = bindings.attrib()
                 const { array, buffer } = createArrayBuffer(device, value, 'attrib')
-                return { array, buffer, location, stride }
+                return { array, buffer, location, stride, isInstance }
         })
 
         const uniforms = cached((_key, value: number[]) => {
@@ -89,13 +87,20 @@ export const webgpu = async (gl: GL) => {
 
         const _attribute = (key = '', value: number[]) => {
                 const { array, buffer } = attribs(key, value)
+                array.set(value)
+                device.queue.writeBuffer(buffer, 0, array as any)
+        }
+
+        const _instance = (key: string, value: number[]) => {
+                const { array, buffer } = attribs(key, value, true)
+                array.set(value)
                 device.queue.writeBuffer(buffer, 0, array as any)
         }
 
         const _uniform = (key: string, value: number | number[]) => {
                 if (is.num(value)) value = [value]
                 const { array, buffer } = uniforms(key, value)
-                array.set(value) // needs to set leatest value
+                array.set(value)
                 device.queue.writeBuffer(buffer, 0, array as any)
         }
 
@@ -120,7 +125,7 @@ export const webgpu = async (gl: GL) => {
                         pass.setPipeline(pipeline)
                         bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
                         vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
-                        pass.draw(gl.count, 1, 0, 0)
+                        pass.draw(gl.count, gl.instanceCount, 0, 0)
                         pass.end()
                 }
                 if (gl.cs) cp.update(bindGroups, bindGroupLayouts, comp)
@@ -129,9 +134,9 @@ export const webgpu = async (gl: GL) => {
         const render = () => {
                 if (!frag || !vert) {
                         const config = { isWebGL: false, gl }
-                        frag = fragment(gl.fs, config) // needs to be before vertex
-                        vert = vertex(gl.vs, config)
-                        comp = compute(gl.cs, config)
+                        frag = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : WGSL_FS
+                        vert = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : WGSL_VS
+                        comp = gl.cs ? (is.str(gl.cs) ? gl.cs : gl.cs.compute(config)) : ''
                 }
                 if (gl.loading) return // MEMO: loading after build node
                 if (needsUpdate) update()
@@ -161,5 +166,5 @@ export const webgpu = async (gl: GL) => {
 
         const webgpu = { device, uniforms, textures, attribs, storages: cp.storages } as WebGPUState
 
-        return { webgpu, render, resize, clean, _attribute, _uniform, _texture, _storage: cp._storage }
+        return { webgpu, render, resize, clean, _attribute, _instance, _uniform, _texture, _storage: cp._storage }
 }