glre 0.20.0 → 0.22.0

package/src/solid.ts

@@ -0,0 +1,15 @@
+import { createGL, isGL } from './index'
+import type { GL } from './types'
+export * from './index'
+
+export const onGL = (props?: Partial<GL>) => {
+        const gl = isGL(props) ? props : createGL(props)
+        gl.ref = (el: HTMLCanvasElement | null) => {
+                if (el) {
+                        gl.el = el
+                        gl.gl = el.getContext('webgl2')
+                        gl.mount()
+                } else gl.clean()
+        }
+        return gl
+}

package/src/types.ts

@@ -0,0 +1,90 @@
+import { Nested, EventState } from 'reev'
+import { X } from './node'
+import type { Fun, Queue, Frame } from 'refr'
+export type { Fun, Queue, Frame }
+export type Uniform = number | number[]
+export type Attribute = number[]
+export type Attributes = Record<string, Attribute>
+export type Uniforms = Record<string, Uniform>
+export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
+
+export type GLClearMode = 'COLOR_BUFFER_BIT' | 'DEPTH_BUFFER_BIT' | 'STENCIL_BUFFER_BIT'
+
+export type GLDrawMode =
+        | 'POINTS'
+        | 'LINE_STRIP'
+        | 'LINE_LOOP'
+        | 'LINES'
+        | 'TRIANGLE_STRIP'
+        | 'TRIANGLE_FAN'
+        | 'TRIANGLES'
+
+export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'
+
+export type GL = EventState<{
+        /**
+         * initial value
+         */
+        isNative: boolean
+        isWebGL: boolean
+        isLoop: boolean
+        isGL: true
+        width: number
+        height: number
+        size: [number, number]
+        mouse: [number, number]
+        count: number
+        vs: string | X
+        fs: string | X
+        vert: string | X
+        frag: string | X
+        vertex: string | X
+        fragment: string | X
+
+        /**
+         * for webgl
+         */
+        int: PrecisionMode
+        float: PrecisionMode
+        sampler2D: PrecisionMode
+        samplerCube: PrecisionMode
+        lastActiveUnit: number
+
+        /**
+         * core state
+         */
+        gl: any
+        pg: any
+        el: any
+        queue: Queue
+        frame: Frame
+        stride: Nested<number>
+        location: Nested<any> // @TODO Nested<(key: string, value: number: number[], ibo: number[]) => number>
+        activeUnit: Nested<number>
+        default: any
+
+        /**
+         * events
+         */
+        ref?: any
+        init(): void
+        loop(): void
+        mount(): void
+        clean(): void
+        render(): void
+        resize(e?: Event): void
+        mousemove(e: Event): void
+
+        /**
+         * setter
+         */
+        _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL
+        uniform(key: string, value: Uniform, isMatrix?: boolean): GL
+        uniform(target: { [key: string]: Uniform }): GL
+        _texture?(key: string, value: string): GL
+        texture(key: string, value: string): GL
+        texture(target: { [key: string]: string }): GL
+        _attribute?(key: string, value: Attribute, iboValue?: Attribute): GL
+        attribute(key: string, value: Attribute, iboValue?: Attribute): GL
+        attribute(target: { [key: string]: Attribute }): GL
+}>

package/src/utils.ts

