glre 0.21.0 → 0.22.0

package/src/code/glsl.ts

@@ -0,0 +1,186 @@
+import { is } from './../utils'
+import type { Node, NodeType, X, ConversionContext } from '../node'
+
+// GLSLコード生成コンテキスト
+interface GLSLContext extends ConversionContext {
+        target: 'webgl'
+        precision: 'lowp' | 'mediump' | 'highp'
+        version: '100' | '300 es'
+}
+
+// ノードからGLSLコードを生成
+export const nodeToGLSL = (
+        nodeProxy: X,
+        context?: Partial<GLSLContext>
+): string => {
+        const ctx: GLSLContext = {
+                target: 'webgl',
+                precision: 'mediump',
+                version: '300 es',
+                nodes: new Map(),
+                variables: new Map(),
+                functions: new Map(),
+                ...context,
+        }
+
+        return generateGLSLExpression(nodeProxy as any, ctx)
+}
+
+// GLSL式を生成
+const generateGLSLExpression = (node: Node, context: GLSLContext): string => {
+        if (!node) return '0.0'
+        // 値ノード
+        if (!is.und(node.value)) return formatGLSLValue(node.value, node.type)
+        // プロパティアクセス（スウィズル）
+        if (node.property && node.parent) {
+                const parentExpr = generateGLSLExpression(node.parent, context)
+                return `${parentExpr}.${node.property}`
+        }
+        // 演算子ノード
+        if (node.operator && node.children && node.children.length >= 2)
+                return generateGLSLOperator(node, context)
+        // 数学関数ノード
+        if (node.mathFunction && node.children && node.children.length >= 1)
+                return generateGLSLMathFunction(node, context)
+        return '0.0'
+}
+
+// GLSL値をフォーマット
+const formatGLSLValue = (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(${values})`
+                if (type === 'vec3') return `vec3(${values})`
+                if (type === 'vec4') return `vec4(${values})`
+                if (type === 'color') return `vec3(${values})`
+        }
+        return '0.0'
+}
+
+// GLSL演算子を生成
+const generateGLSLOperator = (node: Node, context: GLSLContext): string => {
+        if (!node.children || node.children.length < 2) return '0.0'
+        const left = generateGLSLExpression(node.children[0], context)
+        const right = generateGLSLExpression(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 `mod(${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})`
+}
+
+// GLSL数学関数を生成
+const generateGLSLMathFunction = (node: Node, context: GLSLContext): string => {
+        if (!node.children || node.children.length < 1) return '0.0'
+        const fun = node.mathFunction
+        const args = node.children.map((child) => {
+                return generateGLSLExpression(child, context)
+        })
+        const [x, y, z] = args
+        // @TODO FIX
+        // if (fun === 'toVar') return x // toVarは変数化のヒントなので、そのまま返す
+        // 単項関数
+        if (args.length === 1) {
+                if (fun === 'abs') return `abs(${x})`
+                if (fun === 'acos') return `acos(${x})`
+                if (fun === 'asin') return `asin(${x})`
+                if (fun === 'atan') return `atan(${x})`
+                if (fun === 'ceil') return `ceil(${x})`
+                if (fun === 'cos') return `cos(${x})`
+                if (fun === 'floor') return `floor(${x})`
+                if (fun === 'fract') return `fract(${x})`
+                if (fun === 'length') return `length(${x})`
+                if (fun === 'normalize') return `normalize(${x})`
+                if (fun === 'sin') return `sin(${x})`
+                if (fun === 'sqrt') return `sqrt(${x})`
+                if (fun === 'tan') return `tan(${x})`
+        }
+        // 二項関数
+        if (args.length === 2) {
+                if (fun === 'atan2') return `atan(${x}, ${y})`
+                if (fun === 'pow') return `pow(${x}, ${y})`
+                if (fun === 'min') return `min(${x}, ${y})`
+                if (fun === 'max') return `max(${x}, ${y})`
+                if (fun === 'dot') return `dot(${x}, ${y})`
+                if (fun === 'cross') return `cross(${x}, ${y})`
+                if (fun === 'distance') return `distance(${x}, ${y})`
+                if (fun === 'reflect') return `reflect(${x}, ${y})`
+        }
+        // 三項関数
+        if (args.length === 3) {
+                if (fun === 'mix') return `mix(${x}, ${y}, ${z})`
+                if (fun === 'clamp') return `clamp(${x}, ${y}, ${z})`
+                if (fun === 'smoothstep') return `smoothstep(${x}, ${y}, ${z})`
+                if (fun === 'refract') return `refract(${x}, ${y}, ${z})`
+        }
+
+        return x || '0.0'
+}
+
+// 値からGLSL型を推定
+const inferGLSLType = (value: unknown): string => {
+        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'
+        }
+        return 'float'
+}
+
+// 完全なGLSLシェーダーを生成
+export const glsl = (
+        fragmentNode: X,
+        options?: {
+                precision?: 'lowp' | 'mediump' | 'highp'
+                version?: '100' | '300 es'
+                uniforms?: Record<string, any>
+        }
+) => {
+        const precision = options?.precision || 'mediump'
+        const version = options?.version || '300 es'
+        const is300ES = version === '300 es'
+        const fragment = nodeToGLSL(fragmentNode)
+        let shader = ''
+        if (is300ES) shader += '#version 300 es\n'
+        shader += `precision ${precision} float;\n\n`
+        // ユニフォーム変数の追加
+        if (options?.uniforms) {
+                Object.entries(options.uniforms).forEach(([name, value]) => {
+                        const type = inferGLSLType(value)
+                        shader += `uniform ${type} ${name};\n`
+                })
+                shader += '\n'
+        }
+        // 出力変数
+        if (is300ES) shader += 'out vec4 fragColor;\n\n'
+        shader += 'void main() {\n'
+        shader += is300ES
+                ? `    fragColor = ${fragment};\n`
+                : `    gl_FragColor = ${fragment};\n`
+        shader += '}\n'
+
+        return shader
+}

package/src/code/wgsl.ts

@@ -0,0 +1,170 @@
+import { is } from '../utils'
+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
+        // 単項関数
+        if (args.length === 1) {
+                if (fun === 'abs') return `abs(${x})`
+                if (fun === 'acos') return `acos(${x})`
+                if (fun === 'asin') return `asin(${x})`
+                if (fun === 'atan') return `atan(${x})`
+                if (fun === 'ceil') return `ceil(${x})`
+                if (fun === 'cos') return `cos(${x})`
+                if (fun === 'floor') return `floor(${x})`
+                if (fun === 'fract') return `fract(${x})`
+                if (fun === 'length') return `length(${x})`
+                if (fun === 'normalize') return `normalize(${x})`
+                if (fun === 'sin') return `sin(${x})`
+                if (fun === 'sqrt') return `sqrt(${x})`
+                if (fun === 'tan') return `tan(${x})`
+        }
+        // 二項関数
+        if (args.length === 2) {
+                if (fun === 'atan2') return `atan2(${x}, ${y})`
+                if (fun === 'pow') return `pow(${x}, ${y})`
+                if (fun === 'min') return `min(${x}, ${y})`
+                if (fun === 'max') return `max(${x}, ${y})`
+                if (fun === 'dot') return `dot(${x}, ${y})`
+                if (fun === 'cross') return `cross(${x}, ${y})`
+                if (fun === 'distance') return `distance(${x}, ${y})`
+                if (fun === 'reflect') return `reflect(${x}, ${y})`
+        }
+        // 三項関数
+        if (args.length === 3) {
+                if (fun === 'mix') return `mix(${x}, ${y}, ${z})`
+                if (fun === 'clamp') return `clamp(${x}, ${y}, ${z})`
+                if (fun === 'smoothstep') return `smoothstep(${x}, ${y}, ${z})`
+                return x
+        }
+        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,105 @@
+import { durable, event } from 'reev'
+import { createFrame, createQueue } from 'refr'
+import { webgl } from './webgl/index'
+import { webgpu } from './webgpu/index'
+import { is, isWebGPUSupported } from './utils'
+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'
+export * from './webgl'
+export * from './webgpu'
+
+let iTime = performance.now(),
+        iPrevTime = 0,
+        iDeltaTime = 0
+
+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 createGL = (props?: Partial<GL>) => {
+        const gl = event<Partial<GL>>({
+                isNative: false,
+                isWebGL: true,
+                isLoop: true,
+                isGL: true,
+                size: [0, 0],
+                mouse: [0, 0],
+                count: 6,
+                counter: 0,
+        }) as EventState<GL>
+
+        gl('mount', () => {
+                if (!isWebGPUSupported()) gl.isWebGL = true
+                if (gl.isWebGL) {
+                        webgl(gl)
+                } else webgpu(gl)
+                gl.init()
+                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)
+        })
+
+        gl.queue = createQueue()
+        gl.frame = createFrame()
+
+        gl.attribute = durable((key, value, iboValue) => {
+                gl.queue(() => void gl._attribute?.(key, value, iboValue))
+        })
+
+        gl.uniform = durable((key, value, isMatrix) => {
+                gl.queue(() => void gl._uniform?.(key, value, isMatrix))
+        })
+
+        gl.texture = durable((key, value) => {
+                gl.queue(() => void gl._texture?.(key, value))
+        })
+
+        return gl(props)
+}
+
+export default createGL

package/src/native.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+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 = {}
+                        gl.gl = ctx
+                        gl.mount()
+                        const resize = () => {
+                                gl.width = ctx.drawingBufferWidth
+                                gl.height = ctx.drawingBufferHeight
+                                gl.resize()
+                        }
+                        resize()
+                        Dimensions.addEventListener('change', resize)
+                }
+                return gl
+        })[0]
+}

package/src/node/cache.ts

@@ -0,0 +1,67 @@
+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()