glre 0.45.0 → 0.46.0

package/src/webgl/compute.ts

@@ -0,0 +1,56 @@
+import { nested } from 'reev'
+import { cleanStorage, createAttachment, createProgram, createStorage, storageSize, updateUniform } from './utils'
+import { GLSL_VS, is } from '../helpers'
+import type { GL } from '../types'
+
+export const compute = (gl: GL) => {
+        if (!gl.cs) return
+        const c = gl.gl
+        c.getExtension('EXT_color_buffer_float') // Enable high precision GPGPU by writing to float textures
+
+        let _texture = 0 // for texture active units
+        let _storage = 0 // for storage current num
+
+        const units = nested(() => _texture++)
+        const cs = is.str(gl.cs) ? gl.cs : gl.cs!.compute({ isWebGL: true, gl, units })
+        const pg = createProgram(c, cs, GLSL_VS, gl)!
+        const size = storageSize(gl.particleCount)
+
+        const uniforms = nested((key) => c.getUniformLocation(pg, key)!)
+        const storages = nested((key) => {
+                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) }
+        })
+
+        gl('_uniform', (key: string, value: number | number[]) => {
+                c.useProgram((gl.program = pg))
+                updateUniform(c, uniforms(key), value)
+        })
+
+        gl('_storage', (key: string, value: number[]) => {
+                c.useProgram((gl.program = pg))
+                const { ping, pong, unit, array } = storages(key)
+                createStorage(c, value, size.x, size.y, ping, pong, unit, array)
+        })
+
+        gl('clean', () => {
+                c.deleteProgram(pg)
+                cleanStorage(c, storages.map.values())
+        })
+
+        gl('render', () => {
+                c.useProgram((gl.program = pg))
+                const attachments = storages.map.values().map(({ ping, pong, loc, unit }, index) => {
+                        const [i, o] = _storage % 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)
+                _storage++
+        })
+}
+
+export type WebGLCompute = ReturnType<typeof compute>

package/src/webgl/graphic.ts

@@ -0,0 +1,65 @@
+import { nested } from 'reev'
+import { getStride, GLSL_FS, GLSL_VS, is, loadingTexture } from '../helpers'
+import { createBuffer, createProgram, createTexture, updateAttrib, updateBuffer, updateInstance, updateUniform } from './utils'
+import type { GL } from '../types'
+
+export const graphic = (gl: GL) => {
+        const config = { isWebGL: true, gl }
+        const c = gl.gl
+        const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : GLSL_FS
+        const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : GLSL_VS
+        const pg = createProgram(c, fs, vs, gl)!
+        let activeUnit = 0
+
+        const units = nested(() => activeUnit++)
+        const uniforms = nested((key) => c.getUniformLocation(pg, key))
+        const attributes = nested((key, value: number[], isInstance = false) => {
+                const stride = getStride(value.length, isInstance ? gl.instanceCount : gl.triangleCount, gl.error)
+                return { stride, location: c.getAttribLocation(pg, key), ...createBuffer(c, value) }
+        })
+
+        gl('_attribute', (key: string, value: number[]) => {
+                c.useProgram((gl.program = pg))
+                const a = attributes(key, value)
+                updateBuffer(c, a.array, a.buffer, value)
+                updateAttrib(c, a.location, a.stride, a.buffer)
+        })
+
+        gl('_instance', (key: string, value: number[]) => {
+                c.useProgram((gl.program = pg))
+                const a = attributes(key, value, true)
+                updateBuffer(c, a.array, a.buffer, value)
+                updateInstance(c, a.location, a.stride, a.buffer)
+        })
+
+        gl('_uniform', (key: string, value: number | number[]) => {
+                c.useProgram((gl.program = pg))
+                updateUniform(c, uniforms(key), value)
+        })
+
+        gl('_texture', (key: string, src: string) => {
+                c.useProgram((gl.program = pg))
+                const location = uniforms(key)
+                const unit = units(key)
+                createTexture(c, null, location, unit, false)
+                loadingTexture(src, (source, isVideo) => {
+                        c.useProgram((gl.program = pg))
+                        const render = createTexture(c, source, location, unit, isVideo)
+                        if (render) gl({ render })
+                })
+        })
+
+        gl('clean', () => {
+                c.deleteProgram(pg)
+        })
+
+        gl('render', () => {
+                c.useProgram((gl.program = pg))
+                if (gl.instanceCount > 1) {
+                        c.drawArraysInstanced(c.TRIANGLES, 0, gl.triangleCount, gl.instanceCount)
+                } else c.drawArrays(c.TRIANGLES, 0, gl.triangleCount)
+                c.bindFramebuffer(c.FRAMEBUFFER, null)
+        })
+}
+
+export type WebGLGraphic = ReturnType<typeof graphic>

