glre 0.36.0 → 0.38.0

package/src/node/utils/index.ts

@@ -5,13 +5,16 @@ import {
         parseConstantHead,
         parseDeclare,
         parseDefine,
+        parseGather,
         parseIf,
+        parseScatter,
+        parseStorageHead,
         parseStruct,
         parseStructHead,
         parseSwitch,
         parseTexture,
-        parseVaryingHead,
         parseUniformHead,
+        parseVaryingHead,
 } from './parse'
 import { getBluiltin, getOperator, getConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
 import { is } from '../../utils/helpers'
@@ -42,6 +45,16 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'variable') return id
         if (type === 'member') return `${code(x, c)}.${code(y, c)}`
         if (type === 'element') return `${code(x, c)}[${code(y, c)}]`
+        if (type === 'gather')
+                return c.isWebGL //
+                        ? parseGather(c, x, y, target)
+                        : `${code(x, c)}[${code(y, c)}]`
+        if (type === 'scatter') {
+                const [storageNode, indexNode] = x.props.children ?? [] // x is gather node
+                return c.isWebGL
+                        ? parseScatter(c, storageNode, y) // indexNode is not using
+                        : `${code(storageNode, c)}[${code(indexNode, c)}] = ${code(y, c)};`
+        }
         if (type === 'ternary')
                 return c.isWebGL
                         ? `(${code(z, c)} ? ${code(x, c)} : ${code(y, c)})`
