glre 0.21.0 → 0.23.0

package/src/code/wgsl.ts

@@ -0,0 +1,134 @@
+import { is } from '../utils/helpers'
+import type { Node, NodeType, ConversionContext, X } from '../node'
+
+// WGSLコード生成コンテキスト
+interface WGSLContext extends ConversionContext {
+        target: 'webgpu'
+}
+
+// ノードからWGSLコードを生成
+export const nodeToWGSL = (nodeProxy: X, context?: Partial<WGSLContext>): string => {
+        const ctx: WGSLContext = {
+                target: 'webgpu',
+                nodes: new Map(),
+                variables: new Map(),
+                functions: new Map(),
+                ...context,
+        }
+        return generateWGSLExpression(nodeProxy as any, ctx)
+}
+
+// WGSL式を生成
+const generateWGSLExpression = (node: Node, context: WGSLContext): string => {
+        if (!node) return '0.0'
+        // 値ノード
+        if (node.value !== undefined) return formatWGSLValue(node.value, node.type)
+        // プロパティアクセス（スウィズル）
+        if (node.property && node.parent) {
+                const parentExpr = generateWGSLExpression(node.parent, context)
+                return `${parentExpr}.${node.property}`
+        }
+        // 演算子ノード
+        if (node.operator && node.children && node.children.length >= 2) return generateWGSLOperator(node, context)
+        // 数学関数ノード
+        if (node.mathFunction && node.children && node.children.length >= 1)
+                return generateWGSLMathFunction(node, context)
+        return '0.0'
+}
+
+// WGSL値をフォーマット
+const formatWGSLValue = (value: any, type: NodeType): string => {
+        if (type === 'float') {
+                const num = Number(value)
+                return num % 1 === 0 ? `${num}.0` : `${num}`
+        }
+        if (type === 'int') return `${Math.floor(Number(value))}`
+        if (type === 'bool') return Boolean(value) ? 'true' : 'false'
+        if (is.arr(value)) {
+                const values = value
+                        .map((v) => {
+                                const num = Number(v)
+                                return num % 1 === 0 ? `${num}.0` : `${num}`
+                        })
+                        .join(', ')
+                if (type === 'vec2') return `vec2<f32>(${values})`
+                if (type === 'vec3') return `vec3<f32>(${values})`
+                if (type === 'vec4') return `vec4<f32>(${values})`
+                if (type === 'color') return `vec3<f32>(${values})`
+        }
+
+        return '0.0'
+}
+
+// WGSL演算子を生成
+const generateWGSLOperator = (node: Node, context: WGSLContext): string => {
+        if (!node.children || node.children.length < 2) return '0.0'
+        const left = generateWGSLExpression(node.children[0], context)
+        const right = generateWGSLExpression(node.children[1], context)
+        if (node.operator === 'add') return `(${left} + ${right})`
+        if (node.operator === 'sub') return `(${left} - ${right})`
+        if (node.operator === 'mul') return `(${left} * ${right})`
+        if (node.operator === 'div') return `(${left} / ${right})`
+        if (node.operator === 'mod') return `(${left} % ${right})`
+        if (node.operator === 'equal') return `(${left} == ${right})`
+        if (node.operator === 'notEqual') return `(${left} != ${right})`
+        if (node.operator === 'lessThan') return `(${left} < ${right})`
+        if (node.operator === 'lessThanEqual') return `(${left} <= ${right})`
+        if (node.operator === 'greaterThan') return `(${left} > ${right})`
+        if (node.operator === 'greaterThanEqual') return `(${left} >= ${right})`
+        if (node.operator === 'and') return `(${left} && ${right})`
+        if (node.operator === 'or') return `(${left} || ${right})`
+        return `(${left} + ${right})`
+}
+
+// WGSL数学関数を生成
+const generateWGSLMathFunction = (node: Node, context: WGSLContext): string => {
+        if (!node.children || node.children.length < 1) return '0.0'
+        const fun = node.mathFunction
+        const args = node.children.map((child) => generateWGSLExpression(child, context))
+        const [x, y, z] = args
+        // @TODO FIX
+        // if (fun === 'toVar') return x // toVarは変数化のヒントなので、そのまま返す
+        if (args.length === 1) return `${fun}(${x})`
+        if (args.length === 2) return `${fun}(${x}, ${y})`
+        if (args.length === 3) return `${fun}(${x}, ${y}, ${z})`
+        return x || '0.0'
+}
+
+// 完全なWGSLシェーダーを生成
+export const wgsl = (
+        fragmentNode: X,
+        options?: {
+                uniforms?: Record<string, any>
+        }
+) => {
+        let shader = ''
+        // ユニフォーム変数の追加
+        if (options?.uniforms) {
+                Object.entries(options.uniforms).forEach(([name, value]) => {
+                        const type = inferWGSLType(value)
+                        shader += `@group(0) @binding(0) var<uniform> ${name}: ${type};\n`
+                })
+                shader += '\n'
+        }
+        shader += '@fragment\n'
+        shader += 'fn main() -> @location(0) vec4<f32> {\n'
+        const fragmentExpr = nodeToWGSL(fragmentNode)
+        shader += `    return ${fragmentExpr};\n`
+        shader += '}\n'
+
+        return shader
+}
+
+// 値からWGSL型を推定
+const inferWGSLType = (value: any): string => {
+        if (is.num(value)) return 'f32'
+        if (is.bol(value)) return 'bool'
+        if (is.arr(value)) {
+                const len = value.length
+                if (len === 2) return 'vec2<f32>'
+                if (len === 3) return 'vec3<f32>'
+                if (len === 4) return 'vec4<f32>'
+        }
+        return 'f32'
+}

