glre 0.35.0 → 0.37.0

package/src/node/{code.ts → utils/index.ts}

@@ -1,4 +1,3 @@
-import { is } from '../utils/helpers'
 import { infer } from './infer'
 import {
         parseArray,
@@ -6,16 +5,22 @@ import {
         parseConstantHead,
         parseDeclare,
         parseDefine,
+        parseGather,
         parseIf,
+        parseScatter,
+        parseStorageHead,
         parseStruct,
         parseStructHead,
         parseSwitch,
         parseTexture,
-        parseVaryingHead,
         parseUniformHead,
+        parseVaryingHead,
 } from './parse'
-import { getBluiltin, getOperator, formatConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
-import type { Constants, NodeContext, X } from './types'
+import { getBluiltin, getOperator, getConversions, safeEventCall, getEventFun, initNodeContext } from './utils'
+import { is } from '../../utils/helpers'
+import type { Constants, NodeContext, X } from '../types'
+
+export * from './utils'
 
 export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null): string => {
         if (!c) c = {}
@@ -31,19 +36,30 @@ export const code = <T extends Constants>(target: X<T>, c?: NodeContext | null):
         }
         if (is.bol(target)) return target ? 'true' : 'false'
         if (!target) return ''
-        const { type, props } = target
+        const { type, props = {} } = target
         const { id = 'i', children = [], fields, initialValues } = props
         const [x, y, z, w] = children
         /**
          * variables
          */
         if (type === 'variable') return id
-        if (type === 'member') return `${code(y, c)}.${code(x, c)}`
+        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)})`
                         : `select(${code(x, c)}, ${code(y, c)}, ${code(z, c)})`
-        if (type === 'conversion') return `${formatConversions(x, c)}(${parseArray(children.slice(1), c)})`
+        if (type === 'conversion') return `${getConversions(x, c)}(${parseArray(children.slice(1), c)})`
         if (type === 'operator') {
                 if (x === 'not' || x === 'bitNot') return `!${code(y, c)}`
                 return `(${code(y, c)} ${getOperator(x)} ${code(z, c)})`
@@ -88,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}: ${formatConversions(infer(target, c), c)}`
-                if (c.isFrag) {
-                        c.code?.fragInputs.set(id, field)
-                } else c.code?.vertInputs.set(id, field)
+                const field = `@builtin(${id}) ${id}: ${getConversions(infer(target, c), c)}`
+                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') {
@@ -112,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/{infer.ts → utils/infer.ts}

@@ -1,4 +1,4 @@
-import { is } from '../utils/helpers'
+import { isConstants, isNodeProxy, isSwizzle } from './utils'
 import {
         BUILTIN_TYPES,
         COMPARISON_OPERATORS,
@@ -6,8 +6,8 @@ import {
         FUNCTION_RETURN_TYPES,
         LOGICAL_OPERATORS,
 } from './const'
-import { isConstants, isNodeProxy, isSwizzle } from './utils'
-import type { Constants as C, NodeContext, NodeProxy, X } from './types'
+import { is } from '../../utils/helpers'
+import type { Constants as C, NodeContext, NodeProxy, X } from '../types'
 
 const inferBuiltin = <T extends C>(id: string | undefined) => {
         return BUILTIN_TYPES[id as keyof typeof BUILTIN_TYPES] as T
@@ -66,18 +66,22 @@ export const inferImpl = <T extends C>(target: NodeProxy<T>, c: NodeContext): T
         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 === 'member') {
-                if (isSwizzle(x)) return inferFromCount(x.length)
-                if (isNodeProxy(y) && is.str(x)) {
-                        const field = (y as any).props.fields?.[x] // for variable node of struct 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)
                 }
                 return 'float' as T // fallback @TODO FIX
         }
         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 => {

package/src/node/{parse.ts → utils/parse.ts}

@@ -1,8 +1,8 @@
-import { is } from '../utils/helpers'
-import { code } from './code'
+import { code } from '.'
 import { infer } from './infer'
-import { formatConversions, addDependency } from './utils'
-import type { Constants, NodeContext, NodeProps, NodeProxy, X } from './types'
+import { getConversions, addDependency } from './utils'
+import { is } from '../../utils/helpers'
+import type { Constants, NodeContext, NodeProps, NodeProxy, 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]
@@ -54,7 +83,7 @@ export const parseDeclare = (c: NodeContext, x: X, y: X) => {
         const type = infer(x, c)
         const varName = (y as any)?.props?.id
         if (c.isWebGL) return `${type} ${varName} = ${code(x, c)};`
-        const wgslType = formatConversions(type)
+        const wgslType = getConversions(type)
         return `var ${varName}: ${wgslType} = ${code(x, c)};`
 }
 
@@ -64,7 +93,7 @@ export const parseStructHead = (c: NodeContext, id: string, fields: Record<strin
                 const fieldType = fields[key]
                 const type = infer(fieldType, c)
                 if (c.isWebGL) addDependency(c, id, type)
-                lines.push(c.isWebGL ? `${type} ${key};` : `${key}: ${formatConversions(type, c)},`)
+                lines.push(c.isWebGL ? `${type} ${key};` : `${key}: ${getConversions(type, c)},`)
         }
         const ret = lines.join('\n  ')
         return `struct ${id} {\n  ${ret}\n};`
@@ -117,8 +146,11 @@ export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Consta
                 addDependency(c, id!, returnType)
                 ret.push(`${returnType} ${id}(${params}) {`)
         } else {
-                for (const [paramId, type] of argParams) params.push(`${paramId}: ${formatConversions(type, c)}`)
-                ret.push(`fn ${id}(${params}) -> ${formatConversions(returnType, c)} {`)
+                for (const [paramId, type] of argParams) params.push(`${paramId}: ${getConversions(type, 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)
@@ -132,7 +164,14 @@ export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Consta
 export const parseVaryingHead = (c: NodeContext, id: string, type: string) => {
         return c.isWebGL
                 ? `${type} ${id};`
-                : `@location(${c.code?.vertVaryings?.size || 0}) ${id}: ${formatConversions(type, c)}`
+                : `@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) => {
@@ -149,17 +188,22 @@ export const parseUniformHead = (c: NodeContext, id: string, type: Constants) =>
                 )
         }
         const { group = 0, binding = 0 } = c.gl?.webgpu?.uniforms.map.get(id) || {}
-        const wgslType = formatConversions(type, c)
+        const wgslType = getConversions(type, c)
         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) || {}