package/src/webgl/index.ts

@@ -0,0 +1,21 @@
+import { compute } from './compute'
+import { graphic } from './graphic'
+import { enableDepth, enableWireframe, loseContext } from './utils'
+import type { GL } from '../types'
+
+export const webgl = (gl: GL) => {
+        const isInit = !gl.gl
+        if (isInit) {
+                const c = (gl.gl = gl.el.getContext('webgl2')!)
+                gl('render', () => c.viewport(0, 0, ...gl.size!)) // Run before other renderers' events to prevent flickering
+        }
+
+        compute(gl)
+        graphic(gl)
+
+        if (isInit) {
+                gl('clean', () => loseContext(gl.gl))
+                if (gl.isDepth) enableDepth(gl.gl)
+                if (gl.wireframe) enableWireframe(gl.gl)
+        }
+}

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

@@ -1,4 +1,4 @@
-import { is } from './helpers'
+import { is } from '../helpers'
 import type { GL } from '../types'
 
 const createShader = (c: WebGL2RenderingContext, source: string, type: number, onError = console.warn) => {
@@ -26,13 +26,13 @@ export const createProgram = (c: WebGL2RenderingContext, frag: string, vert: str
         gl.error(`Could not link program: ${error}`)
 }
 
-export const createArrayBuffer = (c: WebGL2RenderingContext, data: number[]) => {
+export const createBuffer = (c: WebGL2RenderingContext, data: number[]) => {
         const array = new Float32Array(data)
         const buffer = c.createBuffer()
         return { array, buffer }
 }
 
-export const setArrayBuffer = (c: WebGL2RenderingContext, array: Float32Array, buffer: WebGLBuffer, value: number[]) => {
+export const updateBuffer = (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)
@@ -52,7 +52,8 @@ export const updateInstance = (c: WebGL2RenderingContext, loc: number, stride: n
         c.vertexAttribDivisor(loc, 1) // divisor is 1
 }
 
-export const updateUniform = (c: WebGL2RenderingContext, loc: WebGLUniformLocation, value: number | number[]) => {
+export const updateUniform = (c: WebGL2RenderingContext, loc: WebGLUniformLocation | null, value: number | number[]) => {
+        if (is.nul(loc)) return
         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)
@@ -60,11 +61,15 @@ export const updateUniform = (c: WebGL2RenderingContext, loc: WebGLUniformLocati
         c[`uniformMatrix${l as 2}fv`](loc, false, value)
 }
 
-export const createTexture = (c: WebGL2RenderingContext, el: HTMLImageElement | HTMLVideoElement, loc: WebGLUniformLocation, unit: number, isVideo = false) => {
+export const createTexture = (c: WebGL2RenderingContext, el: HTMLImageElement | HTMLVideoElement | null, loc: WebGLUniformLocation | null, unit: number, isVideo = false) => {
         const texture = c.createTexture()
         c.bindTexture(c.TEXTURE_2D, texture)
-        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
-        if (!isVideo) c.generateMipmap(c.TEXTURE_2D)
+        if (el) {
+                c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
+                if (!isVideo) c.generateMipmap(c.TEXTURE_2D)
+        } else {
+                c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, 1, 1, 0, c.RGBA, c.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]))
+        }
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MIN_FILTER, c.LINEAR)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_MAG_FILTER, c.LINEAR)
         c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
@@ -77,7 +82,7 @@ export const createTexture = (c: WebGL2RenderingContext, el: HTMLImageElement |
                 return () => {
                         c.activeTexture(c.TEXTURE0 + unit)
                         c.bindTexture(c.TEXTURE_2D, texture)
-                        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el)
+                        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, el!)
                 }
 }
 