package/src/index.ts

@@ -0,0 +1,107 @@
+import { durable, event } from 'reev'
+import { createFrame, createQueue } from 'refr'
+import { webgl } from './webgl'
+import { webgpu } from './webgpu'
+import { is } from './utils/helpers'
+import type { EventState } from 'reev'
+import type { GL } from './types'
+export * from './code/glsl'
+export * from './code/wgsl'
+export * from './node'
+export * from './types'
+export * from './utils/helpers'
+export * from './utils/pipeline'
+export * from './utils/program'
+export * from './webgl'
+export * from './webgpu'
+
+export const isGL = (a: unknown): a is EventState<GL> => {
+        if (!is.obj(a)) return false
+        if ('isGL' in a) return true
+        return false
+}
+export const isServer = () => {
+        return typeof window === 'undefined'
+}
+
+export const isWebGPUSupported = () => {
+        if (isServer()) return false
+        return 'gpu' in navigator
+}
+
+let iTime = performance.now(),
+        iPrevTime = 0,
+        iDeltaTime = 0
+
+export const createGL = (props?: Partial<GL>) => {
+        const gl = event<Partial<GL>>({
+                isNative: false,
+                isWebGL: true,
+                isLoop: true,
+                isGL: true,
+                size: [0, 0],
+                mouse: [0, 0],
+                count: 3,
+                webgl: {},
+                webgpu: {},
+        }) as EventState<GL>
+
+        gl.queue = createQueue()
+        gl.frame = createFrame()
+
+        gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)))
+        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)))
+        gl.texture = durable((k, v) => gl.queue(() => gl._texture?.(k, v)))
+
+        gl('mount', async () => {
+                if (!isWebGPUSupported()) gl.isWebGL = true
+                if (gl.isWebGL) {
+                        await webgl(gl)
+                } else await webgpu(gl)
+                gl.resize()
+                gl.frame(() => {
+                        gl.loop()
+                        gl.render()
+                        return gl.isLoop
+                })
+                if (gl.isNative) return
+                window.addEventListener('resize', gl.resize)
+                gl.el.addEventListener('mousemove', gl.mousemove)
+        })
+
+        gl('clean', () => {
+                gl.frame.stop()
+                gl.frame.clean(gl.render)
+                if (gl.isNative) return
+                window.removeEventListener('resize', gl.resize)
+                gl.el.removeEventListener('mousemove', gl.mousemove)
+        })
+
+        gl('loop', () => {
+                iPrevTime = iTime
+                iTime = performance.now() / 1000
+                iDeltaTime = iTime - iPrevTime
+                gl.uniform({ iPrevTime, iTime, iDeltaTime })
+                // if (gl.fragmentNode) updateUniforms({ time: iTime }) // @TODO FIX
+        })
+
+        gl('resize', () => {
+                const w = gl.width || window.innerWidth
+                const h = gl.height || window.innerHeight
+                gl.size[0] = gl.el.width = w
+                gl.size[1] = gl.el.height = h
+                gl.uniform('iResolution', gl.size)
+        })
+
+        gl('mousemove', (_e: any, x = _e.clientX, y = _e.clientY) => {
+                const [w, h] = gl.size
+                const { top, left } = gl.el.getBoundingClientRect()
+                gl.mouse[0] = (x - top - w / 2) / (w / 2)
+                gl.mouse[1] = -(y - left - h / 2) / (h / 2)
+                gl.uniform('iMouse', gl.mouse)
+        })
+
+        return gl(props)
+}
+
+export default createGL