-        const wgslType = formatConversions(type, c)
-        return `@location(${location}) ${id}: ${wgslType}`
+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 `@group(${group}) @binding(${binding}) var<storage, read_write> ${id}: array<${wgslType}>;`
 }
 
 export const parseConstantHead = (c: NodeContext, id: string, type: Constants, value: string) => {
-        return c.isWebGL ? `const ${type} ${id} = ${value};` : `const ${id}: ${formatConversions(type, c)} = ${value};`
+        return c.isWebGL ? `const ${type} ${id} = ${value};` : `const ${id}: ${getConversions(type, c)} = ${value};`
 }

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

@@ -1,4 +1,3 @@
-import { is } from '../utils/helpers'
 import {
         CONSTANTS,
         CONVERSIONS,
@@ -8,7 +7,8 @@ import {
         TYPE_MAPPING,
         WGSL_TO_GLSL_BUILTIN,
 } from './const'
-import type { Constants, Conversions, Functions, NodeContext, NodeProxy, Operators, Swizzles, X } from './types'
+import { is } from '../../utils/helpers'
+import type { Constants, Conversions, Functions, NodeContext, NodeProxy, Operators, Swizzles, X } from '../types'
 
 export const isSwizzle = (key: unknown): key is Swizzles => {
         return is.str(key) && /^[xyzwrgbastpq]{1,4}$/.test(key)
@@ -48,7 +48,17 @@ let count = 0
 
 export const getId = () => `x${count++}`
 
-export const formatConversions = <T extends Constants>(x: X<T>, c?: NodeContext) => {
+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) => {
         if (!is.str(x)) return ''
         if (c?.isWebGL) return x
         return TYPE_MAPPING[x as keyof typeof TYPE_MAPPING] || x // for struct type
@@ -58,11 +68,7 @@ export const getOperator = (op: X<string>) => {
         return OPERATORS[op as keyof typeof OPERATORS] || op
 }
 
-export const getBluiltin = (id: string) => {
-        return WGSL_TO_GLSL_BUILTIN[id as keyof typeof WGSL_TO_GLSL_BUILTIN]
-}
-
-export const conversionToConstant = (conversionKey: string): Constants => {
+export const getConstant = (conversionKey: string): Constants => {
         const index = CONVERSIONS.indexOf(conversionKey as Conversions)
         return index !== -1 ? CONSTANTS[index] : 'float'
 }
@@ -88,42 +94,27 @@ export const safeEventCall = <T extends Constants>(x: X<T>, fun: (value: unknown
 }
 
 export const initNodeContext = (c: NodeContext) => {
-        if (!c.code) {
-                c.code = {
-                        headers: new Map(),
-                        fragInputs: new Map(),
-                        vertInputs: new Map(),
-                        vertOutputs: new Map(),
-                        vertVaryings: new Map(),
-                        dependencies: new Map(),
-                }
-                if (!c.isWebGL) {
-                        c.code.fragInputs.set('position', '@builtin(position) position: vec4f')
-                        c.code.vertOutputs.set('position', '@builtin(position) position: vec4f')
-                }
+        if (c.code) return c
+        c.code = {
+                headers: new Map(),
+                fragInputs: new Map(),
+                vertInputs: new Map(),
+                vertOutputs: new Map(),
+                vertVaryings: new Map(),
+                computeInputs: new Map(),
+                dependencies: new Map(),
         }
+        if (c.isWebGL) return c
+        c.code.fragInputs.set('position', '@builtin(position) position: vec4f')
+        c.code.vertOutputs.set('position', '@builtin(position) position: vec4f')
         return c
 }
 
+export const isArrayAccess = (key: unknown): boolean => {
+        return is.num(key) || (is.str(key) && /^\d+$/.test(key))
+}
+
 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)
 }
-
-export const sortHeadersByDependencies = (headers: Map<string, string>, dependencies: Map<string, Set<string>>) => {
-        const sorted: [string, string][] = []
-        const visited = new Set<string>()
-        const visiting = new Set<string>()
-        const visit = (id: string) => {
-                if (visiting.has(id)) return
-                if (visited.has(id)) return
-                visiting.add(id)
-                const deps = dependencies.get(id) || new Set()
-                for (const dep of deps) if (headers.has(dep)) visit(dep)
-                visiting.delete(id)
-                visited.add(id)
-                if (headers.has(id)) sorted.push([id, headers.get(id)!])
-        }
-        for (const [id] of headers) visit(id)
-        return sorted
-}

package/src/types.ts

@@ -2,56 +2,6 @@ import type { EventState, Nested } from 'reev'
 import type { Fun, Queue, Frame } from 'refr'
 import type { NodeProxy, Vec4 } from './node'
 export type { Fun, Queue, Frame }
-export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
-export type GLClearMode = 'COLOR_BUFFER_BIT' | 'DEPTH_BUFFER_BIT' | 'STENCIL_BUFFER_BIT'
-export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'
-export type GLDrawMode =
-        | 'POINTS'
-        | 'LINE_STRIP'
-        | 'LINE_LOOP'
-        | 'LINES'
-        | 'TRIANGLE_STRIP'
-        | 'TRIANGLE_FAN'
-        | 'TRIANGLES'
-
-export interface UniformData {
-        array: Float32Array
-        buffer: GPUBuffer
-        binding: number
-        group: number
-}
-
-export interface TextureData {
-        binding: number
-        group: number
-        texture: GPUTexture
-        sampler: GPUSampler
-        view: GPUTextureView
-}
-
-export interface AttribData {
-        array: Float32Array
-        buffer: GPUBuffer
-        location: number
-        stride: number
-}
-
-export interface WebGLState {
-        context: WebGLRenderingContext
-        program: WebGLProgram
-}
-
-export interface WebGPUState {
-        device: GPUDevice
-        uniforms: Nested<UniformData>
-        textures: Nested<TextureData>
-        attribs: Nested<AttribData>
-}
-
-export type Uniform = number | number[]
-export type Attribute = number[]
-export type Attributes = Record<string, Attribute>
-export type Uniforms = Record<string, Uniform>
 
 export type GL = EventState<{
         /**
@@ -68,12 +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
         fs?: string | Vec4
         vert?: string | Vec4
+        comp?: string | Vec4
         frag?: string | Vec4
         vertex?: string | Vec4
+        compute?: string | Vec4
         fragment?: string | Vec4
 
         /**
@@ -109,4 +63,60 @@ 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
+        _storage?(key: string, value: Storage): GL
+        storage(key: string, value: Storage): GL
+        storage(target: { [key: string]: Storage }): GL
 }>
+
+type Uniform = number | number[] | Float32Array
+type Attribute = number[] | Float32Array
+type Storage = number[] | Float32Array
+
+/**
+ * for webgpu
+ */
+export interface UniformData {
+        array: Float32Array
+        buffer: GPUBuffer
+        binding: number
+        group: number
+}
+
+export interface TextureData {
+        binding: number
+        group: number
+        texture: GPUTexture
+        sampler: GPUSampler
+        view: GPUTextureView
+}
+
+export interface AttribData {
+        array: Float32Array
+        buffer: GPUBuffer
+        location: number
+        stride: number
+}
+
+export interface StorageData {
+        array: Float32Array
+        buffer: GPUBuffer
+        binding: number
+        group: number
+}
+
+export interface WebGPUState {
+        device: GPUDevice
+        uniforms: Nested<UniformData>
+        textures: Nested<TextureData>
+        attribs: Nested<AttribData>
+        storages: Nested<StorageData>
+}
+
+/**
+ * for webgl
+ */
+export interface WebGLState {
+        context: WebGLRenderingContext
+        program: WebGLProgram
+        storages: any
+}

package/src/utils/helpers.ts

@@ -1,3 +1,5 @@
+import type { GL } from './../types'
+
 export const is = {
         arr: Array.isArray,
         bol: (a: unknown): a is boolean => typeof a === 'boolean',
@@ -42,3 +44,17 @@ export const sig = (value = 0, digit = -2) => {
         value /= digit
         return value
 }
+
+export const isFloat32 = (value: unknown): value is Float32Array => {
+        return value instanceof Float32Array
+}
+
+export const loadingImage = (gl: GL, src: string, fun: (source: HTMLImageElement) => void) => {
+        gl.loading++
+        const source = new Image()
+        Object.assign(source, { src, crossOrigin: 'anonymous' })
+        source.decode().then(() => {
+                fun(source)
+                gl.loading--
+        })
+}

package/src/utils/pipeline.ts

@@ -1,13 +1,15 @@
-import type { AttribData, TextureData, UniformData } from '../types'
+import { isFloat32 } from './helpers'
+import type { AttribData, TextureData, UniformData, StorageData } from '../types'
 
 /**
  * initialize
  */
-export const createDevice = async (c: GPUCanvasContext) => {
+export const createDevice = async (c: GPUCanvasContext, log = console.log) => {
         const gpu = navigator.gpu
         const format = gpu.getPreferredCanvasFormat()
         const adapter = await gpu.requestAdapter()
         const device = await adapter!.requestDevice()
+        device.onuncapturederror = (e) => log(e.error.message)
         c.configure({ device, format, alphaMode: 'opaque' })
         return { device, format }
 }
@@ -15,6 +17,7 @@ export const createDevice = async (c: GPUCanvasContext) => {
 export const createBindings = () => {
         let uniform = 0
         let texture = 0
+        let storage = 0
         let attrib = 0
         return {
                 uniform: () => {
@@ -30,6 +33,13 @@ export const createBindings = () => {
                         texture++
                         return { group, binding }
                 },
+                storage: () => {
+                        const baseGroup = Math.floor(uniform / 12) + Math.floor(texture / 6) + 2
+                        const group = baseGroup + Math.floor(storage / 12)
+                        const binding = storage % 12
+                        storage++
+                        return { group, binding }
+                },
                 attrib: () => {
                         const location = attrib
                         attrib++
@@ -70,7 +80,8 @@ export const createVertexBuffers = (attribs: Iterable<AttribData>) => {
 export const createBindGroup = (
         device: GPUDevice,
         uniforms: Iterable<UniformData>,
-        textures: Iterable<TextureData>
+        textures: Iterable<TextureData>,
+        storages: Iterable<StorageData> = []
 ) => {
         const groups = new Map<number, { layouts: GPUBindGroupLayoutEntry[]; bindings: GPUBindGroupEntry[] }>()
         const ret = { bindGroups: [] as GPUBindGroup[], bindGroupLayouts: [] as GPUBindGroupLayout[] }
@@ -81,7 +92,10 @@ export const createBindGroup = (
                 bindings.push(binding)
         }
         for (const { binding, buffer, group: i } of uniforms) {
-                add(i, { binding, visibility: 3, buffer: { type: 'uniform' } }, { binding, resource: { buffer } })
+                add(i, { 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: b, group: i, sampler, view } of textures) {
                 add(i, { binding: b, visibility: 2, sampler: {} }, { binding: b, resource: sampler })
@@ -123,19 +137,34 @@ export const createPipeline = (
         })
 }
 
+export const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroupLayout[], cs: string) => {
+        return device.createComputePipeline({
+                compute: {
+                        module: device.createShaderModule({ label: 'compute', code: cs }),
+                        entryPoint: 'main',
+                },
+                layout: device.createPipelineLayout({ bindGroupLayouts }),
+        })
+}
+
 /**
  * buffers
  */
-export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
-        const array = new Float32Array(value)
-        const size = Math.ceil(array.byteLength / 256) * 256
-        const buffer = device.createBuffer({ size, usage: 72 }) // 72 is GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        return { array, buffer }
+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
 }
 
-export const createAttribBuffer = (device: GPUDevice, value: number[]) => {
-        const array = new Float32Array(value)
-        const buffer = device.createBuffer({ size: array.byteLength, usage: 40 }) // 40 is GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+export const createArrayBuffer = (
+        device: GPUDevice,
+        array: number[] | Float32Array,
+        type: 'uniform' | 'storage' | 'attrib'
+) => {
+        if (!isFloat32(array)) array = new Float32Array(array)
+        const usage = bufferUsage(type)
+        const size = type === 'uniform' ? Math.ceil(array.byteLength / 256) * 256 : array.byteLength
+        const buffer = device.createBuffer({ size, usage })
         return { array, buffer }
 }