glre 0.25.0 → 0.27.0

package/src/node/types.ts

@@ -1,101 +1,66 @@
-import type { NodeType, Operator, MathFunction, Swillzes } from './const'
+import { FUNCTIONS, NODE_TYPES, OPERATOR_KEYS } from './const'
 
-// ノードの基本インターフェース
-export interface Node {
-        id: string
-        type: NodeType
-        value?: any
-        property?: string
-        parent?: Node
-        children?: Node[]
-        operator?: Operator
-        mathFunction?: MathFunction
-}
+export type NodeType = (typeof NODE_TYPES)[number]
 
-// Proxyハンドラーのコールバック型
-export interface ProxyCallback {
-        path: string[]
-        args: any[]
-}
+export type Functions = (typeof FUNCTIONS)[number]
 
-// ノード作成関数の型
-export type NodeCreator = (value?: any) => X
+export type Operators = (typeof OPERATOR_KEYS)[number]
 
-// 演算子メソッドの型
-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 NodeProps {
+        id?: string
+        children?: X[]
+        defaultValue?: number | number[]
 }
 
-// 数学関数メソッドの型
-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
+export interface NodeConfig {
+        isWebGL?: boolean
+        uniforms?: Set<string>
+        onUniform?: (name: string, value: any) => void
 }
 
-// 全てのswizzleパターンをまとめる型
+type _Swizzles<T extends string> = T | `${T}${T}` | `${T}${T}${T}` | `${T}${T}${T}${T}`
 
-// スウィズルプロパティの型
-export type SwizzleProperties = {
-        [k in Swillzes]: X
-}
+export type Swizzles =
+        | _Swizzles<'x' | 'y' | 'z' | 'w'>
+        | _Swizzles<'r' | 'g' | 'b' | 'a'>
+        | _Swizzles<'p' | 'q'>
+        | _Swizzles<'s' | 't'>
 
-// ノードProxy型
-export interface X extends MathMethods, OperatorMethods, SwizzleProperties {
-        readonly id: string
-        readonly type: NodeType
-        readonly value: any
-        readonly property: string
-        (...args: any[]): X
-}
+export type NodeTypes =
+        | 'uniform'
+        | 'variable'
+        | 'swizzle'
+        | 'operator'
+        | 'node_type'
+        | 'math_fun'
+        | 'declare'
+        | 'assign'
+        | 'fn'
+        | 'if'
+        | 'loop'
+        | 'scope'
 
-// ユニフォーム変数の型
-export interface UniformNode extends X {
-        set(value: any): void
-        onObjectUpdate(callback: (context: any) => any): UniformNode
-        onRenderUpdate(callback: (context: any) => any): UniformNode
+export interface NodeProxy extends Record<Swizzles, NodeProxy> {
+        add(n: X): NodeProxy
+        sub(n: X): NodeProxy
+        mul(n: X): NodeProxy
+        div(n: X): NodeProxy
+        mod(n: X): NodeProxy
+        equal(n: X): NodeProxy
+        notEqual(n: X): NodeProxy
+        lessThan(n: X): NodeProxy
+        lessThanEqual(n: X): NodeProxy
+        greaterThan(n: X): NodeProxy
+        greaterThanEqual(n: X): NodeProxy
+        and(n: X): NodeProxy
+        or(n: X): NodeProxy
+        not(): NodeProxy
+        assign(n: X): NodeProxy
+        toVar(name?: string): NodeProxy
+        toString(c?: NodeConfig): string
+        type: NodeTypes
+        props: NodeProps
+        isProxy: true
 }
 
-// 関数定義の型
-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>
-}
+export type X = NodeProxy | number | string | null | undefined

package/src/node/utils.ts

