micugl 0.0.13 → 0.0.15

package/dist/core/managers/WebGLManager.d.ts

@@ -21,7 +21,7 @@ export declare class WebGLManager {
     updateBuffer(programId: string, attributeName: string, data: Float32Array | Uint8Array | Uint16Array): void;
     registerUniformUpdater<T extends UniformType>(programId: string, uniformName: string, type: T, updateFn: UniformUpdateFn<T>): void;
     updateUniforms(programId: string, time: number): void;
-    setSize(width: number, height: number, dpr?: number): void;
+    setSize(renderWidth: number, renderHeight: number, displayWidth?: number, displayHeight?: number): void;
     prepareRender(programId: string, options?: RenderOptions): void;
     fastRender(programId: string, time: number, clear?: boolean): void;
     setUniform<T extends UniformType>(programId: string, uniformName: string, value: UniformTypeMap[T], type: T): void;

package/dist/core/managers/WebGLManager.js

@@ -1 +1 @@
-"use strict";var w=Object.defineProperty;var b=(m,r,o)=>r in m?w(m,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):m[r]=o;var d=(m,r,o)=>b(m,typeof r!="symbol"?r+"":r,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./FBOManager.js");class v{constructor(r,o){d(this,"gl");d(this,"fboManager");d(this,"resources",new Map);d(this,"compileCache",new Map);d(this,"uniformUpdateFns",new Map);d(this,"extensions",new Map);const t={alpha:!1,depth:!1,stencil:!1,antialias:!1,powerPreference:"low-power",preserveDrawingBuffer:!1},e=r.getContext("webgl",{...t,...o});if(!e)throw new Error("WebGL not supported");this.gl=e,this.fboManager=new E.FBOManager(e),this.getExtension("OES_texture_float"),this.getExtension("OES_texture_float_linear"),this.getExtension("OES_vertex_array_object"),this.getExtension("ANGLE_instanced_arrays")}getExtension(r){if(this.extensions.has(r))return this.extensions.get(r);const o=this.gl.getExtension(r);return this.extensions.set(r,o),o}createProgram(r,o){const{vertexShader:t,fragmentShader:e,uniforms:s,attributes:i}=o,n=this.gl,h=this.getOrCompileShader("vertex:"+t,n.VERTEX_SHADER,t),l=this.getOrCompileShader("fragment:"+e,n.FRAGMENT_SHADER,e),f=n.createProgram();if(!f)throw new Error("Failed to create WebGL program");if(n.attachShader(f,h),n.attachShader(f,l),n.linkProgram(f),!n.getProgramParameter(f,n.LINK_STATUS)){const g=n.getProgramInfoLog(f);throw n.deleteProgram(f),new Error(`Could not link shader program: ${g}`)}const c={};for(const g of s)c[g.name]=n.getUniformLocation(f,g.name);const u={};if(i)for(const g of i)u[g.name]=n.getAttribLocation(f,g.name);const a={program:f,uniforms:c,attributes:u,buffers:{}};return this.resources.set(r,a),this.uniformUpdateFns.set(r,new Map),a}getOrCompileShader(r,o,t){if(this.compileCache.has(r)){const s=this.compileCache.get(r);if(s)return s}const e=this.compileShader(o,t);return this.compileCache.set(r,e),e}compileShader(r,o){const t=this.gl,e=t.createShader(r);if(!e)throw new Error("Failed to create shader");if(t.shaderSource(e,o),t.compileShader(e),!t.getShaderParameter(e,t.COMPILE_STATUS)){const s=t.getShaderInfoLog(e);throw t.deleteShader(e),new Error(`Shader compilation failed: ${s}`)}return e}createBuffer(r,o,t){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=e.createBuffer();if(!i)throw new Error("Failed to create buffer");return e.bindBuffer(e.ARRAY_BUFFER,i),e.bufferData(e.ARRAY_BUFFER,t,e.STATIC_DRAW),s.buffers[o]={buffer:i,data:t},i}updateBuffer(r,o,t){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=s.buffers[o];if(!i)throw new Error(`Buffer for attribute ${o} not found`);e.bindBuffer(e.ARRAY_BUFFER,i.buffer),e.bufferData(e.ARRAY_BUFFER,t,e.STATIC_DRAW),i.data=t}registerUniformUpdater(r,o,t,e){const s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=this.uniformUpdateFns.get(r);if(!i)throw new Error(`Program uniforms for id ${r} not found`);const n=s.uniforms[o];if(n===null)return;const h=this.gl;let l;switch(t){case"int":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform1i(n,a),a};break;case"float":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform1f(n,a),a};break;case"sampler2D":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform1i(n,a),a};break;case"vec2":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform2fv(n,a),a};break;case"vec3":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform3fv(n,a),a};break;case"vec4":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform4fv(n,a),a};break;case"mat2":l=(f,c,u)=>{const a=e(f,c,u);return h.uniformMatrix2fv(n,!1,a),a};break;case"mat3":l=(f,c,u)=>{const a=e(f,c,u);return h.uniformMatrix3fv(n,!1,a),a};break;case"mat4":l=(f,c,u)=>{const a=e(f,c,u);return h.uniformMatrix4fv(n,!1,a),a};break;default:throw new Error(`Unsupported uniform type: ${t}`)}i.set(o,l)}updateUniforms(r,o){const t=this.uniformUpdateFns.get(r);if(!t)return;const e=this.gl.canvas,s=e.width,i=e.height;t.forEach(n=>{n(o,s,i)})}setSize(r,o,t=1){const e=this.gl.canvas,s=Math.floor(r*t),i=Math.floor(o*t);(e.width!==s||e.height!==i)&&(e.width=s,e.height=i,e.style.width=`${r}px`,e.style.height=`${o}px`,this.gl.viewport(0,0,s,i))}prepareRender(r,o={}){const{clear:t=!0,clearColor:e=[0,0,0,1]}=o,s=this.gl,i=this.resources.get(r);if(!i)throw new Error(`Program with id ${r} not found`);s.useProgram(i.program),t&&(s.clearColor(...e),s.clear(s.COLOR_BUFFER_BIT))}fastRender(r,o,t=!0){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);e.useProgram(s.program),t&&e.clear(e.COLOR_BUFFER_BIT),this.updateUniforms(r,o)}setUniform(r,o,t,e){const s=this.gl,i=this.resources.get(r);if(!i)throw new Error(`Program with id ${r} not found`);const n=i.uniforms[o];if(n!==null)switch(s.useProgram(i.program),e){case"float":s.uniform1f(n,t);break;case"vec2":s.uniform2fv(n,t);break;case"vec3":s.uniform3fv(n,t);break;case"vec4":s.uniform4fv(n,t);break;case"int":s.uniform1i(n,t);break;case"mat2":s.uniformMatrix2fv(n,!1,t);break;case"mat3":s.uniformMatrix3fv(n,!1,t);break;case"mat4":s.uniformMatrix4fv(n,!1,t);break;case"sampler2D":s.uniform1i(n,t);break;default:throw new Error(`Unsupported uniform type: ${e}`)}}setAttributeOnce(r,o,t){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=s.attributes[o];if(i===-1){console.warn(`Attribute ${o} not found or is unused`);return}const n=s.buffers[o];if(!n)throw new Error(`Buffer for attribute ${o} not found`);if(e.bindBuffer(e.ARRAY_BUFFER,n.buffer),e.enableVertexAttribArray(i),e.vertexAttribPointer(i,t.size,e[t.type],t.normalized,t.stride,t.offset),t.instanced){const h=this.getExtension("ANGLE_instanced_arrays");if(h!=null&&h.vertexAttribDivisorANGLE)h.vertexAttribDivisorANGLE(i,1);else if(e.vertexAttribDivisor)e.vertexAttribDivisor(i,1);else throw new Error("Instanced rendering not supported")}}drawArrays(r,o,t){this.gl.drawArrays(r,o,t)}drawElements(r,o,t,e){this.gl.drawElements(r,o,t,e)}destroy(r){const o=this.gl,t=this.resources.get(r);t&&(Object.values(t.buffers).forEach(({buffer:e})=>{o.deleteBuffer(e)}),o.deleteProgram(t.program),this.resources.delete(r),this.uniformUpdateFns.delete(r))}destroyAll(){for(const r of Array.from(this.resources.keys()))this.destroy(r);this.compileCache.clear(),this.fboManager.destroyAll()}get context(){return this.gl}get fbo(){return this.fboManager}}exports.WebGLManager=v;
+"use strict";var w=Object.defineProperty;var b=(d,r,o)=>r in d?w(d,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):d[r]=o;var m=(d,r,o)=>b(d,typeof r!="symbol"?r+"":r,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("./FBOManager.js");class p{constructor(r,o){m(this,"gl");m(this,"fboManager");m(this,"resources",new Map);m(this,"compileCache",new Map);m(this,"uniformUpdateFns",new Map);m(this,"extensions",new Map);const t={alpha:!1,depth:!1,stencil:!1,antialias:!1,powerPreference:"low-power",preserveDrawingBuffer:!1},e=r.getContext("webgl",{...t,...o});if(!e)throw new Error("WebGL not supported");this.gl=e,this.fboManager=new E.FBOManager(e),this.getExtension("OES_texture_float"),this.getExtension("OES_texture_float_linear"),this.getExtension("OES_vertex_array_object"),this.getExtension("ANGLE_instanced_arrays")}getExtension(r){if(this.extensions.has(r))return this.extensions.get(r);const o=this.gl.getExtension(r);return this.extensions.set(r,o),o}createProgram(r,o){const{vertexShader:t,fragmentShader:e,uniforms:s,attributes:i}=o,n=this.gl,h=this.getOrCompileShader("vertex:"+t,n.VERTEX_SHADER,t),l=this.getOrCompileShader("fragment:"+e,n.FRAGMENT_SHADER,e),f=n.createProgram();if(!f)throw new Error("Failed to create WebGL program");if(n.attachShader(f,h),n.attachShader(f,l),n.linkProgram(f),!n.getProgramParameter(f,n.LINK_STATUS)){const g=n.getProgramInfoLog(f);throw n.deleteProgram(f),new Error(`Could not link shader program: ${g}`)}const c={};for(const g of s)c[g.name]=n.getUniformLocation(f,g.name);const u={};if(i)for(const g of i)u[g.name]=n.getAttribLocation(f,g.name);const a={program:f,uniforms:c,attributes:u,buffers:{}};return this.resources.set(r,a),this.uniformUpdateFns.set(r,new Map),a}getOrCompileShader(r,o,t){if(this.compileCache.has(r)){const s=this.compileCache.get(r);if(s)return s}const e=this.compileShader(o,t);return this.compileCache.set(r,e),e}compileShader(r,o){const t=this.gl,e=t.createShader(r);if(!e)throw new Error("Failed to create shader");if(t.shaderSource(e,o),t.compileShader(e),!t.getShaderParameter(e,t.COMPILE_STATUS)){const s=t.getShaderInfoLog(e);throw t.deleteShader(e),new Error(`Shader compilation failed: ${s}`)}return e}createBuffer(r,o,t){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=e.createBuffer();if(!i)throw new Error("Failed to create buffer");return e.bindBuffer(e.ARRAY_BUFFER,i),e.bufferData(e.ARRAY_BUFFER,t,e.STATIC_DRAW),s.buffers[o]={buffer:i,data:t},i}updateBuffer(r,o,t){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=s.buffers[o];if(!i)throw new Error(`Buffer for attribute ${o} not found`);e.bindBuffer(e.ARRAY_BUFFER,i.buffer),e.bufferData(e.ARRAY_BUFFER,t,e.STATIC_DRAW),i.data=t}registerUniformUpdater(r,o,t,e){const s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=this.uniformUpdateFns.get(r);if(!i)throw new Error(`Program uniforms for id ${r} not found`);const n=s.uniforms[o];if(n===null)return;const h=this.gl;let l;switch(t){case"int":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform1i(n,a),a};break;case"float":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform1f(n,a),a};break;case"sampler2D":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform1i(n,a),a};break;case"vec2":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform2fv(n,a),a};break;case"vec3":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform3fv(n,a),a};break;case"vec4":l=(f,c,u)=>{const a=e(f,c,u);return h.uniform4fv(n,a),a};break;case"mat2":l=(f,c,u)=>{const a=e(f,c,u);return h.uniformMatrix2fv(n,!1,a),a};break;case"mat3":l=(f,c,u)=>{const a=e(f,c,u);return h.uniformMatrix3fv(n,!1,a),a};break;case"mat4":l=(f,c,u)=>{const a=e(f,c,u);return h.uniformMatrix4fv(n,!1,a),a};break;default:throw new Error(`Unsupported uniform type: ${t}`)}i.set(o,l)}updateUniforms(r,o){const t=this.uniformUpdateFns.get(r);if(!t)return;const e=this.gl.canvas,s=e.width,i=e.height;t.forEach(n=>{n(o,s,i)})}setSize(r,o,t,e){const s=this.gl.canvas,i=t??r,n=e??o;(s.width!==r||s.height!==o)&&(s.width=r,s.height=o,this.gl.viewport(0,0,r,o)),s.style.width=`${i}px`,s.style.height=`${n}px`}prepareRender(r,o={}){const{clear:t=!0,clearColor:e=[0,0,0,1]}=o,s=this.gl,i=this.resources.get(r);if(!i)throw new Error(`Program with id ${r} not found`);s.useProgram(i.program),t&&(s.clearColor(...e),s.clear(s.COLOR_BUFFER_BIT))}fastRender(r,o,t=!0){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);e.useProgram(s.program),t&&e.clear(e.COLOR_BUFFER_BIT),this.updateUniforms(r,o)}setUniform(r,o,t,e){const s=this.gl,i=this.resources.get(r);if(!i)throw new Error(`Program with id ${r} not found`);const n=i.uniforms[o];if(n!==null)switch(s.useProgram(i.program),e){case"float":s.uniform1f(n,t);break;case"vec2":s.uniform2fv(n,t);break;case"vec3":s.uniform3fv(n,t);break;case"vec4":s.uniform4fv(n,t);break;case"int":s.uniform1i(n,t);break;case"mat2":s.uniformMatrix2fv(n,!1,t);break;case"mat3":s.uniformMatrix3fv(n,!1,t);break;case"mat4":s.uniformMatrix4fv(n,!1,t);break;case"sampler2D":s.uniform1i(n,t);break;default:throw new Error(`Unsupported uniform type: ${e}`)}}setAttributeOnce(r,o,t){const e=this.gl,s=this.resources.get(r);if(!s)throw new Error(`Program with id ${r} not found`);const i=s.attributes[o];if(i===-1){console.warn(`Attribute ${o} not found or is unused`);return}const n=s.buffers[o];if(!n)throw new Error(`Buffer for attribute ${o} not found`);if(e.bindBuffer(e.ARRAY_BUFFER,n.buffer),e.enableVertexAttribArray(i),e.vertexAttribPointer(i,t.size,e[t.type],t.normalized,t.stride,t.offset),t.instanced){const h=this.getExtension("ANGLE_instanced_arrays");if(h!=null&&h.vertexAttribDivisorANGLE)h.vertexAttribDivisorANGLE(i,1);else if(e.vertexAttribDivisor)e.vertexAttribDivisor(i,1);else throw new Error("Instanced rendering not supported")}}drawArrays(r,o,t){this.gl.drawArrays(r,o,t)}drawElements(r,o,t,e){this.gl.drawElements(r,o,t,e)}destroy(r){const o=this.gl,t=this.resources.get(r);t&&(Object.values(t.buffers).forEach(({buffer:e})=>{o.deleteBuffer(e)}),o.deleteProgram(t.program),this.resources.delete(r),this.uniformUpdateFns.delete(r))}destroyAll(){for(const r of Array.from(this.resources.keys()))this.destroy(r);this.compileCache.clear(),this.fboManager.destroyAll()}get context(){return this.gl}get fbo(){return this.fboManager}}exports.WebGLManager=p;