@@ -72,12 +85,12 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         if (type === 'switch') return parseSwitch(c, x, children)
         if (type === 'declare') return parseDeclare(c, x, y)
         if (type === 'define') {
-                if (!c.code?.headers.has(id)) c.code?.headers.set(id, parseDefine(c, props, infer(target, c)))
+                if (!c.code?.headers.has(id)) c.code?.headers.set(id, parseDefine(c, props, target))
                 return `${id}(${parseArray(children.slice(1), c)})`
         }
         if (type === 'struct') {
                 if (!c.code?.headers.has(id)) c.code?.headers.set(id, parseStructHead(c, id, fields))
-                return parseStruct(c, id, x.props.id, fields, initialValues)
+                return parseStruct(c, id, x.props.id, initialValues)
         }
         /**
          * headers
@@ -91,12 +104,12 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
                 return c.isWebGL ? `${id}` : `out.${id}`
         }
         if (type === 'builtin') {
-                if (c.isWebGL) return getBluiltin(id)
+                if (c.isWebGL) return getBluiltin(c, id)
                 if (id === 'position') return 'out.position'
                 const field = `@builtin(${id}) ${id}: ${getConversions(infer(target, c), c)}`
-                if (c.isFrag) {
-                        c.code?.fragInputs.set(id, field)
-                } else c.code?.vertInputs.set(id, field)
+                if (c.label === 'compute') c.code?.computeInputs.set(id, field)
+                else if (c.label === 'frag') c.code?.fragInputs.set(id, field)
+                else if (c.label === 'vert') c.code?.vertInputs.set(id, field)
                 return `in.${id}`
         }
         if (type === 'attribute') {
@@ -115,6 +128,7 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
                 target.listeners.add(fun)
                 head = parseUniformHead(c, id, varType)
         }
+        if (type === 'storage') 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

@@ -31,14 +31,6 @@ const inferOperator = <T extends C>(L: T, R: T, op: string): T => {
         return L
 }
 
-// Unified logic with infer.ts InferArrayElement type
-const inferArrayElement = <T extends C>(arrayType: T): T => {
-        if (arrayType === 'mat4') return 'vec4' as T
-        if (arrayType === 'mat3') return 'vec3' as T
-        if (arrayType === 'mat2') return 'vec2' as T
-        return 'float' as T
-}
-
 export const inferPrimitiveType = <T extends C>(x: X) => {
         if (is.bol(x)) return 'bool' as T
         if (is.str(x)) return 'texture' as T
@@ -56,8 +48,8 @@ const inferFromArray = <T extends C>(arr: X<T>[], c: NodeContext) => {
         const [x] = arr
         if (is.str(x)) return x as T // for struct
         const ret = infer(x, c)
-        for (const x of arr.slice(1))
-                if (ret !== infer(x, c)) throw new Error(`glre node system error: defined scope return mismatch`)
+        // for (const x of arr.slice(1))
+        //         if (ret !== infer(x, c)) throw new Error(`glre node system error: defined scope return mismatch`)
         return ret
 }
 
@@ -71,22 +63,25 @@ export const inferImpl = <T extends C>(target: NodeProxy<T>, c: NodeContext): T
         const [x, y, z] = children
         if (type === 'conversion') return x
         if (type === 'operator') return inferOperator(infer(y, c), infer(z, c), x)
-        if (type === 'ternary') return inferOperator(infer(y, c), infer(z, c), 'add')
         if (type === 'builtin') return inferBuiltin(id)
         if (type === 'function') return inferFunction(x) || infer(y, c)
-        if (type === 'define' && isConstants(layout?.type)) return layout?.type as T
+        if (type === 'define') {
+                if (isConstants(layout?.type)) return layout?.type as T
+                if (!inferFrom || inferFrom.length === 0) return 'void' as T
+                return inferFromArray(inferFrom, c)
+        }
         if (type === 'attribute' && is.arr(x) && c.gl?.count) return inferFromCount(x.length / c.gl.count)
-        if (type === 'element') return inferArrayElement(infer(x, c) as T)
         if (type === 'member') {
                 if (isSwizzle(y)) return inferFromCount(y.length)
                 if (isNodeProxy(x)) {
-                        const field = (x as any).props.fields[y] // for variable node of struct member
-                        if (field) return infer(field, c)
+                        const structType = infer(x, c)
+                        const fields = c.code?.structFields?.get(structType)
+                        if (fields && fields[y]) return infer(fields[y], c) as T
                 }
-                return 'float' as T // fallback @TODO FIX
+                return 'float' as T
         }
         if (inferFrom) return inferFromArray(inferFrom, c)
-        return infer(x, c) // for uniform
+        return infer(x, c) // for uniform and storage gather and scatter
 }
 
 export const infer = <T extends C>(target: X<T>, c?: NodeContext | null): T => {
@@ -97,5 +92,5 @@ export const infer = <T extends C>(target: X<T>, c?: NodeContext | null): T => {
         if (c.infers.has(target)) return c.infers.get(target) as T
         const ret = inferImpl(target, c)
         c.infers.set(target, ret)
-        return ret
+        return ret as T
 }

package/src/node/utils/parse.ts

@@ -2,7 +2,7 @@ import { code } from '.'
 import { infer } from './infer'
 import { getConversions, addDependency } from './utils'
 import { is } from '../../utils/helpers'
-import type { Constants, NodeContext, NodeProps, NodeProxy, X } from '../types'
+import type { Constants, NodeContext, NodeProps, NodeProxy, StructFields, X } from '../types'
 
 export const parseArray = (children: X[], c: NodeContext) => {
         return children
@@ -11,6 +11,35 @@ export const parseArray = (children: X[], c: NodeContext) => {
                 .join(', ')
 }
 
+// only for webgl
+export const parseGather = (c: NodeContext, x: X, y: X, target: X) => {
+        const parseSwizzle = () => {
+                const valueType = infer(target, c)
+                if (valueType === 'float') return '.x'
+                if (valueType === 'vec2') return '.xy'
+                if (valueType === 'vec3') return '.xyz'
+                if (valueType === 'vec4') return ''
+                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}`
+        return `texelFetch(${code(x, c)}, ivec2(${coordX}, ${coordY}), 0)${parseSwizzle()}`
+}
+
+// only for webgl
+export const parseScatter = (c: NodeContext, storageNode: X, valueNode: X) => {
+        const storageId = code(storageNode, c)
+        const valueCode = code(valueNode, c)
+        const valueType = infer(valueNode, c)
+        if (valueType === 'float') return `_${storageId} = vec4(${valueCode}, 0.0, 0.0, 1.0);`
+        if (valueType === 'vec2') return `_${storageId} = vec4(${valueCode}, 0.0, 1.0);`
+        if (valueType === 'vec3') return `_${storageId} = vec4(${valueCode}, 1.0);`
+        if (valueType === 'vec4') return `_${storageId} = ${valueCode};`
+        throw new Error(`Unsupported storage scatter type: ${valueType}`)
+}
+
 export const parseTexture = (c: NodeContext, y: X, z: X, w: X) => {
         if (c.isWebGL) {
                 const args = w ? [y, z, w] : [y, z]
@@ -58,7 +87,8 @@ export const parseDeclare = (c: NodeContext, x: X, y: X) => {
         return `var ${varName}: ${wgslType} = ${code(x, c)};`
 }
 
-export const parseStructHead = (c: NodeContext, id: string, fields: Record<string, NodeProxy> = {}) => {
+export const parseStructHead = (c: NodeContext, id: string, fields: StructFields = {}) => {
+        c.code?.structFields?.set(id, fields)
         const lines: string[] = []
         for (const key in fields) {
                 const fieldType = fields[key]
@@ -70,13 +100,8 @@ export const parseStructHead = (c: NodeContext, id: string, fields: Record<strin
         return `struct ${id} {\n  ${ret}\n};`
 }
 
-export const parseStruct = (
-        c: NodeContext,
-        id: string,
-        instanceId = '',
-        fields?: Record<string, NodeProxy>,
-        initialValues?: Record<string, NodeProxy>
-) => {
+export const parseStruct = (c: NodeContext, id: string, instanceId = '', initialValues?: StructFields) => {
+        const fields = c.code?.structFields?.get(id) || {}
         if (c.isWebGL) {
                 if (initialValues) {
                         const ordered = []
@@ -95,7 +120,7 @@ export const parseStruct = (
 /**
  * define
  */