@@ -0,0 +1,102 @@
+import { is } from '../utils/helpers'
+import { code } from './code'
+import { FUNCTIONS, NODE_TYPES, OPERATOR_KEYS } from './const'
+import type { Functions, NodeConfig, NodeType, Operators, Swizzles, X } from './types'
+
+export const isSwizzle = (key: unknown): key is Swizzles => {
+        return is.str(key) && /^[xyzwrgbastpq]{1,4}$/.test(key)
+}
+
+export const isOperator = (key: unknown): key is Operators => {
+        return OPERATOR_KEYS.includes(key as Operators)
+}
+
+export const isNodeType = (key: unknown): key is NodeType => {
+        return NODE_TYPES.includes(key as NodeType)
+}
+
+export const isFunction = (key: unknown): key is Functions => {
+        return FUNCTIONS.includes(key as Functions)
+}
+
+let count = 0
+
+export const getId = () => `i${count++}`
+
+export const joins = (children: X[], c: NodeConfig) => {
+        return children
+                .filter((x) => !is.und(x) && !is.nul(x))
+                .map((x) => code(x, c))
+                .join(', ')
+}
+
+export const inferType = (target: X, c: NodeConfig): string => {
+        if (!target || typeof target !== 'object') return 'float'
+        const { type, props } = target
+        const { children = [] } = props
+        const [x, y, z] = children
+        if (type === 'node_type') return x as string
+        if (type === 'operator') {
+                const left = inferType(y, c)
+                const right = inferType(z, c)
+                if (left === right) return left
+                if (left.includes('vec')) return left
+                if (right.includes('vec')) return right
+                return 'float'
+        }
+        if (type === 'math_fun') {
+                if (['normalize', 'cross', 'reflect'].includes(x as string)) return inferType(children[1], c)
+                if (['dot', 'distance', 'length'].includes(x as string)) return 'float'
+                return 'float'
+        }
+        return 'float'
+}
+
+const generateUniforms = (c: NodeConfig): string => {
+        if (!c.uniforms || c.uniforms.size === 0) return ''
+        const uniformList = Array.from(c.uniforms)
+        return (
+                uniformList
+                        .map((name, i) => {
+                                if (c.isWebGL) return `uniform vec2 ${name};`
+                                else return `@group(0) @binding(${i}) var<uniform> ${name}: vec2f;`
+                        })
+                        .join('\n') + '\n'
+        )
+}
+
+const generateFragmentMain = (body: string, uniforms: string, isWebGL = true) => {
+        if (isWebGL)
+                return `
+${uniforms}
+#version 300 es
+precision mediump float;
+uniform vec2 iResolution;
+uniform vec2 iMouse;
+uniform float iTime;
+out vec4 fragColor;
+void main() {
+${body}
+}`.trim()
+        return `
+@group(0) @binding(0) var<uniform> iResolution: vec2f;
+@group(0) @binding(1) var<uniform> iMouse: vec2f;
+@group(0) @binding(2) var<uniform> iTime: f32;
+${uniforms}
+@fragment
+fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
+${body}
+}`.trim()
+}
+
+export const fragment = (x: X, c: NodeConfig) => {
+        const body = code(x, c)
+        const uniforms = generateUniforms(c)
+        return generateFragmentMain(body, uniforms, c.isWebGL)
+}
+
+export const vertex = (x: X, c: NodeConfig) => {
+        const body = code(x, c)
+        const uniforms = generateUniforms(c)
+        return generateFragmentMain(body, uniforms, c.isWebGL)
+}

package/src/types.ts

