micugl 0.0.4 → 0.0.8

package/README.md

@@ -1,3 +1,100 @@
 # micugl
 
-Lightweight React shader library
+miccull's shader library for simple React shaders. 
+
+Includes a WebGL manager, core utilities, and two React components for single‑pass and ping‑pong shaders.
+
+## Install
+
+```bash
+npm install micugl
+# or
+bun add micugl
+```
+
+## Getting Started
+
+```tsx
+import React from "react";
+import { BaseShaderComponent, createShaderConfig } from "micugl";
+
+import vertexShader from "./shaders.vert";
+import fragmentShader from "./shaders.frag";
+
+const shaderConfig = createShaderConfig({
+  vertexShader,
+  fragmentShader,
+  uniformNames: {
+    u_myColor: "vec3",
+  },
+});
+
+export default function App() {
+  return (
+    <BaseShaderComponent
+      programId="my-shader"
+      shaderConfig={shaderConfig}
+      uniforms={{
+        time: { type: "float", value: (t) => t * 0.001 },
+        resolution: {
+          type: "vec2",
+          value: () => [window.innerWidth, window.innerHeight],
+        },
+        myColor: { type: "vec3", value: [1, 0, 0] },
+      }}
+      style={{ width: "100vw", height: "100vh" }}
+    />
+  );
+}
+```
+
+## Core
+
+- **WebGLManager**  
+  Low‑level wrapper around WebGLRenderingContext.
+
+  - `new WebGLManager(canvas, options?)`
+  - `createProgram(id, config)` → compile/link shaders
+  - `createBuffer(programId, attribute, data)`
+  - `setUniform(programId, name, value, type)`
+  - `prepareRender(programId, { clear?, clearColor? })`
+  - `drawArrays(...)`, `drawElements(...)`
+  - `fbo: FBOManager` for ping‑pong framebuffers
+
+- **`createShaderConfig`**
+  - Builds a ShaderProgramConfig with defaults (`u_time`, `u_resolution`).
+  - `createShaderConfig({ vertexShader, fragmentShader, uniformNames?, attributeConfigs? })`
+
+- **Utilities**
+  - `FBOManager` for multi‑render targets
+  - `Passes` / `Postprocessing` to sequence render passes
+
+## React Components
+
+### BaseShaderComponent
+
+| Prop                | Type                                        | Notes                         |
+| ------------------- | ------------------------------------------- | ----------------------------- |
+| programId           | string                                      | identifier for the shader     |
+| shaderConfig        | ShaderProgramConfig                         | from createShaderConfig       |
+| uniforms            | { [name]: { type: UniformType; value } }    | static value or updater fn    |
+| renderOptions       | { clear?: boolean; clearColor?: [r,g,b,a] } | default clears to black       |
+| useFastPath         | boolean                                     | skip callback for simple draw |
+| useDevicePixelRatio | boolean                                     | adapt canvas to DPR           |
+
+### BasePingPongShaderComponent
+
+| Prop                  | Type                                            | Notes                               |
+| --------------------- | ----------------------------------------------- | ----------------------------------- |
+| programId             | string                                          | first‑pass shader                   |
+| secondaryShaderConfig | ShaderProgramConfig                             | ping‑pong second pass               |
+| iterations            | number (default 1)                              | update/display cycles               |
+| uniforms              | { [name]: { type; value } }                     | for primary pass                    |
+| secondaryUniforms     | { [name]: { type; value } }                     | for secondary pass                  |
+| framebufferOptions    | { width; height; textureCount; textureOptions } | default full‑canvas two‑texture FBO |
+
+### Hooks
+
+- **useUniformUpdaters(programId, uniforms)** → React memoized uniform updaters
+- **usePingPongPasses(options)** → { passes, framebuffers } for engine
+- **useDarkMode()** → boolean dark‑mode flag

