glre 0.44.0 → 0.46.0

package/src/types.ts

@@ -1,6 +1,7 @@
-import type { EventState, Nested } from 'reev'
+import type { EventState } from 'reev'
 import type { Queue, Frame } from 'refr'
 import type { Vec4, Void } from './node'
+import type { Binding } from './webgpu/utils'
 
 export type GL = EventState<{
         /**
@@ -13,16 +14,17 @@ export type GL = EventState<{
         isDebug: boolean
         isDepth: boolean
         wireframe: boolean
-        isGL: true
         width?: number
         height?: number
         size: [number, number]
         mouse: [number, number]
         count: number
+        triangleCount: number
         instanceCount: number
         particleCount: number | [number, number] | [number, number, number]
         precision: 'lowp' | 'mediump' | 'highp'
-        loading: number
+        element?: HTMLCanvasElement
+        elem?: HTMLCanvasElement
         el: HTMLCanvasElement
         vs?: string | Vec4
         cs?: string | Void
@@ -33,12 +35,19 @@ export type GL = EventState<{
         vertex?: string | Vec4
         compute?: string | Void
         fragment?: string | Vec4
+        program: WebGLProgram
+        gl: WebGL2RenderingContext
+        gpu: GPUCanvasContext
+        device: GPUDevice
+        format: GPUTextureFormat
+        encoder: GPUCommandEncoder
+        binding: Binding
 
         /**
          * core state
          */
-        webgpu: WebGPUState
-        webgl: WebGLState
+        // webgpu: WebGPUState
+        // webgl: WebGLState
         queue: Queue
         frame: Frame
 
@@ -52,7 +61,6 @@ export type GL = EventState<{
         render(): void
         resize(e?: Event): void
         mousemove(e: MouseEvent): void
-        loop(): void
 
         /**
          * setter
@@ -112,19 +120,19 @@ export interface StorageData {
         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: WebGL2RenderingContext
-        program: WebGLProgram
-        uniforms: Nested<WebGLUniformLocation | null>
-}
+// export interface WebGPUState {
+//         device: GPUDevice
+//         uniforms: Nested<UniformData>
+//         textures: Nested<TextureData>
+//         attribs: Nested<AttribData>
+//         storages: Nested<StorageData>
+// }
+//
+// /**
+//  * for webgl
+//  */
+// export interface WebGLState {
+//         context: WebGL2RenderingContext
+//         program: WebGLProgram
+//         uniforms: Nested<WebGLUniformLocation | null>
+// }

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()
+        })
+}