@@ -29,12 +29,10 @@ export interface WebGLState {
 }
 
 export interface WebGPUState {
-        uniforms: any
-        textures: any
         device: GPUDevice
         context: GPUContext
-        groups: any[]
         pipeline: GPUPipeline
+        groups: any[]
         resources: any[]
         loadingImg: number
         needsUpdate: boolean

package/src/utils/pipeline.ts

@@ -1,5 +1,4 @@
-import { wgsl } from '../code/wgsl'
-import { X } from '../node'
+import { fragment, vertex, X } from '../node'
 import { is } from './helpers'
 import type { GPUContext, GPUDevice, GPUPipeline } from '../types'
 
@@ -21,7 +20,7 @@ fn main(@builtin(position) position: vec4f) -> @location(0) vec4f {
 }
 `
 
-export const createDevive = async (c: GPUContext) => {
+export const createDevice = async (c: GPUContext) => {
         const gpu = (navigator as any).gpu
         const format = gpu.getPreferredCanvasFormat()
         const adapter = await gpu.requestAdapter()
@@ -33,19 +32,19 @@ export const createDevive = async (c: GPUContext) => {
 export const createPipeline = (
         device: GPUDevice,
         format: string,
-        buffers: any[],
-        layouts: any[],
+        bufferLayouts: any[],
+        bindGroupLayouts: any[],
         vs: string | X = defaultVertexWGSL,
         fs: string | X = defaultFragmentWGSL
 ) => {
-        if (is.obj(fs)) fs = wgsl(fs)
-        if (is.obj(vs)) vs = wgsl(vs)
-        const layout = device.createPipelineLayout({ bindGroupLayouts: layouts })
+        if (!is.str(fs)) fs = fragment(fs, { isWebGL: false })
+        if (!is.str(vs)) vs = vertex(vs, { isWebGL: false })
+        const layout = device.createPipelineLayout({ bindGroupLayouts })
         return device.createRenderPipeline({
                 vertex: {
                         module: device.createShaderModule({ code: vs.trim() }),
                         entryPoint: 'main',
-                        buffers,
+                        buffers: bufferLayouts,
                 },
                 fragment: {
                         module: device.createShaderModule({ code: fs.trim() }),
@@ -73,7 +72,7 @@ export const createBindGroup = (device: GPUDevice, resources: any[]) => {
         })
         const layout = device.createBindGroupLayout({ entries: entries0 })
         const bindGroup = device.createBindGroup({ layout, entries: entries1 })
-        return [layout, bindGroup]
+        return { layout, bindGroup }
 }
 
 export const createDescriptor = (c: GPUContext) => {
@@ -91,6 +90,12 @@ export const createDescriptor = (c: GPUContext) => {
 
 export const alignTo256 = (size: number) => Math.ceil(size / 256) * 256
 
+export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
+        const array = new Float32Array(value)
+        const buffer = device.createBuffer({ size: array.byteLength, usage: 40 }) // 40 === // GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+        return { array, buffer }
+}
+
 export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
         const array = new Float32Array(value)
         const size = alignTo256(array.byteLength)
@@ -101,12 +106,30 @@ export const createUniformBuffer = (device: GPUDevice, value: number[]) => {
 export const createTextureSampler = (device: GPUDevice, width = 1280, height = 800) => {
         const texture = device.createTexture({ size: [width, height], format: 'rgba8unorm', usage: 22 })
         const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' })
-        return [texture, sampler] as const
+        return { texture, sampler }
+}
+
+const getVertexStride = (dataLength: number, vertexCount: number) => {
+        return dataLength / vertexCount
+}
+
+const getVertexFormat = (stride: number) => {
+        if (stride === 2) return 'float32x2'
+        if (stride === 3) return 'float32x3'
+        if (stride === 4) return 'float32x4'
+        return 'float32'
 }
 
-// export const createVertexBuffer = (device: GPUDevice, value: number[]) => {
-//         const array = new Float32Array(value)
-//         const buffer = device.createBuffer({ size: array.byteLength, usage: 0x20 | 0x4 })
-//         device.queue.writeBuffer(buffer, 0, array)
-//         return buffer as Buffer
-// }
+export const createBufferLayout = (shaderLocation: number, dataLength: number, count = 6) => {
+        const stride = getVertexStride(dataLength, count)
+        return {
+                arrayStride: stride * 4,
+                attributes: [
+                        {
+                                shaderLocation,
+                                offset: 0,
+                                format: getVertexFormat(stride),
+                        },
+                ],
+        }
+}

package/src/utils/program.ts

@@ -1,5 +1,4 @@
-import { glsl } from '../code/glsl'
-import { X } from '../node'
+import { fragment, vertex, X } from '../node'
 import { is } from './helpers'
 
 export const defaultVertexGLSL = /* cpp */ `
@@ -29,7 +28,7 @@ const createShader = (c: WebGLRenderingContext, source: string, type: number) =>
         if (c.getShaderParameter(shader, c.COMPILE_STATUS)) return shader
         const error = c.getShaderInfoLog(shader)
         c.deleteShader(shader)
-        throw new Error(`Could not compile shader: ${error}`)
+        console.warn(`Could not compile shader: ${error}`)
 }
 
 export const createProgram = (
@@ -37,16 +36,19 @@ export const createProgram = (
         vs: string | X = defaultVertexGLSL,
         fs: string | X = defaultFragmentGLSL
 ) => {
-        if (is.obj(fs)) fs = glsl(fs as X)
-        if (is.obj(vs)) vs = glsl(vs as X)
+        if (!is.str(fs)) fs = fragment(fs, { isWebGL: true })
+        if (!is.str(vs)) vs = vertex(fs, { isWebGL: true })
         const pg = c.createProgram()
-        c.attachShader(pg, createShader(c, vs, c.VERTEX_SHADER))
-        c.attachShader(pg, createShader(c, fs, c.FRAGMENT_SHADER))
+        const _vs = createShader(c, vs, c.VERTEX_SHADER)
+        const _fs = createShader(c, fs, c.FRAGMENT_SHADER)
+        if (!_vs || !_fs) return
+        c.attachShader(pg, _vs)
+        c.attachShader(pg, _fs)
         c.linkProgram(pg)
         if (c.getProgramParameter(pg, c.LINK_STATUS)) return pg
         const error = c.getProgramInfoLog(pg)
         c.deleteProgram(pg)
-        throw new Error(`Could not link pg: ${error}`)
+        console.warn(`Could not link pg: ${error}`)
 }
 
 export const createVbo = (c: WebGLRenderingContext, data: number[]) => {

package/src/webgl.ts

@@ -5,15 +5,14 @@ import type { GL, WebGLState } from './types'
 
 export const webgl = async (gl: Partial<GL>) => {
         const c = gl.el!.getContext('webgl2')!
-        const pg = createProgram(c, gl.vs, gl.fs)
+        const pg = createProgram(c, gl.vs, gl.fs)!
         const state = { context: c, program: pg } as WebGLState
         c.useProgram(pg)
 
         let _activeUnit = 0
-        const activeUnits = cached(() => _activeUnit++)
-
-        const uniformLocations = cached((key) => c.getUniformLocation(pg, key))
-        const attribLocations = cached((key) => c.getAttribLocation(pg, key))
+        const uniforms = cached((key) => c.getUniformLocation(pg, key))
+        const attribs = cached((key) => c.getAttribLocation(pg, key))
+        const units = cached(() => _activeUnit++)
 
         const clean = () => c.deleteProgram(pg)
 
@@ -24,7 +23,7 @@ export const webgl = async (gl: Partial<GL>) => {
         }
 
         const _attribute = (key = '', value: number[], iboValue: number[]) => {
-                const loc = attribLocations(key, true)
+                const loc = attribs(key, true)
                 const vbo = createVbo(c, value)
                 const ibo = createIbo(c, iboValue)
                 const str = getStride(gl.count!, value, iboValue)
@@ -32,7 +31,7 @@ export const webgl = async (gl: Partial<GL>) => {
         }
 
         const _uniform = (key: string, value: number | number[]) => {
-                const loc = uniformLocations(key)
+                const loc = uniforms(key)
                 if (is.num(value)) return c.uniform1f(loc, value)
                 let l = value.length
                 if (l <= 4) return c[`uniform${l as 2}fv`](loc, value)
@@ -40,12 +39,12 @@ export const webgl = async (gl: Partial<GL>) => {
                 c[`uniformMatrix${l as 2}fv`](loc, false, value)
         }
 
-        const _texture = (alt: string, src: string) => {
+        const _texture = (key: string, src: string) => {
                 const image = new Image()
-                Object.assign(image, { src, alt, crossOrigin: 'anonymous' })
+                Object.assign(image, { src, crossOrigin: 'anonymous' })
                 image.decode().then(() => {
-                        const loc = uniformLocations(image.alt)
-                        const unit = activeUnits(image.alt)
+                        const loc = uniforms(key)
+                        const unit = units(key)
                         createTexture(c, image, loc, unit)
                 })
         }

package/src/webgpu.ts

@@ -1,52 +1,64 @@
+import { nested as cached } from 'reev'
 import { is } from './utils/helpers'
 import {
-        createDevive,
+        createDevice,
         createPipeline,
         createDescriptor,
         createUniformBuffer,
         createBindGroup,
         createTextureSampler,
+        createVertexBuffer,
+        createBufferLayout,
 } from './utils/pipeline'
 import type { GL, WebGPUState } from './types'
 
 export const webgpu = async (gl: Partial<GL>) => {
         const c = gl.el!.getContext('webgpu') as any
-        const { device, format } = await createDevive(c)
+        const { device, format } = await createDevice(c)
         const state = {
                 device,
                 context: c,
-                uniforms: {},
-                textures: {},
                 resources: [[], []],
                 loadingImg: 0,
                 needsUpdate: true,
         } as WebGPUState
 
-        const initUniform = (value: number[]) => {
+        const bindGroups = [] as any[]
+        const vertexBuffers = [] as any[]
+        const bufferLayouts = [] as any[]
+
+        const attributes = cached((_, value: number[]) => {
+                const { array, buffer } = createVertexBuffer(device, value)
+                vertexBuffers.push(buffer)
+                bufferLayouts.push(createBufferLayout(bufferLayouts.length, array.length, gl.count))
+                state.needsUpdate = true
+                return { array, buffer }
+        })
+
+        const uniforms = cached((_, value: number[]) => {
                 const { array, buffer } = createUniformBuffer(device, value)
                 state.resources[0].push({ buffer })
                 state.needsUpdate = true
                 return { array, buffer }
-        }
+        })
 
-        const initTexutre = (source: HTMLImageElement) => {
-                const { width, height } = source
-                const [texture, sampler] = createTextureSampler(device, width, height)
+        const textures = cached((_, { width, height }: HTMLImageElement) => {
+                const { texture, sampler } = createTextureSampler(device, width, height)
                 state.resources[1].push(sampler, texture.createView())
                 state.needsUpdate = true
                 return { texture, width, height }
-        }
+        })
 
         const update = () => {
-                const layouts = [] as any
-                state.groups = []
+                const bindGroupLayouts = [] as any
+                bindGroups.length = 0
                 state.resources.forEach((resource) => {
                         if (!resource.length) return
-                        const [layout, group] = createBindGroup(device, resource)
-                        layouts.push(layout)
-                        state.groups.push(group)
+                        const { layout, bindGroup } = createBindGroup(device, resource)
+                        bindGroupLayouts.push(layout)
+                        bindGroups.push(bindGroup)
                 })
-                state.pipeline = createPipeline(device, format, [], layouts, gl.vs, gl.fs)
+                state.pipeline = createPipeline(device, format, bufferLayouts, bindGroupLayouts, gl.vs, gl.fs)
         }
 
         const render = () => {
@@ -56,7 +68,8 @@ export const webgpu = async (gl: Partial<GL>) => {
                 const encoder = device.createCommandEncoder()
                 const pass = encoder.beginRenderPass(createDescriptor(c))
                 pass.setPipeline(state.pipeline)
-                state.groups.forEach((v, i) => pass.setBindGroup(i, v))
+                bindGroups.forEach((v, i) => pass.setBindGroup(i, v))
+                vertexBuffers.forEach((v, i) => pass.setVertexBuffer(i, v))
                 pass.draw(gl.count, 1, 0, 0)
                 pass.end()
                 device.queue.submit([encoder.finish()])
@@ -65,14 +78,13 @@ export const webgpu = async (gl: Partial<GL>) => {
         const clean = () => {}
 
         const _attribute = (key = '', value: number[]) => {
-                // @TODO FIX
-                // vertexBuffers(key, value)
+                const { array, buffer } = attributes(key, value)
+                device.queue.writeBuffer(buffer, 0, array)
         }
 
         const _uniform = (key: string, value: number | number[]) => {
                 if (is.num(value)) value = [value]
-                if (!state.uniforms[key]) state.uniforms[key] = initUniform(value)
-                const { array, buffer } = state.uniforms[key]
+                const { array, buffer } = uniforms(key, value)
                 array.set(value)
                 device.queue.writeBuffer(buffer, 0, array)
         }
@@ -81,8 +93,7 @@ export const webgpu = async (gl: Partial<GL>) => {
                 state.loadingImg++
                 const source = Object.assign(new Image(), { src, crossOrigin: 'anonymous' })
                 source.decode().then(() => {
-                        if (!state.textures[key]) state.textures[key] = initTexutre(source)
-                        const { texture, width, height } = state.textures[key]
+                        const { texture, width, height } = textures(key, source)
                         device.queue.copyExternalImageToTexture({ source }, { texture }, { width, height })
                         state.loadingImg--
                 })