glre 0.22.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">
@@ -101,7 +101,7 @@ npm install glre
   <tbody>
     <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>).
+        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">
@@ -139,13 +139,7 @@ import { useGL, vec4, fract, fragCoord, iResolution } from 'glre/native'
 const fragment = vec4(fract(fragCoord.xy / iResolution), 0, 1)
 
 const App = () => {
-        const { gl, ref } = useGL({
-                fragment,
-                render() {
-                        gl.flush()
-                        gl.endFrameEXP()
-                },
-        })
+        const { gl, ref } = useGL({ fragment })
         return <GLView style={{ flex: 1 }} onContextCreate={ref} />
 }
 
@@ -177,21 +171,20 @@ 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 createGL from 'https://cdn.skypack.dev/glre@latest'
-        import { vec4, fract, fragCoord, iResolution } from 'glre'
+        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.getElementById('id')
+                const el = document.createElement('canvas')
                 const gl = el.getContext('webgl2')
                 createGL({ el, gl, fragment }).mount()
+                document.body.append(el)
         }
         document.addEventListener('DOMContentLoaded', App)
 </script>
@@ -203,7 +196,7 @@ pure js supported ([codesandbox demo](https://codesandbox.io/s/glre-basic-demo3-
 
 ## 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 WebGL and WebGPU shaders.
+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.
 
@@ -307,9 +300,9 @@ const App = () => {
 createRoot(document.getElementById('root')).render(<App />)
 ```
 
-### WebGPU Support
+### WebGL2 and WebGPU Support
 
-The node system is designed to work with both WebGL 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 based on the available renderer.
+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
 

package/dist/index.d.ts

@@ -1,9 +1,7 @@
-import * as reev from 'reev';
-import { EventState, Nested } from 'reev';
 import * as refr from 'refr';
 import { Queue, Frame } from 'refr';
 export { Frame, Fun, Queue } from 'refr';
-import * as refr_dist_types_687121c7 from 'refr/dist/types-687121c7';
+import { EventState } from 'reev';
 
 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];
@@ -142,14 +140,27 @@ 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 GLDrawMode = 'POINTS' | 'LINE_STRIP' | 'LINE_LOOP' | 'LINES' | 'TRIANGLE_STRIP' | 'TRIANGLE_FAN' | 'TRIANGLES';
 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
@@ -163,32 +174,20 @@ type GL = EventState<{
     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;
-    /**
-     * 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>;
-    activeUnit: Nested<number>;
-    default: any;
     /**
      * events
      */
@@ -254,8 +253,6 @@ declare const is: {
     obj: (a: unknown) => a is object;
     nan: (a: unknown) => a is number;
 };
-declare const isServer: () => boolean;
-declare const isWebGPUSupported: () => boolean;
 /**
  * each
  */
@@ -274,200 +271,52 @@ declare const fig: (x?: number) => number;
 declare const dig: (x?: number) => number;
 declare const sig: (value?: number, digit?: number) => number;
 
-declare const createVbo: (c: WebGLRenderingContext, data: number[]) => WebGLBuffer;
-declare const createIbo: (c: WebGLRenderingContext, data: number[]) => WebGLBuffer;
-declare const createAttribute: (c: WebGLRenderingContext, stride: number, location: number, vbo: WebGLBuffer, ibo?: WebGLBuffer) => void;
-declare const deleteBuffer: (c: WebGLRenderingContext, buffer: WebGLBuffer) => void;
-declare const vertexStride: (count: number, value: number[], iboValue?: number[]) => number;
-declare const updateVbo: (c: WebGLRenderingContext, buffer: WebGLBuffer, data: number[], usage?: 35044) => void;
-declare const updateIbo: (c: WebGLRenderingContext, buffer: WebGLBuffer, data: number[], usage?: 35044) => void;
-
-declare const createProgram: (c: WebGLRenderingContext, vs: WebGLShader, fs: WebGLShader) => WebGLProgram;
-declare const deleteProgram: (c: WebGLRenderingContext, pg: WebGLProgram) => void;
-declare const getProgramInfo: (c: WebGLRenderingContext, pg: WebGLProgram) => {
-    linked: any;
-    log: string | null;
-    activeAttributes: any;
-    activeUniforms: any;
-};
-declare const getUniformType: (value: number | number[], isMatrix?: boolean) => string;
-declare const getUniformLocation: (c: WebGLRenderingContext, pg: WebGLProgram, name: string) => WebGLUniformLocation | null;
-declare const getAttribLocation: (c: WebGLRenderingContext, pg: WebGLProgram, name: string) => number;
-
-declare const deleteShader: (c: WebGLRenderingContext, shader: WebGLShader) => void;
-declare const createVertexShader: (c: WebGLRenderingContext, source?: string) => WebGLShader;
-declare const createFragmentShader: (c: WebGLRenderingContext, source?: string) => WebGLShader;
-declare const getShaderInfo: (c: WebGLRenderingContext, shader: WebGLShader) => {
-    compiled: any;
-    log: string | null;
-    source: string | null;
+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 deleteTexture: (c: WebGLRenderingContext, texture: WebGLTexture) => void;
-declare const createEmptyTexture: (c: WebGLRenderingContext, w?: number, h?: number, format?: 6408, type?: 5121) => WebGLTexture;
-declare const createCubeTexture: (c: WebGLRenderingContext, imgs: HTMLImageElement[]) => WebGLTexture;
-
-declare const webgl: (gl: GL) => GL;
 
-declare const createBuffer: (device: any, data: Float32Array | Uint32Array | number[], usage: number) => any;
-declare const createVertexBuffer: (device: any, data: number[]) => any;
-declare const createIndexBuffer: (device: any, data: number[]) => any;
-declare const createUniformBuffer: (device: any, size: number) => any;
-declare const createStorageBuffer: (device: any, size: number) => any;
-declare const updateBuffer: (device: any, buffer: any, data: Float32Array | Uint32Array | number[], offset?: number) => void;
-declare const destroyBuffer: (buffer: any) => any;
-declare const calculateBufferSize: (data: number[]) => number;
-declare const alignBufferSize: (size: number, alignment?: number) => number;
-declare const createBuffers: (device: any, bufferConfigs: Array<{
-    data: number[];
-    usage: number;
-}>) => any[];
-declare const BufferUsage: {
-    readonly VERTEX: 32;
-    readonly INDEX: 64;
-    readonly UNIFORM: 64;
-    readonly STORAGE: 128;
-    readonly COPY_SRC: 4;
-    readonly COPY_DST: 8;
-    readonly MAP_READ: 1;
-    readonly MAP_WRITE: 2;
-};
-
-declare const requestWebGPUDevice: () => Promise<{
-    adapter: any;
-    device: any;
-}>;
-declare const checkWebGPUSupport: () => boolean;
-declare const getDeviceLimits: (device: any) => {
-    maxTextureDimension1D: any;
-    maxTextureDimension2D: any;
-    maxTextureDimension3D: any;
-    maxTextureArrayLayers: any;
-    maxBindGroups: any;
-    maxDynamicUniformBuffersPerPipelineLayout: any;
-    maxDynamicStorageBuffersPerPipelineLayout: any;
-    maxSampledTexturesPerShaderStage: any;
-    maxSamplersPerShaderStage: any;
-    maxStorageBuffersPerShaderStage: any;
-    maxStorageTexturesPerShaderStage: any;
-    maxUniformBuffersPerShaderStage: any;
-    maxUniformBufferBindingSize: any;
-    maxStorageBufferBindingSize: any;
-    maxVertexBuffers: any;
-    maxVertexAttributes: any;
-    maxVertexBufferArrayStride: any;
-    maxComputeWorkgroupStorageSize: any;
-    maxComputeInvocationsPerWorkgroup: any;
-    maxComputeWorkgroupSizeX: any;
-    maxComputeWorkgroupSizeY: any;
-    maxComputeWorkgroupSizeZ: any;
-    maxComputeWorkgroupsPerDimension: any;
-};
-declare const setupDeviceErrorHandling: (device: any) => void;
-declare const configureCanvasContext: (canvas: HTMLCanvasElement, device: any, format?: any) => RenderingContext;
+declare const webgl: (gl: GL) => Promise<GL>;
 
-declare const createRenderPipeline: (device: any, vertexShader?: string, fragmentShader?: string, format?: string) => any;
-declare const createComputePipeline: (device: any, computeShader: string) => any;
-declare const createShaderModule: (device: any, code: string) => any;
-declare const createBindGroupLayout: (device: any, entries: any[]) => any;
-declare const createBindGroup: (device: any, layout: any, entries: any[]) => any;
-declare const createRenderPass: (encoder: any, colorAttachment: any, depthStencilAttachment?: any) => any;
-declare const createCommandEncoder: (device: any) => any;
-
-declare const createTextureFromImage: (device: any, image: HTMLImageElement | ImageBitmap, format?: string) => any;
-declare const createDepthTexture: (device: any, w?: number, h?: number, format?: string) => any;
-declare const createSampler: (device: any, options?: {
-    magFilter?: string;
-    minFilter?: string;
-    addressModeU?: string;
-    addressModeV?: string;
-    addressModeW?: string;
-}) => any;
-declare const createTextureView: (texture: any, options?: {
-    format?: string;
-    dimension?: string;
-    aspect?: string;
-    baseMipLevel?: number;
-    mipLevelCount?: number;
-    baseArrayLayer?: number;
-    arrayLayerCount?: number;
-}) => any;
-declare const updateTexture: (device: any, texture: any, data: Uint8Array | Uint8ClampedArray, w?: number, h?: number) => void;
-declare const destroyTexture: (texture: any) => any;
-declare const TextureUsage: {
-    readonly COPY_SRC: 1;
-    readonly COPY_DST: 2;
-    readonly TEXTURE_BINDING: 4;
-    readonly STORAGE_BINDING: 8;
-    readonly RENDER_ATTACHMENT: 16;
-};
-declare const TextureFormat: {
-    readonly RGBA8_UNORM: "rgba8unorm";
-    readonly RGBA8_SRGB: "rgba8unorm-srgb";
-    readonly BGRA8_UNORM: "bgra8unorm";
-    readonly BGRA8_SRGB: "bgra8unorm-srgb";
-    readonly DEPTH24_PLUS: "depth24plus";
-    readonly DEPTH32_FLOAT: "depth32float";
-};
-
-declare const webgpu: (gl: GL) => reev.EventState<{
-    isNative: boolean;
-    isWebGL: boolean;
-    isLoop: boolean;
-    isGL: true;
-    width: number;
-    height: number;
-    size: [number, number];
-    mouse: [number, number];
-    count: number;
-    vs: string | X;
-    fs: string | X;
-    vert: string | X;
-    frag: string | X;
-    vertex: string | X;
-    fragment: string | X;
-    int: PrecisionMode;
-    float: PrecisionMode;
-    sampler2D: PrecisionMode;
-    samplerCube: PrecisionMode;
-    lastActiveUnit: number;
-    gl: any;
-    pg: any;
-    el: any;
-    queue: refr_dist_types_687121c7.Q;
-    frame: refr_dist_types_687121c7.a;
-    stride: reev.Nested<number>;
-    location: reev.Nested<any>;
-    activeUnit: reev.Nested<number>;
-    default: any;
-    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[]>;
+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;
@@ -478,26 +327,17 @@ declare const createGL: (props?: Partial<GL>) => EventState<{
     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;
-    int: PrecisionMode;
-    float: PrecisionMode;
-    sampler2D: PrecisionMode;
-    samplerCube: PrecisionMode;
-    lastActiveUnit: number;
-    gl: any;
-    pg: any;
-    el: any;
+    webgpu: WebGPUState;
+    webgl: WebGLState;
     queue: refr.Queue;
     frame: refr.Frame;
-    stride: reev.Nested<number>;
-    location: reev.Nested<any>;
-    activeUnit: reev.Nested<number>;
-    default: any;
     ref?: any;
     init(): void;
     loop(): void;
@@ -523,4 +363,4 @@ declare const createGL: (props?: Partial<GL>) => EventState<{
     }): GL;
 }, any[] | unknown[]>;
 
-export { Attribute, Attributes, BufferUsage, CACHE_BOOLS, CACHE_FLOATS, CACHE_INTS, ConditionalNode, ConversionContext, FUNCTIONS, Fn, FunctionNode, GL, GLClearMode, GLDrawMode, GLDrawType, If, MathFunction, MathMethods, Node, NodeCreator, NodeType, OPERATORS, Operator, OperatorMethods, PrecisionMode, ProxyCallback, SWIZZLES, Swillzes, SwizzleProperties, TYPES, TextureFormat, TextureUsage, Uniform, UniformNode, Uniforms, X, abs, activeTexture, alignBufferSize, bool, calculateBufferSize, ceil, checkWebGPUSupport, color, configureCanvasContext, convertToNode, cos, createAttribute, createBindGroup, createBindGroupLayout, createBuffer, createBuffers, createCommandEncoder, createComputePipeline, createCubeTexture, createDepthTexture, createEmptyTexture, createFragmentShader, createGL, createIbo, createIndexBuffer, createNode, createProgram, createRenderPass, createRenderPipeline, createSampler, createShaderModule, createStorageBuffer, createTexture, createTextureFromImage, createTextureView, createUniformBuffer, createVbo, createVertexBuffer, createVertexShader, createGL as default, deleteBuffer, deleteProgram, deleteShader, deleteTexture, destroyBuffer, destroyTexture, dig, each, ext, fig, findDuplicateNodes, float, floor, flush, fract, getAttribLocation, getCachedBool, getCachedFloat, getCachedInt, getDeviceLimits, getProgramInfo, getShaderInfo, getUniformLocation, getUniformType, gl_FragCoord, gl_Position, glsl, iDeltaTime, iMouse, iPrevTime, iResolution, iTime, int, is, isGL, isServer, isWebGPUSupported, length, node, nodeToGLSL, nodeToWGSL, normalize, replace, requestWebGPUDevice, setupDeviceErrorHandling, sig, sin, sqrt, tan, uniform, updateBuffer, updateIbo, updateTexture, updateUniforms, updateVbo, vec2, vec3, vec4, vertexStride, webgl, webgpu, wgsl };
+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 };