micugl 0.0.7 → 0.0.9

package/dist/src/react/components/engine/ShaderEngine.mjs

@@ -0,0 +1,106 @@
+import { jsx as S } from "react/jsx-runtime";
+import { useRef as a, useCallback as L, useEffect as F } from "react";
+import { WebGLManager as h } from "../../../core/managers/WebGLManager.mjs";
+const U = {}, y = "", z = {}, b = {}, P = ({
+  programConfigs: E,
+  renderCallback: p,
+  renderOptions: i = U,
+  className: _ = y,
+  style: I = z,
+  uniformUpdaters: T = b,
+  useFastPath: d = !1,
+  useDevicePixelRatio: w = !0
+}) => {
+  const f = a(null), o = a(null), g = a(null), u = a(null), A = a(0), m = a((n) => {
+    const r = o.current, e = g.current;
+    if (!r || !e) return;
+    const s = n - A.current, t = r.context;
+    if (d)
+      r.fastRender(e, s, i.clear), t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
+    else {
+      const c = r.resources.get(e);
+      if (!c) return;
+      r.prepareRender(e, i), R(s, c, t);
+    }
+    u.current = requestAnimationFrame(m.current);
+  }), R = L((n, r, e) => {
+    p(n, r, e);
+  }, [p]);
+  F(() => {
+    m.current = (n) => {
+      const r = o.current, e = g.current;
+      if (!r || !e) return;
+      const s = n - A.current, t = r.context;
+      if (d)
+        r.fastRender(e, s, i.clear), t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
+      else {
+        const c = r.resources.get(e);
+        if (!c) return;
+        r.prepareRender(e, i), R(s, c, t);
+      }
+      u.current = requestAnimationFrame(m.current);
+    };
+  }, [i, d, R]);
+  const l = L(() => {
+    if (!f.current || !o.current) return;
+    const n = window.innerWidth, r = window.innerHeight;
+    o.current.setSize(n, r, w);
+  }, [w]);
+  return F(() => {
+    if (f.current)
+      try {
+        const n = new h(f.current);
+        o.current = n, l();
+        const r = Object.entries(E);
+        if (r.length > 0) {
+          const [e, s] = r[0];
+          n.createProgram(e, s), n.createBuffer(
+            e,
+            "a_position",
+            new Float32Array([
+              -1,
+              -1,
+              1,
+              -1,
+              -1,
+              1,
+              1,
+              1
+            ])
+          ), g.current = e, n.setAttributeOnce(e, "a_position", {
+            name: "a_position",
+            size: 2,
+            type: "FLOAT",
+            normalized: !1,
+            stride: 0,
+            offset: 0
+          });
+          const t = T[e];
+          t && t.forEach((c) => {
+            n.registerUniformUpdater(
+              e,
+              c.name,
+              c.type,
+              c.updateFn
+            );
+          });
+        }
+        return A.current = performance.now(), u.current = requestAnimationFrame(m.current), window.addEventListener("resize", l), () => {
+          window.removeEventListener("resize", l), u.current && cancelAnimationFrame(u.current), o.current && o.current.destroyAll();
+        };
+      } catch (n) {
+        return console.error("Failed to initialize WebGL:", n), () => {
+        };
+      }
+  }, [E, T, l]), /* @__PURE__ */ S(
+    "canvas",
+    {
+      ref: f,
+      className: _,
+      style: I
+    }
+  );
+};
+export {
+  P as ShaderEngine
+};

package/dist/src/react/hooks/useDarkMode.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),a=()=>{const[o,c]=r.useState(!1);return r.useEffect(()=>{const t=()=>{const e=document.documentElement.classList.contains("dark");c(e)};t();const s=new MutationObserver(e=>{e.forEach(n=>{n.attributeName==="class"&&t()})});return s.observe(document.documentElement,{attributes:!0}),()=>{s.disconnect()}},[]),o};exports.useDarkMode=a;

package/dist/src/react/hooks/useDarkMode.mjs

@@ -0,0 +1,22 @@
+import { useState as c, useEffect as a } from "react";
+const d = () => {
+  const [o, r] = c(!1);
+  return a(() => {
+    const t = () => {
+      const e = document.documentElement.classList.contains("dark");
+      r(e);
+    };
+    t();
+    const s = new MutationObserver((e) => {
+      e.forEach((n) => {
+        n.attributeName === "class" && t();
+      });
+    });
+    return s.observe(document.documentElement, { attributes: !0 }), () => {
+      s.disconnect();
+    };
+  }, []), o;
+};
+export {
+  d as useDarkMode
+};

