micugl 0.0.3

package/README.md

@@ -0,0 +1,3 @@
+# micugl
+
+Lightweight React shader library

package/dist/BasePingPongShaderComponent-BvRm7-g5.js

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

package/dist/BasePingPongShaderComponent-FY62Kl02.mjs

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

package/dist/BaseShaderComponent-BSBIvn4B.js

@@ -0,0 +1 @@
+"use strict";const n=require("react"),S=require("react/jsx-runtime"),h=require("./useUniformUpdaters-DGX0mf9g.js"),F={},U="",D={},I={},b=({programConfigs:i,renderCallback:l,renderOptions:s=F,className:d=U,style:f=D,uniformUpdaters:R=I,useFastPath:g=!1,useDevicePixelRatio:A=!0})=>{const E=n.useRef(null),a=n.useRef(null),T=n.useRef(null),u=n.useRef(null),L=n.useRef(0),p=n.useRef(t=>{const e=a.current,r=T.current;if(!e||!r)return;const m=t-L.current,c=e.context;if(g)e.fastRender(r,m,s.clear),c.drawArrays(c.TRIANGLE_STRIP,0,4);else{const o=e.resources.get(r);if(!o)return;e.prepareRender(r,s),_(m,o,c)}u.current=requestAnimationFrame(p.current)}),_=n.useCallback((t,e,r)=>{l(t,e,r)},[l]);n.useEffect(()=>{p.current=t=>{const e=a.current,r=T.current;if(!e||!r)return;const m=t-L.current,c=e.context;if(g)e.fastRender(r,m,s.clear),c.drawArrays(c.TRIANGLE_STRIP,0,4);else{const o=e.resources.get(r);if(!o)return;e.prepareRender(r,s),_(m,o,c)}u.current=requestAnimationFrame(p.current)}},[s,g,_]);const w=n.useCallback(()=>{if(!E.current||!a.current)return;const t=window.innerWidth,e=window.innerHeight;a.current.setSize(t,e,A)},[A]);return n.useEffect(()=>{if(E.current)try{const t=new h.WebGLManager(E.current);a.current=t,w();const e=Object.entries(i);if(e.length>0){const[r,m]=e[0];t.createProgram(r,m),t.createBuffer(r,"a_position",new Float32Array([-1,-1,1,-1,-1,1,1,1])),T.current=r,t.setAttributeOnce(r,"a_position",{name:"a_position",size:2,type:"FLOAT",normalized:!1,stride:0,offset:0});const c=R[r];c&&c.forEach(o=>{t.registerUniformUpdater(r,o.name,o.type,o.updateFn)})}return L.current=performance.now(),u.current=requestAnimationFrame(p.current),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w),u.current&&cancelAnimationFrame(u.current),a.current&&a.current.destroyAll()}}catch(t){return console.error("Failed to initialize WebGL:",t),()=>{}}},[i,R,w]),S.jsx("canvas",{ref:E,className:d,style:f})},k=()=>{const[i,l]=n.useState(!1);return n.useEffect(()=>{const s=()=>{const f=document.documentElement.classList.contains("dark");l(f)};s();const d=new MutationObserver(f=>{f.forEach(R=>{R.attributeName==="class"&&s()})});return d.observe(document.documentElement,{attributes:!0}),()=>{d.disconnect()}},[]),i},N={clear:!0,clearColor:[0,0,0,1]},M=({programId:i,shaderConfig:l,uniforms:s,className:d="",style:f,renderOptions:R=N})=>{const g={[i]:l},A=h.useUniformUpdaters(i,s),E=(a,T,u)=>{u.drawArrays(u.TRIANGLE_STRIP,0,4)};return S.jsx(b,{programConfigs:g,renderCallback:E,uniformUpdaters:A,className:d,style:f,useFastPath:!0,renderOptions:R})};exports.BaseShaderComponent=M;exports.ShaderEngine=b;exports.useDarkMode=k;