package/src/native.ts

@@ -0,0 +1,29 @@
+import { useState } from 'react' // @ts-ignore
+import { Dimensions } from 'react-native'
+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 = (ctx: any) => {
+                        gl.el = {} as any
+                        gl({
+                                render() {
+                                        ctx.flush()
+                                        ctx.endFrameEXP()
+                                },
+                        })
+                        gl.mount()
+                        const resize = () => {
+                                gl.width = ctx.drawingBufferWidth
+                                gl.height = ctx.drawingBufferHeight
+                                gl.resize()
+                        }
+                        resize()
+                        Dimensions.addEventListener('change', resize)
+                }
+                return gl({ isNative: true })
+        })[0]
+}

package/src/node/cache.ts

@@ -0,0 +1,60 @@
+import { CACHE_BOOLS, CACHE_INTS, CACHE_FLOATS } from './const'
+import { node } from '.'
+import type { X } from './types'
+
+const boolCache = new Map<boolean, X>()
+const intCache = new Map<number, X>()
+const floatCache = new Map<number, X>()
+
+const initializeCache = () => {
+        CACHE_BOOLS.forEach((value) => {
+                boolCache.set(value, node('bool', value))
+        })
+        CACHE_INTS.forEach((value) => {
+                intCache.set(value, node('int', value))
+        })
+        CACHE_FLOATS.forEach((value) => {
+                floatCache.set(value, node('float', value))
+        })
+}
+
+export const getCachedBool = (x: boolean): X => {
+        if (!boolCache.has(x)) initializeCache()
+        return boolCache.get(x) || node('bool', x)
+}
+
+// キャッシュされたintノードを取得
+export const getCachedInt = (x: number): X => {
+        if (intCache.has(x)) return intCache.get(x)!
+        return node('int', x)
+}
+
+// キャッシュされたfloatノードを取得
+export const getCachedFloat = (x: number): X => {
+        if (floatCache.has(x)) return floatCache.get(x)!
+        return node('float', x)
+}
+
+// ノードの重複を検出
+export const findDuplicateNodes = (nodes: X[]): Map<string, X[]> => {
+        const duplicates = new Map<string, X[]>()
+        const signatures = new Map<string, X>()
+
+        nodes.forEach((nodeProxy) => {
+                const signature = generateNodeSignature(nodeProxy)
+                if (signatures.has(signature)) {
+                        if (!duplicates.has(signature)) duplicates.set(signature, [signatures.get(signature)!])
+                        duplicates.get(signature)!.push(nodeProxy)
+                } else signatures.set(signature, nodeProxy)
+        })
+        return duplicates
+}
+
+// ノードのシグネチャを生成
+const generateNodeSignature = (nodeProxy: X): string => {
+        const parts = [nodeProxy.type, `${nodeProxy.value}`, nodeProxy.property || '']
+        return parts.join('|')
+}
+
+// 初期化を実行
+// initializeCache()

package/src/node/const.ts

@@ -0,0 +1,130 @@
+// 基本型定数
+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,111 @@
+import { node } from '.'
+import { getCachedBool, getCachedInt, getCachedFloat } from './cache'
+import { is } from '../utils/helpers'
+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,93 @@
+import { float } from './conv'
+import { node } from './node'
+import { uniform } from './uniform'
+import { is } from '../utils/helpers'
+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],
+        })
+}
+*/