package/dist/src/react/hooks/usePingPongPasses.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),v=require("./useUniformUpdaters.js"),$=({programId:e,secondaryProgramId:n,iterations:o=1,uniforms:C,secondaryUniforms:E={},framebufferOptions:c={width:0,height:0,textureCount:2,textureOptions:{minFilter:WebGLRenderingContext.LINEAR,magFilter:WebGLRenderingContext.LINEAR}},renderOptions:s={clear:!0},customPasses:r})=>{const l=v.useUniformUpdaters(e,C),U=v.useUniformUpdaters(n??`${e}-secondary`,E);return S.useMemo(()=>{const u=`${e}-fb-a`,f=`${e}-fb-b`,L={[u]:c,[f]:c};let i=[];if(r)i=r;else{i.push({programId:e,inputTextures:[],outputFramebuffer:u,renderOptions:s});for(let t=0;t<o;t++){const p=n&&t%2===1?n:e,b=t%2===0?u:f,a=t%2===0?f:u,x=n&&t%2===1?U[n]:l[e],T={};x.forEach(F=>{const R=F.updateFn;T[F.name]={type:F.type,value:(m,y,A)=>R(m,y,A)}}),i.push({programId:p,inputTextures:[{id:b,textureUnit:0,bindingType:"read"}],outputFramebuffer:a,uniforms:T,renderOptions:s})}const M=o%2===0?f:u,h={};(n?U[n]:l[e]).forEach(t=>{const p=t.updateFn;h[t.name]={type:t.type,value:(b,a,x)=>p(b,a,x)}}),i.push({programId:n??e,inputTextures:[{id:M,textureUnit:0,bindingType:"read"}],outputFramebuffer:null,uniforms:h,renderOptions:s})}return{passes:i,framebuffers:L}},[e,n,o,l,U,c,s,r])};exports.usePingPongPasses=$;

package/dist/src/react/hooks/usePingPongPasses.mjs

@@ -0,0 +1,93 @@
+import { useMemo as G } from "react";
+import { useUniformUpdaters as m } from "./useUniformUpdaters.mjs";
+const y = ({
+  programId: t,
+  secondaryProgramId: n,
+  iterations: o = 1,
+  uniforms: C,
+  secondaryUniforms: E = {},
+  framebufferOptions: l = {
+    width: 0,
+    height: 0,
+    textureCount: 2,
+    textureOptions: {
+      minFilter: WebGLRenderingContext.LINEAR,
+      magFilter: WebGLRenderingContext.LINEAR
+    }
+  },
+  renderOptions: s = { clear: !0 },
+  customPasses: c
+}) => {
+  const p = m(t, C), U = m(
+    n ?? `${t}-secondary`,
+    E
+  );
+  return G(() => {
+    const u = `${t}-fb-a`, f = `${t}-fb-b`, L = {
+      [u]: l,
+      [f]: l
+    };
+    let i = [];
+    if (c)
+      i = c;
+    else {
+      i.push({
+        programId: t,
+        inputTextures: [],
+        outputFramebuffer: u,
+        renderOptions: s
+      });
+      for (let e = 0; e < o; e++) {
+        const r = n && e % 2 === 1 ? n : t, b = e % 2 === 0 ? u : f, x = e % 2 === 0 ? f : u, F = n && e % 2 === 1 ? U[n] : p[t], T = {};
+        F.forEach((h) => {
+          const v = h.updateFn;
+          T[h.name] = {
+            type: h.type,
+            value: (A, M, $) => v(A, M, $)
+          };
+        }), i.push({
+          programId: r,
+          inputTextures: [{
+            id: b,
+            textureUnit: 0,
+            bindingType: "read"
+          }],
+          outputFramebuffer: x,
+          uniforms: T,
+          renderOptions: s
+        });
+      }
+      const R = o % 2 === 0 ? f : u, a = {};
+      (n ? U[n] : p[t]).forEach((e) => {
+        const r = e.updateFn;
+        a[e.name] = {
+          type: e.type,
+          value: (b, x, F) => r(b, x, F)
+        };
+      }), i.push({
+        programId: n ?? t,
+        inputTextures: [{
+          id: R,
+          textureUnit: 0,
+          bindingType: "read"
+        }],
+        outputFramebuffer: null,
+        uniforms: a,
+        renderOptions: s
+      });
+    }
+    return { passes: i, framebuffers: L };
+  }, [
+    t,
+    n,
+    o,
+    p,
+    U,
+    l,
+    s,
+    c
+  ]);
+};
+export {
+  y as usePingPongPasses
+};