-export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Constants) => {
+export const parseDefine = (c: NodeContext, props: NodeProps, target: NodeProxy) => {
         const { id, children = [], layout } = props
         const [x, ...args] = children
         const argParams: [name: string, type: string][] = []
@@ -108,6 +133,8 @@ export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Consta
                 for (let i = 0; i < args.length; i++) {
                         argParams.push([`p${i}`, infer(args[i], c)])
                 }
+        const scopeCode = code(x, c) // build struct headers before inferring returnType
+        const returnType = infer(target, c)
         const ret = []
         if (c?.isWebGL) {
                 for (const [paramId, type] of argParams) {
@@ -118,9 +145,11 @@ export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Consta
                 ret.push(`${returnType} ${id}(${params}) {`)
         } else {
                 for (const [paramId, type] of argParams) params.push(`${paramId}: ${getConversions(type, c)}`)
-                ret.push(`fn ${id}(${params}) -> ${getConversions(returnType, c)} {`)
+                const isVoid = returnType === 'void'
+                if (isVoid) {
+                        ret.push(`fn ${id}(${params}) {`)
+                } else ret.push(`fn ${id}(${params}) -> ${getConversions(returnType, c)} {`)
         }
-        const scopeCode = code(x, c)
         if (scopeCode) ret.push(scopeCode)
         ret.push('}')
         return ret.join('\n')
@@ -135,6 +164,13 @@ export const parseVaryingHead = (c: NodeContext, id: string, type: string) => {
                 : `@location(${c.code?.vertVaryings?.size || 0}) ${id}: ${getConversions(type, c)}`
 }
 
+export const parseAttribHead = (c: NodeContext, id: string, type: Constants) => {
+        if (c.isWebGL) return `${type} ${id};`
+        const { location = 0 } = c.gl?.webgpu?.attribs.map.get(id) || {}
+        const wgslType = getConversions(type, c)
+        return `@location(${location}) ${id}: ${wgslType}`
+}
+
 export const parseUniformHead = (c: NodeContext, id: string, type: Constants) => {
         const isTexture = type === 'sampler2D' || type === 'texture'
         if (c.isWebGL)
@@ -153,11 +189,16 @@ export const parseUniformHead = (c: NodeContext, id: string, type: Constants) =>
         return `@group(${group}) @binding(${binding}) var<uniform> ${id}: ${wgslType};`
 }
 
-export const parseAttribHead = (c: NodeContext, id: string, type: Constants) => {
-        if (c.isWebGL) return `${type} ${id};`
-        const { location = 0 } = c.gl?.webgpu?.attribs.map.get(id) || {}
+export const parseStorageHead = (c: NodeContext, id: string, type: Constants) => {
+        if (c.isWebGL) {
+                const ret = `uniform sampler2D ${id};`
+                if (c.label !== 'compute') return ret
+                const location = c.units?.(id)
+                return `${ret}\nlayout(location = ${location}) out vec4 _${id};` // out texture buffer
+        }
+        const { group = 0, binding = 0 } = c.gl?.webgpu?.storages.map.get(id) || {}
         const wgslType = getConversions(type, c)
-        return `@location(${location}) ${id}: ${wgslType}`
+        return `@group(${group}) @binding(${binding}) var<storage, read_write> ${id}: array<${wgslType}>;`
 }
 
 export const parseConstantHead = (c: NodeContext, id: string, type: Constants, value: string) => {

package/src/node/utils/utils.ts

@@ -34,7 +34,7 @@ export const isNodeProxy = <T extends Constants>(x: unknown): x is NodeProxy<T>
 
 export const isConstants = (type?: unknown): type is Constants => {
         if (!is.str(type)) return false
-        return CONSTANTS.includes(type)
+        return CONSTANTS.includes(type as any)
 }
 
 export const hex2rgb = (hex: number) => {
@@ -48,8 +48,14 @@ let count = 0
 
 export const getId = () => `x${count++}`
 
-export const getBluiltin = (id: string) => {
-        return WGSL_TO_GLSL_BUILTIN[id as keyof typeof WGSL_TO_GLSL_BUILTIN]
+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 ret = WGSL_TO_GLSL_BUILTIN[id as keyof typeof WGSL_TO_GLSL_BUILTIN]
+        if (!ret) throw new Error(`Error: unknown builtin variable ${id}`)
+        return ret
 }
 
 export const getConversions = <T extends Constants>(x: X<T>, c?: NodeContext) => {
@@ -58,7 +64,7 @@ export const getConversions = <T extends Constants>(x: X<T>, c?: NodeContext) =>
         return TYPE_MAPPING[x as keyof typeof TYPE_MAPPING] || x // for struct type
 }
 
-export const getOperator = (op: X<string>) => {
+export const getOperator = (op: X) => {
         return OPERATORS[op as keyof typeof OPERATORS] || op
 }
 
@@ -80,11 +86,11 @@ export const getEventFun = (c: NodeContext, id: string, isAttribute = false, isT
 
 export const safeEventCall = <T extends Constants>(x: X<T>, fun: (value: unknown) => void) => {
         if (is.und(x)) return
-        if (!isNodeProxy(x)) return fun(x) // for uniform(1)
+        if (!isNodeProxy(x)) return fun(x) // for uniform(0) or uniform([0, 1])
         if (x.type !== 'conversion') return
-        const value = x.props.children?.slice(1).filter(Boolean)
-        if (!value?.length) return // for uniform(vec2())
-        fun(value)
+        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) => {
@@ -95,7 +101,9 @@ export const initNodeContext = (c: NodeContext) => {
                 vertInputs: new Map(),
                 vertOutputs: new Map(),
                 vertVaryings: new Map(),
+                computeInputs: new Map(),
                 dependencies: new Map(),
+                structFields: new Map(),
         }
         if (c.isWebGL) return c
         c.code.fragInputs.set('position', '@builtin(position) position: vec4f')

package/src/types.ts

@@ -1,6 +1,6 @@
 import type { EventState, Nested } from 'reev'
 import type { Fun, Queue, Frame } from 'refr'
-import type { NodeProxy, Vec4 } from './node'
+import type { NodeProxy, Vec4, Void } from './node'
 export type { Fun, Queue, Frame }
 
 export type GL = EventState<{
@@ -18,15 +18,16 @@ export type GL = EventState<{
         mouse: [number, number]
         count: number
         loading: number
+        particles: 64 | 256 | 576 | 1024 | 1600 | 2304 | 3136 | 4096 | 4096 | 5184 | 6400 // (8k)^2
         el: HTMLCanvasElement
         vs?: string | Vec4
-        cs?: string | Vec4
+        cs?: string | Void
         fs?: string | Vec4
         vert?: string | Vec4
-        comp?: string | Vec4
+        comp?: string | Void
         frag?: string | Vec4
         vertex?: string | Vec4
-        compute?: string | Vec4
+        compute?: string | Void
         fragment?: string | Vec4
 
         /**
@@ -117,4 +118,5 @@ export interface WebGPUState {
 export interface WebGLState {
         context: WebGLRenderingContext
         program: WebGLProgram
+        storages: any
 }

package/src/utils/program.ts

@@ -1,6 +1,4 @@
-import { fragment, vertex } from '../node'
 import { is } from './helpers'
-import type { X } from '../node'
 import type { GL } from '../types'
 
 const createShader = (c: WebGLRenderingContext, source: string, type: number, onError = console.warn) => {
@@ -11,20 +9,16 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number, on
         if (c.getShaderParameter(shader, c.COMPILE_STATUS)) return shader
         const error = c.getShaderInfoLog(shader)
         c.deleteShader(shader)
-        onError(`Could not compile shader: ${error}`)
+        onError(`Could not compile shader: ${error}\n\n↓↓↓generated↓↓↓\n${source}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vert: X, frag: X, gl: GL) => {
-        if (!vert || !frag) return
-        const config = { isWebGL: true, gl }
-        frag = fragment(frag, config) // needs to be before vertex
-        vert = vertex(vert, config)
+export const createProgram = (c: WebGLRenderingContext, frag: string, vert: string, gl: GL) => {
         const pg = c.createProgram()
-        const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
         const fs = createShader(c, frag, c.FRAGMENT_SHADER, gl.error)
+        const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
         if (!fs || !vs) return
-        c.attachShader(pg, vs!)
         c.attachShader(pg, fs!)
+        c.attachShader(pg, vs!)
         c.linkProgram(pg)
         if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
         const error = c.getProgramInfoLog(pg)
@@ -93,20 +87,70 @@ export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, l
         c.bindTexture(c.TEXTURE_2D, texture)
 }
 
-export const createStorage = (c: WebGL2RenderingContext, size: number, storage: any, array: any) => {
-        const data = new Float32Array(size * size * 4)
-        for (let i = 0; i < array.length; i++) data[i * 4] = array[i]
-        c.activeTexture(c.TEXTURE0 + storage.unit)
-        c.bindTexture(c.TEXTURE_2D, storage.a.texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, data)
+/**
+ * for gpgpu
+ */
+interface TextureBuffer {
+        texture: WebGLTexture
+        buffer: WebGLFramebuffer
+}
+
+export const createStorage = (
+        c: WebGL2RenderingContext,
+        value: number[],
+        size: 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++) {
+                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.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, storage.b.texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 0, c.RGBA, c.FLOAT, null)
+        c.bindTexture(c.TEXTURE_2D, pong.texture)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA32F, size, size, 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)
 }
+
+export const cleanStorage = (
+        c: WebGL2RenderingContext,
+        map: Iterable<{ ping: TextureBuffer; pong: TextureBuffer }>
+) => {
+        for (const { ping, pong } of map) {
+                c.deleteTexture(ping.texture)
+                c.deleteTexture(pong.texture)
+                c.deleteFramebuffer(ping.buffer)
+                c.deleteFramebuffer(pong.buffer)
+        }
+}
+
+export const createAttachment = (
+        c: WebGL2RenderingContext,
+        i: TextureBuffer,
+        o: TextureBuffer,
+        loc: WebGLUniformLocation,
+        unit: number,
+        index: number
+) => {
+        c.activeTexture(c.TEXTURE0 + unit)
+        c.bindTexture(c.TEXTURE_2D, i.texture)
+        c.uniform1i(loc, unit)
+        if (index === 0) c.bindFramebuffer(c.FRAMEBUFFER, o.buffer)
+        const attachment = c.COLOR_ATTACHMENT0 + index
+        c.framebufferTexture2D(c.FRAMEBUFFER, attachment, c.TEXTURE_2D, o.texture, 0)
+        return attachment
+}

package/src/webgl.ts

@@ -1,6 +1,15 @@
 import { nested as cached } from 'reev'
 import { loadingImage } from './utils/helpers'
-import { createAttrib, createProgram, createStorage, createTexture, createUniform } from './utils/program'
+import {
+        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 */ `
@@ -11,100 +20,103 @@ void main() {
         gl_Position = vec4(x, y, 0.0, 1.0);
 }`.trim()
 
-export const webgl = async (gl: GL) => {
-        const c = gl.el!.getContext('webgl2')!
+const computeProgram = (gl: GL, c: WebGL2RenderingContext) => {
+        if (!gl.cs) return null // ignore if no compute shader
         c.getExtension('EXT_color_buffer_float')
-        const pg1 = createProgram(c, gl.vs, gl.fs, gl)!
-        const pg2 = createProgram(c, vert, gl.cs, gl)!
-        c.useProgram(pg1)
 
         let activeUnit = 0 // for texture units
         let currentNum = 0 // for storage buffers
 
-        const attribs = cached((key) => c.getAttribLocation(pg1, key))
-        const uniforms1 = cached((key) => c.getUniformLocation(pg1, key))
-        const uniforms2 = cached((key) => c.getUniformLocation(pg2, key))
-        const textures = cached(() => activeUnit++)
-        const storages = cached(() => {
-                const unit = activeUnit++
-                const a = { texture: c.createTexture(), buffer: c.createFramebuffer() }
-                const b = { texture: c.createTexture(), buffer: c.createFramebuffer() }
-                return { a, b, unit, width: 0, height: 0 }
+        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 uniforms = cached((key) => c.getUniformLocation(pg, key)!)
+        const storages = cached((key) => {
+                const array = new Float32Array(size * size * 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) }
         })
 
+        const _uniform = (key: string, value: number | number[]) => {
+                c.useProgram(pg)
+                createUniform(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)
+        }
+
+        const clean = () => {
+                c.deleteProgram(pg)
+                cleanStorage(c, storages.map.values())
+        }
+
+        const render = () => {
+                c.useProgram(pg)
+                const attachments = storages.map.values().map(({ ping, pong, loc, unit }, index) => {
+                        const [i, o] = currentNum % 2 ? [ping, pong] : [pong, ping]
+                        return createAttachment(c, i, o, loc, unit, index)
+                })
+                c.drawBuffers(attachments)
+                c.drawArrays(c.TRIANGLES, 0, 3)
+                c.bindFramebuffer(c.FRAMEBUFFER, null)
+                currentNum++
+        }
+
+        return { render, clean, _uniform, _storage, storages }
+}
+
+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)!
+        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 _uniform = (key: string, value: number | number[]) => {
-                createUniform(c, uniforms1(key)!, value)
-                if (!pg2) return
-                c.useProgram(pg2)
-                createUniform(c, uniforms2(key)!, value)
-                c.useProgram(pg1)
+                c.useProgram(pg)
+                createUniform(c, uniforms(key)!, value)
+                cp?._uniform(key, value)
         }
 
         const _texture = (key: string, src: string) => {
+                c.useProgram(pg)
                 loadingImage(gl, src, (source) => {
-                        const loc = uniforms1(key)
-                        const unit = textures(key)
-                        createTexture(c, source, loc, unit)
+                        createTexture(c, source, uniforms(key), units(key))
                 })
         }
 
-        const _storage = (key: string, value: number[] | Float32Array) => {
-                const array = value instanceof Float32Array ? value : new Float32Array(value)
-                const storage = storages(key)
-                const size = Math.ceil(Math.sqrt(array.length))
-                storage.width = size
-                storage.height = size
-                createStorage(c, size, storage, array)
-                c.uniform1i(uniforms1(key), storage.unit)
-        }
-
         const clean = () => {
-                c.deleteProgram(pg1)
-                if (pg2) c.deleteProgram(pg2)
-                for (const { a, b } of storages.map.values()) {
-                        c.deleteTexture(a.texture)
-                        c.deleteTexture(b.texture)
-                        c.deleteFramebuffer(a.buffer)
-                        c.deleteFramebuffer(b.buffer)
-                }
+                cp?.clean()
+                c.deleteProgram(pg)
                 c.getExtension('WEBGL_lose_context')?.loseContext()
         }
 
-        const _compute = () => {
-                c.useProgram(pg2)
-                for (const [, storage] of storages.map) {
-                        const output = currentNum % 2 ? storage.b : storage.a
-                        c.bindFramebuffer(c.FRAMEBUFFER, output.buffer)
-                        c.framebufferTexture2D(c.FRAMEBUFFER, c.COLOR_ATTACHMENT0, c.TEXTURE_2D, output.texture, 0)
-                        c.viewport(0, 0, storage.width, storage.height)
-                        c.drawArrays(c.TRIANGLES, 0, 6)
-                        c.bindFramebuffer(c.FRAMEBUFFER, null)
-                }
-                currentNum++
-                c.useProgram(pg1)
-        }
-
         const render = () => {
-                if (pg2) _compute()
-                c.bindFramebuffer(c.FRAMEBUFFER, null)
-                c.clear(c.COLOR_BUFFER_BIT)
+                cp?.render()
+                c.useProgram(pg)
                 c.viewport(0, 0, ...gl.size)
-                for (const [key, { unit, a, b }] of storages.map) {
-                        const loc = uniforms1(key)
-                        const output = currentNum % 2 ? a : b
-                        c.activeTexture(c.TEXTURE0 + unit)
-                        c.bindTexture(c.TEXTURE_2D, output.texture)
-                        c.uniform1i(loc, unit)
-                }
                 c.drawArrays(c.TRIANGLES, 0, gl.count)
+                c.bindFramebuffer(c.FRAMEBUFFER, null)
         }
 
-        const webgl: WebGLState = { context: c, program: pg1 }
+        const webgl: WebGLState = { context: c, program: pg, storages: cp?.storages }
 
-        return { webgl, render, clean, _attribute, _uniform, _texture, _storage }
+        return { webgl, render, clean, _attribute, _uniform, _texture, _storage: cp?._storage }
 }