package/dist/core/managers/WebGLManager.mjs

@@ -1,6 +1,6 @@
-var w = Object.defineProperty;
-var b = (d, e, o) => e in d ? w(d, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : d[e] = o;
-var m = (d, e, o) => b(d, typeof e != "symbol" ? e + "" : e, o);
+var d = Object.defineProperty;
+var b = (w, e, o) => e in w ? d(w, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : w[e] = o;
+var m = (w, e, o) => b(w, typeof e != "symbol" ? e + "" : e, o);
 import { FBOManager as E } from "./FBOManager.mjs";
 class A {
   constructor(e, o) {
@@ -169,9 +169,9 @@ class A {
       n(o, s, i);
     });
   }
-  setSize(e, o, t = 1) {
-    const r = this.gl.canvas, s = Math.floor(e * t), i = Math.floor(o * t);
-    (r.width !== s || r.height !== i) && (r.width = s, r.height = i, r.style.width = `${e}px`, r.style.height = `${o}px`, this.gl.viewport(0, 0, s, i));
+  setSize(e, o, t, r) {
+    const s = this.gl.canvas, i = t ?? e, n = r ?? o;
+    (s.width !== e || s.height !== o) && (s.width = e, s.height = o, this.gl.viewport(0, 0, e, o)), s.style.width = `${i}px`, s.style.height = `${n}px`;
   }
   prepareRender(e, o = {}) {
     const { clear: t = !0, clearColor: r = [0, 0, 0, 1] } = o, s = this.gl, i = this.resources.get(e);

package/dist/react/components/engine/PingPongShaderEngine.d.ts

@@ -6,7 +6,12 @@ interface PingPongShaderEngineProps {
     framebuffers?: Record<string, FramebufferOptions>;
     className?: string;
     style?: CSSProperties;
+    width?: number;
+    height?: number;
+    renderWidth?: number;
+    renderHeight?: number;
     useDevicePixelRatio?: boolean;
+    pixelRatio?: number;
 }
-export declare const PingPongShaderEngine: ({ programConfigs, passes, framebuffers, className, style, useDevicePixelRatio }: PingPongShaderEngineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PingPongShaderEngine: ({ programConfigs, passes, framebuffers, className, style, width, height, renderWidth, renderHeight, useDevicePixelRatio, pixelRatio }: PingPongShaderEngineProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/react/components/engine/PingPongShaderEngine.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),t=require("react"),P=require("../../../core/managers/WebGLManager.js"),F=require("../../../core/systems/Passes.js"),z="",A={},v=({programConfigs:l,passes:i,framebuffers:a,className:E=z,style:R=A,useDevicePixelRatio:h=!0})=>{const o=t.useRef(null),s=t.useRef(null),d=t.useRef(null),u=t.useRef(null),m=t.useRef(0),g=t.useRef(e=>{const n=s.current,r=d.current;if(!n||!r)return;const c=e-m.current;r.execute(c),u.current=requestAnimationFrame(g.current)}),f=t.useCallback(()=>{if(!o.current||!s.current)return;const e=window.innerWidth,n=window.innerHeight;s.current.setSize(e,n,h);const r=s.current,c=r.context.canvas;Object.entries(a??[]).forEach(([b,w])=>{const S=w.width||c.width,y=w.height||c.height;r.fbo.resizeFramebuffer(b,S,y)})},[a,h]);return t.useEffect(()=>{if(o.current)try{const e=new P.WebGLManager(o.current);s.current=e,Object.entries(l).forEach(([r,c])=>{e.createProgram(r,c)}),Object.entries(a??[]).forEach(([r,c])=>{e.fbo.createFramebuffer(r,c)});const n=new F.Passes(e);return d.current=n,i.forEach(r=>{n.addPass(r)}),n.initializeResources(),f(),m.current=performance.now(),u.current=requestAnimationFrame(g.current),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f),u.current&&cancelAnimationFrame(u.current),s.current&&s.current.destroyAll()}}catch(e){return console.error("Failed to initialize WebGL:",e),()=>{}}},[l,i,a,f]),t.useEffect(()=>{const e=d.current;e&&(e.clearPasses(),i.forEach(n=>{e.addPass(n)}),e.initializeResources())},[i]),L.jsx("canvas",{ref:o,className:E,style:{width:"100%",height:"100%",display:"block",...R}})};exports.PingPongShaderEngine=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),r=require("react"),q=require("../../../core/managers/WebGLManager.js"),W=require("../../../core/systems/Passes.js"),x="",O={};function M(a){return a.map(c=>`${c.programId}|${c.outputFramebuffer??"screen"}|${c.inputTextures.map(o=>o.id).join(",")}`).join("||")}const k=({programConfigs:a,passes:c,framebuffers:o,className:A=x,style:F=O,width:w,height:g,renderWidth:h,renderHeight:R,useDevicePixelRatio:y=!0,pixelRatio:E})=>{const u=r.useRef(null),s=r.useRef(null),l=r.useRef(null),d=r.useRef(null),b=r.useRef(0),m=r.useRef(""),p=r.useRef(e=>{const t=s.current,n=l.current;if(!t||!n)return;const i=e-b.current;n.execute(i),d.current=requestAnimationFrame(p.current)}),f=r.useCallback(()=>{if(!u.current||!s.current)return;const e=w??window.innerWidth,t=g??window.innerHeight,n=E??(y?window.devicePixelRatio:1),i=h??Math.floor(e*n),L=R??Math.floor(t*n);s.current.setSize(i,L,e,t);const S=s.current,P=S.context.canvas;Object.entries(o??{}).forEach(([j,_])=>{const v=_.width||P.width,z=_.height||P.height;S.fbo.resizeFramebuffer(j,v,z)})},[o,w,g,h,R,y,E]);return r.useEffect(()=>{if(!u.current)return;const e=new q.WebGLManager(u.current);s.current=e,Object.entries(a).forEach(([n,i])=>{e.createProgram(n,i)}),Object.entries(o??{}).forEach(([n,i])=>{e.fbo.createFramebuffer(n,i)});const t=new W.Passes(e);return l.current=t,c.forEach(n=>{t.addPass(n)}),m.current=M(c),t.initializeResources(),f(),b.current=performance.now(),d.current=requestAnimationFrame(p.current),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f),d.current&&cancelAnimationFrame(d.current),s.current&&s.current.destroyAll()}},[a,o,f]),r.useEffect(()=>{const e=l.current;if(!e)return;const t=M(c);if(t===m.current){typeof window<"u"&&window.__micuglMetrics&&window.__micuglMetrics.engineSkippedInits++;return}m.current=t,typeof window<"u"&&window.__micuglMetrics&&window.__micuglMetrics.engineActualInits++,e.clearPasses(),c.forEach(n=>{e.addPass(n)}),e.initializeResources()},[c]),T.jsx("canvas",{ref:u,className:A,style:{width:"100%",height:"100%",display:"block",...F}})};exports.PingPongShaderEngine=k;

