glre 0.21.0 → 0.23.0

package/src/webgl.ts

@@ -0,0 +1,78 @@
+import { nested } from 'reev'
+import { glsl } from './code/glsl'
+import { is } from './utils/helpers'
+import type { X } from './node'
+import type { GL } from './types'
+import { activeTexture, createAttrib, createIbo, createProgram, createTexture, createVbo } from './utils/program'
+
+export const webgl = async (gl: GL) => {
+        let vs = gl.vs || gl.vert || gl.vertex
+        let fs = gl.fs || gl.frag || gl.fragment
+        if (is.obj(fs)) fs = glsl(fs as X)
+        if (is.obj(vs)) vs = glsl(vs as X)
+        const c = gl.el.getContext('webgl2')!
+        const pg = createProgram(c, vs, fs)
+
+        let _activeUnit = 0
+        const activeUnits = nested(() => _activeUnit++)
+
+        const locations = nested((key, bool = false) => {
+                if (bool) return c.getAttribLocation(pg, key)
+                return c.getUniformLocation(pg, key) as WebGLUniformLocation
+        })
+
+        const strides = nested((_, count: number, value: number[], iboValue?: number[]) => {
+                if (iboValue) count = Math.max(...iboValue) + 1
+                const stride = value.length / count
+                if (stride !== Math.floor(stride)) console.warn(`Vertex Stride Error: count ${count} is mismatch`)
+                return Math.floor(stride)
+        })
+
+        const uniforms = nested((key, value: number | number[]) => {
+                const loc = locations(key)
+                if (is.num(value)) return (value: any) => c.uniform1f(loc, value)
+                let l = value.length as 3
+                if (l <= 4) return (value: any) => c[`uniform${l}fv`](loc, value)
+                l = (Math.sqrt(l) << 0) as 3
+                return (value: any) => c[`uniformMatrix${l}fv`](loc, false, value)
+        })
+
+        gl('clean', () => c.deleteProgram(pg))
+
+        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)
+        })
+
+        gl('_attribute', (key = '', value: number[], iboValue: number[]) => {
+                const loc = locations(key, true)
+                const vbo = createVbo(c, value)
+                const ibo = createIbo(c, iboValue)
+                const str = strides(key, gl.count, value, iboValue)
+                createAttrib(c, str, loc, vbo, ibo)
+        })
+
+        gl('_uniform', (key: string, value: number | number[]) => {
+                uniforms(key, value)(value)
+        })
+
+        const _loadFn = (image: HTMLImageElement) => {
+                const loc = locations(image.alt)
+                const unit = activeUnits(image.alt)
+                const tex = createTexture(c, image)
+                activeTexture(c, loc, unit, tex)
+        }
+
+        gl('_texture', (alt: string, src: string) => {
+                const image = new Image()
+                image.addEventListener('load', _loadFn.bind(null, image), false)
+                Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
+        })
+
+        gl.webgl = { context: c, program: pg }
+
+        return gl
+}

package/src/webgpu.ts

