@toriistudio/shader-ui 0.0.7 → 0.0.8

package/dist/index.d.mts

@@ -278,23 +278,26 @@ type NoiseWarpPassUniforms = {
     radius: number;
 };
 
+type CombineMode = "add" | "screen" | "multiply" | "overlay" | "max" | "min" | "difference" | "alphaOver" | "premultipliedOver" | "lerp" | "mask";
+
 type DitherPulseRingProps = {
     spriteTextureSrc?: string;
     glyphDitherEnabled?: boolean;
     diffuseEnabled?: boolean;
     blurEnabled?: boolean;
     noiseWarpEnabled?: boolean;
+    combineMode?: CombineMode;
     noiseWarpRadius?: NoiseWarpPassUniforms["radius"];
     noiseWarpStrength?: NoiseWarpPassUniforms["strength"];
     diffuseRadius?: DiffusePassUniforms["diffuseRadius"];
     blurRadius?: BlurPassUniforms["blurRadius"];
     borderThickness?: number;
     borderIntensity?: number;
-    borderColor?: BorderBeamPassUniforms["color"];
+    borderColor?: BorderBeamPassUniforms["color"] | string;
     borderDitherStrength?: number;
     borderTonemap?: boolean;
     borderAlpha?: number;
-    ringColor?: ExpandingRingPassUniforms["color"];
+    ringColor?: ExpandingRingPassUniforms["color"] | string;
     ringSpeed?: number;
     ringPosition?: ExpandingRingPassUniforms["position"];
     ringAlpha?: ExpandingRingPassUniforms["alpha"];
@@ -303,6 +306,6 @@ type DitherPulseRingProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function DitherPulseRing({ spriteTextureSrc, glyphDitherEnabled, diffuseEnabled, blurEnabled, noiseWarpEnabled, noiseWarpRadius, noiseWarpStrength, diffuseRadius, blurRadius, borderThickness, borderIntensity, borderColor, borderDitherStrength, borderTonemap, borderAlpha, ringColor, ringSpeed, ringPosition, ringAlpha, width, height, className, style, }: DitherPulseRingProps): react_jsx_runtime.JSX.Element;
+declare function DitherPulseRing({ spriteTextureSrc, glyphDitherEnabled, diffuseEnabled, blurEnabled, noiseWarpEnabled, combineMode, noiseWarpRadius, noiseWarpStrength, diffuseRadius, blurRadius, borderThickness, borderIntensity, borderColor, borderDitherStrength, borderTonemap, borderAlpha, ringColor, ringSpeed, ringPosition, ringAlpha, width, height, className, style, }: DitherPulseRingProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedDrawingSVG, DitherPulseRing, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
+export { AnimatedDrawingSVG, type CombineMode as CombineShaderMode, DitherPulseRing, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };

package/dist/index.d.ts

@@ -278,23 +278,26 @@ type NoiseWarpPassUniforms = {
     radius: number;
 };
 
+type CombineMode = "add" | "screen" | "multiply" | "overlay" | "max" | "min" | "difference" | "alphaOver" | "premultipliedOver" | "lerp" | "mask";
+
 type DitherPulseRingProps = {
     spriteTextureSrc?: string;
     glyphDitherEnabled?: boolean;
     diffuseEnabled?: boolean;
     blurEnabled?: boolean;
     noiseWarpEnabled?: boolean;
+    combineMode?: CombineMode;
     noiseWarpRadius?: NoiseWarpPassUniforms["radius"];
     noiseWarpStrength?: NoiseWarpPassUniforms["strength"];
     diffuseRadius?: DiffusePassUniforms["diffuseRadius"];
     blurRadius?: BlurPassUniforms["blurRadius"];
     borderThickness?: number;
     borderIntensity?: number;
-    borderColor?: BorderBeamPassUniforms["color"];
+    borderColor?: BorderBeamPassUniforms["color"] | string;
     borderDitherStrength?: number;
     borderTonemap?: boolean;
     borderAlpha?: number;
-    ringColor?: ExpandingRingPassUniforms["color"];
+    ringColor?: ExpandingRingPassUniforms["color"] | string;
     ringSpeed?: number;
     ringPosition?: ExpandingRingPassUniforms["position"];
     ringAlpha?: ExpandingRingPassUniforms["alpha"];
@@ -303,6 +306,6 @@ type DitherPulseRingProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function DitherPulseRing({ spriteTextureSrc, glyphDitherEnabled, diffuseEnabled, blurEnabled, noiseWarpEnabled, noiseWarpRadius, noiseWarpStrength, diffuseRadius, blurRadius, borderThickness, borderIntensity, borderColor, borderDitherStrength, borderTonemap, borderAlpha, ringColor, ringSpeed, ringPosition, ringAlpha, width, height, className, style, }: DitherPulseRingProps): react_jsx_runtime.JSX.Element;
+declare function DitherPulseRing({ spriteTextureSrc, glyphDitherEnabled, diffuseEnabled, blurEnabled, noiseWarpEnabled, combineMode, noiseWarpRadius, noiseWarpStrength, diffuseRadius, blurRadius, borderThickness, borderIntensity, borderColor, borderDitherStrength, borderTonemap, borderAlpha, ringColor, ringSpeed, ringPosition, ringAlpha, width, height, className, style, }: DitherPulseRingProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedDrawingSVG, DitherPulseRing, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };
+export { AnimatedDrawingSVG, type CombineMode as CombineShaderMode, DitherPulseRing, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };

package/dist/index.js

@@ -3550,7 +3550,7 @@ var THREE9 = __toESM(require("three"));
 var import_react11 = require("react");
 var THREE8 = __toESM(require("three"));
 
-// src/hooks/SceneProvider.tsx
+// src/context/SceneProvider.tsx
 var import_react10 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SceneProviderContext = (0, import_react10.createContext)(null);
@@ -3746,7 +3746,15 @@ function ShaderPass({
       context.renderer.setRenderTarget(prevTarget);
       context.renderer.autoClear = prevAutoClear;
     },
-    [clear, clearColor, enabled, resolutionUniform, target, timeUniform, uniforms]
+    [
+      clear,
+      clearColor,
+      enabled,
+      resolutionUniform,
+      target,
+      timeUniform,
+      uniforms
+    ]
   );
   const sharedContextRef = sharedScene?.contextRef;
   const shouldCreateOwnScene = !sharedContextRef;
@@ -3776,13 +3784,10 @@ function ShaderPass({
       renderOnce();
       return;
     }
-    const unregister = register(
-      (ctx, delta, elapsed) => {
-        void elapsed;
-        handleRender(ctx, delta);
-      },
-      priority
-    );
+    const unregister = register((ctx, delta, elapsed) => {
+      void elapsed;
+      handleRender(ctx, delta);
+    }, priority);
     return () => {
       unregister?.();
     };
@@ -4238,75 +4243,14 @@ function ExpandingRingPass({
 var import_react19 = require("react");
 var THREE16 = __toESM(require("three"));
 
-// src/components/CombineShaderPass.tsx
+// src/components/TargetPreview.tsx
 var import_react17 = require("react");
 var THREE14 = __toESM(require("three"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var VERT = `
-out vec2 vUv;
-
-void main() {
-  vUv = uv;
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`;
-var FRAG = `
-precision highp float;
-
-in vec2 vUv;
-
-uniform sampler2D uTextureA;
-uniform sampler2D uTextureB;
-
-out vec4 fragColor;
-
-void main() {
-  vec4 a = texture(uTextureA, vUv);
-  vec4 b = texture(uTextureB, vUv);
-  vec3 rgb = a.rgb + b.rgb;
-  float alpha = max(a.a, b.a);
-  fragColor = vec4(rgb, alpha);
-}
-`;
-function CombineShaderPass({
-  inputA,
-  inputB,
-  target = null,
-  clear = true,
-  priority = 0
-}) {
-  const uniforms = (0, import_react17.useMemo)(
-    () => ({
-      uTextureA: { value: inputA },
-      uTextureB: { value: inputB }
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  uniforms.uTextureA.value = inputA;
-  uniforms.uTextureB.value = inputB;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    ShaderPass,
-    {
-      vertexShader: VERT,
-      fragmentShader: FRAG,
-      uniforms,
-      target,
-      clear,
-      priority,
-      blending: THREE14.NoBlending
-    }
-  );
-}
-
-// src/components/TargetPreview.tsx
-var import_react18 = require("react");
-var THREE15 = __toESM(require("three"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
 function TargetPreview({
   target,
   renderOrder = 0,
-  blending = THREE15.NoBlending,
+  blending = THREE14.NoBlending,
   transparent = true,
   toneMapped = false,
   className,
@@ -4315,15 +4259,15 @@ function TargetPreview({
   height,
   ...divProps
 }) {
-  const assetsRef = (0, import_react18.useRef)(null);
+  const assetsRef = (0, import_react17.useRef)(null);
   const sharedScene = useSceneContext();
   const sharedReady = sharedScene?.ready ?? true;
-  const handleCreate = (0, import_react18.useCallback)(() => {
-    const scene = new THREE15.Scene();
-    const camera = new THREE15.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  const handleCreate = (0, import_react17.useCallback)(() => {
+    const scene = new THREE14.Scene();
+    const camera = new THREE14.OrthographicCamera(-1, 1, 1, -1, 0, 1);
     camera.position.z = 1;
-    const geometry = new THREE15.PlaneGeometry(2, 2);
-    const material = new THREE15.MeshBasicMaterial({
+    const geometry = new THREE14.PlaneGeometry(2, 2);
+    const material = new THREE14.MeshBasicMaterial({
       map: target.texture,
       toneMapped,
       transparent,
@@ -4331,7 +4275,7 @@ function TargetPreview({
       depthWrite: false,
       depthTest: false
     });
-    const mesh = new THREE15.Mesh(geometry, material);
+    const mesh = new THREE14.Mesh(geometry, material);
     mesh.renderOrder = renderOrder;
     scene.add(mesh);
     assetsRef.current = { scene, camera, mesh, geometry, material };
@@ -4342,7 +4286,7 @@ function TargetPreview({
       assetsRef.current = null;
     };
   }, [blending, renderOrder, target.texture, toneMapped, transparent]);
-  const handleRender = (0, import_react18.useCallback)((context) => {
+  const handleRender = (0, import_react17.useCallback)((context) => {
     const assets = assetsRef.current;
     if (!assets) return;
     const prevTarget = context.renderer.getRenderTarget();
@@ -4356,13 +4300,13 @@ function TargetPreview({
     onCreate: shouldCreateOwnScene ? handleCreate : void 0,
     onRender: shouldCreateOwnScene ? handleRender : void 0
   });
-  const containerRef = shouldCreateOwnScene ? ownScene.containerRef : (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const containerRef = shouldCreateOwnScene ? ownScene.containerRef : (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (!sharedContextRef || !sharedReady) return;
     const cleanup = handleCreate();
     return cleanup;
   }, [sharedContextRef, handleCreate, sharedReady]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!sharedContextRef?.current || !sharedReady) return;
     const context = sharedContextRef.current;
     const register = context.registerRenderCallback;
@@ -4370,23 +4314,20 @@ function TargetPreview({
       handleRender(context);
       return;
     }
-    const unregister = register(
-      (ctx) => {
-        handleRender(ctx);
-      },
-      renderOrder
-    );
+    const unregister = register((ctx) => {
+      handleRender(ctx);
+    }, renderOrder);
     return () => {
       unregister?.();
     };
   }, [sharedContextRef, handleRender, renderOrder, sharedReady]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const assets = assetsRef.current;
     if (!assets) return;
     assets.material.map = target.texture;
     assets.material.needsUpdate = true;
   }, [target.texture]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const assets = assetsRef.current;
     if (!assets) return;
     assets.material.blending = blending;
@@ -4397,7 +4338,7 @@ function TargetPreview({
   if (!shouldCreateOwnScene) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       ref: containerRef,
@@ -4412,6 +4353,232 @@ function TargetPreview({
   );
 }
 
+// src/components/CombineShaderPass.tsx
+var import_react18 = require("react");
+var THREE15 = __toESM(require("three"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var COMBINE_MODE = {
+  add: 0,
+  screen: 1,
+  multiply: 2,
+  overlay: 3,
+  max: 4,
+  min: 5,
+  difference: 6,
+  alphaOver: 7,
+  premultipliedOver: 8,
+  lerp: 9,
+  mask: 10
+};
+var TONEMAP = {
+  none: 0,
+  reinhard: 1,
+  aces: 2
+};
+var VERT = `
+out vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+var FRAG = `
+precision highp float;
+
+in vec2 vUv;
+
+uniform sampler2D uTextureA;
+uniform sampler2D uTextureB;
+uniform sampler2D uMaskTexture;
+
+uniform int uMode;
+uniform float uOpacityA;
+uniform float uOpacityB;
+uniform float uMix;
+uniform int uMaskChannel;
+uniform float uMaskThreshold;
+uniform bool uInvertMask;
+uniform bool uClampOutput;
+uniform int uTonemap;
+uniform bool uHasMask;
+
+out vec4 fragColor;
+
+float overlayChannel(float base, float blend) {
+  return base < 0.5
+    ? (2.0 * base * blend)
+    : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend));
+}
+
+vec3 overlayBlend(vec3 base, vec3 blend) {
+  return vec3(
+    overlayChannel(base.r, blend.r),
+    overlayChannel(base.g, blend.g),
+    overlayChannel(base.b, blend.b)
+  );
+}
+
+float sampleMask(vec2 uv) {
+  vec4 maskSample = texture(uMaskTexture, uv);
+  float m = maskSample.r;
+  if (uMaskChannel == 1) {
+    m = maskSample.g;
+  } else if (uMaskChannel == 2) {
+    m = maskSample.b;
+  } else if (uMaskChannel == 3) {
+    m = maskSample.a;
+  }
+  if (uInvertMask) {
+    m = 1.0 - m;
+  }
+  return m;
+}
+
+vec3 tonemapReinhard(vec3 color) {
+  return color / (color + vec3(1.0));
+}
+
+vec3 tonemapAces(vec3 color) {
+  // ACES approximation by Krzysztof Narkowicz
+  float a = 2.51;
+  float b = 0.03;
+  float c = 2.43;
+  float d = 0.59;
+  float e = 0.14;
+  return clamp((color * (a * color + b)) / (color * (c * color + d) + e), 0.0, 1.0);
+}
+
+void main() {
+  vec4 a = texture(uTextureA, vUv);
+  vec4 b = texture(uTextureB, vUv);
+
+  a.rgb *= uOpacityA;
+  a.a *= uOpacityA;
+  b.rgb *= uOpacityB;
+  b.a *= uOpacityB;
+
+  vec3 rgb = vec3(0.0);
+  float alpha = 0.0;
+
+  if (uMode == 0) {
+    rgb = a.rgb + b.rgb;
+    alpha = max(a.a, b.a);
+  } else if (uMode == 1) {
+    rgb = 1.0 - (1.0 - a.rgb) * (1.0 - b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 2) {
+    rgb = a.rgb * b.rgb;
+    alpha = max(a.a, b.a);
+  } else if (uMode == 3) {
+    rgb = overlayBlend(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 4) {
+    rgb = max(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 5) {
+    rgb = min(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 6) {
+    rgb = abs(a.rgb - b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 7) {
+    float outA = a.a + b.a * (1.0 - a.a);
+    vec3 premult = a.rgb * a.a + b.rgb * b.a * (1.0 - a.a);
+    vec3 outRgb = outA > 1e-6 ? premult / outA : vec3(0.0);
+    rgb = outRgb;
+    alpha = outA;
+  } else if (uMode == 8) {
+    rgb = a.rgb + b.rgb * (1.0 - a.a);
+    alpha = a.a + b.a * (1.0 - a.a);
+  } else if (uMode == 9) {
+    float t = uHasMask ? sampleMask(vUv) : uMix;
+    rgb = mix(b.rgb, a.rgb, t);
+    alpha = mix(b.a, a.a, t);
+  } else if (uMode == 10) {
+    float t = uHasMask ? sampleMask(vUv) : uMix;
+    bool chooseA = t > uMaskThreshold;
+    rgb = chooseA ? a.rgb : b.rgb;
+    alpha = chooseA ? a.a : b.a;
+  }
+
+  if (uTonemap == 1) {
+    rgb = tonemapReinhard(rgb);
+  } else if (uTonemap == 2) {
+    rgb = tonemapAces(rgb);
+  }
+
+  if (uClampOutput) {
+    rgb = clamp(rgb, 0.0, 1.0);
+    alpha = clamp(alpha, 0.0, 1.0);
+  }
+
+  fragColor = vec4(rgb, alpha);
+}
+`;
+function CombineShaderPass({
+  inputA,
+  inputB,
+  mode = "add",
+  opacityA = 1,
+  opacityB = 1,
+  clampOutput = true,
+  mix = 0.5,
+  maskTexture,
+  maskChannel = 0,
+  maskThreshold = 0.5,
+  invertMask = false,
+  tonemap = "none",
+  target = null,
+  clear = true,
+  priority = 0
+}) {
+  const uniforms = (0, import_react18.useMemo)(
+    () => ({
+      uTextureA: { value: inputA },
+      uTextureB: { value: inputB },
+      uMaskTexture: { value: maskTexture ?? inputA },
+      uMode: { value: COMBINE_MODE[mode] },
+      uOpacityA: { value: opacityA },
+      uOpacityB: { value: opacityB },
+      uMix: { value: mix },
+      uMaskChannel: { value: maskChannel },
+      uMaskThreshold: { value: maskThreshold },
+      uInvertMask: { value: invertMask },
+      uClampOutput: { value: clampOutput },
+      uTonemap: { value: TONEMAP[tonemap] },
+      uHasMask: { value: Boolean(maskTexture) }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uTextureA.value = inputA;
+  uniforms.uTextureB.value = inputB;
+  uniforms.uMaskTexture.value = maskTexture ?? inputA;
+  uniforms.uMode.value = COMBINE_MODE[mode];
+  uniforms.uOpacityA.value = opacityA;
+  uniforms.uOpacityB.value = opacityB;
+  uniforms.uMix.value = mix;
+  uniforms.uMaskChannel.value = maskChannel;
+  uniforms.uMaskThreshold.value = maskThreshold;
+  uniforms.uInvertMask.value = invertMask;
+  uniforms.uClampOutput.value = clampOutput;
+  uniforms.uTonemap.value = TONEMAP[tonemap];
+  uniforms.uHasMask.value = Boolean(maskTexture);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    ShaderPass,
+    {
+      vertexShader: VERT,
+      fragmentShader: FRAG,
+      uniforms,
+      target,
+      clear,
+      priority,
+      blending: THREE15.NoBlending
+    }
+  );
+}
+
 // src/components/RenderPipeline.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DEFAULT_TARGET_OPTIONS = {
@@ -4420,6 +4587,7 @@ var DEFAULT_TARGET_OPTIONS = {
 };
 function RenderPipeline({
   passes,
+  combine,
   preview = true,
   previewProps
 }) {
@@ -4453,7 +4621,9 @@ function RenderPipeline({
     throw new Error("RenderPipeline requires at least 2 passes.");
   }
   const passTargets = targets.filter((entry) => entry.key.startsWith("pass_"));
-  const combineTarget = targets.find((entry) => entry.key === "combine")?.target;
+  const combineTarget = targets.find(
+    (entry) => entry.key === "combine"
+  )?.target;
   const firstEnabledIndex = passes.findIndex((pass) => pass.enabled !== false);
   const secondEnabledIndex = passes.findIndex(
     (pass, index) => index > firstEnabledIndex && pass.enabled !== false
@@ -4489,17 +4659,18 @@ function RenderPipeline({
       const inputB = passOutputTarget(secondEnabledIndex)?.texture ?? inputTexture;
       combineRendered = true;
       previousOutput = combineTarget;
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react19.Fragment, { children: [
         element,
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           CombineShaderPass,
           {
+            ...combine,
             inputA,
             inputB,
             target: combineTarget
           }
         )
-      ] });
+      ] }, `combine_${index}`);
     }
     previousOutput = target;
     return element;
@@ -4770,6 +4941,7 @@ function DitherPulseRing({
   diffuseEnabled = false,
   blurEnabled = false,
   noiseWarpEnabled = false,
+  combineMode,
   noiseWarpRadius,
   noiseWarpStrength,
   diffuseRadius,
@@ -4806,6 +4978,7 @@ function DitherPulseRing({
           diffuseEnabled,
           blurEnabled,
           noiseWarpEnabled,
+          combineMode,
           noiseWarpRadius,
           noiseWarpStrength,
           diffuseRadius,
@@ -4831,6 +5004,7 @@ function DitherPulseRingContent({
   diffuseEnabled = false,
   blurEnabled = false,
   noiseWarpEnabled = false,
+  combineMode,
   noiseWarpRadius,
   noiseWarpStrength,
   diffuseRadius,
@@ -4846,6 +5020,22 @@ function DitherPulseRingContent({
   ringPosition,
   ringAlpha
 }) {
+  const normalizeHexColor = (hex) => {
+    if (!hex) return null;
+    const normalized = hex.replace("#", "");
+    if (normalized.length !== 6) return null;
+    const r = parseInt(normalized.slice(0, 2), 16) / 255;
+    const g = parseInt(normalized.slice(2, 4), 16) / 255;
+    const b = parseInt(normalized.slice(4, 6), 16) / 255;
+    return [r, g, b];
+  };
+  const resolveColor = (color) => {
+    if (!color) return null;
+    if (typeof color === "string") {
+      return normalizeHexColor(color);
+    }
+    return color;
+  };
   const glyphUniforms = {};
   glyphUniforms.trackMouse = false;
   const noiseUniforms = {};
@@ -4869,52 +5059,74 @@ function DitherPulseRingContent({
   const borderUniforms = {};
   if (borderThickness !== void 0) borderUniforms.thickness = borderThickness;
   if (borderIntensity !== void 0) borderUniforms.intensity = borderIntensity;
-  if (borderColor) borderUniforms.color = borderColor;
+  const resolvedBorderColor = resolveColor(borderColor);
+  if (resolvedBorderColor) borderUniforms.color = resolvedBorderColor;
   if (borderDitherStrength !== void 0) {
     borderUniforms.ditherStrength = borderDitherStrength;
   }
   if (borderTonemap !== void 0) borderUniforms.tonemap = borderTonemap;
   if (borderAlpha !== void 0) borderUniforms.alpha = borderAlpha;
   const ringUniforms = {};
-  if (ringColor) ringUniforms.color = ringColor;
+  const resolvedRingColor = resolveColor(ringColor);
+  if (resolvedRingColor) ringUniforms.color = resolvedRingColor;
   if (ringSpeed !== void 0) ringUniforms.speed = ringSpeed;
   if (ringPosition) ringUniforms.position = ringPosition;
   if (ringAlpha !== void 0) ringUniforms.alpha = ringAlpha;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    RenderPipeline,
-    {
-      passes: [
-        {
-          component: BorderBeamPass,
-          props: { uniforms: borderUniforms }
-        },
-        {
-          component: ExpandingRingPass,
-          props: { clear: true, uniforms: ringUniforms }
-        },
-        {
-          component: NoiseWarpPass,
-          enabled: noiseWarpEnabled,
-          props: { uniforms: noiseUniforms }
-        },
-        {
-          component: GlyphDitherPass,
-          enabled: glyphDitherEnabled,
-          props: { spriteTextureSrc, uniforms: glyphUniforms }
-        },
-        {
-          component: DiffusePass,
-          enabled: diffuseEnabled,
-          props: { uniforms: diffuseUniforms }
-        },
-        {
-          component: BlurPass,
-          enabled: blurEnabled,
-          props: { uniforms: blurUniforms }
-        }
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      RenderPipeline,
+      {
+        passes: [
+          {
+            component: BorderBeamPass,
+            props: { uniforms: borderUniforms }
+          },
+          {
+            component: GlyphDitherPass,
+            enabled: glyphDitherEnabled,
+            props: { spriteTextureSrc, uniforms: glyphUniforms }
+          }
+        ],
+        combine: combineMode ? { mode: combineMode } : void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      RenderPipeline,
+      {
+        passes: [
+          {
+            component: BorderBeamPass,
+            props: { uniforms: borderUniforms }
+          },
+          {
+            component: ExpandingRingPass,
+            props: { uniforms: ringUniforms }
+          },
+          {
+            component: NoiseWarpPass,
+            enabled: noiseWarpEnabled,
+            props: { uniforms: noiseUniforms }
+          },
+          {
+            component: GlyphDitherPass,
+            enabled: glyphDitherEnabled,
+            props: { spriteTextureSrc, uniforms: glyphUniforms }
+          },
+          {
+            component: DiffusePass,
+            enabled: diffuseEnabled,
+            props: { uniforms: diffuseUniforms }
+          },
+          {
+            component: BlurPass,
+            enabled: blurEnabled,
+            props: { uniforms: blurUniforms }
+          }
+        ],
+        combine: combineMode ? { mode: combineMode } : void 0
+      }
+    )
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -3533,11 +3533,8 @@ import {
 } from "react";
 import * as THREE8 from "three";
 
-// src/hooks/SceneProvider.tsx
-import {
-  createContext,
-  useContext
-} from "react";
+// src/context/SceneProvider.tsx
+import { createContext, useContext } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var SceneProviderContext = createContext(null);
 function SceneProvider({
@@ -3732,7 +3729,15 @@ function ShaderPass({
       context.renderer.setRenderTarget(prevTarget);
       context.renderer.autoClear = prevAutoClear;
     },
-    [clear, clearColor, enabled, resolutionUniform, target, timeUniform, uniforms]
+    [
+      clear,
+      clearColor,
+      enabled,
+      resolutionUniform,
+      target,
+      timeUniform,
+      uniforms
+    ]
   );
   const sharedContextRef = sharedScene?.contextRef;
   const shouldCreateOwnScene = !sharedContextRef;
@@ -3762,13 +3767,10 @@ function ShaderPass({
       renderOnce();
       return;
     }
-    const unregister = register(
-      (ctx, delta, elapsed) => {
-        void elapsed;
-        handleRender(ctx, delta);
-      },
-      priority
-    );
+    const unregister = register((ctx, delta, elapsed) => {
+      void elapsed;
+      handleRender(ctx, delta);
+    }, priority);
     return () => {
       unregister?.();
     };
@@ -4221,82 +4223,21 @@ function ExpandingRingPass({
 }
 
 // src/components/RenderPipeline.tsx
-import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
+import { Fragment, useEffect as useEffect14, useMemo as useMemo12 } from "react";
 import * as THREE16 from "three";
 
-// src/components/CombineShaderPass.tsx
-import { useMemo as useMemo11 } from "react";
-import * as THREE14 from "three";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var VERT = `
-out vec2 vUv;
-
-void main() {
-  vUv = uv;
-  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-}
-`;
-var FRAG = `
-precision highp float;
-
-in vec2 vUv;
-
-uniform sampler2D uTextureA;
-uniform sampler2D uTextureB;
-
-out vec4 fragColor;
-
-void main() {
-  vec4 a = texture(uTextureA, vUv);
-  vec4 b = texture(uTextureB, vUv);
-  vec3 rgb = a.rgb + b.rgb;
-  float alpha = max(a.a, b.a);
-  fragColor = vec4(rgb, alpha);
-}
-`;
-function CombineShaderPass({
-  inputA,
-  inputB,
-  target = null,
-  clear = true,
-  priority = 0
-}) {
-  const uniforms = useMemo11(
-    () => ({
-      uTextureA: { value: inputA },
-      uTextureB: { value: inputB }
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  uniforms.uTextureA.value = inputA;
-  uniforms.uTextureB.value = inputB;
-  return /* @__PURE__ */ jsx18(
-    ShaderPass,
-    {
-      vertexShader: VERT,
-      fragmentShader: FRAG,
-      uniforms,
-      target,
-      clear,
-      priority,
-      blending: THREE14.NoBlending
-    }
-  );
-}
-
 // src/components/TargetPreview.tsx
 import {
   useCallback as useCallback8,
   useEffect as useEffect13,
   useRef as useRef11
 } from "react";
-import * as THREE15 from "three";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import * as THREE14 from "three";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function TargetPreview({
   target,
   renderOrder = 0,
-  blending = THREE15.NoBlending,
+  blending = THREE14.NoBlending,
   transparent = true,
   toneMapped = false,
   className,
@@ -4309,11 +4250,11 @@ function TargetPreview({
   const sharedScene = useSceneContext();
   const sharedReady = sharedScene?.ready ?? true;
   const handleCreate = useCallback8(() => {
-    const scene = new THREE15.Scene();
-    const camera = new THREE15.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const scene = new THREE14.Scene();
+    const camera = new THREE14.OrthographicCamera(-1, 1, 1, -1, 0, 1);
     camera.position.z = 1;
-    const geometry = new THREE15.PlaneGeometry(2, 2);
-    const material = new THREE15.MeshBasicMaterial({
+    const geometry = new THREE14.PlaneGeometry(2, 2);
+    const material = new THREE14.MeshBasicMaterial({
       map: target.texture,
       toneMapped,
       transparent,
@@ -4321,7 +4262,7 @@ function TargetPreview({
       depthWrite: false,
       depthTest: false
     });
-    const mesh = new THREE15.Mesh(geometry, material);
+    const mesh = new THREE14.Mesh(geometry, material);
     mesh.renderOrder = renderOrder;
     scene.add(mesh);
     assetsRef.current = { scene, camera, mesh, geometry, material };
@@ -4360,12 +4301,9 @@ function TargetPreview({
       handleRender(context);
       return;
     }
-    const unregister = register(
-      (ctx) => {
-        handleRender(ctx);
-      },
-      renderOrder
-    );
+    const unregister = register((ctx) => {
+      handleRender(ctx);
+    }, renderOrder);
     return () => {
       unregister?.();
     };
@@ -4387,7 +4325,7 @@ function TargetPreview({
   if (!shouldCreateOwnScene) {
     return null;
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ref: containerRef,
@@ -4402,14 +4340,241 @@ function TargetPreview({
   );
 }
 
+// src/components/CombineShaderPass.tsx
+import { useMemo as useMemo11 } from "react";
+import * as THREE15 from "three";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var COMBINE_MODE = {
+  add: 0,
+  screen: 1,
+  multiply: 2,
+  overlay: 3,
+  max: 4,
+  min: 5,
+  difference: 6,
+  alphaOver: 7,
+  premultipliedOver: 8,
+  lerp: 9,
+  mask: 10
+};
+var TONEMAP = {
+  none: 0,
+  reinhard: 1,
+  aces: 2
+};
+var VERT = `
+out vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+var FRAG = `
+precision highp float;
+
+in vec2 vUv;
+
+uniform sampler2D uTextureA;
+uniform sampler2D uTextureB;
+uniform sampler2D uMaskTexture;
+
+uniform int uMode;
+uniform float uOpacityA;
+uniform float uOpacityB;
+uniform float uMix;
+uniform int uMaskChannel;
+uniform float uMaskThreshold;
+uniform bool uInvertMask;
+uniform bool uClampOutput;
+uniform int uTonemap;
+uniform bool uHasMask;
+
+out vec4 fragColor;
+
+float overlayChannel(float base, float blend) {
+  return base < 0.5
+    ? (2.0 * base * blend)
+    : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend));
+}
+
+vec3 overlayBlend(vec3 base, vec3 blend) {
+  return vec3(
+    overlayChannel(base.r, blend.r),
+    overlayChannel(base.g, blend.g),
+    overlayChannel(base.b, blend.b)
+  );
+}
+
+float sampleMask(vec2 uv) {
+  vec4 maskSample = texture(uMaskTexture, uv);
+  float m = maskSample.r;
+  if (uMaskChannel == 1) {
+    m = maskSample.g;
+  } else if (uMaskChannel == 2) {
+    m = maskSample.b;
+  } else if (uMaskChannel == 3) {
+    m = maskSample.a;
+  }
+  if (uInvertMask) {
+    m = 1.0 - m;
+  }
+  return m;
+}
+
+vec3 tonemapReinhard(vec3 color) {
+  return color / (color + vec3(1.0));
+}
+
+vec3 tonemapAces(vec3 color) {
+  // ACES approximation by Krzysztof Narkowicz
+  float a = 2.51;
+  float b = 0.03;
+  float c = 2.43;
+  float d = 0.59;
+  float e = 0.14;
+  return clamp((color * (a * color + b)) / (color * (c * color + d) + e), 0.0, 1.0);
+}
+
+void main() {
+  vec4 a = texture(uTextureA, vUv);
+  vec4 b = texture(uTextureB, vUv);
+
+  a.rgb *= uOpacityA;
+  a.a *= uOpacityA;
+  b.rgb *= uOpacityB;
+  b.a *= uOpacityB;
+
+  vec3 rgb = vec3(0.0);
+  float alpha = 0.0;
+
+  if (uMode == 0) {
+    rgb = a.rgb + b.rgb;
+    alpha = max(a.a, b.a);
+  } else if (uMode == 1) {
+    rgb = 1.0 - (1.0 - a.rgb) * (1.0 - b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 2) {
+    rgb = a.rgb * b.rgb;
+    alpha = max(a.a, b.a);
+  } else if (uMode == 3) {
+    rgb = overlayBlend(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 4) {
+    rgb = max(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 5) {
+    rgb = min(a.rgb, b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 6) {
+    rgb = abs(a.rgb - b.rgb);
+    alpha = max(a.a, b.a);
+  } else if (uMode == 7) {
+    float outA = a.a + b.a * (1.0 - a.a);
+    vec3 premult = a.rgb * a.a + b.rgb * b.a * (1.0 - a.a);
+    vec3 outRgb = outA > 1e-6 ? premult / outA : vec3(0.0);
+    rgb = outRgb;
+    alpha = outA;
+  } else if (uMode == 8) {
+    rgb = a.rgb + b.rgb * (1.0 - a.a);
+    alpha = a.a + b.a * (1.0 - a.a);
+  } else if (uMode == 9) {
+    float t = uHasMask ? sampleMask(vUv) : uMix;
+    rgb = mix(b.rgb, a.rgb, t);
+    alpha = mix(b.a, a.a, t);
+  } else if (uMode == 10) {
+    float t = uHasMask ? sampleMask(vUv) : uMix;
+    bool chooseA = t > uMaskThreshold;
+    rgb = chooseA ? a.rgb : b.rgb;
+    alpha = chooseA ? a.a : b.a;
+  }
+
+  if (uTonemap == 1) {
+    rgb = tonemapReinhard(rgb);
+  } else if (uTonemap == 2) {
+    rgb = tonemapAces(rgb);
+  }
+
+  if (uClampOutput) {
+    rgb = clamp(rgb, 0.0, 1.0);
+    alpha = clamp(alpha, 0.0, 1.0);
+  }
+
+  fragColor = vec4(rgb, alpha);
+}
+`;
+function CombineShaderPass({
+  inputA,
+  inputB,
+  mode = "add",
+  opacityA = 1,
+  opacityB = 1,
+  clampOutput = true,
+  mix = 0.5,
+  maskTexture,
+  maskChannel = 0,
+  maskThreshold = 0.5,
+  invertMask = false,
+  tonemap = "none",
+  target = null,
+  clear = true,
+  priority = 0
+}) {
+  const uniforms = useMemo11(
+    () => ({
+      uTextureA: { value: inputA },
+      uTextureB: { value: inputB },
+      uMaskTexture: { value: maskTexture ?? inputA },
+      uMode: { value: COMBINE_MODE[mode] },
+      uOpacityA: { value: opacityA },
+      uOpacityB: { value: opacityB },
+      uMix: { value: mix },
+      uMaskChannel: { value: maskChannel },
+      uMaskThreshold: { value: maskThreshold },
+      uInvertMask: { value: invertMask },
+      uClampOutput: { value: clampOutput },
+      uTonemap: { value: TONEMAP[tonemap] },
+      uHasMask: { value: Boolean(maskTexture) }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  uniforms.uTextureA.value = inputA;
+  uniforms.uTextureB.value = inputB;
+  uniforms.uMaskTexture.value = maskTexture ?? inputA;
+  uniforms.uMode.value = COMBINE_MODE[mode];
+  uniforms.uOpacityA.value = opacityA;
+  uniforms.uOpacityB.value = opacityB;
+  uniforms.uMix.value = mix;
+  uniforms.uMaskChannel.value = maskChannel;
+  uniforms.uMaskThreshold.value = maskThreshold;
+  uniforms.uInvertMask.value = invertMask;
+  uniforms.uClampOutput.value = clampOutput;
+  uniforms.uTonemap.value = TONEMAP[tonemap];
+  uniforms.uHasMask.value = Boolean(maskTexture);
+  return /* @__PURE__ */ jsx19(
+    ShaderPass,
+    {
+      vertexShader: VERT,
+      fragmentShader: FRAG,
+      uniforms,
+      target,
+      clear,
+      priority,
+      blending: THREE15.NoBlending
+    }
+  );
+}
+
 // src/components/RenderPipeline.tsx
-import { Fragment, jsx as jsx20, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx20, jsxs } from "react/jsx-runtime";
 var DEFAULT_TARGET_OPTIONS = {
   depthBuffer: false,
   stencilBuffer: false
 };
 function RenderPipeline({
   passes,
+  combine,
   preview = true,
   previewProps
 }) {
@@ -4443,7 +4608,9 @@ function RenderPipeline({
     throw new Error("RenderPipeline requires at least 2 passes.");
   }
   const passTargets = targets.filter((entry) => entry.key.startsWith("pass_"));
-  const combineTarget = targets.find((entry) => entry.key === "combine")?.target;
+  const combineTarget = targets.find(
+    (entry) => entry.key === "combine"
+  )?.target;
   const firstEnabledIndex = passes.findIndex((pass) => pass.enabled !== false);
   const secondEnabledIndex = passes.findIndex(
     (pass, index) => index > firstEnabledIndex && pass.enabled !== false
@@ -4484,18 +4651,19 @@ function RenderPipeline({
         /* @__PURE__ */ jsx20(
           CombineShaderPass,
           {
+            ...combine,
             inputA,
             inputB,
             target: combineTarget
           }
         )
-      ] });
+      ] }, `combine_${index}`);
     }
     previousOutput = target;
     return element;
   });
   const outputTarget = getOutputTarget();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
     renderedPasses,
     preview && outputTarget && /* @__PURE__ */ jsx20(
       TargetPreview,
@@ -4753,13 +4921,14 @@ function NoiseWarpPass({
 }
 
 // src/components/DitherPulseRing.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs2 } from "react/jsx-runtime";
 function DitherPulseRing({
   spriteTextureSrc = DITHER_SPRITE_TEXTURE_SRC,
   glyphDitherEnabled = true,
   diffuseEnabled = false,
   blurEnabled = false,
   noiseWarpEnabled = false,
+  combineMode,
   noiseWarpRadius,
   noiseWarpStrength,
   diffuseRadius,
@@ -4796,6 +4965,7 @@ function DitherPulseRing({
           diffuseEnabled,
           blurEnabled,
           noiseWarpEnabled,
+          combineMode,
           noiseWarpRadius,
           noiseWarpStrength,
           diffuseRadius,
@@ -4821,6 +4991,7 @@ function DitherPulseRingContent({
   diffuseEnabled = false,
   blurEnabled = false,
   noiseWarpEnabled = false,
+  combineMode,
   noiseWarpRadius,
   noiseWarpStrength,
   diffuseRadius,
@@ -4836,6 +5007,22 @@ function DitherPulseRingContent({
   ringPosition,
   ringAlpha
 }) {
+  const normalizeHexColor = (hex) => {
+    if (!hex) return null;
+    const normalized = hex.replace("#", "");
+    if (normalized.length !== 6) return null;
+    const r = parseInt(normalized.slice(0, 2), 16) / 255;
+    const g = parseInt(normalized.slice(2, 4), 16) / 255;
+    const b = parseInt(normalized.slice(4, 6), 16) / 255;
+    return [r, g, b];
+  };
+  const resolveColor = (color) => {
+    if (!color) return null;
+    if (typeof color === "string") {
+      return normalizeHexColor(color);
+    }
+    return color;
+  };
   const glyphUniforms = {};
   glyphUniforms.trackMouse = false;
   const noiseUniforms = {};
@@ -4859,52 +5046,74 @@ function DitherPulseRingContent({
   const borderUniforms = {};
   if (borderThickness !== void 0) borderUniforms.thickness = borderThickness;
   if (borderIntensity !== void 0) borderUniforms.intensity = borderIntensity;
-  if (borderColor) borderUniforms.color = borderColor;
+  const resolvedBorderColor = resolveColor(borderColor);
+  if (resolvedBorderColor) borderUniforms.color = resolvedBorderColor;
   if (borderDitherStrength !== void 0) {
     borderUniforms.ditherStrength = borderDitherStrength;
   }
   if (borderTonemap !== void 0) borderUniforms.tonemap = borderTonemap;
   if (borderAlpha !== void 0) borderUniforms.alpha = borderAlpha;
   const ringUniforms = {};
-  if (ringColor) ringUniforms.color = ringColor;
+  const resolvedRingColor = resolveColor(ringColor);
+  if (resolvedRingColor) ringUniforms.color = resolvedRingColor;
   if (ringSpeed !== void 0) ringUniforms.speed = ringSpeed;
   if (ringPosition) ringUniforms.position = ringPosition;
   if (ringAlpha !== void 0) ringUniforms.alpha = ringAlpha;
-  return /* @__PURE__ */ jsx23(
-    RenderPipeline,
-    {
-      passes: [
-        {
-          component: BorderBeamPass,
-          props: { uniforms: borderUniforms }
-        },
-        {
-          component: ExpandingRingPass,
-          props: { clear: true, uniforms: ringUniforms }
-        },
-        {
-          component: NoiseWarpPass,
-          enabled: noiseWarpEnabled,
-          props: { uniforms: noiseUniforms }
-        },
-        {
-          component: GlyphDitherPass,
-          enabled: glyphDitherEnabled,
-          props: { spriteTextureSrc, uniforms: glyphUniforms }
-        },
-        {
-          component: DiffusePass,
-          enabled: diffuseEnabled,
-          props: { uniforms: diffuseUniforms }
-        },
-        {
-          component: BlurPass,
-          enabled: blurEnabled,
-          props: { uniforms: blurUniforms }
-        }
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsx23(
+      RenderPipeline,
+      {
+        passes: [
+          {
+            component: BorderBeamPass,
+            props: { uniforms: borderUniforms }
+          },
+          {
+            component: GlyphDitherPass,
+            enabled: glyphDitherEnabled,
+            props: { spriteTextureSrc, uniforms: glyphUniforms }
+          }
+        ],
+        combine: combineMode ? { mode: combineMode } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      RenderPipeline,
+      {
+        passes: [
+          {
+            component: BorderBeamPass,
+            props: { uniforms: borderUniforms }
+          },
+          {
+            component: ExpandingRingPass,
+            props: { uniforms: ringUniforms }
+          },
+          {
+            component: NoiseWarpPass,
+            enabled: noiseWarpEnabled,
+            props: { uniforms: noiseUniforms }
+          },
+          {
+            component: GlyphDitherPass,
+            enabled: glyphDitherEnabled,
+            props: { spriteTextureSrc, uniforms: glyphUniforms }
+          },
+          {
+            component: DiffusePass,
+            enabled: diffuseEnabled,
+            props: { uniforms: diffuseUniforms }
+          },
+          {
+            component: BlurPass,
+            enabled: blurEnabled,
+            props: { uniforms: blurUniforms }
+          }
+        ],
+        combine: combineMode ? { mode: combineMode } : void 0
+      }
+    )
+  ] });
 }
 export {
   AnimatedDrawingSVG,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/shader-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Shader components",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",