package/dist/react/components/engine/PingPongShaderEngine.mjs

@@ -1,68 +1,80 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useRef as i, useCallback as y, useEffect as E } from "react";
-import { WebGLManager as z } from "../../../core/managers/WebGLManager.mjs";
-import { Passes as A } from "../../../core/systems/Passes.mjs";
-const v = "", P = {}, O = ({
-  programConfigs: h,
-  passes: s,
+import { jsx as x } from "react/jsx-runtime";
+import { useRef as s, useCallback as W, useEffect as F } from "react";
+import { WebGLManager as k } from "../../../core/managers/WebGLManager.mjs";
+import { Passes as H } from "../../../core/systems/Passes.mjs";
+const I = "", O = {};
+function z(a) {
+  return a.map(
+    (t) => `${t.programId}|${t.outputFramebuffer ?? "screen"}|${t.inputTextures.map((o) => o.id).join(",")}`
+  ).join("||");
+}
+const C = ({
+  programConfigs: a,
+  passes: t,
   framebuffers: o,
-  className: b = v,
-  style: F = P,
-  useDevicePixelRatio: d = !0
+  className: L = I,
+  style: M = O,
+  width: w,
+  height: h,
+  renderWidth: g,
+  renderHeight: p,
+  useDevicePixelRatio: y = !0,
+  pixelRatio: E
 }) => {
-  const a = i(null), c = i(null), f = i(null), u = i(null), l = i(0), w = i((e) => {
-    const t = c.current, r = f.current;
-    if (!t || !r) return;
-    const n = e - l.current;
-    r.execute(n), u.current = requestAnimationFrame(w.current);
-  }), m = y(() => {
-    if (!a.current || !c.current) return;
-    const e = window.innerWidth, t = window.innerHeight;
-    c.current.setSize(e, t, d);
-    const r = c.current, n = r.context.canvas;
-    Object.entries(o ?? []).forEach(([L, g]) => {
-      const R = g.width || n.width, S = g.height || n.height;
-      r.fbo.resizeFramebuffer(L, R, S);
+  const u = s(null), c = s(null), m = s(null), d = s(null), R = s(0), l = s(""), _ = s((e) => {
+    const r = c.current, n = m.current;
+    if (!r || !n) return;
+    const i = e - R.current;
+    n.execute(i), d.current = requestAnimationFrame(_.current);
+  }), f = W(() => {
+    if (!u.current || !c.current) return;
+    const e = w ?? window.innerWidth, r = h ?? window.innerHeight, n = E ?? (y ? window.devicePixelRatio : 1), i = g ?? Math.floor(e * n), P = p ?? Math.floor(r * n);
+    c.current.setSize(i, P, e, r);
+    const b = c.current, S = b.context.canvas;
+    Object.entries(o ?? {}).forEach(([v, A]) => {
+      const j = A.width || S.width, T = A.height || S.height;
+      b.fbo.resizeFramebuffer(v, j, T);
     });
-  }, [o, d]);
-  return E(() => {
-    if (a.current)
-      try {
-        const e = new z(a.current);
-        c.current = e, Object.entries(h).forEach(([r, n]) => {
-          e.createProgram(r, n);
-        }), Object.entries(o ?? []).forEach(([r, n]) => {
-          e.fbo.createFramebuffer(r, n);
-        });
-        const t = new A(e);
-        return f.current = t, s.forEach((r) => {
-          t.addPass(r);
-        }), t.initializeResources(), m(), l.current = performance.now(), u.current = requestAnimationFrame(w.current), window.addEventListener("resize", m), () => {
-          window.removeEventListener("resize", m), u.current && cancelAnimationFrame(u.current), c.current && c.current.destroyAll();
-        };
-      } catch (e) {
-        return console.error("Failed to initialize WebGL:", e), () => {
-        };
-      }
-  }, [h, s, o, m]), E(() => {
-    const e = f.current;
-    e && (e.clearPasses(), s.forEach((t) => {
-      e.addPass(t);
-    }), e.initializeResources());
-  }, [s]), /* @__PURE__ */ p(
+  }, [o, w, h, g, p, y, E]);
+  return F(() => {
+    if (!u.current) return;
+    const e = new k(u.current);
+    c.current = e, Object.entries(a).forEach(([n, i]) => {
+      e.createProgram(n, i);
+    }), Object.entries(o ?? {}).forEach(([n, i]) => {
+      e.fbo.createFramebuffer(n, i);
+    });
+    const r = new H(e);
+    return m.current = r, t.forEach((n) => {
+      r.addPass(n);
+    }), l.current = z(t), r.initializeResources(), f(), R.current = performance.now(), d.current = requestAnimationFrame(_.current), window.addEventListener("resize", f), () => {
+      window.removeEventListener("resize", f), d.current && cancelAnimationFrame(d.current), c.current && c.current.destroyAll();
+    };
+  }, [a, o, f]), F(() => {
+    const e = m.current;
+    if (!e) return;
+    const r = z(t);
+    if (r === l.current) {
+      typeof window < "u" && window.__micuglMetrics && window.__micuglMetrics.engineSkippedInits++;
+      return;
+    }
+    l.current = r, typeof window < "u" && window.__micuglMetrics && window.__micuglMetrics.engineActualInits++, e.clearPasses(), t.forEach((n) => {
+      e.addPass(n);
+    }), e.initializeResources();
+  }, [t]), /* @__PURE__ */ x(
     "canvas",
     {
-      ref: a,
-      className: b,
+      ref: u,
+      className: L,
       style: {
         width: "100%",
         height: "100%",
         display: "block",
-        ...F
+        ...M
       }
     }
   );
 };
 export {
-  O as PingPongShaderEngine
+  C as PingPongShaderEngine
 };

package/dist/react/components/engine/ShaderEngine.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),t=require("react"),I=require("../../../core/managers/WebGLManager.js"),v={},U="",q={},z={},N=({programConfigs:E,renderCallback:T,renderOptions:o=v,className:F=U,style:b=q,width:p,height:w,uniformUpdaters:L=z,useFastPath:R=!1,useDevicePixelRatio:S=!0,pixelRatio:_})=>{const f=t.useRef(null),a=t.useRef(null),l=t.useRef(null),u=t.useRef(null),g=t.useRef(0),d=t.useRef(n=>{const e=a.current,r=l.current;if(!e||!r)return;const c=n-g.current,s=e.context;if(R)e.fastRender(r,c,o.clear),s.drawArrays(s.TRIANGLE_STRIP,0,4);else{const i=e.resources.get(r);if(!i)return;e.prepareRender(r,o),A(c,i,s)}u.current=requestAnimationFrame(d.current)}),A=t.useCallback((n,e,r)=>{T(n,e,r)},[T]);t.useEffect(()=>{d.current=n=>{const e=a.current,r=l.current;if(!e||!r)return;const c=n-g.current,s=e.context;if(R)e.fastRender(r,c,o.clear),s.drawArrays(s.TRIANGLE_STRIP,0,4);else{const i=e.resources.get(r);if(!i)return;e.prepareRender(r,o),A(c,i,s)}u.current=requestAnimationFrame(d.current)}},[o,R,A]);const m=t.useCallback(()=>{if(!f.current||!a.current)return;const n=p??window.innerWidth,e=w??window.innerHeight,r=_??(S?window.devicePixelRatio:1);a.current.setSize(n,e,r)},[S,_,p,w]);return t.useEffect(()=>{if(!f.current)return;const n=new I.WebGLManager(f.current);a.current=n,m();const[[e,r]]=Object.entries(E);return n.createProgram(e,r),n.createBuffer(e,"a_position",new Float32Array([-1,-1,1,-1,-1,1,1,1])),n.setAttributeOnce(e,"a_position",{name:"a_position",size:2,type:"FLOAT",normalized:!1,stride:0,offset:0}),l.current=e,g.current=performance.now(),u.current=requestAnimationFrame(d.current),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m),u.current&&cancelAnimationFrame(u.current),n.destroyAll()}},[E,m]),t.useEffect(()=>{const n=a.current,e=l.current;if(!n||!e)return;const r=L[e];r&&r.forEach(c=>{n.registerUniformUpdater(e,c.name,c.type,c.updateFn)})},[L]),y.jsx("canvas",{ref:f,className:F,style:b})};exports.ShaderEngine=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),c=require("react"),I=require("../../../core/managers/WebGLManager.js"),h={},v="",M={},U={},q=({programConfigs:E,renderCallback:p,renderOptions:o=h,className:F=v,style:y=M,width:T,height:w,uniformUpdaters:L=U,useFastPath:R=!1,useDevicePixelRatio:S=!0,pixelRatio:_})=>{const f=c.useRef(null),a=c.useRef(null),l=c.useRef(null),u=c.useRef(null),g=c.useRef(0),d=c.useRef(n=>{const e=a.current,r=l.current;if(!e||!r)return;const t=n-g.current,s=e.context;if(R)e.fastRender(r,t,o.clear),s.drawArrays(s.TRIANGLE_STRIP,0,4);else{const i=e.resources.get(r);if(!i)return;e.prepareRender(r,o),A(t,i,s)}u.current=requestAnimationFrame(d.current)}),A=c.useCallback((n,e,r)=>{p(n,e,r)},[p]);c.useEffect(()=>{d.current=n=>{const e=a.current,r=l.current;if(!e||!r)return;const t=n-g.current,s=e.context;if(R)e.fastRender(r,t,o.clear),s.drawArrays(s.TRIANGLE_STRIP,0,4);else{const i=e.resources.get(r);if(!i)return;e.prepareRender(r,o),A(t,i,s)}u.current=requestAnimationFrame(d.current)}},[o,R,A]);const m=c.useCallback(()=>{if(!f.current||!a.current)return;const n=T??window.innerWidth,e=w??window.innerHeight,r=_??(S?window.devicePixelRatio:1),t=Math.floor(n*r),s=Math.floor(e*r);a.current.setSize(t,s,n,e)},[S,_,T,w]);return c.useEffect(()=>{if(!f.current)return;const n=new I.WebGLManager(f.current);a.current=n,m();const[[e,r]]=Object.entries(E);return n.createProgram(e,r),n.createBuffer(e,"a_position",new Float32Array([-1,-1,1,-1,-1,1,1,1])),n.setAttributeOnce(e,"a_position",{name:"a_position",size:2,type:"FLOAT",normalized:!1,stride:0,offset:0}),l.current=e,g.current=performance.now(),u.current=requestAnimationFrame(d.current),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m),u.current&&cancelAnimationFrame(u.current),n.destroyAll()}},[E,m]),c.useEffect(()=>{const n=a.current,e=l.current;if(!n||!e)return;const r=L[e];r&&r.forEach(t=>{n.registerUniformUpdater(e,t.name,t.type,t.updateFn)})},[L]),b.jsx("canvas",{ref:f,className:F,style:y})};exports.ShaderEngine=q;

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

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