@@ -0,0 +1,70 @@
+import { wgsl } from './code/wgsl'
+import { is } from './utils/helpers'
+import {
+        createRenderPipeline,
+        createDescriptor,
+        // createUniformBuffer,
+        // updateBindGroup,
+        // createVertexBuffer,
+        // createUniform,
+        // createDeviceTexture,
+        // createSampler,
+} from './utils/pipeline'
+import type { X } from './node'
+import type { GL, GPUPipeline } from './types'
+
+const quadVertexCount = 3
+
+export const webgpu = async (gl: GL) => {
+        let vs = gl.vs || gl.vert || gl.vertex
+        let fs = gl.fs || gl.frag || gl.fragment
+        if (is.obj(vs)) vs = wgsl(vs as X)
+        if (is.obj(fs)) fs = wgsl(fs as X)
+        const c = gl.el.getContext('webgpu') as any
+        const gpu = (navigator as any).gpu
+        const adapter = await gpu.requestAdapter()
+        const device = await adapter.requestDevice()
+        const format = gpu.getPreferredCanvasFormat()
+        c.configure({ device, format, alphaMode: 'opaque' })
+
+        gl('clean', () => {})
+
+        let pipeline: GPUPipeline
+
+        gl('render', () => {
+                if (!pipeline) pipeline = createRenderPipeline(device, format, vs, fs, [])
+                const encoder = device.createCommandEncoder()
+                const pass = encoder.beginRenderPass(createDescriptor(c))
+                pass.setPipeline(pipeline)
+                pass.draw(quadVertexCount, 1, 0, 0)
+                pass.end()
+                device.queue.submit([encoder.finish()])
+        })
+
+        gl('_attribute', (key = '', value: number[]) => {
+                // @TODO FIX
+                // 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)
+        })
+
+        // const _loadFun = (image: HTMLImageElement, gl: GL) => {
+        //         const texture = createDeviceTexture(device, image)
+        //         // bindGroup = updateBindGroup(device, pipeline, uniformBuffer, textures, sampler)
+        // }
+
+        gl('_texture', (alt: string, src: string) => {
+                // @TODO FIX
+                // const image = new Image()
+                // image.addEventListener('load', _loadFun.bind(null, image, gl), false)
+                // Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
+        })
+
+        return gl
+}

package/dist/types-f429c8b1.d.ts

@@ -1,79 +0,0 @@
-import { EventState, Nested } from 'reev';
-import { Queue, Frame } from 'refr';
-
-declare type Uniform = number | number[];
-declare type Attribute = number[];
-declare type GL = EventState<{
-    /**
-     * initial value
-     */
-    id: string;
-    width: number;
-    height: number;
-    size: [number, number];
-    mouse: [number, number];
-    count: number;
-    vs: string;
-    fs: string;
-    vert: string;
-    frag: string;
-    vertex: string;
-    fragment: string;
-    varying: string;
-    int: PrecisionMode;
-    float: PrecisionMode;
-    sampler2D: PrecisionMode;
-    samplerCube: PrecisionMode;
-    lastActiveUnit: number;
-    /**
-     * core state
-     */
-    gl: any;
-    pg: any;
-    el: any;
-    queue: Queue;
-    frame: Frame;
-    target: any;
-    stride: Nested<number>;
-    location: Nested<any>;
-    activeUnit: Nested<number>;
-    default: any;
-    /**
-     * events
-     */
-    ref?: any;
-    init(varying?: string[]): void;
-    mount(): void;
-    clean(): void;
-    render(): void;
-    mousemove(e: Event): void;
-    resize(e?: Event, width?: number, height?: number): void;
-    load(e?: Event, image?: HTMLImageElement): void;
-    /**
-     * setter
-     */
-    uniform(key: string, value: Uniform): GL;
-    uniform(target: {
-        [key: string]: Uniform;
-    }): GL;
-    texture(key: string, value: string): GL;
-    texture(target: {
-        [key: string]: string;
-    }): GL;
-    attribute(key: string, value: Attribute, iboValue?: Attribute): GL;
-    attribute(target: {
-        [key: string]: Attribute;
-    }): GL;
-    /**
-     * short hands
-     */
-    clear(key?: GLClearMode): void;
-    viewport(size?: [number, number]): void;
-    drawArrays(key?: GLDrawMode): void;
-    drawElements(key?: GLDrawMode): void;
-}>;
-declare type PrecisionMode = 'highp' | 'mediump' | 'lowp';
-declare type GLClearMode = 'COLOR_BUFFER_BIT' | 'DEPTH_BUFFER_BIT' | 'STENCIL_BUFFER_BIT';
-declare type GLDrawMode = 'POINTS' | 'LINE_STRIP' | 'LINE_LOOP' | 'LINES' | 'TRIANGLE_STRIP' | 'TRIANGLE_FAN' | 'TRIANGLES';
-
-export { Attribute as A, GL as G, PrecisionMode as P, Uniform as U, GLClearMode as a, GLDrawMode as b };