package/dist/BaseShaderComponent-Be_evz2F.mjs

@@ -0,0 +1,151 @@
+import { useRef as E, useCallback as b, useEffect as S, useState as h } from "react";
+import { jsx as F } from "react/jsx-runtime";
+import { W as I, u as D } from "./useUniformUpdaters-D5WtqZpp.mjs";
+const U = {}, k = "", N = {}, v = {}, y = ({
+  programConfigs: i,
+  renderCallback: f,
+  renderOptions: n = U,
+  className: l = k,
+  style: u = N,
+  uniformUpdaters: d = v,
+  useFastPath: R = !1,
+  useDevicePixelRatio: A = !0
+}) => {
+  const g = E(null), c = E(null), p = E(null), a = E(null), L = E(0), T = E((t) => {
+    const e = c.current, r = p.current;
+    if (!e || !r) return;
+    const m = t - L.current, s = e.context;
+    if (R)
+      e.fastRender(r, m, n.clear), s.drawArrays(s.TRIANGLE_STRIP, 0, 4);
+    else {
+      const o = e.resources.get(r);
+      if (!o) return;
+      e.prepareRender(r, n), _(m, o, s);
+    }
+    a.current = requestAnimationFrame(T.current);
+  }), _ = b((t, e, r) => {
+    f(t, e, r);
+  }, [f]);
+  S(() => {
+    T.current = (t) => {
+      const e = c.current, r = p.current;
+      if (!e || !r) return;
+      const m = t - L.current, s = e.context;
+      if (R)
+        e.fastRender(r, m, n.clear), s.drawArrays(s.TRIANGLE_STRIP, 0, 4);
+      else {
+        const o = e.resources.get(r);
+        if (!o) return;
+        e.prepareRender(r, n), _(m, o, s);
+      }
+      a.current = requestAnimationFrame(T.current);
+    };
+  }, [n, R, _]);
+  const w = b(() => {
+    if (!g.current || !c.current) return;
+    const t = window.innerWidth, e = window.innerHeight;
+    c.current.setSize(t, e, A);
+  }, [A]);
+  return S(() => {
+    if (g.current)
+      try {
+        const t = new I(g.current);
+        c.current = t, w();
+        const e = Object.entries(i);
+        if (e.length > 0) {
+          const [r, m] = e[0];
+          t.createProgram(r, m), t.createBuffer(
+            r,
+            "a_position",
+            new Float32Array([
+              -1,
+              -1,
+              1,
+              -1,
+              -1,
+              1,
+              1,
+              1
+            ])
+          ), p.current = r, t.setAttributeOnce(r, "a_position", {
+            name: "a_position",
+            size: 2,
+            type: "FLOAT",
+            normalized: !1,
+            stride: 0,
+            offset: 0
+          });
+          const s = d[r];
+          s && s.forEach((o) => {
+            t.registerUniformUpdater(
+              r,
+              o.name,
+              o.type,
+              o.updateFn
+            );
+          });
+        }
+        return L.current = performance.now(), a.current = requestAnimationFrame(T.current), window.addEventListener("resize", w), () => {
+          window.removeEventListener("resize", w), a.current && cancelAnimationFrame(a.current), c.current && c.current.destroyAll();
+        };
+      } catch (t) {
+        return console.error("Failed to initialize WebGL:", t), () => {
+        };
+      }
+  }, [i, d, w]), /* @__PURE__ */ F(
+    "canvas",
+    {
+      ref: g,
+      className: l,
+      style: u
+    }
+  );
+}, G = () => {
+  const [i, f] = h(!1);
+  return S(() => {
+    const n = () => {
+      const u = document.documentElement.classList.contains("dark");
+      f(u);
+    };
+    n();
+    const l = new MutationObserver((u) => {
+      u.forEach((d) => {
+        d.attributeName === "class" && n();
+      });
+    });
+    return l.observe(document.documentElement, { attributes: !0 }), () => {
+      l.disconnect();
+    };
+  }, []), i;
+}, M = {
+  clear: !0,
+  clearColor: [0, 0, 0, 1]
+}, O = ({
+  programId: i,
+  shaderConfig: f,
+  uniforms: n,
+  className: l = "",
+  style: u,
+  renderOptions: d = M
+}) => {
+  const R = { [i]: f }, A = D(i, n);
+  return /* @__PURE__ */ F(
+    y,
+    {
+      programConfigs: R,
+      renderCallback: (c, p, a) => {
+        a.drawArrays(a.TRIANGLE_STRIP, 0, 4);
+      },
+      uniformUpdaters: A,
+      className: l,
+      style: u,
+      useFastPath: !0,
+      renderOptions: d
+    }
+  );
+};
+export {
+  O as B,
+  y as S,
+  G as u
+};

