glre 0.22.0 → 0.24.0

package/src/code/wgsl.ts

@@ -1,4 +1,4 @@
-import { is } from '../utils'
+import { is } from '../utils/helpers'
 import type { Node, NodeType, ConversionContext, X } from '../node'
 
 // WGSLコード生成コンテキスト
@@ -7,10 +7,7 @@ interface WGSLContext extends ConversionContext {
 }
 
 // ノードからWGSLコードを生成
-export const nodeToWGSL = (
-        nodeProxy: X,
-        context?: Partial<WGSLContext>
-): string => {
+export const nodeToWGSL = (nodeProxy: X, context?: Partial<WGSLContext>): string => {
         const ctx: WGSLContext = {
                 target: 'webgpu',
                 nodes: new Map(),
@@ -25,16 +22,14 @@ export const nodeToWGSL = (
 const generateWGSLExpression = (node: Node, context: WGSLContext): string => {
         if (!node) return '0.0'
         // 値ノード
-        if (node.value !== undefined)
-                return formatWGSLValue(node.value, node.type)
+        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.operator && node.children && node.children.length >= 2) return generateWGSLOperator(node, context)
         // 数学関数ノード
         if (node.mathFunction && node.children && node.children.length >= 1)
                 return generateWGSLMathFunction(node, context)
@@ -90,44 +85,13 @@ const generateWGSLOperator = (node: Node, context: WGSLContext): string => {
 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 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
-        }
+        // @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'
 }
 

package/src/index.ts

@@ -1,27 +1,35 @@
 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 { 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'
+export * from './utils/helpers'
+export * from './utils/pipeline'
+export * from './utils/program'
 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 isServer = () => {
+        return typeof window === 'undefined'
+}
+
+export const isWebGPUSupported = () => {
+        if (isServer()) return false
+        return 'gpu' in navigator
+}
+
+let iTime = performance.now()
 
 export const createGL = (props?: Partial<GL>) => {
         const gl = event<Partial<GL>>({
@@ -31,19 +39,28 @@ export const createGL = (props?: Partial<GL>) => {
                 isGL: true,
                 size: [0, 0],
                 mouse: [0, 0],
-                count: 6,
-                counter: 0,
+                count: 3,
+                webgl: {},
+                webgpu: {},
         }) as EventState<GL>
 
-        gl('mount', () => {
+        gl.queue = createQueue()
+        gl.frame = createFrame()
+
+        gl.attribute = durable((k, v, i) => gl.queue(() => gl._attribute?.(k, v, i)))
+        gl.texture = durable((k, v) => gl.queue(() => gl._texture?.(k, v)))
+        gl.uniform = durable((k, v, i) => gl.queue(() => gl._uniform?.(k, v, i)))
+        gl.uniform({ iResolution: gl.size, iMouse: [0, 0], iTime: 0 }) // default uniform
+
+        gl('mount', async () => {
                 if (!isWebGPUSupported()) gl.isWebGL = true
                 if (gl.isWebGL) {
-                        webgl(gl)
-                } else webgpu(gl)
-                gl.init()
+                        await webgl(gl)
+                } else await webgpu(gl)
                 gl.resize()
                 gl.frame(() => {
                         gl.loop()
+                        gl.queue.flush()
                         gl.render()
                         return gl.isLoop
                 })
@@ -60,14 +77,6 @@ export const createGL = (props?: Partial<GL>) => {
                 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
@@ -84,19 +93,9 @@ export const createGL = (props?: Partial<GL>) => {
                 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))
+        gl('loop', () => {
+                iTime = performance.now() / 1000
+                gl.uniform('iTime', iTime)
         })
 
         return gl(props)

package/src/native.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState } from 'react' // @ts-ignore
 import { Dimensions } from 'react-native'
 import { createGL, isGL } from './index'
 import type { GL } from './types'
@@ -8,8 +8,13 @@ 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.el = {} as any
+                        gl({
+                                render() {
+                                        ctx.flush()
+                                        ctx.endFrameEXP()
+                                },
+                        })
                         gl.mount()
                         const resize = () => {
                                 gl.width = ctx.drawingBufferWidth
@@ -19,6 +24,6 @@ export const useGL = (props: Partial<GL> = {}) => {
                         resize()
                         Dimensions.addEventListener('change', resize)
                 }
-                return gl
+                return gl({ isNative: true })
         })[0]
 }

package/src/node/cache.ts

@@ -43,10 +43,7 @@ export const findDuplicateNodes = (nodes: X[]): Map<string, X[]> => {
         nodes.forEach((nodeProxy) => {
                 const signature = generateNodeSignature(nodeProxy)
                 if (signatures.has(signature)) {
-                        if (!duplicates.has(signature))
-                                duplicates.set(signature, [
-                                        signatures.get(signature)!,
-                                ])
+                        if (!duplicates.has(signature)) duplicates.set(signature, [signatures.get(signature)!])
                         duplicates.get(signature)!.push(nodeProxy)
                 } else signatures.set(signature, nodeProxy)
         })
@@ -55,13 +52,9 @@ export const findDuplicateNodes = (nodes: X[]): Map<string, X[]> => {
 
 // ノードのシグネチャを生成
 const generateNodeSignature = (nodeProxy: X): string => {
-        const parts = [
-                nodeProxy.type,
-                `${nodeProxy.value}`,
-                nodeProxy.property || '',
-        ]
+        const parts = [nodeProxy.type, `${nodeProxy.value}`, nodeProxy.property || '']
         return parts.join('|')
 }
 
 // 初期化を実行
-initializeCache()
+// initializeCache()

package/src/node/const.ts

@@ -25,26 +25,9 @@ export const TYPES = [
 export type NodeType = (typeof TYPES)[number]
 
 // スウィズル定数
-export const SWIZZLES = [
-        'x',
-        'y',
-        'z',
-        'w',
-        'r',
-        'g',
-        'b',
-        'a',
-        's',
-        't',
-        'p',
-        'q',
-] as const
+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}`
+type AllSwizzles<T extends string> = T | `${T}${T}` | `${T}${T}${T}` | `${T}${T}${T}${T}`
 
 export type Swillzes =
         | AllSwizzles<'x' | 'y' | 'z' | 'w'>

package/src/node/conv.ts

@@ -1,6 +1,6 @@
 import { node } from '.'
 import { getCachedBool, getCachedInt, getCachedFloat } from './cache'
-import { is } from '../utils'
+import { is } from '../utils/helpers'
 import type { X } from './types'
 
 // JavaScript値をノードに変換
@@ -63,8 +63,7 @@ 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])
+                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)])
@@ -74,8 +73,7 @@ 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])
+                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) {
@@ -88,8 +86,7 @@ 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])
+                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)])
@@ -102,20 +99,12 @@ export const color = (r?: any, g?: any, b?: any): X => {
         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,
-                ])
+                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 node('color', [((r >> 16) & 255) / 255, ((r >> 8) & 255) / 255, (r & 255) / 255])
         }
 
         return vec3(r, g, b)

package/src/node/index.ts

@@ -1,7 +1,7 @@
+import { float } from './conv'
 import { node } from './node'
 import { uniform } from './uniform'
-import { float } from './conv'
-import { is } from '../utils'
+import { is } from '../utils/helpers'
 import type { X, FunctionNode, ConditionalNode } from './types'
 export type { X, FunctionNode, ConditionalNode }
 export * from './cache'
@@ -30,10 +30,7 @@ export const If = (condition: X, callback: () => void): ConditionalNode => {
         callback()
 
         const conditionalNode = {
-                ElseIf(
-                        newCondition: X,
-                        newCallback: () => void
-                ): ConditionalNode {
+                ElseIf(newCondition: X, newCallback: () => void): ConditionalNode {
                         newCallback()
                         return conditionalNode
                 },
@@ -46,8 +43,8 @@ export const If = (condition: X, callback: () => void): ConditionalNode => {
 }
 
 // 組み込み変数
-export const gl_FragCoord = node('vec4', undefined)
-export const gl_Position = node('vec4', undefined)
+export const fragCoord = node('vec4', undefined)
+export const position = node('vec4', undefined)
 export const iTime = uniform(0.0)
 export const iResolution = uniform([1920, 1080])
 export const iMouse = uniform([0, 0])

package/src/node/node.ts

@@ -1,5 +1,6 @@
-import { OPERATORS, FUNCTIONS, SWIZZLES, NodeType } from './const'
-import { is } from '../utils'
+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
@@ -8,11 +9,7 @@ let nodeIdCounter = 0
 const generateNodeId = () => `node_${++nodeIdCounter}`
 
 // ノードを作成
-export const createNode = (
-        type: NodeType,
-        value?: any,
-        options?: Partial<Node>
-): Node => {
+export const createNode = (type: NodeType, value?: any, options?: Partial<Node>): Node => {
         return {
                 id: generateNodeId(),
                 type,
@@ -62,21 +59,10 @@ const createNodeProxy = (node: Node, callback?: (info: ProxyCallback) => X) => {
                 if (isMathMethod(key))
                         return (...args: any[]) => {
                                 return createNodeProxy(
-                                        createNode(
-                                                getMathReturnType(
-                                                        key,
-                                                        node.type
-                                                ),
-                                                undefined,
-                                                {
-                                                        mathFunction:
-                                                                key as any,
-                                                        children: [
-                                                                node,
-                                                                ...args,
-                                                        ],
-                                                }
-                                        ),
+                                        createNode(getMathReturnType(key, node.type), undefined, {
+                                                mathFunction: key as any,
+                                                children: [node, ...args],
+                                        }),
                                         callback
                                 )
                         }

package/src/node/uniform.ts

@@ -1,5 +1,5 @@
 import { node } from './node'
-import { is } from '../utils'
+import { is } from '../utils/helpers'
 import type { UniformNode } from './types'
 import type { NodeType } from './const'
 
@@ -24,8 +24,7 @@ const inferUniformType = (value: any): NodeType => {
                 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'
+        if (is.obj(value) && 'r' in value && 'g' in value && 'b' in value) return 'color'
         return 'float'
 }
 
@@ -33,10 +32,8 @@ const inferUniformType = (value: any): NodeType => {
 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
+        let objectUpdateCallback: ((context: UpdateContext) => any) | null = null
+        let renderUpdateCallback: ((context: UpdateContext) => any) | null = null
 
         const baseNode = node(type, currentValue) as any
 
@@ -46,16 +43,12 @@ export const uniform = (initialValue: any): UniformNode => {
                 baseNode.value = value
         }
         // オブジェクト更新時のコールバックを設定
-        const onObjectUpdate = (
-                callback: (context: UpdateContext) => any
-        ): UniformNode => {
+        const onObjectUpdate = (callback: (context: UpdateContext) => any): UniformNode => {
                 objectUpdateCallback = callback
                 return uniformNode
         }
         // レンダー更新時のコールバックを設定
-        const onRenderUpdate = (
-                callback: (context: UpdateContext) => any
-        ): UniformNode => {
+        const onRenderUpdate = (callback: (context: UpdateContext) => any): UniformNode => {
                 renderUpdateCallback = callback
                 return uniformNode
         }

package/src/react.ts

@@ -9,7 +9,6 @@ export const useGL = (props: Partial<GL> = {}) => {
                 gl.ref = (el: HTMLCanvasElement | null) => {
                         if (el) {
                                 gl.el = el
-                                gl.gl = el.getContext('webgl2')
                                 gl.mount()
                         } else gl.clean()
                 }

package/src/solid.ts

@@ -7,7 +7,6 @@ export const onGL = (props?: Partial<GL>) => {
         gl.ref = (el: HTMLCanvasElement | null) => {
                 if (el) {
                         gl.el = el
-                        gl.gl = el.getContext('webgl2')
                         gl.mount()
                 } else gl.clean()
         }

package/src/types.ts

@@ -1,15 +1,19 @@
-import { Nested, EventState } from 'reev'
-import { X } from './node'
+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 GPUBindGroup = 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'
@@ -19,7 +23,16 @@ export type GLDrawMode =
         | 'TRIANGLE_FAN'
         | 'TRIANGLES'
 
-export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'
+export interface WebGLState {
+        context: WebGLRenderingContext
+        program: WebGLProgram
+}
+
+export interface WebGPUState {
+        device: GPUDevice
+        context: GPUContext
+        pipeline: GPUPipeline
+}
 
 export type GL = EventState<{
         /**
@@ -34,6 +47,7 @@ export type GL = EventState<{
         size: [number, number]
         mouse: [number, number]
         count: number
+        el: HTMLCanvasElement
         vs: string | X
         fs: string | X
         vert: string | X
@@ -41,27 +55,13 @@ export type GL = EventState<{
         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
+        webgpu: WebGPUState
+        webgl: WebGLState
         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

package/src/{utils.ts → utils/helpers.ts}

@@ -13,15 +13,6 @@ export const is = {
         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
  */