glre 0.21.0 → 0.23.0

package/src/node/node.ts

@@ -0,0 +1,100 @@
+import { OPERATORS, FUNCTIONS, SWIZZLES } from './const'
+import { is } from '../utils/helpers'
+import type { NodeType } from './const'
+import type { Node, ProxyCallback, X } from './types'
+
+let nodeIdCounter = 0
+
+// ノードIDを生成
+const generateNodeId = () => `node_${++nodeIdCounter}`
+
+// ノードを作成
+export const createNode = (type: NodeType, value?: any, options?: Partial<Node>): Node => {
+        return {
+                id: generateNodeId(),
+                type,
+                value,
+                children: [],
+                ...options,
+        }
+}
+
+const isSwizzleProperty = (key = '') => SWIZZLES.includes(key as any)
+const isOperatorMethod = (key = '') => OPERATORS.includes(key as any)
+const isMathMethod = (key = '') => FUNCTIONS.includes(key as any)
+
+// Proxyハンドラーを作成
+const createNodeProxy = (node: Node, callback?: (info: ProxyCallback) => X) => {
+        const get = (_target: unknown, key: unknown) => {
+                if (!is.str(key) || key === 'then') return void 0
+
+                if (key === 'id') return node.id
+                if (key === 'type') return node.type
+                if (key === 'value') return node.value
+                if (key === 'property') return node.property
+
+                // swizzle prooerty
+                if (isSwizzleProperty(key))
+                        return createNodeProxy(
+                                createNode(getSwizzleType(key), undefined, {
+                                        parent: node,
+                                        property: key,
+                                }),
+                                callback
+                        )
+
+                // 演算子メソッド
+                if (isOperatorMethod(key))
+                        return (...args: any[]) => {
+                                return createNodeProxy(
+                                        createNode(node.type, undefined, {
+                                                operator: key as any,
+                                                children: [node, ...args],
+                                        }),
+                                        callback
+                                )
+                        }
+
+                // 数学関数メソッド
+                if (isMathMethod(key))
+                        return (...args: any[]) => {
+                                return createNodeProxy(
+                                        createNode(getMathReturnType(key, node.type), undefined, {
+                                                mathFunction: key as any,
+                                                children: [node, ...args],
+                                        }),
+                                        callback
+                                )
+                        }
+
+                return callback?.({ path: [key], args: [] })
+        }
+        const apply = (_target: unknown, _thisArg: unknown, args: any) => {
+                return callback?.({ path: [], args })
+        }
+
+        return new Proxy(() => {}, { get, apply }) as X
+}
+
+// スウィズルの戻り値型を取得
+const getSwizzleType = (swizzle: string): NodeType => {
+        if (swizzle.length === 1) return 'float'
+        if (swizzle.length === 2) return 'vec2'
+        if (swizzle.length === 3) return 'vec3'
+        if (swizzle.length === 4) return 'vec4'
+        return 'float'
+}
+
+// 数学関数の戻り値型を取得
+const getMathReturnType = (func: string, inputType: NodeType): NodeType => {
+        if (func === 'length') return 'float'
+        if (func === 'normalize') return inputType
+        if (func === 'toVar') return inputType
+        return inputType
+}
+
+// 公開API
+export const node = (type: NodeType, value?: any, options?: Partial<Node>) => {
+        const nodeInstance = createNode(type, value, options)
+        return createNodeProxy(nodeInstance)
+}

package/src/node/types.ts

@@ -0,0 +1,101 @@
+import type { NodeType, Operator, MathFunction, Swillzes } from './const'
+
+// ノードの基本インターフェース
+export interface Node {
+        id: string
+        type: NodeType
+        value?: any
+        property?: string
+        parent?: Node
+        children?: Node[]
+        operator?: Operator
+        mathFunction?: MathFunction
+}
+
+// Proxyハンドラーのコールバック型
+export interface ProxyCallback {
+        path: string[]
+        args: any[]
+}
+
+// ノード作成関数の型
+export type NodeCreator = (value?: any) => X
+
+// 演算子メソッドの型
+export interface OperatorMethods {
+        add(x: X | number): X
+        sub(x: X | number): X
+        mul(x: X | number): X
+        div(x: X | number): X
+        mod(x: X | number): X
+        equal(x: X | number): X
+        notEqual(x: X | number): X
+        lessThan(x: X | number): X
+        lessThanEqual(x: X | number): X
+        greaterThan(x: X | number): X
+        greaterThanEqual(x: X | number): X
+        and(x: X): X
+        or(x: X): X
+        not(): X
+}
+
+// 数学関数メソッドの型
+export interface MathMethods {
+        abs(): X
+        acos(): X
+        asin(): X
+        atan(): X
+        ceil(): X
+        cos(): X
+        floor(): X
+        fract(): X
+        length(): X
+        normalize(): X
+        sin(): X
+        sqrt(): X
+        tan(): X
+        toVar(): X
+}
+
+// 全てのswizzleパターンをまとめる型
+
+// スウィズルプロパティの型
+export type SwizzleProperties = {
+        [k in Swillzes]: X
+}
+
+// ノードProxy型
+export interface X extends MathMethods, OperatorMethods, SwizzleProperties {
+        readonly id: string
+        readonly type: NodeType
+        readonly value: any
+        readonly property: string
+        (...args: any[]): X
+}
+
+// ユニフォーム変数の型
+export interface UniformNode extends X {
+        set(value: any): void
+        onObjectUpdate(callback: (context: any) => any): UniformNode
+        onRenderUpdate(callback: (context: any) => any): UniformNode
+}
+
+// 関数定義の型
+export interface FunctionNode {
+        (...args: any[]): X
+        call(x: X[]): X
+}
+
+// 条件分岐の型
+export interface ConditionalNode {
+        ElseIf(condition: X, callback: () => void): ConditionalNode
+        Else(callback: () => void): void
+}
+
+// WebGL/WebGPU変換コンテキスト
+export interface ConversionContext {
+        target: 'webgl' | 'webgpu'
+        nodes: Map<string, Node>
+        variables: Map<string, string>
+        functions: Map<string, string>
+}

