glre 0.21.0 → 0.23.0

package/README.md

@@ -11,7 +11,7 @@
 [![ docs available ](https://img.shields.io/badge/docs-available-000.svg?style=flat&colorA=000)](https://glre.tsei.jp/>)
 [![ bundle size ](https://img.shields.io/bundlephobia/minzip/glre?style=flat&colorA=000&colorB=000)](https://bundlephobia.com/package/glre@latest)
 
-glre is a simple glsl Reactive Engine on the web and native via TypeScript, React, Solid and more.
+glre is a simple glsl and wgsl Reactive Engine on the web and native via TypeScript, React, Solid and more.
 
 </p>
 <p align="center" valign="top">
@@ -95,44 +95,30 @@ npm install glre
 </td>
 </table>
 
-## PRs
-
-###### welcome✨
-
 ## What does it look like?
 
 <table>
-  <tr>
-    <td width="7500px" align="center" valign="center">
-      glre simplifies glsl programming via TypeScript, React, Solid and more (<a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">live demo</a>).
-    </td>
-    <td width="2500px" valign="top">
-      <a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">
-        <img alt="4" src="https://i.imgur.com/Lb3h9fs.jpg"></img>
-      </a>
-    </td>
-  </tr>
+  <tbody>
+    <tr>
+      <td width="7500px" align="center" valign="center">
+        glre simplifies WebGl2 / WebGPU programming via TypeScript, React, Solid and more (<a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">live demo</a>).
+      </td>
+      <td width="2500px" valign="top">
+        <a href="https://codesandbox.io/s/glre-basic-demo-ppzo3d">
+          <img alt="4" src="https://i.imgur.com/Lb3h9fs.jpg"></img>
+        </a>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 ```ts
 import { createRoot } from 'react-dom/client'
-import { useGL, useFrame } from 'glre/react'
-
-const fragment = `
-precision highp float;
-uniform vec2 iResolution;
-void main() {
-  gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-}
-`
+import { useGL, vec4, fract, gl_FragCoord, iResolution } from 'glre/react'
+const fragment = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1)
 
 const App = () => {
         const gl = useGL({ fragment })
-        useFrame(() => {
-                gl.clear()
-                gl.viewport()
-                gl.drawArrays()
-        })
         return <canvas ref={gl.ref} />
 }
 
@@ -148,27 +134,13 @@ react-native supported ([codesandbox demo](https://codesandbox.io/p/sandbox/glre
 
 ```ts
 import { GLView } from 'expo-gl'
-import { useGL, useFrame } from 'glre/native'
 import { registerRootComponent } from 'expo'
-
-const fragment = `
-precision highp float;
-uniform vec2 iResolution;
-void main() {
-  gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-}
-`
+import { useGL, vec4, fract, fragCoord, iResolution } from 'glre/native'
+const fragment = vec4(fract(fragCoord.xy / iResolution), 0, 1)
 
 const App = () => {
-        const self = useGL({ fragment })
-        useFrame(() => {
-                self.clear()
-                self.viewport()
-                self.drawArrays()
-                self.gl.flush()
-                self.gl.endFrameEXP()
-        })
-        return <GLView style={{ flex: 1 }} onContextCreate={self.ref} />
+        const { gl, ref } = useGL({ fragment })
+        return <GLView style={{ flex: 1 }} onContextCreate={ref} />
 }
 
 registerRootComponent(App)
@@ -184,23 +156,11 @@ solid js supported ([codesandbox demo](https://codesandbox.io/p/sandbox/glre-sol
 
 ```ts
 import { render } from 'solid-js/web'
-import { onGL, onFrame } from 'glre/solid'
-
-const fragment = `
-precision highp float;
-uniform vec2 iResolution;
-void main() {
-  gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-}
-`
+import { onGL, vec4, fract, fragCoord, iResolution } from 'glre/solid'
+const fragment = vec4(fract(fragCoord.xy / iResolution), 0, 1)
 
 const App = () => {
         const gl = onGL({ fragment })
-        onFrame(() => {
-                gl.clear()
-                gl.viewport()
-                gl.drawArrays()
-        })
         return <canvas ref={gl.ref} />
 }
 
@@ -211,40 +171,143 @@ render(() => <App />, document.getElementById('root'))
 <details>
 <summary>
 
-pure js supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo3-3bhr3y))
+esm supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo3-3bhr3y))
 
 </summary>
 
 ```html
-<canvas id="id" style="top: 0; left: 0; position: fixed" />
 <script type="module">
-        import self from 'https://cdn.skypack.dev/glre@latest'
-        const fragment = `
-          precision highp float;
-          uniform vec2 iResolution;
-          void main() {
-            gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-          }
-        `
-        function setup() {
-                const el = document.getElementById('id')
+        import createGL from 'https://esm.sh/glre'
+        import { vec4, fract, fragCoord, iResolution } from 'https://esm.sh/glre'
+        const fragment = vec4(fract(fragCoord.xy / iResolution), 0, 1)
+        function App() {
+                const el = document.createElement('canvas')
                 const gl = el.getContext('webgl2')
-                self({ el, gl, fragment })
-                self.init()
-                self.resize()
-                draw()
+                createGL({ el, gl, fragment }).mount()
+                document.body.append(el)
         }
-        function draw() {
-                requestAnimationFrame(draw)
-                self.render()
-                self.clear()
-                self.viewport()
-                self.drawArrays()
-        }
-        document.addEventListener('DOMContentLoaded', setup)
+        document.addEventListener('DOMContentLoaded', App)
 </script>
 ```
 
 </details>
 </samp>
 </strong>
+
+## Node System
+
+glre now features a powerful node-based shader system inspired by Three.js Shading Language (TSL). This system allows you to write shaders using TypeScript-like syntax and automatically handles the conversion to both WebGL2 and WebGPU shaders.
+
+The node system provides a declarative approach to shader creation, making your code more readable, maintainable, and portable across different rendering backends.
+
+### Node Types and Functions
+
+The node system provides various types and functions that mirror GLSL functionality:
+
+```ts
+// Basic types
+import { float, int, vec2, vec3, vec4, mat3, mat4 } from 'glre'
+
+// Built-in variables
+import { gl_FragCoord, gl_Position, iResolution, iTime } from 'glre'
+
+// Math functions
+import { sin, cos, abs, pow, mix, clamp, normalize } from 'glre'
+
+// Texture functions
+import { texture, textureCube, sampler2D } from 'glre'
+```
+
+### Creating Custom Functions
+
+You can define reusable shader functions using the `Fn` constructor:
+
+```ts
+import { Fn, vec3, sin, cos, float } from 'glre'
+
+// Define a function that creates a rotation matrix
+const rotateY = Fn(([angle = float(0)]) => {
+        const s = sin(angle)
+        const c = cos(angle)
+        return mat3(c, 0, s, 0, 1, 0, -s, 0, c)
+})
+
+// Use the function in your shader
+const rotatedPosition = rotateY(iTime).mul(position)
+```
+
+### Conditional Logic
+
+The node system supports conditional operations:
+
+```ts
+import { If, vec4, lessThan } from 'glre'
+
+// Create a conditional color output
+const color = vec4(1, 0, 0, 1).toVar()
+
+If(position.y.lessThan(0.5), () => {
+        color.assign(vec4(0, 1, 0, 1))
+})
+
+// Use the color in your shader
+const fragment = color
+```
+
+### Uniforms
+
+The node system provides a powerful way to define and manage uniform values in your shaders:
+
+```ts
+import { createRoot } from 'react-dom/client'
+import { useGL } from 'glre/react'
+import { uniform, vec3, vec4 } from 'glre'
+
+const uRand = uniform(1.0)
+
+// Create a simple pulsing color shader
+const App = () => {
+        const gl = useGL({
+                fragment: vec4(vec3(uRand), 1.0),
+                loop() {
+                        pulse.set(0.5 + 0.5 * Math.random())
+                },
+        })
+        return <canvas ref={gl.ref} />
+}
+
+createRoot(document.getElementById('root')).render(<App />)
+```
+
+### Attributes
+
+Attributes allow you to define per-vertex data for your shaders:
+
+```ts
+import { createRoot } from 'react-dom/client'
+import { useGL } from 'glre/react'
+import { attribute, vec3, vec4 } from 'glre'
+
+// Define vertex positions
+const positions = attribute(-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, -1.0, 1.0, 0.0, 1.0, 1.0, 0.0)
+
+// Create a shader that uses attributes
+const App = () => {
+        const gl = useGL({ vertex: positions })
+        return <canvas ref={gl.ref} />
+}
+
+createRoot(document.getElementById('root')).render(<App />)
+```
+
+### WebGL2 and WebGPU Support
+
+The node system is designed to work with both WebGL2 and WebGPU, providing a seamless transition path as browsers adopt the new standard. Your shader code written with the node system will automatically compile to the appropriate shading language (GLSL ES 3.0 for WebGL2, WGSL for WebGPU) based on the available renderer.
+
+## PRs
+
+###### welcome✨
+
+## LICENSE
+
+###### MIT⚾️

package/dist/index.d.ts

@@ -1,9 +1,366 @@
-import { G as GL } from './types-f429c8b1.js';
-export { Fun } from 'refr';
-import 'reev';
+import * as refr from 'refr';
+import { Queue, Frame } from 'refr';
+export { Frame, Fun, Queue } from 'refr';
+import { EventState } from 'reev';
 
-declare const createGL: (props?: Partial<GL>) => GL;
-declare const gl: GL;
-declare const createTF: (props?: Partial<GL>, self?: GL) => GL;
+declare const TYPES: readonly ["float", "int", "uint", "bool", "color", "vec2", "vec3", "vec4", "mat2", "mat3", "mat4", "ivec2", "ivec3", "ivec4", "uvec2", "uvec3", "uvec4", "bvec2", "bvec3", "bvec4"];
+type NodeType = (typeof TYPES)[number];
+declare const SWIZZLES: readonly ["x", "y", "z", "w", "r", "g", "b", "a", "s", "t", "p", "q"];
+type AllSwizzles<T extends string> = T | `${T}${T}` | `${T}${T}${T}` | `${T}${T}${T}${T}`;
+type Swillzes = AllSwizzles<'x' | 'y' | 'z' | 'w'> | AllSwizzles<'r' | 'g' | 'b' | 'a'> | AllSwizzles<'p' | 'q'> | AllSwizzles<'s' | 't'>;
+declare const OPERATORS: readonly ["add", "sub", "mul", "div", "mod", "equal", "notEqual", "lessThan", "lessThanEqual", "greaterThan", "greaterThanEqual", "and", "or", "not", "assign", "xor", "bitAnd", "bitNot", "bitOr", "bitXor", "shiftLeft", "shiftRight"];
+type Operator = (typeof OPERATORS)[number];
+declare const FUNCTIONS: readonly ["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"];
+type MathFunction = (typeof FUNCTIONS)[number];
+declare const CACHE_BOOLS: readonly [true, false];
+declare const CACHE_INTS: readonly [0, 1, 2, 3, 4, 5];
+declare const CACHE_FLOATS: readonly [0, 1, 0.5, 2];
 
-export { GL, createGL, createTF, gl as default, gl };
+interface Node {
+    id: string;
+    type: NodeType;
+    value?: any;
+    property?: string;
+    parent?: Node;
+    children?: Node[];
+    operator?: Operator;
+    mathFunction?: MathFunction;
+}
+interface ProxyCallback {
+    path: string[];
+    args: any[];
+}
+type NodeCreator = (value?: any) => X;
+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;
+}
+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;
+}
+type SwizzleProperties = {
+    [k in Swillzes]: X;
+};
+interface X extends MathMethods, OperatorMethods, SwizzleProperties {
+    readonly id: string;
+    readonly type: NodeType;
+    readonly value: any;
+    readonly property: string;
+    (...args: any[]): X;
+}
+interface UniformNode extends X {
+    set(value: any): void;
+    onObjectUpdate(callback: (context: any) => any): UniformNode;
+    onRenderUpdate(callback: (context: any) => any): UniformNode;
+}
+interface FunctionNode {
+    (...args: any[]): X;
+    call(x: X[]): X;
+}
+interface ConditionalNode {
+    ElseIf(condition: X, callback: () => void): ConditionalNode;
+    Else(callback: () => void): void;
+}
+interface ConversionContext {
+    target: 'webgl' | 'webgpu';
+    nodes: Map<string, Node>;
+    variables: Map<string, string>;
+    functions: Map<string, string>;
+}
+
+declare const getCachedBool: (x: boolean) => X;
+declare const getCachedInt: (x: number) => X;
+declare const getCachedFloat: (x: number) => X;
+declare const findDuplicateNodes: (nodes: X[]) => Map<string, X[]>;
+
+declare const convertToNode: (x: unknown) => X;
+declare const float: (x: unknown) => X;
+declare const int: (x: unknown) => X;
+declare const bool: (x: unknown) => X;
+declare const vec2: (x?: any, y?: any) => X;
+declare const vec3: (x?: any, y?: any, z?: any) => X;
+declare const vec4: (x?: any, y?: any, z?: any, w?: any) => X;
+declare const color: (r?: any, g?: any, b?: any) => X;
+
+declare const createNode: (type: NodeType, value?: any, options?: Partial<Node>) => Node;
+declare const node: (type: NodeType, value?: any, options?: Partial<Node>) => X;
+
+interface UpdateContext {
+    object?: any;
+    camera?: any;
+    renderer?: any;
+    scene?: any;
+    time?: number;
+}
+declare const uniform: (initialValue: any) => UniformNode;
+declare const iPrevTime: UniformNode;
+declare const iDeltaTime: UniformNode;
+declare const updateUniforms: (context: UpdateContext) => void;
+
+declare const Fn: (jsFunc: Function) => FunctionNode;
+declare const If: (condition: X, callback: () => void) => ConditionalNode;
+declare const gl_FragCoord: X;
+declare const gl_Position: X;
+declare const iTime: UniformNode;
+declare const iResolution: UniformNode;
+declare const iMouse: UniformNode;
+declare const abs: (x: X) => X;
+declare const sin: (x: X) => X;
+declare const cos: (x: X) => X;
+declare const tan: (x: X) => X;
+declare const sqrt: (x: X) => X;
+declare const floor: (x: X) => X;
+declare const ceil: (x: X) => X;
+declare const fract: (x: X) => X;
+declare const normalize: (x: X) => X;
+declare const length: (x: X) => X;
+
+type GPUContext = any;
+type GPUDevice = any;
+type GPUBuffer = any;
+type GPUPipeline = any;
+type Uniform = number | number[];
+type Attribute = number[];
+type Attributes = Record<string, Attribute>;
+type Uniforms = Record<string, Uniform>;
+type PrecisionMode = 'highp' | 'mediump' | 'lowp';
+type GLClearMode = 'COLOR_BUFFER_BIT' | 'DEPTH_BUFFER_BIT' | 'STENCIL_BUFFER_BIT';
+type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT';
+type GLDrawMode = 'POINTS' | 'LINE_STRIP' | 'LINE_LOOP' | 'LINES' | 'TRIANGLE_STRIP' | 'TRIANGLE_FAN' | 'TRIANGLES';
+interface WebGLState {
+    context: WebGLRenderingContext;
+    program: WebGLProgram;
+}
+interface WebGPUState {
+    device: GPUDevice;
+    context: GPUContext;
+    pipeline: GPUPipeline;
+}
+type GL = EventState<{
+    /**
+     * initial value
+     */
+    isNative: boolean;
+    isWebGL: boolean;
+    isLoop: boolean;
+    isGL: true;
+    width: number;
+    height: number;
+    size: [number, number];
+    mouse: [number, number];
+    count: number;
+    el: HTMLCanvasElement;
+    vs: string | X;
+    fs: string | X;
+    vert: string | X;
+    frag: string | X;
+    vertex: string | X;
+    fragment: string | X;
+    /**
+     * core state
+     */
+    webgpu: WebGPUState;
+    webgl: WebGLState;
+    queue: Queue;
+    frame: Frame;
+    /**
+     * events
+     */
+    ref?: any;
+    init(): void;
+    loop(): void;
+    mount(): void;
+    clean(): void;
+    render(): void;
+    resize(e?: Event): void;
+    mousemove(e: Event): void;
+    /**
+     * setter
+     */
+    _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL;
+    uniform(key: string, value: Uniform, isMatrix?: boolean): GL;
+    uniform(target: {
+        [key: string]: Uniform;
+    }): GL;
+    _texture?(key: string, value: string): GL;
+    texture(key: string, value: string): GL;
+    texture(target: {
+        [key: string]: string;
+    }): GL;
+    _attribute?(key: string, value: Attribute, iboValue?: Attribute): GL;
+    attribute(key: string, value: Attribute, iboValue?: Attribute): GL;
+    attribute(target: {
+        [key: string]: Attribute;
+    }): GL;
+}>;
+
+interface GLSLContext extends ConversionContext {
+    target: 'webgl';
+    precision: 'lowp' | 'mediump' | 'highp';
+    version: '100' | '300 es';
+}
+declare const nodeToGLSL: (nodeProxy: X, context?: Partial<GLSLContext>) => string;
+declare const glsl: (fragmentNode: X, options?: {
+    precision?: "lowp" | "mediump" | "highp";
+    version?: "100" | "300 es";
+    uniforms?: Record<string, any>;
+}) => string;
+
+interface WGSLContext extends ConversionContext {
+    target: 'webgpu';
+}
+declare const nodeToWGSL: (nodeProxy: X, context?: Partial<WGSLContext>) => string;
+declare const wgsl: (fragmentNode: X, options?: {
+    uniforms?: Record<string, any>;
+}) => string;
+
+declare const is: {
+    arr: (arg: any) => arg is any[];
+    bol: (a: unknown) => a is boolean;
+    str: (a: unknown) => a is string;
+    num: (a: unknown) => a is number;
+    int: (a: unknown) => a is number;
+    fun: (a: unknown) => a is Function;
+    und: (a: unknown) => a is undefined;
+    nul: (a: unknown) => a is null;
+    set: (a: unknown) => a is Set<unknown>;
+    map: (a: unknown) => a is Map<unknown, unknown>;
+    obj: (a: unknown) => a is object;
+    nan: (a: unknown) => a is number;
+};
+/**
+ * each
+ */
+type EachFn<Value, Key, This> = (this: This, value: Value, key: Key) => void;
+type Eachable<Value = any, Key = any, This = any> = {
+    forEach(cb: EachFn<Value, Key, This>, ctx?: This): void;
+};
+declare const each: <Value, Key, This>(obj: Eachable<Value, Key, This>, fn: EachFn<Value, Key, This>) => void;
+declare const flush: <Value extends Function, Key, This>(obj: Eachable<Value, Key, This>, ...args: any[]) => void;
+/**
+ * other
+ */
+declare const replace: (x?: string, from?: string, to?: string) => string;
+declare const ext: (src?: string) => string;
+declare const fig: (x?: number) => number;
+declare const dig: (x?: number) => number;
+declare const sig: (value?: number, digit?: number) => number;
+
+declare const initWebGPUDevice: (el: HTMLCanvasElement) => Promise<{
+    device: any;
+    context: any;
+    format: any;
+} | null>;
+declare const createRenderPipeline: (device: GPUDevice, format: string, vs: string | undefined, fs: string | undefined, buffers: any[]) => GPUPipeline;
+declare const createDescriptor: (c: GPUContext) => {
+    colorAttachments: {
+        view: any;
+        clearValue: {
+            r: number;
+            g: number;
+            b: number;
+            a: number;
+        };
+        loadOp: string;
+        storeOp: string;
+    }[];
+};
+declare const alignTo256: (size: number) => number;
+declare const createUniformBuffer: (device: GPUDevice, size: number) => Buffer;
+declare const createVertexBuffer: (device: GPUDevice, value: number[]) => Buffer;
+declare const createBindGroup: (device: GPUDevice, pipeline: GPUPipeline, entries: any[]) => any;
+declare const updateBindGroup: (device: GPUDevice, pipeline: GPUPipeline, uniformBuffer: Buffer, textures?: any, sampler?: any) => any;
+declare const createUniform: (device: GPUDevice, buffer: any, data: Float32Array, offset?: number) => void;
+declare const createDeviceTexture: (device: GPUDevice, image: HTMLImageElement) => any;
+declare const createSampler: (device: GPUDevice) => any;
+declare const getDefaultVertices: () => Float32Array<ArrayBuffer>;
+
+declare const defaultVertexGLSL = "\n#version 300 es\nvoid main() {\n  float x = float(gl_VertexID % 2) * 4.0 - 1.0;\n  float y = float(gl_VertexID / 2) * 4.0 - 1.0;\n  gl_Position = vec4(x, y, 0.0, 1.0);\n}\n";
+declare const defaultFragmentGLSL = "\n#version 300 es\nprecision mediump float;\nuniform vec2 iResolution;\nout vec4 fragColor;\nvoid main() {\n  fragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);\n}\n";
+declare const createShader: (c: WebGLRenderingContext, source: string, type: number) => WebGLShader;
+declare const createProgram: (c: WebGLRenderingContext, vs?: string, fs?: string) => WebGLProgram;
+declare const createVbo: (c: WebGLRenderingContext, data: number[]) => WebGLBuffer;
+declare const createIbo: (c: WebGLRenderingContext, data: number[]) => WebGLBuffer;
+declare const createAttrib: (c: WebGLRenderingContext, stride: number, location: any, vbo: WebGLBuffer, ibo?: WebGLBuffer) => void;
+declare const createTexture: (c: WebGLRenderingContext, img: HTMLImageElement) => WebGLTexture;
+declare const activeTexture: (c: WebGLRenderingContext, location: WebGLUniformLocation | null, unit: number, texture: WebGLTexture) => void;
+
+declare const webgl: (gl: GL) => Promise<GL>;
+
+declare const webgpu: (gl: GL) => Promise<GL>;
+
+declare const isGL: (a: unknown) => a is EventState<GL>;
+declare const isServer: () => boolean;
+declare const isWebGPUSupported: () => boolean;
+declare const createGL: (props?: Partial<GL>) => EventState<{
+    isNative: boolean;
+    isWebGL: boolean;
+    isLoop: boolean;
+    isGL: true;
+    width: number;
+    height: number;
+    size: [number, number];
+    mouse: [number, number];
+    count: number;
+    el: HTMLCanvasElement;
+    vs: string | X;
+    fs: string | X;
+    vert: string | X;
+    frag: string | X;
+    vertex: string | X;
+    fragment: string | X;
+    webgpu: WebGPUState;
+    webgl: WebGLState;
+    queue: refr.Queue;
+    frame: refr.Frame;
+    ref?: any;
+    init(): void;
+    loop(): void;
+    mount(): void;
+    clean(): void;
+    render(): void;
+    resize(e?: Event): void;
+    mousemove(e: Event): void;
+    _uniform?(key: string, value: Uniform, isMatrix?: boolean): GL;
+    uniform(key: string, value: Uniform, isMatrix?: boolean): GL;
+    uniform(target: {
+        [key: string]: Uniform;
+    }): GL;
+    _texture?(key: string, value: string): GL;
+    texture(key: string, value: string): GL;
+    texture(target: {
+        [key: string]: string;
+    }): GL;
+    _attribute?(key: string, value: Attribute, iboValue?: Attribute): GL;
+    attribute(key: string, value: Attribute, iboValue?: Attribute): GL;
+    attribute(target: {
+        [key: string]: Attribute;
+    }): GL;
+}, any[] | unknown[]>;
+
+export { Attribute, Attributes, CACHE_BOOLS, CACHE_FLOATS, CACHE_INTS, ConditionalNode, ConversionContext, FUNCTIONS, Fn, FunctionNode, GL, GLClearMode, GLDrawMode, GLDrawType, GPUBuffer, GPUContext, GPUDevice, GPUPipeline, If, MathFunction, MathMethods, Node, NodeCreator, NodeType, OPERATORS, Operator, OperatorMethods, PrecisionMode, ProxyCallback, SWIZZLES, Swillzes, SwizzleProperties, TYPES, Uniform, UniformNode, Uniforms, WebGLState, WebGPUState, X, abs, activeTexture, alignTo256, bool, ceil, color, convertToNode, cos, createAttrib, createBindGroup, createDescriptor, createDeviceTexture, createGL, createIbo, createNode, createProgram, createRenderPipeline, createSampler, createShader, createTexture, createUniform, createUniformBuffer, createVbo, createVertexBuffer, createGL as default, defaultFragmentGLSL, defaultVertexGLSL, dig, each, ext, fig, findDuplicateNodes, float, floor, flush, fract, getCachedBool, getCachedFloat, getCachedInt, getDefaultVertices, gl_FragCoord, gl_Position, glsl, iDeltaTime, iMouse, iPrevTime, iResolution, iTime, initWebGPUDevice, int, is, isGL, isServer, isWebGPUSupported, length, node, nodeToGLSL, nodeToWGSL, normalize, replace, sig, sin, sqrt, tan, uniform, updateBindGroup, updateUniforms, vec2, vec3, vec4, webgl, webgpu, wgsl };