glre 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
         "name": "glre",
-        "version": "0.25.0",
+        "version": "0.26.0",
         "author": "tseijp",
         "license": "MIT",
         "private": false,

package/src/index.ts

@@ -40,7 +40,7 @@ export const createGL = (props?: Partial<GL>) => {
                 isGL: true,
                 size: [0, 0],
                 mouse: [0, 0],
-                count: 3,
+                count: 6,
                 webgl: {},
                 webgpu: {},
         }) as EventState<GL>

package/src/types.ts

@@ -29,12 +29,10 @@ export interface WebGLState {
 }
 
 export interface WebGPUState {
-        uniforms: any
-        textures: any
         device: GPUDevice
         context: GPUContext
-        groups: any[]
         pipeline: GPUPipeline
+        groups: any[]
         resources: any[]
         loadingImg: number
         needsUpdate: boolean

package/src/utils/pipeline.ts

@@ -33,19 +33,19 @@ export const createDevive = async (c: GPUContext) => {
 export const createPipeline = (
         device: GPUDevice,
         format: string,
-        buffers: any[],
-        layouts: any[],
+        bufferLayouts: any[],
+        bindGroupLayouts: any[],
         vs: string | X = defaultVertexWGSL,
         fs: string | X = defaultFragmentWGSL
 ) => {
         if (is.obj(fs)) fs = wgsl(fs)
         if (is.obj(vs)) vs = wgsl(vs)
-        const layout = device.createPipelineLayout({ bindGroupLayouts: layouts })
+        const layout = device.createPipelineLayout({ bindGroupLayouts })
         return device.createRenderPipeline({
                 vertex: {
                         module: device.createShaderModule({ code: vs.trim() }),
                         entryPoint: 'main',
-                        buffers,
+                        buffers: bufferLayouts,
                 },
                 fragment: {
                         module: device.createShaderModule({ code: fs.trim() }),
@@ -73,7 +73,7 @@ export const createBindGroup = (device: GPUDevice, resources: any[]) => {
         })
         const layout = device.createBindGroupLayout({ entries: entries0 })
         const bindGroup = device.createBindGroup({ layout, entries: entries1 })
-        return [layout, bindGroup]
+        return { layout, bindGroup }
 }
 
 export const createDescriptor = (c: GPUContext) => {
@@ -91,6 +91,12 @@ export const createDescriptor = (c: GPUContext) => {
 
 export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
 
+export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
+        const array = new Float32Array(value)
+        const buffer = device.createBuffer({ size: array.byteLength, usage: 40 }) // 40 === // GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+        return { array, buffer }
+}
+
 export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
         const array = new Float32Array(value)
         const size = alignTo256(array.byteLength)
@@ -101,12 +107,30 @@ export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
 export const createTextureSampler = (device: GPUDevice, width = 1280, height = 800) => {
         const texture = device.createTexture({ size: [width, height], format: 'rgba8unorm', usage: 22 })
         const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' })
-        return [texture, sampler] as const
+        return { texture, sampler }
+}
+
+const getVertexStride = (dataLength: number, vertexCount: number) => {
+        return dataLength / vertexCount
+}
+
+const getVertexFormat = (stride: number) => {
+        if (stride === 2) return 'float32x2'
+        if (stride === 3) return 'float32x3'
+        if (stride === 4) return 'float32x4'
+        return 'float32'
 }
 
-// export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
-//         const array = new Float32Array(value)
-//         const buffer = device.createBuffer({ size: array.byteLength, usage: 0x20 | 0x4 })
-//         device.queue.writeBuffer(buffer, 0, array)
-//         return buffer as Buffer
-// }
+export const createBufferLayout = (shaderLocation: number, dataLength: number, count = 6) => {
+        const stride = getVertexStride(dataLength, count)
+        return {
+                arrayStride: stride * 4,
+                attributes: [
+                        {
+                                shaderLocation,
+                                offset: 0,
+                                format: getVertexFormat(stride),
+                        },
+                ],
+        }
+}

package/src/webgl.ts

@@ -10,10 +10,9 @@ export const webgl = async (gl: Partial<GL>) => {
         c.useProgram(pg)
 
         let _activeUnit = 0
-        const activeUnits = cached(() => _activeUnit++)
-
-        const uniformLocations = cached((key) => c.getUniformLocation(pg, key))
-        const attribLocations = cached((key) => c.getAttribLocation(pg, key))
+        const uniforms = cached((key) => c.getUniformLocation(pg, key))
+        const attribs = cached((key) => c.getAttribLocation(pg, key))
+        const units = cached(() => _activeUnit++)
 
         const clean = () => c.deleteProgram(pg)
 
@@ -24,7 +23,7 @@ export const webgl = async (gl: Partial<GL>) => {
         }
 
         const _attribute = (key = '', value: number[], iboValue: number[]) => {
-                const loc = attribLocations(key, true)
+                const loc = attribs(key, true)
                 const vbo = createVbo(c, value)
                 const ibo = createIbo(c, iboValue)
                 const str = getStride(gl.count!, value, iboValue)
@@ -32,7 +31,7 @@ export const webgl = async (gl: Partial<GL>) => {
         }
 
         const _uniform = (key: string, value: number | number[]) => {
-                const loc = uniformLocations(key)
+                const loc = uniforms(key)
                 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)
@@ -40,12 +39,12 @@ export const webgl = async (gl: Partial<GL>) => {
                 c[`uniformMatrix${l as 2}fv`](loc, false, value)
         }
 
-        const _texture = (alt: string, src: string) => {
+        const _texture = (key: string, src: string) => {
                 const image = new Image()
-                Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
+                Object.assign(image, { src, crossOrigin: 'anonymous' })
                 image.decode().then(() => {
-                        const loc = uniformLocations(image.alt)
-                        const unit = activeUnits(image.alt)
+                        const loc = uniforms(key)
+                        const unit = units(key)
                         createTexture(c, image, loc, unit)
                 })
         }

package/src/webgpu.ts

@@ -1,3 +1,4 @@
+import { nested as cached } from 'reev'
 import { is } from './utils/helpers'
 import {
         createDevive,
@@ -6,6 +7,8 @@ import {
         createUniformBuffer,
         createBindGroup,
         createTextureSampler,
+        createVertexBuffer,
+        createBufferLayout,
 } from './utils/pipeline'
 import type { GL, WebGPUState } from './types'
 
@@ -15,38 +18,47 @@ export const webgpu = async (gl: Partial<GL>) => {
         const state = {
                 device,
                 context: c,
-                uniforms: {},
-                textures: {},
                 resources: [[], []],
                 loadingImg: 0,
                 needsUpdate: true,
         } as WebGPUState
 
-        const initUniform = (value: number[]) => {
+        const bindGroups = [] as any[]
+        const vertexBuffers = [] as any[]
+        const bufferLayouts = [] as any[]
+
+        const attributes = cached((_, value: number[]) => {
+                const { array, buffer } = createVertexBuffer(device, value)
+                vertexBuffers.push(buffer)
+                bufferLayouts.push(createBufferLayout(bufferLayouts.length, array.length, gl.count))
+                state.needsUpdate = true
+                return { array, buffer }
+        })
+
+        const uniforms = cached((_, value: number[]) => {
                 const { array, buffer } = createUniformBuffer(device, value)
                 state.resources[0].push({ buffer })
                 state.needsUpdate = true
                 return { array, buffer }
-        }
+        })
 
-        const initTexutre = (source: HTMLImageElement) => {
-                const { width, height } = source
-                const [texture, sampler] = createTextureSampler(device, width, height)
+        const textures = cached((_, { width, height }: HTMLImageElement) => {
+                const { texture, sampler } = createTextureSampler(device, width, height)
                 state.resources[1].push(sampler, texture.createView())
                 state.needsUpdate = true
                 return { texture, width, height }
-        }
+        })
 
         const update = () => {
-                const layouts = [] as any
-                state.groups = []
+                const bindGroupLayouts = [] as any
+                bindGroups.length = 0
                 state.resources.forEach((resource) => {
                         if (!resource.length) return
-                        const [layout, group] = createBindGroup(device, resource)
-                        layouts.push(layout)
-                        state.groups.push(group)
+                        const { layout, bindGroup } = createBindGroup(device, resource)
+                        bindGroupLayouts.push(layout)
+                        bindGroups.push(bindGroup)
                 })
-                state.pipeline = createPipeline(device, format, [], layouts, gl.vs, gl.fs)
+                state.pipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, gl.vs, gl.fs)
         }
 
         const render = () => {
@@ -56,7 +68,8 @@ export const webgpu = async (gl: Partial<GL>) => {
                 const encoder = device.createCommandEncoder()
                 const pass = encoder.beginRenderPass(createDescriptor(c))
                 pass.setPipeline(state.pipeline)
-                state.groups.forEach((v, i) => pass.setBindGroup(i, v))
+                bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
+                vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
                 pass.draw(gl.count, 1, 0, 0)
                 pass.end()
                 device.queue.submit([encoder.finish()])
@@ -65,14 +78,13 @@ export const webgpu = async (gl: Partial<GL>) => {
         const clean = () => {}
 
         const _attribute = (key = '', value: number[]) => {
-                // @TODO FIX
-                // vertexBuffers(key, value)
+                const { array, buffer } = attributes(key, value)
+                device.queue.writeBuffer(buffer, 0, array)
         }
 
         const _uniform = (key: string, value: number | number[]) => {
                 if (is.num(value)) value = [value]
-                if (!state.uniforms[key]) state.uniforms[key] = initUniform(value)
-                const { array, buffer } = state.uniforms[key]
+                const { array, buffer } = uniforms(key, value)
                 array.set(value)
                 device.queue.writeBuffer(buffer, 0, array)
         }
@@ -81,8 +93,7 @@ export const webgpu = async (gl: Partial<GL>) => {
                 state.loadingImg++
                 const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
                 source.decode().then(() => {
-                        if (!state.textures[key]) state.textures[key] = initTexutre(source)
-                        const { texture, width, height } = state.textures[key]
+                        const { texture, width, height } = textures(key, source)
                         device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
                         state.loadingImg--
                 })