glre 0.20.0 → 0.22.0

package/src/node/const.ts

@@ -0,0 +1,147 @@
+// 基本型定数
+export const TYPES = [
+        'float',
+        'int',
+        'uint',
+        'bool',
+        'color',
+        'vec2',
+        'vec3',
+        'vec4',
+        'mat2',
+        'mat3',
+        'mat4',
+        'ivec2',
+        'ivec3',
+        'ivec4',
+        'uvec2',
+        'uvec3',
+        'uvec4',
+        'bvec2',
+        'bvec3',
+        'bvec4',
+] as const
+
+export type NodeType = (typeof TYPES)[number]
+
+// スウィズル定数
+export const SWIZZLES = [
+        'x',
+        'y',
+        'z',
+        'w',
+        'r',
+        'g',
+        'b',
+        'a',
+        's',
+        't',
+        'p',
+        'q',
+] as const
+
+type AllSwizzles<T extends string> =
+        | T
+        | `${T}${T}`
+        | `${T}${T}${T}`
+        | `${T}${T}${T}${T}`
+
+export type Swillzes =
+        | AllSwizzles<'x' | 'y' | 'z' | 'w'>
+        | AllSwizzles<'r' | 'g' | 'b' | 'a'>
+        | AllSwizzles<'p' | 'q'>
+        | AllSwizzles<'s' | 't'>
+
+// 演算子定数
+export const OPERATORS = [
+        'add',
+        'sub',
+        'mul',
+        'div',
+        'mod',
+        'equal',
+        'notEqual',
+        'lessThan',
+        'lessThanEqual',
+        'greaterThan',
+        'greaterThanEqual',
+        'and',
+        'or',
+        'not',
+        'assign',
+        'xor',
+        'bitAnd',
+        'bitNot',
+        'bitOr',
+        'bitXor',
+        'shiftLeft',
+        'shiftRight',
+] as const
+
+export type Operator = (typeof OPERATORS)[number]
+
+// 数学関数定数
+export const FUNCTIONS = [
+        'abs',
+        'acos',
+        'asin',
+        'atan',
+        'atan2',
+        'ceil',
+        'clamp',
+        'cos',
+        'cross',
+        'degrees',
+        'distance',
+        'dot',
+        'exp',
+        'exp2',
+        'faceforward',
+        'floor',
+        'fract',
+        'length',
+        'all',
+        'any',
+        'bitcast',
+        'cbrt',
+        'dFdx',
+        'dFdy',
+        'difference',
+        'equals',
+        'fwidth',
+        'inverseSqrt',
+        'lengthSq',
+        'log',
+        'log2',
+        'max',
+        'min',
+        'mix',
+        'negate',
+        'normalize',
+        'oneMinus',
+        'pow',
+        'pow2',
+        'pow3',
+        'pow4',
+        'radians',
+        'reciprocal',
+        'reflect',
+        'refract',
+        'round',
+        'saturate',
+        'sign',
+        'sin',
+        'smoothstep',
+        'sqrt',
+        'step',
+        'tan',
+        'transformDirection',
+        'trunc',
+] as const
+
+export type MathFunction = (typeof FUNCTIONS)[number]
+
+// キャッシュ用定数
+export const CACHE_BOOLS = [true, false] as const
+export const CACHE_INTS = [0, 1, 2, 3, 4, 5] as const
+export const CACHE_FLOATS = [0.0, 1.0, 0.5, 2.0] as const

package/src/node/conv.ts