package/dist/react/hooks/usePingPongPasses.d.ts

@@ -12,10 +12,9 @@ interface PingPongPassesOptions {
     };
     customPasses?: RenderPass[];
 }
-export declare const usePingPongPasses: ({ programId, secondaryProgramId, iterations, uniforms, secondaryUniforms, framebufferOptions, renderOptions, customPasses }: PingPongPassesOptions) => {
+interface PingPongPassesResult {
     passes: RenderPass[];
-    framebuffers: {
-        [x: string]: FramebufferOptions;
-    };
-};
+    framebuffers: Record<string, FramebufferOptions>;
+}
+export declare const usePingPongPasses: ({ programId, secondaryProgramId, iterations, uniforms, secondaryUniforms, framebufferOptions, renderOptions, customPasses }: PingPongPassesOptions) => PingPongPassesResult;
 export {};

package/dist/react/hooks/usePingPongPasses.js

@@ -1 +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=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),R=require("./useUniformUpdaters.js"),C={width:0,height:0,textureCount:2,textureOptions:{minFilter:WebGLRenderingContext.LINEAR,magFilter:WebGLRenderingContext.LINEAR}},N={clear:!0};function A(e){return`${e.width}|${e.height}|${e.textureCount??1}|${JSON.stringify(e.textureOptions??{})}`}function L(e){return`${e.clear??!0}|${JSON.stringify(e.clearColor??[0,0,0,1])}`}function O(e,t,a,h,U,o,s,r){const i=`${e}-fb-a`,f=`${e}-fb-b`,c={[i]:o,[f]:o};let u=[];if(r)u=r;else{u.push({programId:e,inputTextures:[],outputFramebuffer:i,renderOptions:s});let b=i;for(let n=0;n<a;n++){const w=t&&n%2===1?t:e,_=n%2===0?i:f,p=n%2===0?f:i;b=p;const g=t&&n%2===1?U[t]:h[e],y={};g.forEach(x=>{const T=x.updateFn;y[x.name]={type:x.type,value:(d,E,M)=>T(d,E,M)}}),u.push({programId:w,inputTextures:[{id:_,textureUnit:0,bindingType:"read"}],outputFramebuffer:p,uniforms:y,renderOptions:s})}const F=b,l={};(t?U[t]:h[e]).forEach(n=>{const w=n.updateFn;l[n.name]={type:n.type,value:(_,p,g)=>w(_,p,g)}}),u.push({programId:t??e,inputTextures:[{id:F,textureUnit:0,bindingType:"read"}],outputFramebuffer:null,uniforms:l,renderOptions:s})}return{passes:u,framebuffers:c}}const k=({programId:e,secondaryProgramId:t,iterations:a=1,uniforms:h,secondaryUniforms:U={},framebufferOptions:o=C,renderOptions:s=N,customPasses:r})=>{const i=R.useUniformUpdaters(e,h),f=R.useUniformUpdaters(t??`${e}-secondary`,U),c=S.useRef(null),u=A(o),b=L(s),F=r?r.length.toString():"none",l=`${e}|${t??""}|${a}|${u}|${b}|${F}`;if(c.current&&c.current.key===l)return typeof window<"u"&&window.__micuglMetrics&&window.__micuglMetrics.hookCacheHits++,c.current.result;typeof window<"u"&&window.__micuglMetrics&&window.__micuglMetrics.hookCacheMisses++;const $=O(e,t,a,i,f,o,s,r);return c.current={key:l,result:$},$};exports.usePingPongPasses=k;