@@ -0,0 +1,53 @@
+export const is = {
+        arr: Array.isArray,
+        bol: (a: unknown): a is boolean => typeof a === 'boolean',
+        str: (a: unknown): a is string => typeof a === 'string',
+        num: (a: unknown): a is number => typeof a === 'number',
+        int: (a: unknown): a is number => Number.isInteger(a),
+        fun: (a: unknown): a is Function => typeof a === 'function',
+        und: (a: unknown): a is undefined => typeof a === 'undefined',
+        nul: (a: unknown): a is null => a === null,
+        set: (a: unknown): a is Set<unknown> => a instanceof Set,
+        map: (a: unknown): a is Map<unknown, unknown> => a instanceof Map,
+        obj: (a: unknown): a is object => !!a && a.constructor.name === 'Object',
+        nan: (a: unknown): a is number => typeof a === 'number' && Number.isNaN(a),
+}
+
+export const isServer = () => {
+        return typeof window === 'undefined'
+}
+
+export const isWebGPUSupported = () => {
+        if (isServer()) return false
+        return 'gpu' in navigator
+}
+
+/**
+ * each
+ */
+type EachFn<Value, Key, This> = (this: This, value: Value, key: Key) => void
+type Eachable<Value = any, Key = any, This = any> = {
+        forEach(cb: EachFn<Value, Key, This>, ctx?: This): void
+}
+
+export const each = <Value, Key, This>(obj: Eachable<Value, Key, This>, fn: EachFn<Value, Key, This>) => obj.forEach(fn)
+
+export const flush = <Value extends Function, Key, This>(obj: Eachable<Value, Key, This>, ...args: any[]) => {
+        each(obj, (f) => f(...args))
+}
+
+/**
+ * other
+ */
+export const replace = (x = '', from = '_', to = '/') => x.split(from).join(to)
+export const ext = (src = '.pdf') => src.split('.').pop()?.toLowerCase() ?? ''
+export const fig = (x = 0) => `${x}`.split('.')[1]?.length ?? 0
+export const dig = (x = 0) => `${x}`.split('.')[0]?.length - (x < 0 ? 1 : 0)
+export const sig = (value = 0, digit = -2) => {
+        digit *= -1
+        digit = Math.pow(10, digit)
+        value *= digit
+        value = Math.round(value)
+        value /= digit
+        return value
+}

package/src/webgl/buffer.ts

@@ -0,0 +1,78 @@
+// WebGLバッファー作成と管理
+export const createVbo = (c: WebGLRenderingContext, data: number[]) => {
+        const buffer = c.createBuffer()
+        if (!buffer) throw new Error('Failed to create VBO')
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
+        c.bufferData(c.ARRAY_BUFFER, new Float32Array(data), c.STATIC_DRAW)
+        c.bindBuffer(c.ARRAY_BUFFER, null)
+        return buffer
+}
+
+// インデックスバッファーオブジェクト作成
+export const createIbo = (c: WebGLRenderingContext, data: number[]) => {
+        const buffer = c.createBuffer()
+        if (!buffer) throw new Error('Failed to create IBO')
+        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, buffer)
+        c.bufferData(
+                c.ELEMENT_ARRAY_BUFFER,
+                new Int16Array(data),
+                c.STATIC_DRAW
+        )
+        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, null)
+        return buffer
+}
+
+// アトリビュート設定
+export const createAttribute = (
+        c: WebGLRenderingContext,
+        stride: number,
+        location: number,
+        vbo: WebGLBuffer,
+        ibo?: WebGLBuffer
+) => {
+        c.bindBuffer(c.ARRAY_BUFFER, vbo)
+        c.enableVertexAttribArray(location)
+        c.vertexAttribPointer(location, stride, c.FLOAT, false, 0, 0)
+        if (ibo) c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, ibo)
+}
+
+// バッファーの削除
+export const deleteBuffer = (c: WebGLRenderingContext, buffer: WebGLBuffer) => {
+        c.deleteBuffer(buffer)
+}
+
+// 頂点ストライドを計算
+export const vertexStride = (
+        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)
+}
+
+// バッファーデータの更新
+export const updateVbo = (
+        c: WebGLRenderingContext,
+        buffer: WebGLBuffer,
+        data: number[],
+        usage = c.STATIC_DRAW
+) => {
+        c.bindBuffer(c.ARRAY_BUFFER, buffer)
+        c.bufferData(c.ARRAY_BUFFER, new Float32Array(data), usage)
+        c.bindBuffer(c.ARRAY_BUFFER, null)
+}
+
+export const updateIbo = (
+        c: WebGLRenderingContext,
+        buffer: WebGLBuffer,
+        data: number[],
+        usage = c.STATIC_DRAW
+) => {
+        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, buffer)
+        c.bufferData(c.ELEMENT_ARRAY_BUFFER, new Int16Array(data), usage)
+        c.bindBuffer(c.ELEMENT_ARRAY_BUFFER, null)
+}

package/src/webgl/index.ts

