glre 0.31.0 → 0.32.0

package/src/node/scope.ts

@@ -3,24 +3,22 @@ import { conversion, node } from './node'
 import { getId } from './utils'
 import type { FnLayout, NodeProps, NodeProxy, X } from './types'
 
-let _scope: NodeProxy | null = null
-
-const scoped = (x: NodeProxy | null, fun = () => {}) => {
-        const prev = _scope
-        _scope = x
-        fun()
-        _scope = prev
-}
+let scope: NodeProxy | null = null
+let define: NodeProxy | null = null
 
 const addToScope = (x: NodeProxy) => {
-        if (!_scope) return // ignore
-        if (!_scope.props.children) _scope.props.children = []
-        _scope.props.children.push(x)
+        if (!scope) return
+        if (!scope.props.children) scope.props.children = []
+        scope.props.children.push(x)
+        if (x.type !== 'return' || !define) return
+        const { props } = define
+        if (!props.inferFrom) props.inferFrom = []
+        props.inferFrom.push(x)
 }
 
 export const toVar = (x: X, id?: string) => {
         if (!id) id = getId()
-        const y = node('variable', { id, inferFrom: x })
+        const y = node('variable', { id, inferFrom: [x] })
         const z = node('declare', null, x, y)
         addToScope(z)
         return y
@@ -32,6 +30,27 @@ export const assign = (x: X, y: X) => {
         return x
 }
 
+export const Return = (x: X) => {
+        const y = node('return', { inferFrom: [x] }, x)
+        addToScope(y)
+        return y
+}
+
+const scoped = (x: NodeProxy, fun: () => NodeProxy | void, y = define) => {
+        // cache to revert
+        const _scope = scope
+        const _define = define
+        // update
+        scope = x
+        define = y
+        if (_scope) x.props.parent = _scope
+        const z = fun()
+        if (z) Return(z)
+        // revert
+        scope = _scope
+        define = _define
+}
+
 export const If = (x: X, fun: () => void) => {
         const y = node('scope')
         scoped(y, fun)
@@ -55,7 +74,7 @@ export const If = (x: X, fun: () => void) => {
 
 export const Loop = (x: X, fun: (params: { i: NodeProxy }) => void) => {
         const y = node('scope')
-        scoped(y, () => fun({ i: node('variable', { id: 'i', inferFrom: int(0) }) }))
+        scoped(y, () => fun({ i: node('variable', { id: 'i', inferFrom: [int(0)] }) }))
         const ret = node('loop', null, x, y)
         addToScope(ret)
         return ret
@@ -88,20 +107,20 @@ export const Fn = (fun: (paramVars: NodeProxy[]) => NodeProxy) => {
         const ret = (...args: X[]) => {
                 const id = layout?.name || getId()
                 const x = node('scope')
-                let y: NodeProxy | undefined
                 const paramVars: NodeProxy[] = []
                 const paramDefs: NodeProps[] = []
                 if (layout?.inputs)
                         for (const input of layout.inputs) {
-                                paramDefs.push({ id: input.name, inferFrom: conversion(input.type) })
+                                paramDefs.push({ id: input.name, inferFrom: [conversion(input.type)] })
                         }
                 else
                         for (let i = 0; i < args.length; i++) {
-                                paramDefs.push({ id: `p${i}`, inferFrom: args[i] })
+                                paramDefs.push({ id: `p${i}`, inferFrom: [args[i]] })
                         }
                 for (const props of paramDefs) paramVars.push(node('variable', props))
-                scoped(x, () => (y = fun(paramVars)))
-                return node('define', { id, layout }, x, y, ...args)
+                const y = node('define', { id, layout }, x, ...args)
+                scoped(x, () => fun(paramVars), y)
+                return y
         }
         ret.setLayout = (newLayout: FnLayout) => {
                 layout = newLayout

package/src/node/types.ts

@@ -1,3 +1,4 @@
+import { WebGPUState } from '../types'
 import { CONSTANTS, CONVERSIONS, FUNCTIONS, OPERATOR_KEYS } from './const'
 
 export type Constants = (typeof CONSTANTS)[number] | 'void'
@@ -17,23 +18,60 @@ export interface FnLayout {
         }>
 }
 
+/**
+ * Node
+ */
+export type NodeTypes =
+        // headers
+        | 'attribute'
+        | 'uniform'
+        | 'constant'
+        // variables
+        | 'variable'
+        | 'varying'
+        | 'swizzle'
+        | 'ternary'
+        | 'builtin'
+        | 'conversion'
+        | 'operator'
+        | 'function'
+        // scopes
+        | 'scope'
+        | 'assign'
+        | 'loop'
+        | 'define'
+        | 'if'
+        | 'switch'
+        | 'declare'
+        | 'return'
+
 export interface NodeProps {
         id?: string
         args?: X[]
         type?: string
         children?: X[]
-        inferFrom?: X
+        inferFrom?: X[]
         layout?: FnLayout
+        parent?: NodeProxy
 }
 
-export interface NodeConfig {
+export interface NodeContext {
+        isFrag?: boolean
         isWebGL?: boolean
         binding?: number
         infers?: WeakMap<NodeProxy, Constants>
-        headers?: Map<string, string>
         onMount?: (name: string) => void
+        webgpu?: WebGPUState
+        headers?: Map<string, string>
+        fragInputs?: Map<string, string>
+        vertInputs?: Map<string, string>
+        vertOutputs?: Map<string, string>
+        vertVaryings?: Map<string, string>
 }
 
+/**
+ * NodeProxy
+ */
 type _Swizzles<T extends string> = T | `${T}${T}` | `${T}${T}${T}` | `${T}${T}${T}${T}`
 
 export type Swizzles =
@@ -42,31 +80,33 @@ export type Swizzles =
         | _Swizzles<'p' | 'q'>
         | _Swizzles<'s' | 't'>
 
-export type NodeTypes =
-        // headers
-        | 'attribute'
-        | 'uniform'
-        | 'varying'
-        | 'constant'
-        // variables
-        | 'variable'
-        | 'swizzle'
-        | 'ternary'
-        | 'builtin'
-        | 'conversion'
-        | 'operator'
-        | 'function'
-        // scopes
-        | 'scope'
+type NodeProxyMethods =
+        | Functions
+        | Operators
+        | Conversions
+        | Swizzles
+        // system property
+        | 'type'
+        | 'props'
+        | 'isProxy'
         | 'assign'
-        | 'loop'
-        | 'define'
-        | 'if'
-        | 'switch'
-        | 'declare'
+        | 'toVar'
+        | 'toString'
 
-export interface NodeProxy extends Record<Swizzles, NodeProxy> {
-        // Operators
+export type DynamicProperties = {
+        [K in string as K extends NodeProxyMethods ? never : K]: NodeProxy
+}
+
+export interface BaseNodeProxy extends Record<Swizzles, NodeProxy> {
+        // System properties
+        assign(n: X): NodeProxy
+        toVar(name?: string): NodeProxy
+        toString(c?: NodeContext): string
+        type: NodeTypes
+        props: NodeProps
+        isProxy: true
+
+        // Operators methods
         add(n: X): NodeProxy
         sub(n: X): NodeProxy
         mul(n: X): NodeProxy
@@ -82,11 +122,29 @@ export interface NodeProxy extends Record<Swizzles, NodeProxy> {
         or(n: X): NodeProxy
         not(): NodeProxy
 
-        // Variable manipulation
-        assign(n: X): NodeProxy
-        toVar(name?: string): NodeProxy
+        // Conversations methods
+        toBool(): NodeProxy
+        toUint(): NodeProxy
+        toInt(): NodeProxy
+        toFloat(): NodeProxy
+        toBvec2(): NodeProxy
+        toIvec2(): NodeProxy
+        toUvec2(): NodeProxy
+        toVec2(): NodeProxy
+        toBvec3(): NodeProxy
+        toIvec3(): NodeProxy
+        toUvec3(): NodeProxy
+        toVec3(): NodeProxy
+        toBvec4(): NodeProxy
+        toIvec4(): NodeProxy
+        toUvec4(): NodeProxy
+        toVec4(): NodeProxy
+        toColor(): NodeProxy
+        toMat2(): NodeProxy
+        toMat3(): NodeProxy
+        toMat4(): NodeProxy
 
-        // Math function methods
+        // Function methods
         abs(): NodeProxy
         sin(): NodeProxy
         cos(): NodeProxy
@@ -131,32 +189,8 @@ export interface NodeProxy extends Record<Swizzles, NodeProxy> {
         dFdx(): NodeProxy
         dFdy(): NodeProxy
         fwidth(): NodeProxy
-
-        // System properties
-        toBool(): NodeProxy
-        toUint(): NodeProxy
-        toInt(): NodeProxy
-        toFloat(): NodeProxy
-        toBvec2(): NodeProxy
-        toIvec2(): NodeProxy
-        toUvec2(): NodeProxy
-        toVec2(): NodeProxy
-        toBvec3(): NodeProxy
-        toIvec3(): NodeProxy
-        toUvec3(): NodeProxy
-        toVec3(): NodeProxy
-        toBvec4(): NodeProxy
-        toIvec4(): NodeProxy
-        toUvec4(): NodeProxy
-        toVec4(): NodeProxy
-        toColor(): NodeProxy
-        toMat2(): NodeProxy
-        toMat3(): NodeProxy
-        toMat4(): NodeProxy
-        toString(c?: NodeConfig): string
-        type: NodeTypes
-        props: NodeProps
-        isProxy: true
 }
 
+export type NodeProxy = BaseNodeProxy & DynamicProperties
+
 export type X = NodeProxy | number | string | boolean | undefined

package/src/node/utils.ts

@@ -1,6 +1,5 @@
 import { is } from '../utils/helpers'
 import { code } from './code'
-import { infer } from './infer'
 import {
         CONSTANTS,
         CONVERSIONS,
@@ -10,17 +9,7 @@ import {
         TYPE_MAPPING,
         WGSL_TO_GLSL_BUILTIN,
 } from './const'
-import type {
-        Constants,
-        Conversions,
-        Functions,
-        NodeConfig,
-        NodeProps,
-        NodeProxy,
-        Operators,
-        Swizzles,
-        X,
-} from './types'
+import type { Constants, Conversions, Functions, NodeContext, NodeProxy, Operators, Swizzles, X } from './types'
 
 export const isSwizzle = (key: unknown): key is Swizzles => {
         return is.str(key) && /^[xyzwrgbastpq]{1,4}$/.test(key)
@@ -44,6 +33,12 @@ export const isNodeProxy = (x: unknown): x is NodeProxy => {
         return x.isProxy
 }
 
+export const isConstantsType = (type?: Constants | 'auto'): type is Constants => {
+        if (!type) return false
+        if (type === 'auto') return false
+        return true
+}
+
 export const hex2rgb = (hex: number) => {
         const r = ((hex >> 16) & 0xff) / 255
         const g = ((hex >> 8) & 0xff) / 255
@@ -55,14 +50,14 @@ let count = 0
 
 export const getId = () => `i${count++}`
 
-export const joins = (children: X[], c: NodeConfig) => {
+export const joins = (children: X[], c: NodeContext) => {
         return children
                 .filter((x) => !is.und(x) && !is.nul(x))
                 .map((x) => code(x, c))
                 .join(', ')
 }
 
-export const formatConversions = (x: X, c?: NodeConfig) => {
+export const formatConversions = (x: X, c?: NodeContext) => {
         if (!is.str(x)) return ''
         if (c?.isWebGL) return x
         return TYPE_MAPPING[x as keyof typeof TYPE_MAPPING]
@@ -80,81 +75,3 @@ export const conversionToConstant = (conversionKey: string): Constants => {
         const index = CONVERSIONS.indexOf(conversionKey as Conversions)
         return index !== -1 ? CONSTANTS[index] : 'float'
 }
-
-const generateHead = (c: NodeConfig) => {
-        return Array.from(c.headers!)
-                .map(([, v]) => v)
-                .join('\n')
-}
-
-export const generateDefine = (props: NodeProps, c: NodeConfig) => {
-        const { id, children = [], layout } = props
-        const [x, y, ...args] = children
-        const returnType = layout?.type && layout?.type !== 'auto' ? layout?.type : y ? infer(y, c) : 'void'
-        const argParams: [name: string, type: string][] = []
-        const params: string[] = []
-        if (layout?.inputs)
-                for (const input of layout.inputs) {
-                        argParams.push([input.name, input.type])
-                }
-        else
-                for (let i = 0; i < args.length; i++) {
-                        argParams.push([`p${i}`, infer(args[i], c)])
-                }
-        let ret = ''
-        if (c?.isWebGL) {
-                for (const [id, type] of argParams) params.push(`${type} ${id}`)
-                ret += `${returnType} ${id}(${params}) {\n`
-        } else {
-                for (const [id, type] of argParams) params.push(`${id}: ${formatConversions(type, c)}`)
-                ret += `fn ${id}(${params}) -> ${formatConversions(returnType, c)} {\n`
-        }
-        const scopeCode = code(x, c)
-        if (scopeCode) ret += scopeCode + '\n'
-        if (y) ret += `return ${code(y, c)};`
-        ret += '\n}'
-        return ret
-}
-
-const GLSL_FRAGMENT_HEAD = `
-#version 300 es
-precision mediump float;
-out vec4 fragColor;
-`.trim()
-
-const WGSL_FRAGMENT_HEAD = `
-@fragment
-fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
-`.trim()
-
-const generateFragmentMain = (body: string, head: string, isWebGL = true) => {
-        let ret = ''
-        if (isWebGL) ret += GLSL_FRAGMENT_HEAD
-        if (head) ret += '\n' + head + '\n'
-        if (isWebGL) ret += `void main() {\n  fragColor = ${body};`
-        else {
-                ret += WGSL_FRAGMENT_HEAD + '\n'
-                ret += `  return ${body};`
-        }
-        ret += '\n}'
-        return ret
-}
-
-const generateVertexMain = (_body: string, _head: string, isWebGL = true) => {
-        if (isWebGL) return ``
-        return ``
-}
-
-export const fragment = (x: X, c: NodeConfig = {}) => {
-        const body = code(x, c)
-        const head = generateHead(c)
-        const main = generateFragmentMain(body, head, c.isWebGL)
-        console.log(`// ↓↓↓ generated ↓↓↓\n\n${main}\n\n`)
-        return main
-}
-
-export const vertex = (x: X, c: NodeConfig) => {
-        const body = code(x, c)
-        const head = generateHead(c)
-        return generateVertexMain(body, head, c.isWebGL)
-}

package/src/types.ts

@@ -1,16 +1,7 @@
-import { EventState } from 'reev'
+import type { EventState, Nested } from 'reev'
 import type { Fun, Queue, Frame } from 'refr'
 import type { NodeProxy } 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'
@@ -23,6 +14,27 @@ export type GLDrawMode =
         | 'TRIANGLE_FAN'
         | 'TRIANGLES'
 
+export interface UniformData {
+        array: Float32Array
+        buffer: GPUBuffer
+        binding: number
+        group: number
+}
+
+export interface TextureData {
+        binding: number
+        group: number
+        texture: GPUTexture
+        sampler: GPUSampler
+}
+
+export interface AttribData {
+        array: Float32Array
+        buffer: GPUBuffer
+        location: number
+        stride: number
+}
+
 export interface WebGLState {
         context: WebGLRenderingContext
         program: WebGLProgram
@@ -30,14 +42,16 @@ export interface WebGLState {
 
 export interface WebGPUState {
         device: GPUDevice
-        context: GPUContext
-        pipeline: GPUPipeline
-        groups: any[]
-        resources: any[]
-        loadingImg: number
-        needsUpdate: boolean
+        uniforms: Nested<UniformData>
+        textures: Nested<TextureData>
+        attribs: Nested<AttribData>
 }
 
+export type Uniform = number | number[]
+export type Attribute = number[]
+export type Attributes = Record<string, Attribute>
+export type Uniforms = Record<string, Uniform>
+
 export type GL = EventState<{
         /**
          * initial value
@@ -84,6 +98,7 @@ export type GL = EventState<{
          */
         _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL
         uniform(key: string, value: Uniform, isMatrix?: boolean): GL
+        uniform(node: NodeProxy): GL
         uniform(target: { [key: string]: Uniform }): GL
         _texture?(key: string, value: string): GL
         texture(key: string, value: string): GL