package/dist/src/react/hooks/useUniformUpdaters.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),u=require("../lib/createUniformUpdater.js"),a=(t,r)=>n.useMemo(()=>{const s=u.createCommonUpdaters();return Object.entries(r).forEach(([e,o])=>{const c=e.startsWith("u_")?e:`u_${e}`;s.push(u.createUniformUpdater(c,o.type,o.value))}),{[t]:s}},[t,r]);exports.useUniformUpdaters=a;

package/dist/src/react/hooks/useUniformUpdaters.mjs

@@ -0,0 +1,12 @@
+import { useMemo as c } from "react";
+import { createCommonUpdaters as n, createUniformUpdater as p } from "../lib/createUniformUpdater.mjs";
+const a = (e, r) => c(() => {
+  const o = n();
+  return Object.entries(r).forEach(([t, s]) => {
+    const u = t.startsWith("u_") ? t : `u_${t}`;
+    o.push(p(u, s.type, s.value));
+  }), { [e]: o };
+}, [e, r]);
+export {
+  a as useUniformUpdaters
+};

package/dist/src/react/lib/createUniformUpdater.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../core/lib/vectorUtils.js");function n(t,r,e){return{name:t,type:r,updateFn:typeof e=="function"?e:o=>e}}function c(t){return t.map(({name:r,type:e,value:o})=>n(r,e,o))}function a(){return[n("u_time","float",t=>(t??0)*.001),n("u_resolution","vec2",(t,r,e)=>i.vec2([r??0,e??0]))]}exports.createCommonUpdaters=a;exports.createUniformUpdater=n;exports.createUniformUpdaters=c;

package/dist/src/react/lib/createUniformUpdater.mjs

@@ -0,0 +1,28 @@
+import { vec2 as i } from "../../core/lib/vectorUtils.mjs";
+function n(e, r, t) {
+  return {
+    name: e,
+    type: r,
+    updateFn: typeof t == "function" ? t : (o) => t
+  };
+}
+function c(e) {
+  return e.map(
+    ({ name: r, type: t, value: o }) => n(r, t, o)
+  );
+}
+function f() {
+  return [
+    n("u_time", "float", (e) => (e ?? 0) * 1e-3),
+    n(
+      "u_resolution",
+      "vec2",
+      (e, r, t) => i([r ?? 0, t ?? 0])
+    )
+  ];
+}
+export {
+  f as createCommonUpdaters,
+  n as createUniformUpdater,
+  c as createUniformUpdaters
+};

package/dist/types.d.ts