@@ -0,0 +1,79 @@
+import { nested } from 'reev'
+import { createAttribute, createIbo, createVbo, vertexStride } from './buffer'
+import { createProgram, deleteProgram, getUniformType } from './program'
+import { createFragmentShader, createVertexShader } from './shader'
+import { activeTexture, createTexture } from './texture'
+import { glsl } from '../code/glsl'
+import { is } from '../utils'
+import type { X } from '../node'
+import type { GL } from '../types'
+export * from './buffer'
+export * from './program'
+export * from './shader'
+export * from './texture'
+
+const a_position = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]
+
+export const webgl = (gl: GL) => {
+        gl('init', () => {
+                const c = 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)
+                if (gl.count === 6) gl.attribute({ a_position })
+                gl.pg = createProgram(c, createVertexShader(c, vs), createFragmentShader(c, fs))
+                gl.location = nested((key, isAttribute = false) => {
+                        return isAttribute ? c.getAttribLocation(gl.pg, key) : c.getUniformLocation(gl.pg, key)
+                })
+        })
+
+        gl('clean', () => {
+                const c = gl.gl
+                deleteProgram(c, gl.pg)
+        })
+
+        gl('render', () => {
+                const c = gl.gl
+                c.useProgram(gl.pg)
+                gl.queue.flush()
+                c.clear(c.COLOR_BUFFER_BIT)
+                c.viewport(0, 0, ...gl.size)
+                c.drawArrays(c.TRIANGLES, 0, gl.count)
+        })
+
+        gl('_attribute', (key = '', value: number[], iboValue: number[]) => {
+                const c = gl.gl
+                const n = gl.count
+                const loc = gl.location(key, true)
+                const vbo = createVbo(c, value)
+                const ibo = createIbo(c, iboValue)
+                const stride = vertexStride(n, value, iboValue)
+                createAttribute(c, stride, loc, vbo, ibo)
+        })
+
+        gl('_uniform', (key: string, value = 0, isMatrix = false) => {
+                const type = getUniformType(value, isMatrix)
+                const c = gl.gl
+                const loc = gl.location(key)
+                if (isMatrix) c[type](loc, false, value)
+                else c[type](loc, value)
+        })
+
+        const _loadFn = (image: HTMLImageElement) => {
+                const loc = gl.location(image.alt)
+                const unit = gl.activeUnit(image.alt)
+                const tex = createTexture(gl.gl, image)
+                activeTexture(gl.gl, 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' })
+        })
+
+        let _activeUnit = 0
+        gl.activeUnit = nested(() => _activeUnit++)
+        return gl
+}

package/src/webgl/program.ts

@@ -0,0 +1,61 @@
+// WebGLプログラム作成と管理
+export const createProgram = (
+        c: WebGLRenderingContext,
+        vs: WebGLShader,
+        fs: WebGLShader
+) => {
+        const pg = c.createProgram()
+        if (!pg) throw new Error('Failed to create pg')
+        c.attachShader(pg, vs)
+        c.attachShader(pg, fs)
+        c.linkProgram(pg)
+        if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
+        const error = c.getProgramInfoLog(pg)
+        c.deleteProgram(pg)
+        throw new Error(`Could not link pg: ${error}`)
+}
+
+// プログラムの削除
+export const deleteProgram = (c: WebGLRenderingContext, pg: WebGLProgram) => {
+        c.deleteProgram(pg)
+}
+
+// プログラムの情報を取得
+export const getProgramInfo = (c: WebGLRenderingContext, pg: WebGLProgram) => {
+        return {
+                linked: c.getProgramParameter(pg, c.LINK_STATUS),
+                log: c.getProgramInfoLog(pg),
+                activeAttributes: c.getProgramParameter(
+                        pg,
+                        c.ACTIVE_ATTRIBUTES
+                ),
+                activeUniforms: c.getProgramParameter(pg, c.ACTIVE_UNIFORMS),
+        }
+}
+
+//  ユニフォームタイプの取得
+export const getUniformType = (value: number | number[], isMatrix = false) => {
+        let length = typeof value === 'number' ? 0 : value?.length
+        if (!length) return `uniform1f`
+        if (!isMatrix) return `uniform${length}fv`
+        length = Math.sqrt(length) << 0
+        return `uniformMatrix${length}fv`
+}
+
+// ユニフォーム位置を取得
+export const getUniformLocation = (
+        c: WebGLRenderingContext,
+        pg: WebGLProgram,
+        name: string
+) => {
+        return c.getUniformLocation(pg, name)
+}
+
+// アトリビュート位置を取得
+export const getAttribLocation = (
+        c: WebGLRenderingContext,
+        pg: WebGLProgram,
+        name: string
+) => {
+        return c.getAttribLocation(pg, name)
+}

package/src/webgl/shader.ts