@@ -149,3 +154,20 @@ export const storageSize = (particleCount: number | number[] = 1024) => {
         }
         return { x, y }
 }
+
+export const loseContext = (c: WebGL2RenderingContext) => {
+        const ext = c.getExtension('WEBGL_lose_context')
+        if (ext) ext.loseContext()
+}
+
+export const enableDepth = (c: WebGL2RenderingContext) => {
+        c.enable(c.DEPTH_TEST)
+        c.depthFunc(c.LEQUAL)
+        c.enable(c.CULL_FACE)
+        c.cullFace(c.BACK)
+}
+
+export const enableWireframe = (c: WebGL2RenderingContext) => {
+        const ext = c.getExtension('WEBGL_polygon_mode')
+        if (ext) ext.polygonModeWEBGL(c.FRONT_AND_BACK, ext.LINE_WEBGL)
+}

package/src/webgpu/compute.ts

@@ -0,0 +1,39 @@
+import { nested } from 'reev'
+import { createBuffer, updateBuffer, workgroupCount } from './utils'
+import type { Binding } from './utils'
+import type { GL } from '../types'
+
+export const compute = (gl: GL, bindings: Binding) => {
+        let pipeline: GPUComputePipeline | undefined
+        let bindGroups: GPUBindGroup[] | undefined
+
+        const storages = nested((key, value: number[] | Float32Array) => {
+                return { ...bindings.storage(key), ...createBuffer(gl.device, value, 'storage') }
+        })
+
+        gl('_storage', (key: string, value: number[] | Float32Array) => {
+                const { array, buffer } = storages(key, value)
+                updateBuffer(gl.device, value, array, buffer)
+        })
+
+        gl('render', () => {
+                if (!pipeline || !bindGroups) return
+                const pass = gl.encoder.beginComputePass()
+                pass.setPipeline(pipeline)
+                bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
+                const { x, y, z } = workgroupCount(gl.particleCount)
+                pass.dispatchWorkgroups(x, y, z)
+                pass.end()
+        })
+
+        gl('clean', () => {
+                for (const { buffer } of storages.map.values()) buffer.destroy()
+        })
+
+        const set = (_pipeline?: GPUComputePipeline, _bindGroups?: GPUBindGroup[]) => {
+                pipeline = _pipeline
+                bindGroups = _bindGroups
+        }
+
+        return { storages, set }
+}

package/src/webgpu/graphic.ts