package/dist/react/hooks/usePingPongPasses.mjs

@@ -1,93 +1,108 @@
-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)
+import { useRef as N } from "react";
+import { useUniformUpdaters as T } from "./useUniformUpdaters.mjs";
+const d = {
+  width: 0,
+  height: 0,
+  textureCount: 2,
+  textureOptions: {
+    minFilter: WebGLRenderingContext.LINEAR,
+    magFilter: WebGLRenderingContext.LINEAR
+  }
+}, A = { clear: !0 };
+function L(t) {
+  return `${t.width}|${t.height}|${t.textureCount ?? 1}|${JSON.stringify(t.textureOptions ?? {})}`;
+}
+function S(t) {
+  return `${t.clear ?? !0}|${JSON.stringify(t.clearColor ?? [0, 0, 0, 1])}`;
+}
+function m(t, e, h, a, p, o, s, c) {
+  const i = `${t}-fb-a`, f = `${t}-fb-b`, r = {
+    [i]: o,
+    [f]: o
+  };
+  let u = [];
+  if (c)
+    u = c;
+  else {
+    u.push({
+      programId: t,
+      inputTextures: [],
+      outputFramebuffer: i,
+      renderOptions: s
+    });
+    let F = i;
+    for (let n = 0; n < h; n++) {
+      const U = e && n % 2 === 1 ? e : t, x = n % 2 === 0 ? i : f, $ = n % 2 === 0 ? f : i;
+      F = $;
+      const _ = e && n % 2 === 1 ? p[e] : a[t], E = {};
+      _.forEach((R) => {
+        const y = R.updateFn;
+        E[R.name] = {
+          type: R.type,
+          value: (M, g, C) => y(M, g, C)
         };
-      }), i.push({
-        programId: n ?? t,
+      }), u.push({
+        programId: U,
         inputTextures: [{
-          id: R,
+          id: x,
           textureUnit: 0,
           bindingType: "read"
         }],
-        outputFramebuffer: null,
-        uniforms: a,
+        outputFramebuffer: $,
+        uniforms: E,
         renderOptions: s
       });
     }
-    return { passes: i, framebuffers: L };
-  }, [
+    const b = F, l = {};
+    (e ? p[e] : a[t]).forEach((n) => {
+      const U = n.updateFn;
+      l[n.name] = {
+        type: n.type,
+        value: (x, $, _) => U(x, $, _)
+      };
+    }), u.push({
+      programId: e ?? t,
+      inputTextures: [{
+        id: b,
+        textureUnit: 0,
+        bindingType: "read"
+      }],
+      outputFramebuffer: null,
+      uniforms: l,
+      renderOptions: s
+    });
+  }
+  return { passes: u, framebuffers: r };
+}
+const K = ({
+  programId: t,
+  secondaryProgramId: e,
+  iterations: h = 1,
+  uniforms: a,
+  secondaryUniforms: p = {},
+  framebufferOptions: o = d,
+  renderOptions: s = A,
+  customPasses: c
+}) => {
+  const i = T(t, a), f = T(
+    e ?? `${t}-secondary`,
+    p
+  ), r = N(null), u = L(o), F = S(s), b = c ? c.length.toString() : "none", l = `${t}|${e ?? ""}|${h}|${u}|${F}|${b}`;
+  if (r.current && r.current.key === l)
+    return typeof window < "u" && window.__micuglMetrics && window.__micuglMetrics.hookCacheHits++, r.current.result;
+  typeof window < "u" && window.__micuglMetrics && window.__micuglMetrics.hookCacheMisses++;
+  const w = m(
     t,
-    n,
+    e,
+    h,
+    i,
+    f,
     o,
-    p,
-    U,
-    l,
     s,
     c
-  ]);
+  );
+  return r.current = { key: l, result: w }, w;
 };
 export {
-  y as usePingPongPasses
+  K as usePingPongPasses
 };