@@ -0,0 +1,60 @@
+const defaultVertexShader = /* cpp */ `
+attribute vec4 a_position;
+void main() {
+  gl_Position = a_position;
+}
+`
+
+const defaultFragmentShader = /* cpp */ `
+precision mediump float;
+uniform vec2 iResolution;
+void main() {
+  gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
+}
+`
+
+export const deleteShader = (c: WebGLRenderingContext, shader: WebGLShader) => {
+        c.deleteShader(shader)
+}
+
+// WebGLシェーダー作成と管理
+const createShader = (
+        c: WebGLRenderingContext,
+        source: string,
+        type: number
+) => {
+        const shader = c.createShader(type)
+        if (!shader) throw new Error('Failed to create shader')
+        c.shaderSource(shader, source)
+        c.compileShader(shader)
+        if (c.getShaderParameter(shader, c.COMPILE_STATUS)) return shader
+        const error = c.getShaderInfoLog(shader)
+        deleteShader(c, shader)
+        throw new Error(`Could not compile shader: ${error}`)
+}
+
+export const createVertexShader = (
+        c: WebGLRenderingContext,
+        source = defaultVertexShader
+) => {
+        return createShader(c, source, c.VERTEX_SHADER)
+}
+
+export const createFragmentShader = (
+        c: WebGLRenderingContext,
+        source = defaultFragmentShader
+) => {
+        return createShader(c, source, c.FRAGMENT_SHADER)
+}
+
+// シェーダーの情報を取得
+export const getShaderInfo = (
+        c: WebGLRenderingContext,
+        shader: WebGLShader
+) => {
+        return {
+                compiled: c.getShaderParameter(shader, c.COMPILE_STATUS),
+                log: c.getShaderInfoLog(shader),
+                source: c.getShaderSource(shader),
+        }
+}

package/src/webgl/texture.ts

@@ -0,0 +1,93 @@
+// WebGLテクスチャ作成と管理
+export const createTexture = (
+        c: WebGLRenderingContext,
+        img: HTMLImageElement
+) => {
+        const texture = c.createTexture()
+        if (!texture) throw new Error('Failed to create texture')
+        c.bindTexture(c.TEXTURE_2D, texture)
+        c.texImage2D(c.TEXTURE_2D, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, img)
+        c.generateMipmap(c.TEXTURE_2D)
+        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)
+        c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
+        c.bindTexture(c.TEXTURE_2D, null)
+        return texture
+}
+
+// テクスチャユニットをアクティブ化
+export const activeTexture = (
+        c: WebGLRenderingContext,
+        location: WebGLUniformLocation | null,
+        unit: number,
+        texture: WebGLTexture
+) => {
+        if (!location) return
+        c.uniform1i(location, unit)
+        c.activeTexture(c.TEXTURE0 + unit)
+        c.bindTexture(c.TEXTURE_2D, texture)
+}
+
+// テクスチャの削除
+export const deleteTexture = (
+        c: WebGLRenderingContext,
+        texture: WebGLTexture
+) => {
+        c.deleteTexture(texture)
+}
+
+// 空のテクスチャを作成
+export const createEmptyTexture = (
+        c: WebGLRenderingContext,
+        w = 1280,
+        h = 800,
+        format = c.RGBA,
+        type = c.UNSIGNED_BYTE
+) => {
+        const texture = c.createTexture()
+        if (!texture) throw new Error('Failed to create empty texture')
+        c.bindTexture(c.TEXTURE_2D, texture)
+        // prettier-ignore
+        c.texImage2D(c.TEXTURE_2D, 0, format, w, h, 0, format, type, null)
+        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)
+        c.texParameteri(c.TEXTURE_2D, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
+        c.bindTexture(c.TEXTURE_2D, null)
+        return texture
+}
+
+// キューブマップテクスチャを作成
+export const createCubeTexture = (
+        c: WebGLRenderingContext,
+        imgs: HTMLImageElement[]
+) => {
+        if (imgs.length !== 6)
+                throw new Error('Cube texture requires exactly 6 imgs')
+        const texture = c.createTexture()
+        if (!texture) throw new Error('Failed to create cube texture')
+        c.bindTexture(c.TEXTURE_CUBE_MAP, texture)
+        const faces = [
+                c.TEXTURE_CUBE_MAP_POSITIVE_X,
+                c.TEXTURE_CUBE_MAP_NEGATIVE_X,
+                c.TEXTURE_CUBE_MAP_POSITIVE_Y,
+                c.TEXTURE_CUBE_MAP_NEGATIVE_Y,
+                c.TEXTURE_CUBE_MAP_POSITIVE_Z,
+                c.TEXTURE_CUBE_MAP_NEGATIVE_Z,
+        ]
+        // prettier-ignore
+        faces.forEach((face, index) => {
+                c.texImage2D( face, 0, c.RGBA, c.RGBA, c.UNSIGNED_BYTE, imgs[index])
+        })
+        c.generateMipmap(c.TEXTURE_CUBE_MAP)
+        // prettier-ignore
+        c.texParameteri(c.TEXTURE_CUBE_MAP, c.TEXTURE_MIN_FILTER, c.LINEAR_MIPMAP_LINEAR)
+        c.texParameteri(c.TEXTURE_CUBE_MAP, c.TEXTURE_MAG_FILTER, c.LINEAR)
+        c.texParameteri(c.TEXTURE_CUBE_MAP, c.TEXTURE_WRAP_S, c.CLAMP_TO_EDGE)
+        c.texParameteri(c.TEXTURE_CUBE_MAP, c.TEXTURE_WRAP_T, c.CLAMP_TO_EDGE)
+
+        c.bindTexture(c.TEXTURE_CUBE_MAP, null)
+
+        return texture
+}