@@ -0,0 +1,204 @@
+export declare interface AttributeConfig {
+    name: string;
+    size: number;
+    type: AttributeType;
+    normalized: boolean;
+    stride: number;
+    offset: number;
+    instanced?: boolean;
+}
+
+export declare type AttributeType = 'FLOAT' | 'BYTE' | 'SHORT' | 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT';
+
+export declare interface BufferData {
+    buffer: WebGLBuffer;
+    data: Float32Array | Uint8Array | Uint16Array | Int8Array | Int16Array;
+}
+
+export declare type Float32Array16 = TypedFloat32Array<16>;
+
+export declare type Float32Array2 = TypedFloat32Array<2>;
+
+export declare type Float32Array3 = TypedFloat32Array<3>;
+
+export declare type Float32Array4 = TypedFloat32Array<4>;
+
+export declare type Float32Array9 = TypedFloat32Array<9>;
+
+export declare interface FramebufferOptions {
+    width: number;
+    height: number;
+    textureCount?: number;
+    textureOptions?: Partial<TextureOptions>;
+}
+
+export declare interface FramebufferResources {
+    framebuffer: WebGLFramebuffer;
+    textures: WebGLTexture[];
+    currentTextureIndex: number;
+    width: number;
+    height: number;
+}
+
+export declare type Mat2 = [
+number,
+number,
+number,
+number
+];
+
+export declare type Mat3 = [
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number
+];
+
+export declare type Mat4 = [
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number,
+number
+];
+
+export declare interface PingPongState {
+    readIndex: number;
+    writeIndex: number;
+    swap: () => void;
+}
+
+export declare interface RenderOptions {
+    clear?: boolean;
+    clearColor?: Vec4;
+}
+
+export declare interface RenderPass {
+    programId: string;
+    inputTextures: TextureBinding[];
+    outputFramebuffer?: string | null;
+    uniforms?: Record<string, {
+        type: UniformType;
+        value: RenderPassUniformValue;
+    }>;
+    renderOptions?: RenderOptions;
+}
+
+export declare type RenderPassUniformUpdateFn = (time: number, width: number, height: number) => UniformTypeMap[UniformType];
+
+export declare type RenderPassUniformValue = UniformTypeMap[UniformType] | RenderPassUniformUpdateFn;
+
+export declare type ShaderAttributeLocations = Record<string, number>;
+
+export declare interface ShaderProgramConfig {
+    vertexShader: string;
+    fragmentShader: string;
+    uniforms: UniformConfig[];
+    attributes?: AttributeConfig[];
+}
+
+export declare type ShaderRenderCallback = (time: number, resources: ShaderResources, gl: WebGLRenderingContext) => void;
+
+export declare interface ShaderResources {
+    program: WebGLProgram;
+    uniforms: ShaderUniformLocations;
+    attributes: ShaderAttributeLocations;
+    buffers: Record<string, BufferData>;
+}
+
+export declare type ShaderUniformLocations = Record<string, WebGLUniformLocation | null>;
+
+export declare interface TextureBinding {
+    id: string;
+    textureUnit: number;
+    bindingType: 'read' | 'write' | 'readwrite';
+}
+
+export declare interface TextureOptions {
+    width: number;
+    height: number;
+    internalFormat?: number;
+    format?: number;
+    type?: number;
+    minFilter?: number;
+    magFilter?: number;
+    wrapS?: number;
+    wrapT?: number;
+    generateMipmap?: boolean;
+}
+
+export declare type TypedFloat32Array<N extends number> = Float32Array & {
+    length: N;
+};
+
+export declare interface UniformConfig {
+    name: string;
+    type: UniformType;
+}
+
+export declare interface UniformParam<T extends UniformType = UniformType> {
+    value: UniformValue<T>;
+    type: T;
+}
+
+export declare type UniformParamMap = {
+    [K in UniformType]: UniformParam<K>;
+};
+
+export declare type UniformType = 'float' | 'vec2' | 'vec3' | 'vec4' | 'mat2' | 'mat3' | 'mat4' | 'int' | 'sampler2D';
+
+export declare interface UniformTypeMap {
+    'float': number;
+    'int': number;
+    'sampler2D': number;
+    'vec2': Float32Array2;
+    'vec3': Float32Array3;
+    'vec4': Float32Array4;
+    'mat2': Float32Array4;
+    'mat3': Float32Array9;
+    'mat4': Float32Array16;
+}
+
+export declare type UniformUpdateFn<T extends UniformType> = (time?: number, width?: number, height?: number) => UniformTypeMap[T];
+
+export declare interface UniformUpdaterDef<T extends UniformType> {
+    name: string;
+    type: T;
+    updateFn: UniformUpdateFn<T>;
+}
+
+export declare type UniformValue<T extends UniformType> = UniformTypeMap[T] | UniformUpdateFn<T>;
+
+export declare type Vec2 = [number, number];
+
+export declare type Vec3 = [number, number, number];
+
+export declare type Vec4 = [number, number, number, number];
+
+export declare type WebGLExtensionName = Extract<keyof WebGLExtensionTypes, string>;
+
+export declare interface WebGLExtensionTypes {
+    'OES_texture_float': OES_texture_float;
+    'OES_texture_float_linear': OES_texture_float_linear;
+    'OES_vertex_array_object': OES_vertex_array_object;
+    'ANGLE_instanced_arrays': ANGLE_instanced_arrays;
+    [key: string]: unknown;
+}
+
+export { }

package/dist/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/types.mjs

@@ -0,0 +1 @@
+

package/package.json

@@ -1,31 +1,66 @@
 {
   "name": "micugl",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Micu gl - Small React shader library",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/*"
+      ],
+      "types": [
+        "dist/types.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.mjs",
+      "require": "./dist/types.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.mjs",
+      "require": "./dist/core/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.js"
+    },
     "./examples": {
       "types": "./dist/examples/index.d.ts",
       "import": "./dist/examples/index.mjs",
       "require": "./dist/examples/index.js"
     },