package/dist/react/hooks/useUniformUpdaters.d.ts

@@ -1,6 +1,4 @@
 import { UniformParam, UniformUpdaterDef } from '../../types';
 export declare const useUniformUpdaters: (programId: string, uniforms: Record<string, UniformParam>, options?: {
     skipDefaultUniforms?: boolean;
-}) => {
-    [x: string]: UniformUpdaterDef<import('../../types').UniformType>[];
-};
+}) => Record<string, UniformUpdaterDef<import('../../types').UniformType>[]>;

package/dist/react/hooks/useUniformUpdaters.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),c=require("../lib/createUniformUpdater.js"),U=(u,t,e)=>n.useMemo(()=>{const a=(e==null?void 0:e.skipDefaultUniforms)??!1?[]:c.createCommonUpdaters().filter(r=>r.name==="u_time"&&!("u_time"in t)||r.name==="u_resolution"&&!("u_resolution"in t));return Object.entries(t).forEach(([r,s])=>{const i=r.startsWith("u_")?r:`u_${r}`;a.push(c.createUniformUpdater(i,s.type,s.value))}),{[u]:a}},[u,t,e==null?void 0:e.skipDefaultUniforms]);exports.useUniformUpdaters=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),l=require("../lib/createUniformUpdater.js");function y(n){return Object.keys(n).sort().map(t=>{const e=n[t],c=typeof e.value=="function"?e.value.toString():JSON.stringify(e.value);return`${t}:${e.type}:${c}`}).join("|")}const _=(n,i,t)=>{const e=d.useRef(null),c=(t==null?void 0:t.skipDefaultUniforms)??!1,s=`${n}|${c}|${y(i)}`;if(e.current&&e.current.key===s)return typeof window<"u"&&window.__micuglMetrics&&window.__micuglMetrics.hookCacheHits++,e.current.result;typeof window<"u"&&window.__micuglMetrics&&window.__micuglMetrics.hookCacheMisses++;const u=c?[]:l.createCommonUpdaters().filter(r=>r.name==="u_time"&&!("u_time"in i)||r.name==="u_resolution"&&!("u_resolution"in i));Object.entries(i).forEach(([r,a])=>{const f=r.startsWith("u_")?r:`u_${r}`;u.push(l.createUniformUpdater(f,a.type,a.value))});const o={[n]:u};return e.current={key:s,result:o},o};exports.useUniformUpdaters=_;