package/src/node/uniform.ts

@@ -0,0 +1,92 @@
+import { node } from './node'
+import { is } from '../utils/helpers'
+import type { UniformNode } from './types'
+import type { NodeType } from './const'
+
+// ユニフォーム更新コンテキスト
+interface UpdateContext {
+        object?: any
+        camera?: any
+        renderer?: any
+        scene?: any
+        time?: number
+}
+
+// ユニフォーム値の型を推定
+const inferUniformType = (value: any): NodeType => {
+        if (is.num(value)) return 'float'
+        if (is.bol(value)) return 'bool'
+        if (is.arr(value)) {
+                const len = value.length
+                if (len === 2) return 'vec2'
+                if (len === 3) return 'vec3'
+                if (len === 4) return 'vec4'
+                if (len === 9) return 'mat3'
+                if (len === 16) return 'mat4'
+        }
+        if (is.obj(value) && 'r' in value && 'g' in value && 'b' in value) return 'color'
+        return 'float'
+}
+
+// ユニフォーム変数を作成
+export const uniform = (initialValue: any): UniformNode => {
+        const type = inferUniformType(initialValue)
+        let currentValue = initialValue
+        let objectUpdateCallback: ((context: UpdateContext) => any) | null = null
+        let renderUpdateCallback: ((context: UpdateContext) => any) | null = null
+
+        const baseNode = node(type, currentValue) as any
+
+        // 値を設定
+        const set = (value: any) => {
+                currentValue = value
+                baseNode.value = value
+        }
+        // オブジェクト更新時のコールバックを設定
+        const onObjectUpdate = (callback: (context: UpdateContext) => any): UniformNode => {
+                objectUpdateCallback = callback
+                return uniformNode
+        }
+        // レンダー更新時のコールバックを設定
+        const onRenderUpdate = (callback: (context: UpdateContext) => any): UniformNode => {
+                renderUpdateCallback = callback
+                return uniformNode
+        }
+        // 内部更新関数（外部から呼び出される）
+        const _updateFromContext = (context: UpdateContext) => {
+                if (objectUpdateCallback) {
+                        const newValue = objectUpdateCallback(context)
+                        if (newValue !== undefined) set(newValue)
+                }
+                if (renderUpdateCallback) {
+                        const newValue = renderUpdateCallback(context)
+                        if (newValue !== undefined) set(newValue)
+                }
+        }
+        // UniformNodeインターフェースを実装
+        const uniformNode = Object.create(baseNode)
+        uniformNode.set = set
+        uniformNode.onObjectUpdate = onObjectUpdate
+        uniformNode.onRenderUpdate = onRenderUpdate
+        uniformNode._updateFromContext = _updateFromContext
+        uniformNode.isUniform = true
+        return uniformNode as UniformNode
+}
+
+// 組み込みユニフォーム変数
+export const iTime = uniform(0.0)
+export const iPrevTime = uniform(0.0)
+export const iDeltaTime = uniform(0.0)
+export const iResolution = uniform([1920, 1080])
+export const iMouse = uniform([0, 0])
+
+// ユニフォーム変数の更新（レンダーループで呼び出される）
+export const updateUniforms = (context: UpdateContext) => {
+        // 時間の更新
+        if (context.time !== undefined) {
+                const prevTime = iTime.value || 0
+                iTime.set(context.time)
+                iPrevTime.set(prevTime)
+                iDeltaTime.set(context.time - prevTime)
+        }
+}