@@ -0,0 +1,89 @@
+import { nested } from 'reev'
+import { is, getStride, loadingTexture } from '../helpers'
+import { createBuffer, createDepthTexture, createDescriptor, createTextureSampler, updateBuffer } from './utils'
+import type { Binding } from './utils'
+import type { GL } from '../types'
+
+export const graphic = (gl: GL, bindings: Binding, update = () => {}) => {
+        let pipeline: GPURenderPipeline
+        let bindGroups: GPUBindGroup[]
+        let vertexBuffers: GPUBuffer[]
+        let depthTexture: GPUTexture
+
+        const attributes = nested((key, value: number[], isInstance = false, stride = getStride(value.length, isInstance ? gl.instanceCount : gl.triangleCount)) => {
+                update()
+                return { ...bindings.attrib(key), ...createBuffer(gl.device, value, 'attrib'), isInstance, stride }
+        })
+
+        const uniforms = nested((key, value: number[] | Float32Array) => {
+                update()
+                return { ...bindings.uniform(key), ...createBuffer(gl.device, value, 'uniform') }
+        })
+
+        const textures = nested((key, width = 1, height = 1) => {
+                update()
+                return { ...bindings.texture(key), ...createTextureSampler(gl.device, width, height) }
+        })
+
+        gl('_attribute', (key: string, value: number[] | Float32Array) => {
+                const a = attributes(key, value)
+                updateBuffer(gl.device, value, a.array, a.buffer)
+        })
+
+        gl('_instance', (key: string, value: number[] | Float32Array) => {
+                const a = attributes(key, value, true)
+                updateBuffer(gl.device, value, a.array, a.buffer)
+        })
+
+        gl('_uniform', (key: string, value: number | number[] | Float32Array) => {
+                if (is.num(value)) value = [value]
+                const u = uniforms(key, value)
+                updateBuffer(gl.device, value, u.array, u.buffer)
+        })
+
+        gl('_texture', (key: string, src: string) => {
+                const t = textures(key)
+                loadingTexture(src, (source, isVideo) => {
+                        const [width, height] = isVideo ? [source.videoWidth, source.videoHeight] : [source.width, source.height]
+                        if (t.texture.width !== width || t.texture.height !== height) {
+                                t.texture.destroy()
+                                Object.assign(t, createTextureSampler(gl.device, width, height))
+                                update() // Rebuilding BindGroups because the texture size has changed
+                        }
+                        const render = () => void gl.device.queue.copyExternalImageToTexture({ source }, { texture: t.texture }, { width, height })
+                        if (isVideo) gl({ render })
+                        else render()
+                })
+        })
+
+        gl('render', () => {
+                if (!pipeline || !bindGroups || !vertexBuffers) return
+                const pass = gl.encoder.beginRenderPass(createDescriptor(gl.gpu, depthTexture))
+                pass.setPipeline(pipeline)
+                bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
+                vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
+                pass.draw(gl.triangleCount, gl.instanceCount, 0, 0)
+                pass.end()
+        })
+
+        gl('resize', () => {
+                const canvas = gl.el as HTMLCanvasElement
+                depthTexture?.destroy()
+                depthTexture = createDepthTexture(gl.device, canvas.width, canvas.height)
+        })
+
+        gl('clean', () => {
+                depthTexture?.destroy()
+                for (const { buffer } of attributes.map.values()) buffer.destroy()
+                for (const { texture } of textures.map.values()) texture.destroy()
+                for (const { buffer } of uniforms.map.values()) buffer.destroy()
+        })
+
+        const set = (_pipeline: GPURenderPipeline, _bindGroups: GPUBindGroup[], _vertexBuffers: GPUBuffer[]) => {
+                pipeline = _pipeline
+                bindGroups = _bindGroups
+                vertexBuffers = _vertexBuffers
+        }
+
+        return { uniforms, textures, attributes, set }
+}

package/src/webgpu/index.ts

@@ -0,0 +1,42 @@
+import { compute } from './compute'
+import { graphic } from './graphic'
+import { createBinding, createDevice, updatePipeline } from './utils'
+import { is, WGSL_FS, WGSL_VS } from '../helpers'
+import type { GL } from '../types'
+
+export const webgpu = async (gl: GL) => {
+        let isUpdate = false
+        const isInit = !gl.gl
+        if (isInit) {
+                const gpu = gl.el!.getContext('webgpu') as GPUCanvasContext
+                const { device, format } = await createDevice(gpu, gl.error)
+                gl({ device, format, gpu })
+        }
+
+        gl('render', () => {
+                if (isUpdate) update()
+                gl.encoder = gl.device.createCommandEncoder()
+        })
+
+        const binding = createBinding()
+        const c = compute(gl, binding)
+        const g = graphic(gl, binding, () => (isUpdate = true))
+        const update = () => {
+                isUpdate = false
+                const config = { isWebGL: false, gl, binding }
+                const fs = gl.fs ? (is.str(gl.fs) ? gl.fs : gl.fs.fragment(config)) : WGSL_FS
+                const vs = gl.vs ? (is.str(gl.vs) ? gl.vs : gl.vs.vertex(config)) : WGSL_VS
+                const cs = gl.cs ? (is.str(gl.cs) ? gl.cs : gl.cs.compute(config)) : ''
+                const p = updatePipeline(gl.device, gl.format, g.attributes.map.values(), g.uniforms.map.values(), g.textures.map.values(), c.storages.map.values(), fs, cs, vs)
+                c.set(p.computePipeline, p.bindGroups)
+                g.set(p.graphicPipeline, p.bindGroups, p.vertexBuffers)
+        }
+
+        gl('render', () => {
+                if (gl.encoder) gl.device.queue.submit([gl.encoder.finish()])
+        })
+
+        gl('clean', () => {
+                gl.device.destroy()
+        })
+}

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

@@ -1,53 +1,68 @@
-import { is, isFloat32 } from './helpers'
+import { nested } from 'reev'
+import { is, isFloat32 } from '../helpers'
 import type { AttribData, TextureData, UniformData, StorageData } from '../types'
 