package/dist/react/hooks/useUniformUpdaters.mjs

@@ -1,14 +1,26 @@
-import { useMemo as f } from "react";
-import { createCommonUpdaters as c, createUniformUpdater as i } from "../lib/createUniformUpdater.mjs";
-const n = (u, t, e) => f(() => {
-  const a = (e == null ? void 0 : e.skipDefaultUniforms) ?? !1 ? [] : c().filter(
-    (r) => r.name === "u_time" && !("u_time" in t) || r.name === "u_resolution" && !("u_resolution" in t)
+import { useRef as l } from "react";
+import { createCommonUpdaters as _, createUniformUpdater as d } from "../lib/createUniformUpdater.mjs";
+function m(i) {
+  return Object.keys(i).sort().map((t) => {
+    const e = i[t], c = typeof e.value == "function" ? e.value.toString() : JSON.stringify(e.value);
+    return `${t}:${e.type}:${c}`;
+  }).join("|");
+}
+const p = (i, n, t) => {
+  const e = l(null), c = (t == null ? void 0 : t.skipDefaultUniforms) ?? !1, s = `${i}|${c}|${m(n)}`;
+  if (e.current && e.current.key === s)
+    return typeof window < "u" && window.__micuglMetrics && window.__micuglMetrics.hookCacheHits++, e.current.result;
+  typeof window < "u" && window.__micuglMetrics && window.__micuglMetrics.hookCacheMisses++;
+  const o = c ? [] : _().filter(
+    (r) => r.name === "u_time" && !("u_time" in n) || r.name === "u_resolution" && !("u_resolution" in n)
   );
-  return Object.entries(t).forEach(([r, m]) => {
-    const s = r.startsWith("u_") ? r : `u_${r}`;
-    a.push(i(s, m.type, m.value));
-  }), { [u]: a };
-}, [u, t, e == null ? void 0 : e.skipDefaultUniforms]);
+  Object.entries(n).forEach(([r, f]) => {
+    const a = r.startsWith("u_") ? r : `u_${r}`;
+    o.push(d(a, f.type, f.value));
+  });
+  const u = { [i]: o };
+  return e.current = { key: s, result: u }, u;
+};
 export {
-  n as useUniformUpdaters
+  p as useUniformUpdaters
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "micugl",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Micu gl - Small React shader library",
   "type": "module",
   "main": "dist/index.js",
@@ -27,6 +27,7 @@
     "dist"
   ],
   "scripts": {
+    "dev": "vite --config demo/vite.config.ts",
     "build": "vite build",
     "test": "vitest run",
     "lint": "eslint . --ext .ts,.tsx",
@@ -39,8 +40,11 @@
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@types/node": "^22.14.0",
-    "@types/react": "^18.0.0 || ^19.0.0",
-    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "ajv": "^8",
     "eslint": "^9.25.0",
     "eslint-plugin-react-dom": "^1.48.4",