package/dist/MarbleScene.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+declare const Marble: ({ marbleScale, tileScale, turbulence, swirl, veinFrequency, veinWidth, colorStart, colorEnd, veinColor, colorStartDark, colorEndDark, veinColorDark, className, style }: MarbleProps) => JSX.Element;
+export { Marble }
+export default Marble;
+
+export declare interface MarbleProps {
+    marbleScale?: number;
+    tileScale?: number;
+    turbulence?: number;
+    swirl?: number;
+    colorStart?: Vec3;
+    colorEnd?: Vec3;
+    veinColor?: Vec3;
+    colorStartDark?: Vec3;
+    colorEndDark?: Vec3;
+    veinColorDark?: Vec3;
+    veinFrequency?: number;
+    veinWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare type Vec3 = [number, number, number];
+
+export { }

package/dist/RippleScene.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+declare const Ripple: ({ damping, mouseForce, color1, color2, iterations, className, style }: RippleProps) => JSX.Element;
+export { Ripple }
+export default Ripple;
+
+export declare interface RippleProps {
+    damping?: number;
+    mouseForce?: number;
+    color1?: Vec3;
+    color2?: Vec3;
+    iterations?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare type Vec3 = [number, number, number];
+
+export { }

package/dist/examples/Marble/MarbleScene.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+type Vec3 = [number, number, number];
+export interface MarbleProps {
+    marbleScale?: number;
+    tileScale?: number;
+    turbulence?: number;
+    swirl?: number;
+    colorStart?: Vec3;
+    colorEnd?: Vec3;
+    veinColor?: Vec3;
+    colorStartDark?: Vec3;
+    colorEndDark?: Vec3;
+    veinColorDark?: Vec3;
+    veinFrequency?: number;
+    veinWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Marble: ({ marbleScale, tileScale, turbulence, swirl, veinFrequency, veinWidth, colorStart, colorEnd, veinColor, colorStartDark, colorEndDark, veinColorDark, className, style }: MarbleProps) => import("react/jsx-runtime").JSX.Element;
+export default Marble;

package/dist/examples/Marble/MarbleScene.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react/jsx-runtime"),C=require("../../src/core/lib/createShaderConfig.js"),r=require("../../src/core/lib/vectorUtils.js"),O=require("../../src/react/components/base/BaseShaderComponent.js"),y=require("../../src/react/hooks/useDarkMode.js"),t=require("./marbleShaders.js"),R=[.8,.8,.9],g=[.3,.3,.6],q=[.1,.1,.3],D=[.2,.2,.3],M=[.1,.1,.2],E=[.05,.05,.1],a=({marbleScale:o=3,tileScale:l=1,turbulence:u=.5,swirl:n=6,veinFrequency:c=6,veinWidth:s=2,colorStart:i=R,colorEnd:v=g,veinColor:d=q,colorStartDark:_=D,colorEndDark:f=M,veinColorDark:S=E,className:m="",style:p})=>{const e=y.useDarkMode(),b=C.createShaderConfig({vertexShader:t.marbleVertexShader,fragmentShader:t.marbleFragmentShader,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 h.jsx(O.BaseShaderComponent,{programId:"marble-shader",shaderConfig:b,className:m,style:p,uniforms:{marbleScale:{value:o,type:"float"},tileScale:{value:l,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:r.vec3(e?_:i)},colorEnd:{type:"vec3",value:r.vec3(e?f:v)},veinColor:{type:"vec3",value:r.vec3(e?S:d)}}})};exports.Marble=a;exports.default=a;

package/dist/examples/Marble/MarbleScene.mjs

@@ -0,0 +1,71 @@
+import { jsx as S } from "react/jsx-runtime";
+import { createShaderConfig as O } from "../../src/core/lib/createShaderConfig.mjs";
+import { vec3 as o } from "../../src/core/lib/vectorUtils.mjs";
+import { BaseShaderComponent as y } from "../../src/react/components/base/BaseShaderComponent.mjs";
+import { useDarkMode as C } from "../../src/react/hooks/useDarkMode.mjs";
+import { marbleVertexShader as R, marbleFragmentShader as h } from "./marbleShaders.mjs";
+const b = [0.8, 0.8, 0.9], D = [0.3, 0.3, 0.6], E = [0.1, 0.1, 0.3], L = [0.2, 0.2, 0.3], g = [0.1, 0.1, 0.2], A = [0.05, 0.05, 0.1], M = ({
+  marbleScale: t = 3,
+  tileScale: r = 1,
+  turbulence: a = 0.5,
+  swirl: l = 6,
+  veinFrequency: n = 6,
+  veinWidth: c = 2,
+  colorStart: u = b,
+  colorEnd: f = D,
+  veinColor: m = E,
+  colorStartDark: i = L,
+  colorEndDark: v = g,
+  veinColorDark: s = A,
+  className: p = "",
+  style: _
+}) => {
+  const e = C(), d = O({
+    vertexShader: R,
+    fragmentShader: h,
+    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 /* @__PURE__ */ S(
+    y,
+    {
+      programId: "marble-shader",
+      shaderConfig: d,
+      className: p,
+      style: _,
+      uniforms: {
+        marbleScale: { value: t, type: "float" },
+        tileScale: { value: r, type: "float" },
+        turbulence: { value: a, type: "float" },
+        swirl: { value: l, type: "float" },
+        veinFrequency: { value: n, type: "float" },
+        veinWidth: { value: c, type: "float" },
+        colorStart: {
+          type: "vec3",
+          value: o(e ? i : u)
+        },
+        colorEnd: {
+          type: "vec3",
+          value: o(e ? v : f)
+        },
+        veinColor: {
+          type: "vec3",
+          value: o(e ? s : m)
+        }
+      }
+    }
+  );
+};
+export {
+  M as Marble,
+  M as default
+};

package/dist/examples/Marble/marbleShaders.d.ts

@@ -0,0 +1,2 @@
+export declare const marbleVertexShader = "\n  attribute vec2 a_position;\n  varying vec2 v_texCoord;\n\n  void main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n    v_texCoord = a_position * 0.5 + 0.5;\n  }\n";
+export declare const marbleFragmentShader = "\nprecision highp float;\n  \nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_marbleScale;\nuniform float u_turbulence;\nuniform float u_swirl;\nuniform vec3 u_colorStart;\nuniform vec3 u_colorEnd;\nuniform vec3 u_veinColor;\nuniform float u_veinFrequency;\nuniform float u_veinWidth;\nuniform float u_tileScale;\n  \nvarying vec2 v_texCoord;\n  \nfloat hash(float n) {\n  return fract(sin(n) * 43758.5453123);\n}\n  \nfloat hash(vec2 p) {\n  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n  \nfloat noise(vec2 x) {\n  vec2 i = floor(x);\n  vec2 f = fract(x);\n  \n  float a = hash(i);\n  float b = hash(i + vec2(1.0, 0.0));\n  float c = hash(i + vec2(0.0, 1.0));\n  float d = hash(i + vec2(1.0, 1.0));\n  \n  vec2 u = f * f * (3.0 - 2.0 * f);\n  \n  return clamp(mix(mix(a, b, u.x), mix(c, d, u.x), u.y), 0.0, 1.0);\n}\n  \nfloat fbm(vec2 p, int octaves) {\n  float value = 0.0;\n  float amplitude = 0.5;\n  float frequency = 1.0;\n  float maxValue = 0.0;\n  \n  for (int i = 0; i < 10; i++) {\n    if (i >= octaves) break;\n    value += amplitude * noise(p * frequency);\n    maxValue += amplitude;\n    frequency *= 2.0;\n    amplitude *= 0.5;\n  }\n  \n  return value / maxValue;\n}\n  \nvec2 swirl(vec2 p, float strength) {\n  float theta = fbm(p, 3) * strength;\n  float c = cos(theta);\n  float s = sin(theta);\n  return vec2(\n    p.x * c - p.y * s,\n    p.x * s + p.y * c\n  );\n}\n\nvec2 applyTilePixelation(vec2 uv, float tileScale) {\n  vec2 cell = floor(uv * tileScale);\n  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;\n  float hashValue = cellHash * 3.0;\n  float pixelSize = 1.0;\n\n  if (hashValue < 1.0) pixelSize = 32.0;\n    else if (hashValue < 1.3) pixelSize = 16.0;\n    else if (hashValue < 1.8) pixelSize = 64.0;\n    else if (hashValue < 1.85) pixelSize = 16.0;\n    else if (hashValue < 2.2) pixelSize = 64.0;\n    else if (hashValue < 2.3) pixelSize = 16.0;\n    else if (hashValue < 2.6) pixelSize = 32.0;\n    else pixelSize = 128.0;\n\n  return floor(uv * pixelSize) / pixelSize;\n}\n  \nvoid main() {\n  vec2 uv = v_texCoord * 2.0 - 1.0;\n  uv = uv * u_resolution / min(u_resolution.x, u_resolution.y);\n  \n  vec2 pixelatedUv = applyTilePixelation(uv, u_tileScale);\n  \n  float time = u_time * 0.25;\n  \n  vec2 swirlUv = swirl(pixelatedUv + vec2(time * 0.0005, time * 0.00083), max(0.0, min(10.0, u_swirl)));\n  \n  float baseNoise = fbm(swirlUv * max(0.1, u_marbleScale) + vec2(time * 0.1, time * 0.13), 5);\n  \n  float turbulenceAmount = max(0.0, min(1.0, u_turbulence));\n  float turbulence = turbulenceAmount * fbm(swirlUv * max(0.1, u_marbleScale) * 2.0 + vec2(time * -0.15), 2);\n  baseNoise = clamp(baseNoise + turbulence, 0.0, 1.0);\n  \n  float veinFreq = max(0.1, u_veinFrequency);\n  float veinW = max(0.1, min(5.0, u_veinWidth));\n  float veins = abs(sin(baseNoise * veinFreq * 3.14159));\n  veins = pow(veins, veinW);\n  veins = clamp(veins, 0.0, 1.0);\n  \n  vec3 baseColor = mix(u_colorStart, u_colorEnd, baseNoise);\n  \n  vec3 marbleColor = mix(baseColor, u_veinColor, veins);\n  \n  float highlight = pow(fbm(swirlUv * max(0.1, u_marbleScale) * 4.0, 2), 3.0) * 0.2;\n \n  marbleColor = floor(marbleColor * 32.0) / 32.0;\n  marbleColor = mix(marbleColor, u_veinColor, veins * 0.5);\n  marbleColor = marbleColor + 0.0425;\n  marbleColor = clamp(marbleColor, 0.0, 1.0);\n\n  marbleColor = mix(marbleColor, u_veinColor, 0.7);\n  gl_FragColor = vec4(marbleColor, 1.0);\n}\n";

package/dist/{MarbleScene-B1gMFEHc.js → examples/Marble/marbleShaders.js}

@@ -1,4 +1,4 @@
-"use strict";const C=require("react/jsx-runtime"),y=require("./useUniformUpdaters-DGX0mf9g.js"),a=require("./BaseShaderComponent-BSBIvn4B.js"),o=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`
   attribute vec2 a_position;
   varying vec2 v_texCoord;
 
@@ -6,7 +6,7 @@
     gl_Position = vec4(a_position, 0.0, 1.0);
     v_texCoord = a_position * 0.5 + 0.5;
   }
-`,i=`
+`,l=`
 precision highp float;
   
 uniform vec2 u_resolution;
@@ -126,4 +126,4 @@ void main() {
   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;
+`;exports.marbleFragmentShader=l;exports.marbleVertexShader=e;

package/dist/{MarbleScene-DmZt4s6L.mjs → examples/Marble/marbleShaders.mjs}

@@ -1,7 +1,4 @@
-import { jsx as b } from "react/jsx-runtime";
-import { c as S } from "./useUniformUpdaters-D5WtqZpp.mjs";
-import { u as d, B as C } from "./BaseShaderComponent-Be_evz2F.mjs";
-const y = (
+const e = (
   /* glsl */
   `
   attribute vec2 a_position;
@@ -12,7 +9,7 @@ const y = (
     v_texCoord = a_position * 0.5 + 0.5;
   }
 `
-), g = (
+), l = (
   /* glsl */
   `
 precision highp float;
@@ -135,70 +132,8 @@ void main() {
   gl_FragColor = vec4(marbleColor, 1.0);
 }
 `
-), w = [0.8, 0.8, 0.9], V = [0.3, 0.3, 0.6], O = [0.1, 0.1, 0.3], z = [0.2, 0.2, 0.3], R = [0.1, 0.1, 0.2], F = [0.05, 0.05, 0.1], E = ({
-  marbleScale: a = 3,
-  tileScale: o = 1,
-  turbulence: i = 0.5,
-  swirl: t = 6,
-  veinFrequency: r = 6,
-  veinWidth: u = 2,
-  colorStart: n = w,
-  colorEnd: c = V,
-  veinColor: s = O,
-  colorStartDark: v = z,
-  colorEndDark: f = R,
-  veinColorDark: m = F,
-  className: p = "",
-  style: _
-}) => {
-  const e = d(), l = (x) => () => new Float32Array(x), h = S({
-    vertexShader: y,
-    fragmentShader: g,
-    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 /* @__PURE__ */ b(
-    C,
-    {
-      programId: "marble-shader",
-      shaderConfig: h,
-      className: p,
-      style: _,
-      uniforms: {
-        marbleScale: { value: a, type: "float" },
-        tileScale: { value: o, type: "float" },
-        turbulence: { value: i, type: "float" },
-        swirl: { value: t, type: "float" },
-        veinFrequency: { value: r, type: "float" },
-        veinWidth: { value: u, type: "float" },
-        colorStart: {
-          type: "vec3",
-          value: l(e ? v : n)
-          // value: toF32(isDarkMode ? colorStartDark : colorStart)
-        },
-        colorEnd: {
-          type: "vec3",
-          value: l(e ? f : c)
-        },
-        veinColor: {
-          type: "vec3",
-          value: l(e ? m : s)
-        }
-      }
-    }
-  );
-};
+);
 export {
-  E as M,
-  g as a,
-  y as m
+  l as marbleFragmentShader,
+  e as marbleVertexShader
 };

package/dist/examples/Ripple/RippleScene.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+type Vec3 = [number, number, number];
+export interface RippleProps {
+    damping?: number;
+    mouseForce?: number;
+    color1?: Vec3;
+    color2?: Vec3;
+    iterations?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Ripple: ({ damping, mouseForce, color1, color2, iterations, className, style }: RippleProps) => import("react/jsx-runtime").JSX.Element;
+export default Ripple;

package/dist/examples/Ripple/RippleScene.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("react/jsx-runtime"),u=require("react"),f=require("../../src/core/lib/createShaderConfig.js"),a=require("../../src/core/lib/vectorUtils.js"),O=require("../../src/react/components/base/BasePingPongShaderComponent.js"),s=require("./rippleShaders.js"),P=[.1,.3,.1],q=[.3,.2,.4],g=({damping:S=.99,mouseForce:L=.5,color1:_=P,color2:C=q,iterations:x=2,className:E="",style:R})=>{const c=u.useRef([.5,.5]),n=u.useRef(!1),y=f.createShaderConfig({vertexShader:s.rippleVertexShader,fragmentShader:s.rippleSimulationShader,uniformNames:{u_texture0:"sampler2D",u_mouse:"vec2",u_mouseForce:"float",u_damping:"float"}}),w=f.createShaderConfig({vertexShader:s.rippleVertexShader,fragmentShader:s.rippleRenderShader,uniformNames:{u_texture0:"sampler2D",u_color1:"vec3",u_color2:"vec3"}});return u.useEffect(()=>{const i=e=>{const t=e.target.getBoundingClientRect(),o=(e.clientX-t.left)/t.width,r=1-(e.clientY-t.top)/t.height;c.current=[o,r]},d=()=>{n.current=!0},l=()=>{n.current=!1},m=e=>{if(e.touches.length>0){e.preventDefault();const t=e.target.getBoundingClientRect(),o=(e.touches[0].clientX-t.left)/t.width,r=1-(e.touches[0].clientY-t.top)/t.height;c.current=[o,r],n.current=!0}},h=e=>{if(e.touches.length>0&&n.current){e.preventDefault();const t=e.target.getBoundingClientRect(),o=(e.touches[0].clientX-t.left)/t.width,r=1-(e.touches[0].clientY-t.top)/t.height;c.current=[o,r]}},v=()=>{n.current=!1};return document.addEventListener("mousemove",i),document.addEventListener("mousedown",d),document.addEventListener("mouseup",l),document.addEventListener("touchstart",m,{passive:!1}),document.addEventListener("touchmove",h,{passive:!1}),document.addEventListener("touchend",v),()=>{document.removeEventListener("mousemove",i),document.removeEventListener("mousedown",d),document.removeEventListener("mouseup",l),document.removeEventListener("touchstart",m),document.removeEventListener("touchmove",h),document.removeEventListener("touchend",v)}},[]),M.jsx(O.BasePingPongShaderComponent,{programId:"ripple-simulation",shaderConfig:y,secondaryProgramId:"ripple-render",secondaryShaderConfig:w,iterations:x,className:E,style:R,framebufferOptions:{width:0,height:0,textureCount:2,textureOptions:{minFilter:WebGLRenderingContext.LINEAR,magFilter:WebGLRenderingContext.LINEAR}},uniforms:{u_mouse:{type:"vec2",value:a.vec2(c.current)},u_mouseForce:{type:"float",value:()=>n.current?L:0},u_damping:{type:"float",value:S}},secondaryUniforms:{u_color1:{type:"vec3",value:a.vec3(_)},u_color2:{type:"vec3",value:a.vec3(C)}}})};exports.Ripple=g;exports.default=g;

package/dist/examples/Ripple/RippleScene.mjs

@@ -0,0 +1,109 @@
+import { jsx as w } from "react/jsx-runtime";
+import { useRef as v, useEffect as D } from "react";
+import { createShaderConfig as h } from "../../src/core/lib/createShaderConfig.mjs";
+import { vec3 as p, vec2 as M } from "../../src/core/lib/vectorUtils.mjs";
+import { BasePingPongShaderComponent as O } from "../../src/react/components/base/BasePingPongShaderComponent.mjs";
+import { rippleVertexShader as f, rippleSimulationShader as B, rippleRenderShader as F } from "./rippleShaders.mjs";
+const I = [0.1, 0.3, 0.1], N = [0.3, 0.2, 0.4], G = ({
+  damping: g = 0.99,
+  mouseForce: L = 0.5,
+  color1: E = I,
+  color2: x = N,
+  iterations: C = 2,
+  className: S = "",
+  style: _
+}) => {
+  const c = v([0.5, 0.5]), n = v(!1), R = h({
+    vertexShader: f,
+    fragmentShader: B,
+    uniformNames: {
+      u_texture0: "sampler2D",
+      u_mouse: "vec2",
+      u_mouseForce: "float",
+      u_damping: "float"
+    }
+  }), y = h({
+    vertexShader: f,
+    fragmentShader: F,
+    uniformNames: {
+      u_texture0: "sampler2D",
+      u_color1: "vec3",
+      u_color2: "vec3"
+    }
+  });
+  return D(() => {
+    const s = (e) => {
+      const t = e.target.getBoundingClientRect(), o = (e.clientX - t.left) / t.width, r = 1 - (e.clientY - t.top) / t.height;
+      c.current = [o, r];
+    }, u = () => {
+      n.current = !0;
+    }, a = () => {
+      n.current = !1;
+    }, i = (e) => {
+      if (e.touches.length > 0) {
+        e.preventDefault();
+        const t = e.target.getBoundingClientRect(), o = (e.touches[0].clientX - t.left) / t.width, r = 1 - (e.touches[0].clientY - t.top) / t.height;
+        c.current = [o, r], n.current = !0;
+      }
+    }, d = (e) => {
+      if (e.touches.length > 0 && n.current) {
+        e.preventDefault();
+        const t = e.target.getBoundingClientRect(), o = (e.touches[0].clientX - t.left) / t.width, r = 1 - (e.touches[0].clientY - t.top) / t.height;
+        c.current = [o, r];
+      }
+    }, m = () => {
+      n.current = !1;
+    };
+    return document.addEventListener("mousemove", s), document.addEventListener("mousedown", u), document.addEventListener("mouseup", a), document.addEventListener("touchstart", i, { passive: !1 }), document.addEventListener("touchmove", d, { passive: !1 }), document.addEventListener("touchend", m), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mousedown", u), document.removeEventListener("mouseup", a), document.removeEventListener("touchstart", i), document.removeEventListener("touchmove", d), document.removeEventListener("touchend", m);
+    };
+  }, []), /* @__PURE__ */ w(
+    O,
+    {
+      programId: "ripple-simulation",
+      shaderConfig: R,
+      secondaryProgramId: "ripple-render",
+      secondaryShaderConfig: y,
+      iterations: C,
+      className: S,
+      style: _,
+      framebufferOptions: {
+        width: 0,
+        height: 0,
+        textureCount: 2,
+        textureOptions: {
+          minFilter: WebGLRenderingContext.LINEAR,
+          magFilter: WebGLRenderingContext.LINEAR
+        }
+      },
+      uniforms: {
+        u_mouse: {
+          type: "vec2",
+          value: M(c.current)
+        },
+        u_mouseForce: {
+          type: "float",
+          value: () => n.current ? L : 0
+        },
+        u_damping: {
+          type: "float",
+          value: g
+        }
+      },
+      secondaryUniforms: {
+        u_color1: {
+          type: "vec3",
+          value: p(E)
+        },
+        u_color2: {
+          type: "vec3",
+          value: p(x)
+        }
+      }
+    }
+  );
+};
+export {
+  G as Ripple,
+  G as default
+};

package/dist/examples/Ripple/rippleShaders.d.ts

@@ -0,0 +1,3 @@
+export declare const rippleVertexShader = "\n  attribute vec2 a_position;\n  varying vec2 v_texCoord;\n  void main() {\n    gl_Position = vec4(a_position, 0.0, 1.0);\n    v_texCoord = a_position * 0.5 + 0.5;\n  }\n";
+export declare const rippleSimulationShader = "\n  precision highp float;\n  \n  uniform vec2 u_resolution;\n  uniform float u_time;\n  uniform sampler2D u_texture0;\n  uniform vec2 u_mouse;\n  uniform float u_mouseForce;\n  uniform float u_damping;\n  \n  varying vec2 v_texCoord;\n  \n  void main() {\n    vec2 uv = v_texCoord;\n    vec2 texelSize = 1.0 / u_resolution;\n    \n    vec4 state = texture2D(u_texture0, uv);\n    float height = state.r;\n    float velocity = state.g;\n    \n    float north = texture2D(u_texture0, uv + vec2(0.0, texelSize.y)).r;\n    float south = texture2D(u_texture0, uv - vec2(0.0, texelSize.y)).r;\n    float east = texture2D(u_texture0, uv + vec2(texelSize.x, 0.0)).r;\n    float west = texture2D(u_texture0, uv - vec2(texelSize.x, 0.0)).r;\n    \n    float newVelocity = velocity + ((north + south + east + west) / 4.0 - height) * 2.0;\n    newVelocity *= u_damping;\n    \n    float newHeight = height + newVelocity;\n    \n    vec2 mouseVec = u_mouse - uv;\n    float mouseDistance = length(mouseVec);\n    if (mouseDistance < 0.05 && u_mouseForce > 0.0) {\n        newHeight += 0.5;\n    }\n    \n    float startTime = mod(u_time * 0.001, 10.0);\n    if (startTime < 0.2) {\n        vec2 center = vec2(0.5, 0.5);\n        float centerDist = length(uv - center);\n        if (centerDist < 0.05) {\n            newHeight += 0.5 * (1.0 - startTime * 5.0);\n        }\n    }\n    \n    gl_FragColor = vec4(newHeight, newVelocity, 0.0, 1.0);\n  }\n";
+export declare const rippleRenderShader = "\n  precision highp float;\n  \n  uniform vec2 u_resolution;\n  uniform float u_time;\n  uniform sampler2D u_texture0;\n  uniform vec3 u_color1;\n  uniform vec3 u_color2;\n  \n  varying vec2 v_texCoord;\n  \n  void main() {\n    vec2 uv = v_texCoord;\n    \n    vec4 state = texture2D(u_texture0, uv);\n    float height = state.r;\n    \n    vec3 color = mix(u_color1, u_color2, (height + 1.0) * 0.5);\n    \n    float t = u_time * 0.001;\n    float brightness = 1.0 + 0.1 * sin(uv.x * 10.0 + t) * sin(uv.y * 10.0 + t);\n    color *= brightness;\n    \n    gl_FragColor = vec4(color, 1.0);\n  }\n";

package/dist/examples/Ripple/rippleShaders.js

@@ -0,0 +1,80 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`
+  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;
+  }
+`,t=`
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform sampler2D u_texture0;
+  uniform vec2 u_mouse;
+  uniform float u_mouseForce;
+  uniform float u_damping;
+  
+  varying vec2 v_texCoord;
+  
+  void main() {
+    vec2 uv = v_texCoord;
+    vec2 texelSize = 1.0 / u_resolution;
+    
+    vec4 state = texture2D(u_texture0, uv);
+    float height = state.r;
+    float velocity = state.g;
+    
+    float north = texture2D(u_texture0, uv + vec2(0.0, texelSize.y)).r;
+    float south = texture2D(u_texture0, uv - vec2(0.0, texelSize.y)).r;
+    float east = texture2D(u_texture0, uv + vec2(texelSize.x, 0.0)).r;
+    float west = texture2D(u_texture0, uv - vec2(texelSize.x, 0.0)).r;
+    
+    float newVelocity = velocity + ((north + south + east + west) / 4.0 - height) * 2.0;
+    newVelocity *= u_damping;
+    
+    float newHeight = height + newVelocity;
+    
+    vec2 mouseVec = u_mouse - uv;
+    float mouseDistance = length(mouseVec);
+    if (mouseDistance < 0.05 && u_mouseForce > 0.0) {
+        newHeight += 0.5;
+    }
+    
+    float startTime = mod(u_time * 0.001, 10.0);
+    if (startTime < 0.2) {
+        vec2 center = vec2(0.5, 0.5);
+        float centerDist = length(uv - center);
+        if (centerDist < 0.05) {
+            newHeight += 0.5 * (1.0 - startTime * 5.0);
+        }
+    }
+    
+    gl_FragColor = vec4(newHeight, newVelocity, 0.0, 1.0);
+  }
+`,o=`
+  precision highp float;
+  
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform sampler2D u_texture0;
+  uniform vec3 u_color1;
+  uniform vec3 u_color2;
+  
+  varying vec2 v_texCoord;
+  
+  void main() {
+    vec2 uv = v_texCoord;
+    
+    vec4 state = texture2D(u_texture0, uv);
+    float height = state.r;
+    
+    vec3 color = mix(u_color1, u_color2, (height + 1.0) * 0.5);
+    
+    float t = u_time * 0.001;
+    float brightness = 1.0 + 0.1 * sin(uv.x * 10.0 + t) * sin(uv.y * 10.0 + t);
+    color *= brightness;
+    
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;exports.rippleRenderShader=o;exports.rippleSimulationShader=t;exports.rippleVertexShader=e;