package/dist/MarbleScene-B1gMFEHc.js

@@ -0,0 +1,129 @@
+"use strict";const C=require("react/jsx-runtime"),y=require("./useUniformUpdaters-DGX0mf9g.js"),a=require("./BaseShaderComponent-BSBIvn4B.js"),o=`
+  attribute vec2 a_position;
+  varying vec2 v_texCoord;
+
+  void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_texCoord = a_position * 0.5 + 0.5;
+  }
+`,i=`
+precision highp float;
+  
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_marbleScale;
+uniform float u_turbulence;
+uniform float u_swirl;
+uniform vec3 u_colorStart;
+uniform vec3 u_colorEnd;
+uniform vec3 u_veinColor;
+uniform float u_veinFrequency;
+uniform float u_veinWidth;
+uniform float u_tileScale;
+  
+varying vec2 v_texCoord;
+  
+float hash(float n) {
+  return fract(sin(n) * 43758.5453123);
+}
+  
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);
+}
+  
+float noise(vec2 x) {
+  vec2 i = floor(x);
+  vec2 f = fract(x);
+  
+  float a = hash(i);
+  float b = hash(i + vec2(1.0, 0.0));
+  float c = hash(i + vec2(0.0, 1.0));
+  float d = hash(i + vec2(1.0, 1.0));
+  
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  
+  return clamp(mix(mix(a, b, u.x), mix(c, d, u.x), u.y), 0.0, 1.0);
+}
+  
+float fbm(vec2 p, int octaves) {
+  float value = 0.0;
+  float amplitude = 0.5;
+  float frequency = 1.0;
+  float maxValue = 0.0;
+  
+  for (int i = 0; i < 10; i++) {
+    if (i >= octaves) break;
+    value += amplitude * noise(p * frequency);
+    maxValue += amplitude;
+    frequency *= 2.0;
+    amplitude *= 0.5;
+  }
+  
+  return value / maxValue;
+}
+  
+vec2 swirl(vec2 p, float strength) {
+  float theta = fbm(p, 3) * strength;
+  float c = cos(theta);
+  float s = sin(theta);
+  return vec2(
+    p.x * c - p.y * s,
+    p.x * s + p.y * c
+  );
+}
+
+vec2 applyTilePixelation(vec2 uv, float tileScale) {
+  vec2 cell = floor(uv * tileScale);
+  float cellHash = (1.3 * fbm(u_time * 0.00002 * vec2(pow(pow(cell.x * cell.y, 2.0), 0.5), 2.0) + cell, 1) + 0.8 * hash(cell)) * 0.5;
+  float hashValue = cellHash * 3.0;
+  float pixelSize = 1.0;
+
+  if (hashValue < 1.0) pixelSize = 32.0;
+    else if (hashValue < 1.3) pixelSize = 16.0;
+    else if (hashValue < 1.8) pixelSize = 64.0;
+    else if (hashValue < 1.85) pixelSize = 16.0;
+    else if (hashValue < 2.2) pixelSize = 64.0;
+    else if (hashValue < 2.3) pixelSize = 16.0;
+    else if (hashValue < 2.6) pixelSize = 32.0;
+    else pixelSize = 128.0;
+
+  return floor(uv * pixelSize) / pixelSize;
+}
+  
+void main() {
+  vec2 uv = v_texCoord * 2.0 - 1.0;
+  uv = uv * u_resolution / min(u_resolution.x, u_resolution.y);
+  
+  vec2 pixelatedUv = applyTilePixelation(uv, u_tileScale);
+  
+  float time = u_time * 0.25;
+  
+  vec2 swirlUv = swirl(pixelatedUv + vec2(time * 0.0005, time * 0.00083), max(0.0, min(10.0, u_swirl)));
+  
+  float baseNoise = fbm(swirlUv * max(0.1, u_marbleScale) + vec2(time * 0.1, time * 0.13), 5);
+  
+  float turbulenceAmount = max(0.0, min(1.0, u_turbulence));
+  float turbulence = turbulenceAmount * fbm(swirlUv * max(0.1, u_marbleScale) * 2.0 + vec2(time * -0.15), 2);
+  baseNoise = clamp(baseNoise + turbulence, 0.0, 1.0);
+  
+  float veinFreq = max(0.1, u_veinFrequency);
+  float veinW = max(0.1, min(5.0, u_veinWidth));
+  float veins = abs(sin(baseNoise * veinFreq * 3.14159));
+  veins = pow(veins, veinW);
+  veins = clamp(veins, 0.0, 1.0);
+  
+  vec3 baseColor = mix(u_colorStart, u_colorEnd, baseNoise);
+  
+  vec3 marbleColor = mix(baseColor, u_veinColor, veins);
+  
+  float highlight = pow(fbm(swirlUv * max(0.1, u_marbleScale) * 4.0, 2), 3.0) * 0.2;
+ 
+  marbleColor = floor(marbleColor * 32.0) / 32.0;
+  marbleColor = mix(marbleColor, u_veinColor, veins * 0.5);
+  marbleColor = marbleColor + 0.0425;
+  marbleColor = clamp(marbleColor, 0.0, 1.0);
+
+  marbleColor = mix(marbleColor, u_veinColor, 0.7);
+  gl_FragColor = vec4(marbleColor, 1.0);
+}
+`,g=[.8,.8,.9],w=[.3,.3,.6],V=[.1,.1,.3],q=[.2,.2,.3],O=[.1,.1,.2],R=[.05,.05,.1],z=({marbleScale:t=3,tileScale:r=1,turbulence:u=.5,swirl:n=6,veinFrequency:c=6,veinWidth:s=2,colorStart:v=g,colorEnd:f=w,veinColor:m=V,colorStartDark:h=q,colorEndDark:p=O,veinColorDark:_=R,className:b="",style:x})=>{const e=a.useDarkMode(),l=S=>()=>new Float32Array(S),d=y.createShaderConfig({vertexShader:o,fragmentShader:i,uniformNames:{u_marbleScale:"float",u_tileScale:"float",u_turbulence:"float",u_swirl:"float",u_colorStart:"vec3",u_colorEnd:"vec3",u_veinColor:"vec3",u_veinFrequency:"float",u_veinWidth:"float"}});return C.jsx(a.BaseShaderComponent,{programId:"marble-shader",shaderConfig:d,className:b,style:x,uniforms:{marbleScale:{value:t,type:"float"},tileScale:{value:r,type:"float"},turbulence:{value:u,type:"float"},swirl:{value:n,type:"float"},veinFrequency:{value:c,type:"float"},veinWidth:{value:s,type:"float"},colorStart:{type:"vec3",value:l(e?h:v)},colorEnd:{type:"vec3",value:l(e?p:f)},veinColor:{type:"vec3",value:l(e?_:m)}}})};exports.Marble=z;exports.marbleFragmentShader=i;exports.marbleVertexShader=o;