glre 0.34.0 → 0.36.0

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
@@ -54,48 +54,17 @@ 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)};`
 }
 
-export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Constants) => {
-        const { id, children = [], layout } = props
-        const [x, ...args] = children
-        const argParams: [name: string, type: string][] = []
-        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)])
-                }
-        const ret = []
-        if (c?.isWebGL) {
-                for (const [paramId, type] of argParams) {
-                        addDependency(c, id!, type)
-                        params.push(`${type} ${paramId}`)
-                }
-                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)} {`)
-        }
-        const scopeCode = code(x, c)
-        if (scopeCode) ret.push(scopeCode)
-        ret.push('}')
-        return ret.join('\n')
-}
-
 export const parseStructHead = (c: NodeContext, id: string, fields: Record<string, NodeProxy> = {}) => {
         const lines: string[] = []
         for (const key in fields) {
                 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};`
@@ -123,13 +92,47 @@ export const parseStruct = (
         }
 }
 
+/**
+ * define
+ */
+export const parseDefine = (c: NodeContext, props: NodeProps, returnType: Constants) => {
+        const { id, children = [], layout } = props
+        const [x, ...args] = children
+        const argParams: [name: string, type: string][] = []
+        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)])
+                }
+        const ret = []
+        if (c?.isWebGL) {
+                for (const [paramId, type] of argParams) {
+                        addDependency(c, id!, type)
+                        params.push(`${type} ${paramId}`)
+                }
+                addDependency(c, id!, returnType)
+                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 scopeCode = code(x, c)
+        if (scopeCode) ret.push(scopeCode)
+        ret.push('}')
+        return ret.join('\n')
+}
+
 /**
  * headers
  */
 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 parseUniformHead = (c: NodeContext, id: string, type: Constants) => {
@@ -146,17 +149,17 @@ 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)
+        const wgslType = getConversions(type, c)
         return `@location(${location}) ${id}: ${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)
@@ -46,9 +46,13 @@ export const hex2rgb = (hex: number) => {
 
 let count = 0
 
-export const getId = () => `i${count++}`
+export const getId = () => `x${count++}`
 
-export const formatConversions = <T extends Constants>(x: X<T>, c?: NodeContext) => {
+export const getBluiltin = (id: string) => {
+        return WGSL_TO_GLSL_BUILTIN[id as keyof typeof WGSL_TO_GLSL_BUILTIN]
+}
+
+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 +62,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'
 }
@@ -79,7 +79,7 @@ export const getEventFun = (c: NodeContext, id: string, isAttribute = false, isT
 }
 
 export const safeEventCall = <T extends Constants>(x: X<T>, fun: (value: unknown) => void) => {
-        if (!x) return
+        if (is.und(x)) return
         if (!isNodeProxy(x)) return fun(x) // for uniform(1)
         if (x.type !== 'conversion') return
         const value = x.props.children?.slice(1).filter(Boolean)
@@ -88,42 +88,26 @@ 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(),
+                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<{
         /**
@@ -59,20 +9,25 @@ export type GL = EventState<{
          */
         isNative: boolean
         isWebGL: boolean
+        isError: boolean
         isLoop: boolean
         isGL: true
-        width: number
-        height: number
+        width?: number
+        height?: number
         size: [number, number]
         mouse: [number, number]
         count: number
+        loading: number
         el: HTMLCanvasElement
-        vs: string | Vec4
-        fs: string | Vec4
-        vert: string | Vec4
-        frag: string | Vec4
-        vertex: string | Vec4
-        fragment: string | Vec4
+        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
 
         /**
          * core state
@@ -86,13 +41,13 @@ export type GL = EventState<{
          * events
          */
         ref?: any
-        init(): void
-        loop(): void
         mount(): void
         clean(): void
+        error(e?: string): void
         render(): void
         resize(e?: Event): void
         mousemove(e: Event): void
+        loop(): void
 
         /**
          * setter
@@ -107,4 +62,59 @@ 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
+}

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 }
 }
 

package/src/utils/program.ts

@@ -1,30 +1,38 @@
-const createShader = (c: WebGLRenderingContext, source: string, type: number) => {
+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) => {
         const shader = c.createShader(type)
-        if (!shader) throw new Error('Failed to create shader')
+        if (!shader) return onError('Failed to create shader')
         c.shaderSource(shader, source.trim())
         c.compileShader(shader)
         if (c.getShaderParameter(shader, c.COMPILE_STATUS)) return shader
         const error = c.getShaderInfoLog(shader)
         c.deleteShader(shader)
-        console.warn(`Could not compile shader: ${error}`)
+        onError(`Could not compile shader: ${error}`)
 }
 
-export const createProgram = (c: WebGLRenderingContext, vert: string, frag: string, onError = () => {}) => {
+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)
         const pg = c.createProgram()
-        const fs = createShader(c, frag, c.FRAGMENT_SHADER)
-        const vs = createShader(c, vert, c.VERTEX_SHADER)
-        if (!fs || !vs) return onError()
-        c.attachShader(pg, vs)
-        c.attachShader(pg, fs)
+        const vs = createShader(c, vert, c.VERTEX_SHADER, gl.error)
+        const fs = createShader(c, frag, c.FRAGMENT_SHADER, gl.error)
+        if (!fs || !vs) return
+        c.attachShader(pg, vs!)
+        c.attachShader(pg, fs!)
         c.linkProgram(pg)
         if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
         const error = c.getProgramInfoLog(pg)
         c.deleteProgram(pg)
-        onError()
-        console.warn(`Could not link program: ${error}`)
+        gl.error(`Could not link program: ${error}`)
 }
 
-export const createVbo = (c: WebGLRenderingContext, data: number[]) => {
+const createVbo = (c: WebGLRenderingContext, data: number[]) => {
         const buffer = c.createBuffer()
         c.bindBuffer(c.ARRAY_BUFFER, buffer)
         c.bufferData(c.ARRAY_BUFFER, new Float32Array(data), c.STATIC_DRAW)
@@ -32,7 +40,7 @@ export const createVbo = (c: WebGLRenderingContext, data: number[]) => {
         return buffer
 }
 
-export const createIbo = (c: WebGLRenderingContext, data: number[]) => {
+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)
@@ -40,7 +48,7 @@ export const createIbo = (c: WebGLRenderingContext, data: number[]) => {
         return buffer
 }
 
-export const getStride = (count: number, value: number[], iboValue?: number[]) => {
+const getStride = (count: number, value: number[], iboValue?: number[]) => {
         if (iboValue) count = Math.max(...iboValue) + 1
         const stride = value.length / count
         return Math.floor(stride)
@@ -48,17 +56,28 @@ export const getStride = (count: number, value: number[], iboValue?: number[]) =
 
 export const createAttrib = (
         c: WebGLRenderingContext,
-        stride: number,
-        loc: any,
-        vbo: WebGLBuffer,
-        ibo?: WebGLBuffer
+        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)
         c.enableVertexAttribArray(loc)
-        c.vertexAttribPointer(loc, stride, c.FLOAT, false, 0, 0)
+        c.vertexAttribPointer(loc, str, c.FLOAT, false, 0, 0)
         if (ibo) c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, ibo)
 }
 
+export const createUniform = (c: WebGLRenderingContext, 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)
+        l = Math.sqrt(l) << 0
+        c[`uniformMatrix${l as 2}fv`](loc, false, value)
+}
+
 export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, loc: any, unit: number) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
@@ -73,3 +92,21 @@ export const createTexture = (c: WebGLRenderingContext, img: HTMLImageElement, l
         c.activeTexture(c.TEXTURE0 + unit)
         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)
+        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.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)
+}