+type IAttribs = Iterable<AttribData & { isInstance?: boolean }>
+type IUniforms = Iterable<UniformData>
+type ITextures = Iterable<TextureData>
+type IStorages = Iterable<StorageData>
+
+/**
+ * binding
+ */
+export const createBinding = () => {
+        let _uniform = 0
+        let _texture = 0
+        let _storage = 0
+        let _attrib = 0
+        const uniform = nested(() => {
+                const group = Math.floor(_uniform / 12)
+                const binding = _uniform % 12
+                _uniform++
+                return { group, binding }
+        })
+        const texture = nested(() => {
+                const baseGroup = Math.floor(_uniform / 12) + 1
+                const group = baseGroup + Math.floor(_texture / 6)
+                const binding = (_texture % 6) * 2
+                _texture++
+                return { group, binding }
+        })
+        const storage = nested(() => {
+                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 }
+        })
+        const attrib = nested(() => {
+                const location = _attrib
+                _attrib++
+                return { location }
+        })
+        return { uniform, texture, storage, attrib }
+}
+
+export type Binding = ReturnType<typeof createBinding>
+
 /**
  * initialize
  */
-export const createDevice = async (c: GPUCanvasContext, log = console.log) => {
+export const createDevice = async (c: GPUCanvasContext, log = console.log, signal?: AbortSignal) => {
         const gpu = navigator.gpu
         const format = gpu.getPreferredCanvasFormat()
         const adapter = await gpu.requestAdapter()
+        if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
         const device = await adapter!.requestDevice()
+        if (signal?.aborted) {
+                device.destroy()
+                if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
+        }
         device.onuncapturederror = (e) => log(e.error.message)
-        c.configure({ device, format, alphaMode: 'opaque' })
+        c.configure({ device, format, alphaMode: 'premultiplied' })
         return { device, format }
 }
 
-export const createBindings = () => {
-        let uniform = 0
-        let texture = 0
-        let storage = 0
-        let attrib = 0
-        return {
-                uniform: () => {
-                        const group = Math.floor(uniform / 12)
-                        const binding = uniform % 12
-                        uniform++
-                        return { group, binding }
-                },
-                texture: () => {
-                        const baseGroup = Math.floor(uniform / 12) + 1
-                        const group = baseGroup + Math.floor(texture / 6)
-                        const binding = (texture % 6) * 2
-                        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++
-                        return { location }
-                },
-        }
-}
-
 /**
  * pipeline update
  */
@@ -58,7 +73,7 @@ const getVertexFormat = (stride: number): GPUVertexFormat => {
         return 'float32'
 }
 
-export const createVertexBuffers = (attribs: Iterable<AttribData & { isInstance?: boolean }>) => {
+const createVertexBuffers = (attribs: IAttribs) => {
         const vertexBuffers: GPUBuffer[] = []
         const bufferLayouts: GPUVertexBufferLayout[] = []
         for (const { buffer, location, stride, isInstance } of attribs) {
@@ -80,12 +95,7 @@ export const createVertexBuffers = (attribs: Iterable<AttribData & { isInstance?
         return { vertexBuffers, bufferLayouts }
 }
 
-export const createBindGroup = (
-        device: GPUDevice,
-        uniforms: Iterable<UniformData>,
-        textures: Iterable<TextureData>,
-        storages: Iterable<StorageData> = []
-) => {
+const createBindGroup = (device: GPUDevice, uniforms: IUniforms, textures: ITextures, storages: IStorages = []) => {
         const groups = new Map<number, { layouts: GPUBindGroupLayoutEntry[]; bindings: GPUBindGroupEntry[] }>()
         const ret = { bindGroups: [] as GPUBindGroup[], bindGroupLayouts: [] as GPUBindGroupLayout[] }
         const add = (i: number, layout: GPUBindGroupLayoutEntry, binding: GPUBindGroupEntry) => {
@@ -111,14 +121,7 @@ export const createBindGroup = (
         return ret
 }
 
-export const createPipeline = (
-        device: GPUDevice,
-        format: GPUTextureFormat,
-        bufferLayouts: GPUVertexBufferLayout[],
-        bindGroupLayouts: GPUBindGroupLayout[],
-        vs: string,
-        fs: string
-) => {
+const createPipeline = (device: GPUDevice, format: GPUTextureFormat, bufferLayouts: GPUVertexBufferLayout[], bindGroupLayouts: GPUBindGroupLayout[], vs: string, fs: string) => {
         return device.createRenderPipeline({
                 vertex: {
                         module: device.createShaderModule({ label: 'vert', code: vs.trim() }),
@@ -140,7 +143,8 @@ export const createPipeline = (
         })
 }
 
-export const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroupLayout[], cs: string) => {
+const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBindGroupLayout[], cs: string) => {
+        if (!cs) return
         return device.createComputePipeline({
                 compute: {
                         module: device.createShaderModule({ label: 'compute', code: cs.trim() }),
@@ -150,6 +154,14 @@ export const createComputePipeline = (device: GPUDevice, bindGroupLayouts: GPUBi
         })
 }
 
+export const updatePipeline = (device: GPUDevice, format: GPUTextureFormat, attribs: IAttribs, uniforms: IUniforms, textures: ITextures, storages: IStorages, fs: string, cs: string, vs: string) => {
+        const { vertexBuffers, bufferLayouts } = createVertexBuffers(attribs)
+        const { bindGroups, bindGroupLayouts } = createBindGroup(device, uniforms, textures, storages)
+        const computePipeline = createComputePipeline(device, bindGroupLayouts, cs)
+        const graphicPipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, vs, fs)
+        return { bindGroups, vertexBuffers, computePipeline, graphicPipeline }
+}
+
 /**
  * buffers
  */
@@ -159,11 +171,7 @@ const bufferUsage = (type: 'uniform' | 'storage' | 'attrib') => {
         return 140 // GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
 }
 
-export const createArrayBuffer = (
-        device: GPUDevice,
-        array: number[] | Float32Array,
-        type: 'uniform' | 'storage' | 'attrib'
-) => {
+export const createBuffer = (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
@@ -171,22 +179,15 @@ export const createArrayBuffer = (
         return { array, buffer }
 }
 
+export const updateBuffer = (device: GPUDevice, value: number[] | Float32Array, array: Float32Array, buffer: GPUBuffer) => {
+        array.set(value)
+        device.queue.writeBuffer(buffer, 0, array as GPUAllowSharedBufferSource)
+}
+
 export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture) => {
         return {
-                colorAttachments: [
-                        {
-                                view: c.getCurrentTexture().createView(),
-                                clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                                loadOp: 'clear' as GPULoadOp,
-                                storeOp: 'store' as GPUStoreOp,
-                        },
-                ],
-                depthStencilAttachment: {
-                        view: depthTexture.createView(),
-                        depthClearValue: 1.0,
-                        depthLoadOp: 'clear' as GPULoadOp,
-                        depthStoreOp: 'store' as GPUStoreOp,
-                },
+                colorAttachments: [{ view: c.getCurrentTexture().createView(), clearValue: { r: 0, g: 0, b: 0, a: 0 }, loadOp: 'clear', storeOp: 'store' }],
+                depthStencilAttachment: { view: depthTexture.createView(), depthClearValue: 1.0, depthLoadOp: 'clear', depthStoreOp: 'store' },
         } as GPURenderPassDescriptor
 }
 
@@ -196,15 +197,11 @@ export const createDescriptor = (c: GPUCanvasContext, depthTexture: GPUTexture)
 export const createTextureSampler = (device: GPUDevice, width = 1280, height = 800) => {
         const texture = device.createTexture({ size: [width, height], format: 'rgba8unorm', usage: 22 }) // 22 is GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
         const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' })
-        return { texture, sampler }
+        return { texture, sampler, view: texture.createView() }
 }
 
 export const createDepthTexture = (device: GPUDevice, width: number, height: number) => {
-        return device.createTexture({
-                size: [width, height],
-                format: 'depth24plus',
-                usage: GPUTextureUsage.RENDER_ATTACHMENT,
-        })
+        return device.createTexture({ size: [width, height], format: 'depth24plus', usage: 16 }) // 16 is GPUTextureUsage.RENDER_ATTACHMENT
 }
 
 /**