package/src/webgpu/buffer.ts

@@ -0,0 +1,96 @@
+import { is } from '../utils'
+
+// WebGPUバッファー管理
+export const createBuffer = (
+        device: any,
+        data: Float32Array | Uint32Array | number[],
+        usage: number
+) => {
+        const array = is.arr(data) ? new Float32Array(data) : data
+        const buffer = device.createBuffer({
+                size: array.byteLength,
+                usage,
+                mappedAtCreation: true,
+        })
+        if (array instanceof Float32Array)
+                new Float32Array(buffer.getMappedRange()).set(array)
+        else if (array instanceof Uint32Array)
+                new Uint32Array(buffer.getMappedRange()).set(array)
+        buffer.unmap()
+        return buffer
+}
+
+// 頂点バッファー作成
+export const createVertexBuffer = (device: any, data: number[]) => {
+        return createBuffer(device, data, 0x20) // GPUBufferUsage.VERTEX
+}
+
+// インデックスバッファー作成
+export const createIndexBuffer = (device: any, data: number[]) => {
+        return createBuffer(device, new Uint32Array(data), 0x40) // GPUBufferUsage.INDEX
+}
+
+// ユニフォームバッファー作成
+export const createUniformBuffer = (device: any, size: number) => {
+        return device.createBuffer({
+                size,
+                usage: 0x40 | 0x4, // GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+                mappedAtCreation: false,
+        })
+}
+
+// ストレージバッファー作成
+export const createStorageBuffer = (device: any, size: number) => {
+        return device.createBuffer({
+                size,
+                usage: 0x80 | 0x4, // GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+                mappedAtCreation: false,
+        })
+}
+
+// バッファーデータ更新
+export const updateBuffer = (
+        device: any,
+        buffer: any,
+        data: Float32Array | Uint32Array | number[],
+        offset = 0
+) => {
+        const array = is.arr(data) ? new Float32Array(data) : data
+        device.queue.writeBuffer(buffer, offset, array)
+}
+
+// バッファーの削除
+export const destroyBuffer = (buffer: any) => buffer.destroy()
+
+// バッファーサイズの計算
+export const calculateBufferSize = (data: number[]) => data.length * 4 // 4 bytes per float
+
+// アライメント調整
+export const alignBufferSize = (size: number, alignment = 256) => {
+        return Math.ceil(size / alignment) * alignment
+}
+
+// 複数のバッファーを作成
+export const createBuffers = (
+        device: any,
+        bufferConfigs: Array<{
+                data: number[]
+                usage: number
+        }>
+): any[] => {
+        return bufferConfigs.map((config) => {
+                return createBuffer(device, config.data, config.usage)
+        })
+}
+
+// バッファー使用量の定数
+export const BufferUsage = {
+        VERTEX: 0x20,
+        INDEX: 0x40,
+        UNIFORM: 0x40,
+        STORAGE: 0x80,
+        COPY_SRC: 0x4,
+        COPY_DST: 0x8,
+        MAP_READ: 0x1,
+        MAP_WRITE: 0x2,
+} as const