micugl 0.0.13 → 0.0.16

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

package/dist/core/managers/WebGLManager.mjs

@@ -1,15 +1,15 @@
-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 b = Object.defineProperty;
+var A = (d, e, o) => e in d ? b(d, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : d[e] = o;
+var w = (d, e, o) => A(d, typeof e != "symbol" ? e + "" : e, o);
 import { FBOManager as E } from "./FBOManager.mjs";
-class A {
+class x {
   constructor(e, o) {
-    m(this, "gl");
-    m(this, "fboManager");
-    m(this, "resources", /* @__PURE__ */ new Map());
-    m(this, "compileCache", /* @__PURE__ */ new Map());
-    m(this, "uniformUpdateFns", /* @__PURE__ */ new Map());
-    m(this, "extensions", /* @__PURE__ */ new Map());
+    w(this, "gl");
+    w(this, "fboManager");
+    w(this, "resources", /* @__PURE__ */ new Map());
+    w(this, "compileCache", /* @__PURE__ */ new Map());
+    w(this, "uniformUpdateFns", /* @__PURE__ */ new Map());
+    w(this, "extensions", /* @__PURE__ */ new Map());
     const t = {
       alpha: !1,
       depth: !1,
@@ -29,27 +29,27 @@ class A {
     return this.extensions.set(e, o), o;
   }
   createProgram(e, o) {
-    const { vertexShader: t, fragmentShader: r, uniforms: s, attributes: i } = o, n = this.gl, h = this.getOrCompileShader("vertex:" + t, n.VERTEX_SHADER, t), l = this.getOrCompileShader("fragment:" + r, n.FRAGMENT_SHADER, r), f = n.createProgram();
-    if (!f)
+    const { vertexShader: t, fragmentShader: r, uniforms: s, attributes: f } = o, n = this.gl, u = this.getOrCompileShader("vertex:" + t, n.VERTEX_SHADER, t), m = this.getOrCompileShader("fragment:" + r, n.FRAGMENT_SHADER, r), i = n.createProgram();
+    if (!i)
       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}`);
+    if (n.attachShader(i, u), n.attachShader(i, m), n.linkProgram(i), !n.getProgramParameter(i, n.LINK_STATUS)) {
+      const a = n.getProgramInfoLog(i);
+      throw n.deleteProgram(i), new Error(`Could not link shader program: ${a}`);
     }
-    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,
+    const l = {};
+    for (const a of s)
+      l[a.name] = n.getUniformLocation(i, a.name);
+    const h = {};
+    if (f)
+      for (const a of f)
+        h[a.name] = n.getAttribLocation(i, a.name);
+    const c = {
+      program: i,
+      uniforms: l,
+      attributes: h,
       buffers: {}
     };
-    return this.resources.set(e, a), this.uniformUpdateFns.set(e, /* @__PURE__ */ new Map()), a;
+    return this.resources.set(e, c), this.uniformUpdateFns.set(e, /* @__PURE__ */ new Map()), c;
   }
   getOrCompileShader(e, o, t) {
     if (this.compileCache.has(e)) {
@@ -74,110 +74,137 @@ class A {
     const r = this.gl, s = this.resources.get(e);
     if (!s)
       throw new Error(`Program with id ${e} not found`);
-    const i = r.createBuffer();
-    if (!i)
+    const f = r.createBuffer();
+    if (!f)
       throw new Error("Failed to create buffer");
-    return r.bindBuffer(r.ARRAY_BUFFER, i), r.bufferData(r.ARRAY_BUFFER, t, r.STATIC_DRAW), s.buffers[o] = { buffer: i, data: t }, i;
+    return r.bindBuffer(r.ARRAY_BUFFER, f), r.bufferData(r.ARRAY_BUFFER, t, r.STATIC_DRAW), s.buffers[o] = { buffer: f, data: t }, f;
   }
   updateBuffer(e, o, t) {
     const r = this.gl, s = this.resources.get(e);
     if (!s)
       throw new Error(`Program with id ${e} not found`);
-    const i = s.buffers[o];
-    if (!i)
+    const f = s.buffers[o];
+    if (!f)
       throw new Error(`Buffer for attribute ${o} not found`);
-    r.bindBuffer(r.ARRAY_BUFFER, i.buffer), r.bufferData(r.ARRAY_BUFFER, t, r.STATIC_DRAW), i.data = t;
+    r.bindBuffer(r.ARRAY_BUFFER, f.buffer), r.bufferData(r.ARRAY_BUFFER, t, r.STATIC_DRAW), f.data = t;
   }
   registerUniformUpdater(e, o, t, r) {
     const s = this.resources.get(e);
     if (!s)
       throw new Error(`Program with id ${e} not found`);
-    const i = this.uniformUpdateFns.get(e);
-    if (!i)
+    const f = this.uniformUpdateFns.get(e);
+    if (!f)
       throw new Error(`Program uniforms for id ${e} not found`);
     const n = s.uniforms[o];
     if (n === null)
       return;
-    const h = this.gl;
-    let l;
+    const u = this.gl;
+    let m;
     switch (t) {
       case "int":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniform1i(n, a), a;
+        m = (i, l, h) => {
+          const c = r(i, l, h);
+          return u.uniform1i(n, c), c;
         };
         break;
       case "float":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniform1f(n, a), a;
+        m = (i, l, h) => {
+          const c = r(i, l, h);
+          return u.uniform1f(n, c), c;
         };
         break;
       case "sampler2D":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniform1i(n, a), a;
+        m = (i, l, h) => {
+          const c = r(i, l, h);
+          return u.uniform1i(n, c), c;
         };
         break;
-      case "vec2":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniform2fv(n, a), a;
+      case "vec2": {
+        const i = new Float32Array(2);
+        m = (l, h, c) => {
+          const a = r(l, h, c);
+          return Array.isArray(a) ? (i[0] = a[0], i[1] = a[1], u.uniform2fv(n, i)) : u.uniform2fv(n, a), i;
         };
         break;
-      case "vec3":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniform3fv(n, a), a;
+      }
+      case "vec3": {
+        const i = new Float32Array(3);
+        m = (l, h, c) => {
+          const a = r(l, h, c);
+          return Array.isArray(a) ? (i[0] = a[0], i[1] = a[1], i[2] = a[2], u.uniform3fv(n, i)) : u.uniform3fv(n, a), i;
         };
         break;
-      case "vec4":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniform4fv(n, a), a;
+      }
+      case "vec4": {
+        const i = new Float32Array(4);
+        m = (l, h, c) => {
+          const a = r(l, h, c);
+          return Array.isArray(a) ? (i[0] = a[0], i[1] = a[1], i[2] = a[2], i[3] = a[3], u.uniform4fv(n, i)) : u.uniform4fv(n, a), i;
         };
         break;
-      case "mat2":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniformMatrix2fv(n, !1, a), a;
+      }
+      case "mat2": {
+        const i = new Float32Array(4);
+        m = (l, h, c) => {
+          const a = r(l, h, c);
+          if (Array.isArray(a)) {
+            for (let g = 0; g < 4; g++) i[g] = a[g];
+            u.uniformMatrix2fv(n, !1, i);
+          } else
+            u.uniformMatrix2fv(n, !1, a);
+          return i;
         };
         break;
-      case "mat3":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniformMatrix3fv(n, !1, a), a;
+      }
+      case "mat3": {
+        const i = new Float32Array(9);
+        m = (l, h, c) => {
+          const a = r(l, h, c);
+          if (Array.isArray(a)) {
+            for (let g = 0; g < 9; g++) i[g] = a[g];
+            u.uniformMatrix3fv(n, !1, i);
+          } else
+            u.uniformMatrix3fv(n, !1, a);
+          return i;
         };
         break;
-      case "mat4":
-        l = (f, c, u) => {
-          const a = r(f, c, u);
-          return h.uniformMatrix4fv(n, !1, a), a;
+      }
+      case "mat4": {
+        const i = new Float32Array(16);
+        m = (l, h, c) => {
+          const a = r(l, h, c);
+          if (Array.isArray(a)) {
+            for (let g = 0; g < 16; g++) i[g] = a[g];
+            u.uniformMatrix4fv(n, !1, i);
+          } else
+            u.uniformMatrix4fv(n, !1, a);
+          return i;
         };
         break;
+      }
       default:
         throw new Error(`Unsupported uniform type: ${t}`);
     }
-    i.set(o, l);
+    f.set(o, m);
   }
   updateUniforms(e, o) {
     const t = this.uniformUpdateFns.get(e);
     if (!t)
       return;
-    const r = this.gl.canvas, s = r.width, i = r.height;
+    const r = this.gl.canvas, s = r.width, f = r.height;
     t.forEach((n) => {
-      n(o, s, i);
+      n(o, s, f);
     });
   }
-  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, f = 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 = `${f}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);
-    if (!i)
+    const { clear: t = !0, clearColor: r = [0, 0, 0, 1] } = o, s = this.gl, f = this.resources.get(e);
+    if (!f)
       throw new Error(`Program with id ${e} not found`);
-    s.useProgram(i.program), t && (s.clearColor(...r), s.clear(s.COLOR_BUFFER_BIT));
+    s.useProgram(f.program), t && (s.clearColor(...r), s.clear(s.COLOR_BUFFER_BIT));
   }
   fastRender(e, o, t = !0) {
     const r = this.gl, s = this.resources.get(e);
@@ -186,12 +213,12 @@ class A {
     r.useProgram(s.program), t && r.clear(r.COLOR_BUFFER_BIT), this.updateUniforms(e, o);
   }
   setUniform(e, o, t, r) {
-    const s = this.gl, i = this.resources.get(e);
-    if (!i)
+    const s = this.gl, f = this.resources.get(e);
+    if (!f)
       throw new Error(`Program with id ${e} not found`);
-    const n = i.uniforms[o];
+    const n = f.uniforms[o];
     if (n !== null)
-      switch (s.useProgram(i.program), r) {
+      switch (s.useProgram(f.program), r) {
         case "float":
           s.uniform1f(n, t);
           break;
@@ -227,27 +254,27 @@ class A {
     const r = this.gl, s = this.resources.get(e);
     if (!s)
       throw new Error(`Program with id ${e} not found`);
-    const i = s.attributes[o];
-    if (i === -1) {
+    const f = s.attributes[o];
+    if (f === -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 (r.bindBuffer(r.ARRAY_BUFFER, n.buffer), r.enableVertexAttribArray(i), r.vertexAttribPointer(
-      i,
+    if (r.bindBuffer(r.ARRAY_BUFFER, n.buffer), r.enableVertexAttribArray(f), r.vertexAttribPointer(
+      f,
       t.size,
       r[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);
+      const u = this.getExtension("ANGLE_instanced_arrays");
+      if (u != null && u.vertexAttribDivisorANGLE)
+        u.vertexAttribDivisorANGLE(f, 1);
       else if (r.vertexAttribDivisor)
-        r.vertexAttribDivisor(i, 1);
+        r.vertexAttribDivisor(f, 1);
       else
         throw new Error("Instanced rendering not supported");
     }
@@ -277,5 +304,5 @@ class A {
   }
 }
 export {
-  A as WebGLManager
+  x as WebGLManager
 };

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"),s=require("react"),h=require("../../../core/managers/WebGLManager.js"),I={},v="",M={},U={},q=({programConfigs:A,renderCallback:T,renderOptions:o=I,className:_=v,style:y=M,width:w,height:L,uniformUpdaters:f=U,useFastPath:g=!1,useDevicePixelRatio:F=!0,pixelRatio:S})=>{const l=s.useRef(null),a=s.useRef(null),d=s.useRef(null),i=s.useRef(null),E=s.useRef(0),m=s.useRef(n=>{const e=a.current,r=d.current;if(!e||!r)return;const t=n-E.current,c=e.context;if(g)e.fastRender(r,t,o.clear),c.drawArrays(c.TRIANGLE_STRIP,0,4);else{const u=e.resources.get(r);if(!u)return;e.prepareRender(r,o),p(t,u,c)}i.current=requestAnimationFrame(m.current)}),p=s.useCallback((n,e,r)=>{T(n,e,r)},[T]);s.useEffect(()=>{m.current=n=>{const e=a.current,r=d.current;if(!e||!r)return;const t=n-E.current,c=e.context;if(g)e.fastRender(r,t,o.clear),c.drawArrays(c.TRIANGLE_STRIP,0,4);else{const u=e.resources.get(r);if(!u)return;e.prepareRender(r,o),p(t,u,c)}i.current=requestAnimationFrame(m.current)}},[o,g,p]);const R=s.useCallback(()=>{if(!l.current||!a.current)return;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);a.current.setSize(t,c,n,e)},[F,S,w,L]);return s.useEffect(()=>{if(!l.current)return;const n=new h.WebGLManager(l.current);a.current=n,R();const[[e,r]]=Object.entries(A);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}),d.current=e;const t=f[e];return t&&t.forEach(c=>{n.registerUniformUpdater(e,c.name,c.type,c.updateFn)}),E.current=performance.now(),i.current=requestAnimationFrame(m.current),window.addEventListener("resize",R),()=>{window.removeEventListener("resize",R),i.current&&cancelAnimationFrame(i.current),n.destroyAll()}},[A,R,f]),s.useEffect(()=>{const n=a.current,e=d.current;if(!n||!e)return;const r=f[e];r&&r.forEach(t=>{n.registerUniformUpdater(e,t.name,t.type,t.updateFn)})},[f]),b.jsx("canvas",{ref:l,className:_,style:y})};exports.ShaderEngine=q;

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

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

@@ -1,6 +1,6 @@
 {
   "name": "micugl",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "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",