package/src/react.ts

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

package/src/solid.ts

@@ -0,0 +1,14 @@
+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.mount()
+                } else gl.clean()
+        }
+        return gl
+}

package/src/types.ts

@@ -0,0 +1,89 @@
+import { EventState } from 'reev'
+import type { Fun, Queue, Frame } from 'refr'
+import type { X } from './node'
+export type { Fun, Queue, Frame }
+export type GPUContext = any // GPUCanvasContext https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext
+export type GPUDevice = any //
+export type GPUBuffer = any //
+export type GPUPipeline = any //
+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 GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'
+export type GLDrawMode =
+        | 'POINTS'
+        | 'LINE_STRIP'
+        | 'LINE_LOOP'
+        | 'LINES'
+        | 'TRIANGLE_STRIP'
+        | 'TRIANGLE_FAN'
+        | 'TRIANGLES'
+
+export interface WebGLState {
+        context: WebGLRenderingContext
+        program: WebGLProgram
+}
+
+export interface WebGPUState {
+        device: GPUDevice
+        context: GPUContext
+        pipeline: GPUPipeline
+}
+
+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
+        el: HTMLCanvasElement
+        vs: string | X
+        fs: string | X
+        vert: string | X
+        frag: string | X
+        vertex: string | X
+        fragment: string | X
+
+        /**
+         * core state
+         */
+        webgpu: WebGPUState
+        webgl: WebGLState
+        queue: Queue
+        frame: Frame
+
+        /**
+         * 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/helpers.ts

@@ -0,0 +1,44 @@
+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),
+}
+
+/**
+ * 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/utils/pipeline.ts

@@ -0,0 +1,128 @@
+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 {
+  let x = f32(vertex_index % 2u) * 4.0 - 1.0;
+  let y = f32(vertex_index / 2u) * 4.0 - 1.0;
+  return vec4f(x, y, 0.0, 1.0);
+}
+`
+
+const defaultFragmentWGSL = `
+@fragment
+fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
+  return vec4f(position.xy / vec2f(1280, 800), 0.0, 1.0);
+}
+`
+
+export const createRenderPipeline = (
+        device: GPUDevice,
+        format: string,
+        vs = defaultVertexWGSL,
+        fs = defaultFragmentWGSL,
+        buffers: any[]
+) => {
+        return device.createRenderPipeline({
+                vertex: {
+                        module: device.createShaderModule({ code: vs.trim() }),
+                        entryPoint: 'main',
+                        buffers,
+                },
+                fragment: {
+                        module: device.createShaderModule({ code: fs.trim() }),
+                        entryPoint: 'main',
+                        targets: [{ format }],
+                },
+                layout: 'auto',
+                primitive: { topology: 'triangle-list' },
+        }) as GPUPipeline
+}
+
+export const createDescriptor = (c: GPUContext) => {
+        return {
+                colorAttachments: [
+                        {
+                                view: c.getCurrentTexture().createView(),
+                                clearValue: { r: 0, g: 0, b: 0, a: 1 },
+                                loadOp: 'clear',
+                                storeOp: 'store',
+                        },
+                ],
+        }
+}
+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/utils/program.ts

@@ -0,0 +1,94 @@
+export const defaultVertexGLSL = /* cpp */ `
+#version 300 es
+void main() {
+  float x = float(gl_VertexID % 2) * 4.0 - 1.0;
+  float y = float(gl_VertexID / 2) * 4.0 - 1.0;
+  gl_Position = vec4(x, y, 0.0, 1.0);
+}
+`
+
+export const defaultFragmentGLSL = /* cpp */ `
+#version 300 es
+precision mediump float;
+uniform vec2 iResolution;
+out vec4 fragColor;
+void main() {
+  fragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
+}
+`
+
+export 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.trim())
+        c.compileShader(shader)
+        if (c.getShaderParameter(shader, c.COMPILE_STATUS)) return shader
+        const error = c.getShaderInfoLog(shader)
+        c.deleteShader(shader)
+        throw new Error(`Could not compile shader: ${error}`)
+}
+
+export const createProgram = (c: WebGLRenderingContext, vs = defaultVertexGLSL, fs = defaultFragmentGLSL) => {
+        const pg = c.createProgram()
+        c.attachShader(pg, createShader(c, vs, c.VERTEX_SHADER))
+        c.attachShader(pg, createShader(c, fs, c.FRAGMENT_SHADER))
+        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 createVbo = (c: WebGLRenderingContext, data: number[]) => {
+        const buffer = c.createBuffer()
+        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()
+        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 createAttrib = (
+        c: WebGLRenderingContext,
+        stride: number,
+        location: any,
+        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 createTexture = (c: WebGLRenderingContext, img: HTMLImageElement) => {
+        const texture = c.createTexture()
+        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)
+}