@@ -0,0 +1,122 @@
+import { node } from '.'
+import { getCachedBool, getCachedInt, getCachedFloat } from './cache'
+import { is } from '../utils'
+import type { X } from './types'
+
+// JavaScript値をノードに変換
+export const convertToNode = (x: unknown): X => {
+        if (is.bol(x)) return getCachedBool(x)
+        if (is.num(x)) {
+                if (is.int(x)) return getCachedInt(x)
+                return getCachedFloat(x)
+        }
+        if (is.arr(x)) return convertArrayToNode(x)
+        if (is.obj(x)) return convertObjectToNode(x)
+        return node('float', 0)
+}
+
+// 配列をベクトル/行列ノードに変換
+const convertArrayToNode = (array: number[]): X => {
+        const len = array.length
+        if (len === 2) return node('vec2', array)
+        if (len === 3) return node('vec3', array)
+        if (len === 4) return node('vec4', array)
+        if (len === 9) return node('mat3', array)
+        if (len === 16) return node('mat4', array)
+        return node('float', array[0])
+}
+
+// オブジェクトをノードに変換
+const convertObjectToNode = (obj: any): X => {
+        // カラーオブジェクトの検出
+        if ('r' in obj && 'g' in obj && 'b' in obj) {
+                const arr = [obj.r, obj.g, obj.b]
+                if ('a' in obj) arr.push(obj.a)
+                return node('color', arr)
+        }
+        // ベクトルライクオブジェクトの検出
+        if ('x' in obj && 'y' in obj) {
+                const arr = [obj.x, obj.y]
+                if ('z' in obj) arr.push(obj.z)
+                if ('w' in obj) arr.push(obj.w)
+                return convertArrayToNode(arr)
+        }
+        return node('float', 0)
+}
+
+// 型変換関数
+export const float = (x: unknown): X => {
+        if (is.num(x)) return getCachedFloat(x)
+        return node('float', Number(x))
+}
+
+export const int = (x: unknown): X => {
+        if (is.num(x) && Number.isInteger(x)) return getCachedInt(x)
+        return node('int', Math.floor(Number(x)))
+}
+
+export const bool = (x: unknown): X => {
+        return getCachedBool(Boolean(x))
+}
+
+export const vec2 = (x?: any, y?: any): X => {
+        if (is.und(x)) return node('vec2', [0, 0])
+        if (is.und(y)) {
+                if (is.arr(x)) return node('vec2', x.slice(0, 2))
+                if (is.obj(x) && 'x' in x && 'y' in x)
+                        return node('vec2', [x.x, x.y])
+                return node('vec2', [Number(x), Number(x)])
+        }
+        return node('vec2', [Number(x), Number(y)])
+}
+
+export const vec3 = (x?: any, y?: any, z?: any): X => {
+        if (is.und(x)) return node('vec3', [0, 0, 0])
+        if (is.und(y)) {
+                if (is.arr(x)) return node('vec3', x.slice(0, 3))
+                if (is.obj(x) && 'x' in x && 'y' in x && 'z' in x)
+                        return node('vec3', [x.x, x.y, x.z])
+                return node('vec3', [Number(x), Number(x), Number(x)])
+        }
+        if (z === undefined) {
+                return node('vec3', [Number(x), Number(y), 0])
+        }
+        return node('vec3', [Number(x), Number(y), Number(z)])
+}
+
+export const vec4 = (x?: any, y?: any, z?: any, w?: any): X => {
+        if (is.und(x)) return node('vec4', [0, 0, 0, 1])
+        if (is.und(y)) {
+                if (is.arr(x)) return node('vec4', x.slice(0, 4))
+                if (is.obj(x) && 'x' in x && 'y' in x && 'z' in x && 'w' in x)
+                        return node('vec4', [x.x, x.y, x.z, x.w])
+                return node('vec4', [Number(x), Number(x), Number(x), 1])
+        }
+        return node('vec4', [Number(x), Number(y), Number(z), Number(w)])
+}
+
+export const color = (r?: any, g?: any, b?: any): X => {
+        if (r === undefined) return node('color', [1, 1, 1])
+
+        // 16進数カラーの処理
+        if (is.str(r) && r.startsWith('#')) {
+                const hex = r.slice(1)
+                const num = parseInt(hex, 16)
+                return node('color', [
+                        ((num >> 16) & 255) / 255,
+                        ((num >> 8) & 255) / 255,
+                        (num & 255) / 255,
+                ])
+        }
+
+        // 数値カラーの処理
+        if (is.num(r) && g === undefined && b === undefined) {
+                return node('color', [
+                        ((r >> 16) & 255) / 255,
+                        ((r >> 8) & 255) / 255,
+                        (r & 255) / 255,
+                ])
+        }
+
+        return vec3(r, g, b)
+}

package/src/node/index.ts

@@ -0,0 +1,96 @@
+import { node } from './node'
+import { uniform } from './uniform'
+import { float } from './conv'
+import { is } from '../utils'
+import type { X, FunctionNode, ConditionalNode } from './types'
+export type { X, FunctionNode, ConditionalNode }
+export * from './cache'
+export * from './const'
+export * from './conv'
+export * from './node'
+export * from './types'
+export * from './uniform'
+
+// 関数定義
+export const Fn = (jsFunc: Function): FunctionNode => {
+        const functionNode = (...args: any[]) => {
+                const inputs = args.map((arg) => {
+                        if (is.obj(arg) && 'type' in arg && arg.type) return arg
+                        return float(arg)
+                })
+                const result = jsFunc(inputs)
+                return result || float(0)
+        }
+        functionNode.call = (inputs: X[]) => jsFunc(inputs)
+        return functionNode as FunctionNode
+}
+
+// 条件分岐
+export const If = (condition: X, callback: () => void): ConditionalNode => {
+        callback()
+
+        const conditionalNode = {
+                ElseIf(
+                        newCondition: X,
+                        newCallback: () => void
+                ): ConditionalNode {
+                        newCallback()
+                        return conditionalNode
+                },
+                Else(elseCallback: () => void) {
+                        elseCallback()
+                },
+        }
+
+        return conditionalNode
+}
+
+// 組み込み変数
+export const gl_FragCoord = node('vec4', undefined)
+export const gl_Position = node('vec4', undefined)
+export const iTime = uniform(0.0)
+export const iResolution = uniform([1920, 1080])
+export const iMouse = uniform([0, 0])
+
+// 数学関数
+export const abs = (x: X) => x.abs()
+export const sin = (x: X) => x.sin()
+export const cos = (x: X) => x.cos()
+export const tan = (x: X) => x.tan()
+export const sqrt = (x: X) => x.sqrt()
+export const floor = (x: X) => x.floor()
+export const ceil = (x: X) => x.ceil()
+export const fract = (x: X) => x.fract()
+export const normalize = (x: X) => x.normalize()
+export const length = (x: X) => x.length()
+
+/**
+ * @TODO FIX
+export const min = (a: X, b: X) => {
+        return node('float', undefined, {
+                mathFunction: 'min',
+                children: [a as any, b as any],
+        })
+}
+
+export const max = (a: X, b: X) => {
+        return node('float', undefined, {
+                mathFunction: 'max',
+                children: [a as any, b as any],
+        })
+}
+
+export const mix = (a: X, b: X, t: X) => {
+        return node('float', undefined, {
+                mathFunction: 'mix',
+                children: [a as any, b as any, t as any],
+        })
+}
+
+export const clamp = (x: X, min: X, max: X) => {
+        return node('float', undefined, {
+                mathFunction: 'clamp',
+                children: [x as any, min as any, max as any],
+        })
+}
+*/

package/src/node/node.ts

@@ -0,0 +1,114 @@
+import { OPERATORS, FUNCTIONS, SWIZZLES, NodeType } from './const'
+import { is } from '../utils'
+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,99 @@
+import { node } from './node'
+import { is } from '../utils'
+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,18 @@
+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.gl = el.getContext('webgl2')
+                                gl.mount()
+                        } else gl.clean()
+                }
+                return gl
+        })[0]
+}