glre 0.39.0 → 0.40.0

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

@@ -8,7 +8,18 @@ import {
         WGSL_TO_GLSL_BUILTIN,
 } from './const'
 import { is } from '../../utils/helpers'
-import type { Constants as C, Conversions, Functions, NodeContext, Operators, Swizzles, X, Y } from '../types'
+import type {
+        Constants as C,
+        Conversions,
+        Functions,
+        NodeContext,
+        NodeTypes,
+        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)
@@ -50,8 +61,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 +84,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 +110,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
 
         /**
@@ -61,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
@@ -93,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),
                                 },
                         ],
                 }
@@ -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)
@@ -73,7 +66,7 @@ export const createUniform = (c: WebGLRenderingContext, loc: WebGLUniformLocatio
 }
 
 export const createTexture = (
-        c: WebGLRenderingContext,
+        c: WebGL2RenderingContext,
         img: HTMLImageElement,
         loc: WebGLUniformLocation,
         unit: number
@@ -103,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)
@@ -159,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/utils/webgl.ts

@@ -1,34 +1,20 @@
 import { nested as cached } from 'reev'
-import { is, loadingImage } from './helpers'
+import { is, loadingImage, getStride, GLSL_VS, GLSL_FS } from './helpers'
 import {
+        createArrayBuffer,
         cleanStorage,
         createAttachment,
-        createAttrib,
         createProgram,
         createStorage,
         createTexture,
-        createUniform,
+        setArrayBuffer,
+        storageSize,
+        updateAttrib,
+        updateInstance,
+        updateUniform,
 } from './program'
 import type { GL, WebGLState } from '../types'
 
-const DEFAULT_FRAGMENT = /* 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);
-}
-`
-
-const DEFAULT_VERTEX = /* 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);
-}`
-
 const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
         if (!gl.cs) return null // ignore if no compute shader
         c.getExtension('EXT_color_buffer_float')
@@ -38,12 +24,12 @@ const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
 
         const units = cached(() => activeUnit++)
         const cs = is.str(gl.cs) ? gl.cs : gl.cs!.compute({ isWebGL: true, gl, units })
-        const pg = createProgram(c, cs, DEFAULT_VERTEX, gl)!
-        const size = Math.ceil(Math.sqrt(gl.particles))
+        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) }
@@ -51,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 = () => {
@@ -83,25 +69,38 @@ export const webgl = async (gl: GL) => {
         const config = { isWebGL: true, gl }
         const c = gl.el!.getContext('webgl2')!
         const cp = computeProgram(gl, c)
-        const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs!.fragment(config)) : DEFAULT_FRAGMENT
-        const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs!.vertex(config)) : DEFAULT_VERTEX
+        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)
         }
 
@@ -122,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 }
 }