-    "./examples/Marble": {
-      "types": "./dist/examples/Marble/index.d.ts",
-      "import": "./dist/examples/Marble/index.mjs",
-      "require": "./dist/examples/Marble/index.js"
+    "./examples/Marble/MarbleScene": {
+      "types": "./dist/examples/Marble/MarbleScene.d.ts",
+      "import": "./dist/examples/Marble/MarbleScene.mjs",
+      "require": "./dist/examples/Marble/MarbleScene.js"
+    },
+    "./examples/Marble/marbleShaders": {
+      "types": "./dist/examples/Marble/marbleShaders.d.ts",
+      "import": "./dist/examples/Marble/marbleShaders.mjs",
+      "require": "./dist/examples/Marble/marbleShaders.js"
+    },
+    "./examples/SimpleRipple/SimpleRippleScene": {
+      "types": "./dist/examples/SimpleRipple/SimpleRippleScene.d.ts",
+      "import": "./dist/examples/SimpleRipple/SimpleRippleScene.mjs",
+      "require": "./dist/examples/SimpleRipple/SimpleRippleScene.js"
     },
-    "./examples/SimpleRipple": {
-      "types": "./dist/examples/SimpleRipple/index.d.ts",
-      "import": "./dist/examples/SimpleRipple/index.mjs",
-      "require": "./dist/examples/SimpleRipple/index.js"
+    "./examples/SimpleRipple/rippleShaders": {
+      "types": "./dist/examples/SimpleRipple/rippleShaders.d.ts",
+      "import": "./dist/examples/SimpleRipple/rippleShaders.mjs",
+      "require": "./dist/examples/SimpleRipple/rippleShaders.js"
     }
   },
   "files": [

package/dist/BasePingPongShaderComponent-BvRm7-g5.js

@@ -1 +0,0 @@
-"use strict";const v=require("react/jsx-runtime"),h=require("react"),U=require("./useUniformUpdaters-DGX0mf9g.js");class A{constructor(e){this.passes=[],this.pingPongIds=new Set,this.webglManager=e}addPass(e){this.passes.push(e),e.outputFramebuffer&&this.pingPongIds.add(e.outputFramebuffer),e.inputTextures.forEach(s=>{s.bindingType==="readwrite"&&this.pingPongIds.add(s.id)})}clearPasses(){this.passes=[],this.pingPongIds.clear()}execute(e){const s=this.webglManager.context,u=this.webglManager.fbo;for(const r of this.passes){if(r.outputFramebuffer)if(this.pingPongIds.has(r.outputFramebuffer)){const{write:t}=u.getPingPongIndices(r.outputFramebuffer);u.bindFramebuffer(r.outputFramebuffer,t)}else u.bindFramebuffer(r.outputFramebuffer);else u.bindFramebuffer(null);this.webglManager.prepareRender(r.programId,r.renderOptions),r.inputTextures.forEach(t=>{let i=t.bindingType==="read"?0:1;if(this.pingPongIds.has(t.id)){const{read:o,write:g}=u.getPingPongIndices(t.id);i=t.bindingType==="read"||t.bindingType==="readwrite"?o:g}u.bindTexture(t.id,t.textureUnit,i),this.webglManager.setUniform(r.programId,`u_${t.id}`,t.textureUnit,"sampler2D")}),this.webglManager.updateUniforms(r.programId,e),r.uniforms&&Object.entries(r.uniforms).forEach(([t,i])=>{const o=typeof i.value=="function"?i.value(e,s.canvas.width,s.canvas.height):i.value;this.webglManager.setUniform(r.programId,t,o,i.type)}),s.drawArrays(s.TRIANGLE_STRIP,0,4),r.outputFramebuffer&&this.pingPongIds.has(r.outputFramebuffer)&&u.swapTextures(r.outputFramebuffer),r.inputTextures.forEach(t=>{t.bindingType==="readwrite"&&this.pingPongIds.has(t.id)&&u.swapTextures(t.id)})}}initializeResources(){for(const e of this.passes){const s=this.webglManager.resources.get(e.programId);s&&!s.buffers.a_position&&(this.webglManager.createBuffer(e.programId,"a_position",new Float32Array([-1,-1,1,-1,-1,1,1,1])),this.webglManager.setAttributeOnce(e.programId,"a_position",{name:"a_position",size:2,type:"FLOAT",normalized:!1,stride:0,offset:0}))}}}const _="",j={},L=({programConfigs:a,passes:e,framebuffers:s,className:u=_,style:r=j,useDevicePixelRatio:t=!0})=>{const i=h.useRef(null),o=h.useRef(null),g=h.useRef(null),l=h.useRef(null),p=h.useRef(0),b=h.useRef(n=>{const f=o.current,c=g.current;if(!f||!c)return;const w=n-p.current;c.execute(w),l.current=requestAnimationFrame(b.current)}),m=h.useCallback(()=>{if(!i.current||!o.current)return;const n=window.innerWidth,f=window.innerHeight;o.current.setSize(n,f,t);const c=o.current,w=c.context.canvas;Object.entries(s??[]).forEach(([d,F])=>{const P=F.width||w.width,E=F.height||w.height;c.fbo.resizeFramebuffer(d,P,E)})},[s,t]);return h.useEffect(()=>{if(i.current)try{const n=new U.WebGLManager(i.current);o.current=n,Object.entries(a).forEach(([c,w])=>{n.createProgram(c,w)}),Object.entries(s??[]).forEach(([c,w])=>{n.fbo.createFramebuffer(c,w)});const f=new A(n);return g.current=f,e.forEach(c=>{f.addPass(c)}),f.initializeResources(),m(),p.current=performance.now(),l.current=requestAnimationFrame(b.current),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m),l.current&&cancelAnimationFrame(l.current),o.current&&o.current.destroyAll()}}catch(n){return console.error("Failed to initialize WebGL:",n),()=>{}}},[a,e,s,m]),h.useEffect(()=>{const n=g.current;n&&(n.clearPasses(),e.forEach(f=>{n.addPass(f)}),n.initializeResources())},[e]),v.jsx("canvas",{ref:i,className:u,style:{width:"100%",height:"100%",display:"block",...r}})},M=({programId:a,secondaryProgramId:e,iterations:s=1,uniforms:u,secondaryUniforms:r={},framebufferOptions:t={width:0,height:0,textureCount:2,textureOptions:{minFilter:WebGLRenderingContext.LINEAR,magFilter:WebGLRenderingContext.LINEAR}},renderOptions:i={clear:!0},customPasses:o})=>{const g=U.useUniformUpdaters(a,u),l=U.useUniformUpdaters(e??`${a}-secondary`,r);return h.useMemo(()=>{const p=`${a}-fb-a`,b=`${a}-fb-b`,m={[p]:t,[b]:t};let n=[];if(o)n=o;else{n.push({programId:a,inputTextures:[],outputFramebuffer:p,renderOptions:i});for(let d=0;d<s;d++){const F=e&&d%2===1?e:a,P=d%2===0?p:b,E=d%2===0?b:p,R=e&&d%2===1?l[e]:g[a],y={};R.forEach(T=>{const S=T.updateFn;y[T.name]={type:T.type,value:(x,I,z)=>S(x,I,z)}}),n.push({programId:F,inputTextures:[{id:P,textureUnit:0,bindingType:"read"}],outputFramebuffer:E,uniforms:y,renderOptions:i})}const f=s%2===0?b:p,c={};(e?l[e]:g[a]).forEach(d=>{const F=d.updateFn;c[d.name]={type:d.type,value:(P,E,R)=>F(P,E,R)}}),n.push({programId:e??a,inputTextures:[{id:f,textureUnit:0,bindingType:"read"}],outputFramebuffer:null,uniforms:c,renderOptions:i})}return{passes:n,framebuffers:m}},[a,e,s,g,l,t,i,o])},C={clear:!0,clearColor:[0,0,0,1]},N=({programId:a,shaderConfig:e,secondaryProgramId:s,secondaryShaderConfig:u,iterations:r=1,uniforms:t,secondaryUniforms:i,framebufferOptions:o,className:g="",style:l,customPasses:p,renderOptions:b=C})=>{const m=s??`${a}-secondary`,n={[a]:e};u&&(n[m]=u);const{passes:f,framebuffers:c}=M({programId:a,secondaryProgramId:u?m:void 0,iterations:r,uniforms:t,secondaryUniforms:i,framebufferOptions:o,renderOptions:b,customPasses:p});return v.jsx(L,{programConfigs:n,passes:f,framebuffers:c,className:g,style:l})};exports.BasePingPongShaderComponent=N;exports.Passes=A;exports.PingPongShaderEngine=L;exports.usePingPongPasses=M;