glre 0.23.0 → 0.24.0

package/package.json

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

package/src/index.ts

@@ -29,9 +29,7 @@ export const isWebGPUSupported = () => {
         return 'gpu' in navigator
 }
 
-let iTime = performance.now(),
-        iPrevTime = 0,
-        iDeltaTime = 0
+let iTime = performance.now()
 
 export const createGL = (props?: Partial<GL>) => {
         const gl = event<Partial<GL>>({
@@ -50,8 +48,9 @@ export const createGL = (props?: Partial<GL>) => {
         gl.frame = createFrame()
 
         gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)))
-        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)))
         gl.texture = durable((k, v) => gl.queue(() => gl._texture?.(k, v)))
+        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)))
+        gl.uniform({ iResolution: gl.size, iMouse: [0, 0], iTime: 0 }) // default uniform
 
         gl('mount', async () => {
                 if (!isWebGPUSupported()) gl.isWebGL = true
@@ -61,6 +60,7 @@ export const createGL = (props?: Partial<GL>) => {
                 gl.resize()
                 gl.frame(() => {
                         gl.loop()
+                        gl.queue.flush()
                         gl.render()
                         return gl.isLoop
                 })
@@ -77,14 +77,6 @@ export const createGL = (props?: Partial<GL>) => {
                 gl.el.removeEventListener('mousemove', gl.mousemove)
         })
 
-        gl('loop', () => {
-                iPrevTime = iTime
-                iTime = performance.now() / 1000
-                iDeltaTime = iTime - iPrevTime
-                gl.uniform({ iPrevTime, iTime, iDeltaTime })
-                // if (gl.fragmentNode) updateUniforms({ time: iTime }) // @TODO FIX
-        })
-
         gl('resize', () => {
                 const w = gl.width || window.innerWidth
                 const h = gl.height || window.innerHeight
@@ -101,6 +93,11 @@ export const createGL = (props?: Partial<GL>) => {
                 gl.uniform('iMouse', gl.mouse)
         })
 
+        gl('loop', () => {
+                iTime = performance.now() / 1000
+                gl.uniform('iTime', iTime)
+        })
+
         return gl(props)
 }
 

package/src/node/index.ts

@@ -43,8 +43,8 @@ export const If = (condition: X, callback: () => void): ConditionalNode => {
 }
 
 // 組み込み変数
-export const gl_FragCoord = node('vec4', undefined)
-export const gl_Position = node('vec4', undefined)
+export const fragCoord = node('vec4', undefined)
+export const position = node('vec4', undefined)
 export const iTime = uniform(0.0)
 export const iResolution = uniform([1920, 1080])
 export const iMouse = uniform([0, 0])

package/src/types.ts

@@ -6,6 +6,7 @@ export type GPUContext = any // GPUCanvasContext https://developer.mozilla.org/e
 export type GPUDevice = any //
 export type GPUBuffer = any //
 export type GPUPipeline = any //
+export type GPUBindGroup = any
 export type Uniform = number | number[]
 export type Attribute = number[]
 export type Attributes = Record<string, Attribute>

package/src/utils/pipeline.ts

@@ -1,18 +1,5 @@
 import { GPUContext, GPUDevice, GPUPipeline } from '../types'
 
-export const initWebGPUDevice = async (el: HTMLCanvasElement) => {
-        const gpu = (navigator as any).gpu
-        if (!gpu) return null
-        const adapter = await gpu.requestAdapter()
-        if (!adapter) return null
-        const device = await adapter.requestDevice()
-        const context = el.getContext('webgpu') as GPUContext
-        if (!context) return null
-        const format = gpu.getPreferredCanvasFormat()
-        context.configure({ device, format })
-        return { device, context, format }
-}
-
 const defaultVertexWGSL = `
 @vertex
 fn main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
@@ -23,13 +10,21 @@ fn main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
 `
 
 const defaultFragmentWGSL = `
+struct Uniforms {
+  iResolution: vec2f,
+  iMouse: vec2f,
+  iTime: f32,
+}
+
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
 @fragment
 fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-  return vec4f(position.xy / vec2f(1280, 800), 0.0, 1.0);
+  return vec4f(position.xy / iResolution, 0.0, 1.0);
 }
 `
 
-export const createRenderPipeline = (
+export const createPipeline = (
         device: GPUDevice,
         format: string,
         vs = defaultVertexWGSL,
@@ -64,65 +59,66 @@ export const createDescriptor = (c: GPUContext) => {
                 ],
         }
 }
-export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
-
-export const createUniformBuffer = (device: GPUDevice, size: number) => {
-        return device.createBuffer({ size: alignTo256(size), usage: 0x40 | 0x4 }) as Buffer
-}
-
-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 createBindGroup = (device: GPUDevice, pipeline: GPUPipeline, entries: any[]) => {
-        const layout = pipeline.getBindGroupLayout(0)
-        return device.createBindGroup({ layout, entries })
-}
-
-export const updateBindGroup = (
-        device: GPUDevice,
-        pipeline: GPUPipeline,
-        uniformBuffer: Buffer,
-        textures: any = {},
-        sampler: any = null
-) => {
-        const entries = [{ binding: 0, resource: { buffer: uniformBuffer } }]
-        let binding = 1
-        Object.values(textures).forEach((texture: any) => {
-                entries.push({ binding: binding++, resource: texture.createView() })
-        })
-        if (sampler && Object.keys(textures).length > 0) entries.push({ binding: binding++, resource: sampler })
-        return createBindGroup(device, pipeline, entries)
-}
-
-export const createUniform = (device: GPUDevice, buffer: any, data: Float32Array, offset = 0) => {
-        device.queue.writeBuffer(buffer, offset, data)
-}
-
-export const createDeviceTexture = (device: GPUDevice, image: HTMLImageElement) => {
-        const texture = device.createTexture({
-                size: { width: image.width, height: image.height },
-                format: 'rgba8unorm',
-                usage: 0x4 | 0x2,
-        })
-        device.queue.copyExternalImageToTexture(
-                { source: image },
-                { texture },
-                { width: image.width, height: image.height }
-        )
-        return texture
-}
-
-export const createSampler = (device: GPUDevice) => {
-        return device.createSampler({
-                magFilter: 'linear',
-                minFilter: 'linear',
-                addressModeU: 'clamp-to-edge',
-                addressModeV: 'clamp-to-edge',
-        })
-}
 
-export const getDefaultVertices = () => new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])
+// export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
+//
+// export const createUniformBuffer = (device: GPUDevice, size: number) => {
+//         return device.createBuffer({ size: alignTo256(size), usage: 0x40 | 0x4 }) as Buffer
+// }
+//
+// 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 createBindGroup = (device: GPUDevice, pipeline: GPUPipeline, entries: any[]) => {
+//         const layout = pipeline.getBindGroupLayout(0)
+//         return device.createBindGroup({ layout, entries })
+// }
+//
+// export const updateBindGroup = (
+//         device: GPUDevice,
+//         pipeline: GPUPipeline,
+//         uniformBuffer: Buffer,
+//         textures: any = {},
+//         sampler: any = null
+// ) => {
+//         const entries = [{ binding: 0, resource: { buffer: uniformBuffer } }]
+//         let binding = 1
+//         Object.values(textures).forEach((texture: any) => {
+//                 entries.push({ binding: binding++, resource: texture.createView() })
+//         })
+//         if (sampler && Object.keys(textures).length > 0) entries.push({ binding: binding++, resource: sampler })
+//         return createBindGroup(device, pipeline, entries)
+// }
+//
+// export const createUniform = (device: GPUDevice, buffer: any, data: Float32Array, offset = 0) => {
+//         device.queue.writeBuffer(buffer, offset, data)
+// }
+//
+// export const createDeviceTexture = (device: GPUDevice, image: HTMLImageElement) => {
+//         const texture = device.createTexture({
+//                 size: { width: image.width, height: image.height },
+//                 format: 'rgba8unorm',
+//                 usage: 0x4 | 0x2,
+//         })
+//         device.queue.copyExternalImageToTexture(
+//                 { source: image },
+//                 { texture },
+//                 { width: image.width, height: image.height }
+//         )
+//         return texture
+// }
+//
+// export const createSampler = (device: GPUDevice) => {
+//         return device.createSampler({
+//                 magFilter: 'linear',
+//                 minFilter: 'linear',
+//                 addressModeU: 'clamp-to-edge',
+//                 addressModeV: 'clamp-to-edge',
+//         })
+// }
+//
+// export const getDefaultVertices = () => new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])

package/src/webgl.ts

@@ -41,7 +41,6 @@ export const webgl = async (gl: GL) => {
 
         gl('render', () => {
                 c.useProgram(pg)
-                gl.queue.flush()
                 c.clear(c.COLOR_BUFFER_BIT)
                 c.viewport(0, 0, ...gl.size)
                 c.drawArrays(c.TRIANGLES, 0, 3)

package/src/webgpu.ts

@@ -1,7 +1,7 @@
 import { wgsl } from './code/wgsl'
 import { is } from './utils/helpers'
 import {
-        createRenderPipeline,
+        createPipeline,
         createDescriptor,
         // createUniformBuffer,
         // updateBindGroup,
@@ -11,7 +11,8 @@ import {
         // createSampler,
 } from './utils/pipeline'
 import type { X } from './node'
-import type { GL, GPUPipeline } from './types'
+import type { GL, GPUBindGroup, GPUPipeline } from './types'
+import { nested } from 'reev'
 
 const quadVertexCount = 3
 
@@ -27,18 +28,44 @@ export const webgpu = async (gl: GL) => {
         const format = gpu.getPreferredCanvasFormat()
         c.configure({ device, format, alphaMode: 'opaque' })
 
+        // Uniform buffer setup
+        // WebGPU 16-byte alignment requirement: iTime(4) + padding(12) + iMouse(8) + iPrevTime(4) + iDeltaTime(4) + iResolution(8) = 40 bytes, rounded to 48
+
+        const buffer = device.createBuffer({
+                size: 64, // @ts-ignore
+                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        })
+
         gl('clean', () => {})
 
+        const activeUnit = nested((_, size) => (_activeUnit += size))
+        let _activeUnit = 0
         let pipeline: GPUPipeline
+        let bindGroup: GPUBindGroup
+        let uniformData = new Float32Array(0)
 
         gl('render', () => {
-                if (!pipeline) pipeline = createRenderPipeline(device, format, vs, fs, [])
+                if (!pipeline) {
+                        pipeline = createPipeline(device, format, vs, fs, [])
+                        bindGroup = device.createBindGroup({
+                                layout: pipeline.getBindGroupLayout(0),
+                                entries: [
+                                        {
+                                                binding: 0,
+                                                resource: { buffer },
+                                        },
+                                ],
+                        })
+                }
+
                 const encoder = device.createCommandEncoder()
                 const pass = encoder.beginRenderPass(createDescriptor(c))
                 pass.setPipeline(pipeline)
+                pass.setBindGroup(0, bindGroup)
                 pass.draw(quadVertexCount, 1, 0, 0)
                 pass.end()
                 device.queue.submit([encoder.finish()])
+                return true
         })
 
         gl('_attribute', (key = '', value: number[]) => {
@@ -46,17 +73,22 @@ export const webgpu = async (gl: GL) => {
                 // vertexBuffers(key, value)
         })
 
-        gl('_uniform', (key: string, value = 0) => {
-                // @TODO FIX
-                // if (!device || !uniformBuffer) return
-                // uniforms[key] = value
-                // const uniformData = new Float32Array(Object.values(uniforms))
-                // createUniform(device, uniformBuffer, uniformData)
+        gl('_uniform', (key: string, value: number | number[]) => {
+                if (is.num(value)) value = [value]
+                const size = value.length
+                const unit = activeUnit(key, size)
+                if (unit === _activeUnit) {
+                        const array = new Float32Array(_activeUnit)
+                        if (uniformData) array.set(uniformData)
+                        uniformData = array
+                }
+                for (let i = 0; i < size; i++) uniformData[unit - size + i] = value[i]
+                device.queue.writeBuffer(buffer, 0, uniformData)
         })
 
         // const _loadFun = (image: HTMLImageElement, gl: GL) => {
         //         const texture = createDeviceTexture(device, image)
-        //         // bindGroup = updateBindGroup(device, pipeline, uniformBuffer, textures, sampler)
+        //         // bindGroup = updateBindGroup(device, pipeline, buffer, textures, sampler)
         // }
 
         gl('_texture', (alt: string, src: string) => {