add useColorStrata

.storybook/stories/UseBlending.tsx

@@ -19,17 +19,14 @@ extend({ FxMaterial });
 
 const CONFIG: BlendingParams = structuredClone(BLENDING_PARAMS);
 const setGUI = (gui: GUI) => {
-   gui.add(CONFIG, "distortionStrength", 0, 1, 0.01);
-   gui.add(CONFIG, "edge0", 0, 1, 0.01);
-   gui.add(CONFIG, "edge1", 0, 1, 0.01);
+   gui.add(CONFIG, "mapIntensity", 0, 1, 0.01);
+   gui.add(CONFIG, "min", 0, 1, 0.01);
+   gui.add(CONFIG, "max", 0, 1, 0.01);
    gui.addColor(CONFIG, "color");
 };
 const setConfig = () => {
    return {
-      distortionStrength: CONFIG.distortionStrength,
-      edge0: CONFIG.edge0,
-      edge1: CONFIG.edge1,
-      color: CONFIG.color,
+      ...CONFIG,
    } as BlendingParams;
 };
 

.storybook/stories/UseBrightnessPicker.tsx

@@ -15,25 +15,17 @@ import {
 
 extend({ FxMaterial });
 
-const CONFIG = {
-   ...structuredClone(BRIGHTNESSPICKER_PARAMS),
-   r: 0.5,
-   g: 0.5,
-   b: 0.5,
-};
-const brightness = new THREE.Vector3(CONFIG.r, CONFIG.g, CONFIG.b);
+const CONFIG: BrightnessPickerParams = structuredClone(BRIGHTNESSPICKER_PARAMS);
 const setGUI = (gui: GUI) => {
-   gui.add(CONFIG, "r", 0, 1, 0.01);
-   gui.add(CONFIG, "g", 0, 1, 0.01);
-   gui.add(CONFIG, "b", 0, 1, 0.01);
+   gui.add(CONFIG.brightness!, "x", 0, 1, 0.01);
+   gui.add(CONFIG.brightness!, "y", 0, 1, 0.01);
+   gui.add(CONFIG.brightness!, "z", 0, 1, 0.01);
    gui.add(CONFIG, "min", 0, 1, 0.01);
    gui.add(CONFIG, "max", 0, 1, 0.01);
 };
 const setConfig = () => {
    return {
-      brightness: brightness.set(CONFIG.r, CONFIG.g, CONFIG.b),
-      min: CONFIG.min,
-      max: CONFIG.max,
+      ...CONFIG,
    } as BrightnessPickerParams;
 };
 
@@ -53,8 +45,8 @@ export const UseBrightnessPicker = (args: BrightnessPickerParams) => {
    useFrame((props) => {
       const noise = updateNoise(props);
       const fx = updateBrightnessPicker(props, {
-         texture: noise,
          ...setConfig(),
+         texture: noise,
       });
       fxRef.current!.u_fx = fx;
       fxRef.current!.u_alpha = 0.0;

.storybook/stories/UseBrush.tsx

@@ -24,12 +24,7 @@ const setGUI = (gui: GUI) => {
 };
 const setConfig = () => {
    return {
-      radius: CONFIG.radius,
-      smudge: CONFIG.smudge,
-      dissipation: CONFIG.dissipation,
-      motionBlur: CONFIG.motionBlur,
-      motionSample: CONFIG.motionSample,
-      color: CONFIG.color,
+      ...CONFIG,
    } as BrushParams;
 };
 

.storybook/stories/UseColorStrata.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import * as THREE from "three";
+import { useFrame, extend, useThree } from "@react-three/fiber";
+import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
+import GUI from "lil-gui";
+import { useGUI } from "../../utils/useGUI";
+import { useColorStrata, useNoise } from "../../packages/use-shader-fx/src";
+import {
+   COLORSTRATA_PARAMS,
+   ColorStrataParams,
+} from "../../packages/use-shader-fx/src/hooks/useColorStrata";
+
+extend({ FxMaterial });
+
+const CONFIG: ColorStrataParams = structuredClone(COLORSTRATA_PARAMS);
+const setGUI = (gui: GUI) => {
+   gui.add(CONFIG, "laminateLayer", 0, 10, 1);
+   const laminateInterval = gui.addFolder("laminateInterval");
+   laminateInterval.add(CONFIG.laminateInterval!, "x", 0, 2, 0.01);
+   laminateInterval.add(CONFIG.laminateInterval!, "y", 0, 2, 0.01);
+   const laminateDetail = gui.addFolder("laminateDetail");
+   laminateDetail.add(CONFIG.laminateDetail!, "x", 0, 10, 0.1);
+   laminateDetail.add(CONFIG.laminateDetail!, "y", 0, 10, 0.1);
+   const distortion = gui.addFolder("distortion");
+   distortion.add(CONFIG.distortion!, "x", 0, 10, 0.01);
+   distortion.add(CONFIG.distortion!, "y", 0, 10, 0.01);
+   const colorFactor = gui.addFolder("colorFactor");
+   colorFactor.add(CONFIG.colorFactor!, "x", 0, 10, 0.01);
+   colorFactor.add(CONFIG.colorFactor!, "y", 0, 10, 0.01);
+   colorFactor.add(CONFIG.colorFactor!, "z", 0, 10, 0.01);
+};
+const setConfig = () => {
+   return {
+      ...CONFIG,
+   } as ColorStrataParams;
+};
+
+export const UseColorStrata = (args: ColorStrataParams) => {
+   const updateGUI = useGUI(setGUI);
+
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+   const [updateColorStrata] = useColorStrata({ size, dpr });
+
+   useFrame((props) => {
+      const fx = updateColorStrata(props, {
+         ...setConfig(),
+      });
+      fxRef.current!.u_fx = fx;
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={fxRef} />
+      </mesh>
+   );
+};
+
+export const UseColorStrataWithNoise = (args: ColorStrataParams) => {
+   const updateGUI = useGUI(setGUI);
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+   const [updateColorStrata] = useColorStrata({ size, dpr });
+   const [updateNoise] = useNoise({ size, dpr });
+
+   useFrame((props) => {
+      const noise = updateNoise(props);
+
+      const fx = updateColorStrata(props, {
+         ...setConfig(),
+         texture: noise,
+      });
+
+      fxRef.current!.u_fx = fx;
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={fxRef} />
+      </mesh>
+   );
+};

.storybook/stories/UseDuoTone.tsx

@@ -20,8 +20,7 @@ const setGUI = (gui: GUI) => {
 };
 const setConfig = () => {
    return {
-      color0: CONFIG.color0,
-      color1: CONFIG.color1,
+      ...CONFIG,
    } as DuoToneParams;
 };
 
@@ -41,8 +40,8 @@ export const UseDuoTone = (args: DuoToneParams) => {
          texture0: bg,
       });
       const fx = updateDuoTone(props, {
-         texture: bgTexture,
          ...setConfig(),
+         texture: bgTexture,
       });
       fxRef.current!.u_fx = fx;
       updateGUI();

.storybook/stories/UseFluid.tsx

@@ -25,13 +25,7 @@ const setGUI = (gui: GUI) => {
 };
 const setConfig = () => {
    return {
-      density_dissipation: CONFIG.density_dissipation,
-      velocity_dissipation: CONFIG.velocity_dissipation,
-      velocity_acceleration: CONFIG.velocity_acceleration,
-      pressure_dissipation: CONFIG.pressure_dissipation,
-      pressure_iterations: CONFIG.pressure_iterations,
-      curl_strength: CONFIG.curl_strength,
-      splat_radius: CONFIG.splat_radius,
+      ...CONFIG,
    } as FluidParams;
 };
 

.storybook/stories/UseFxTexture.tsx

@@ -14,18 +14,22 @@ import {
 extend({ FxMaterial });
 
 const CONFIG: FxTextureParams = structuredClone(FXTEXTURE_PARAMS);
-const DIR = new THREE.Vector2(0, 0);
+
 const setGUI = (gui: GUI) => {
    gui.add(CONFIG, "mapIntensity", 0, 10, 0.1);
+   gui.add(CONFIG, "edgeIntensity", 0, 10, 0.1);
+   const epicenter = gui.addFolder("epicenter");
+   epicenter.add(CONFIG.epicenter!, "x", -1, 1, 0.1);
+   epicenter.add(CONFIG.epicenter!, "y", -1, 1, 0.1);
    gui.add(CONFIG, "progress", 0, 1, 0.01);
-   gui.add(DIR, "x", -1, 1, 0.01);
-   gui.add(DIR, "y", -1, 1, 0.01);
+   const dir = gui.addFolder("dir");
+   dir.add(CONFIG.dir!, "x", -1, 1, 0.01);
+   dir.add(CONFIG.dir!, "y", -1, 1, 0.01);
+   gui.add(CONFIG, "padding", 0, 0.3, 0.01);
 };
 const setConfig = () => {
    return {
-      mapIntensity: CONFIG.mapIntensity,
-      progress: CONFIG.progress,
-      dir: DIR,
+      ...CONFIG,
    } as FxTextureParams;
 };
 
@@ -48,11 +52,11 @@ export const UseFxTexture = (args: FxTextureParams) => {
    useFrame((props) => {
       const noise = updateNoise(props);
       const fx = updateFxTexture(props, {
+         ...setConfig(),
          map: noise,
          textureResolution: CONSTANT.textureResolution,
          texture0: bg,
          texture1: momo,
-         ...setConfig(),
       });
       fxRef.current!.u_fx = fx;
       updateGUI();

.storybook/stories/UseNoise.tsx

@@ -13,15 +13,18 @@ extend({ FxMaterial });
 
 const CONFIG: NoiseParams = structuredClone(NOISE_PARAMS);
 const setGUI = (gui: GUI) => {
+   gui.add(CONFIG, "scale", 0, 10, 0.001);
    gui.add(CONFIG, "timeStrength", 0, 10, 0.01);
-   gui.add(CONFIG, "noiseOctaves", 0, 10, 1);
-   gui.add(CONFIG, "fbmOctaves", 0, 10, 1);
+   gui.add(CONFIG, "noiseOctaves", 1, 10, 1);
+   gui.add(CONFIG, "fbmOctaves", 1, 10, 1);
+   gui.add(CONFIG, "warpOctaves", 1, 10, 1);
+   gui.add(CONFIG.warpDirection!, "x", 1, 10, 0.1);
+   gui.add(CONFIG.warpDirection!, "y", 1, 10, 0.1);
+   gui.add(CONFIG, "warpStrength", 1, 50, 0.1);
 };
 const setConfig = () => {
    return {
-      timeStrength: CONFIG.timeStrength,
-      noiseOctaves: CONFIG.noiseOctaves,
-      fbmOctaves: CONFIG.fbmOctaves,
+      ...CONFIG,
    } as NoiseParams;
 };
 

.storybook/stories/UseRipple.tsx

@@ -23,11 +23,7 @@ const setGUI = (gui: GUI) => {
 };
 const setConfig = () => {
    return {
-      frequency: CONFIG.frequency,
-      rotation: CONFIG.rotation,
-      fadeout_speed: CONFIG.fadeout_speed,
-      scale: CONFIG.scale,
-      alpha: CONFIG.alpha,
+      ...CONFIG,
    } as RippleParams;
 };
 

.storybook/stories/UseSimpleBlur.tsx

@@ -20,9 +20,7 @@ const setGUI = (gui: GUI) => {
 };
 const setConfig = () => {
    return {
-      texture: CONFIG.texture,
-      blurSize: CONFIG.blurSize,
-      blurPower: CONFIG.blurPower,
+      ...CONFIG,
    } as SimpleBlurParams;
 };
 

.storybook/stories/UseWave.tsx

@@ -13,32 +13,19 @@ import {
 
 extend({ FxMaterial });
 
-const CONFIG = {
-   ...structuredClone(WAVE_PARAMS),
-   epicenter: {
-      vec2: new THREE.Vector2(0.0, 0.0),
-      x: 0.0,
-      y: 0.0,
-   },
-};
+const CONFIG: WaveParams = structuredClone(WAVE_PARAMS);
 const setGUI = (gui: GUI) => {
-   gui.add(CONFIG.epicenter, "x", -1, 1, 0.1);
-   gui.add(CONFIG.epicenter, "y", -1, 1, 0.1);
+   const epicenter = gui.addFolder("epicenter");
+   epicenter.add(CONFIG.epicenter!, "x", -1, 1, 0.1);
+   epicenter.add(CONFIG.epicenter!, "y", -1, 1, 0.1);
    gui.add(CONFIG, "progress", 0, 1, 0.1);
    gui.add(CONFIG, "width", 0, 1, 0.1);
    gui.add(CONFIG, "strength", 0, 1, 0.1);
    gui.add(CONFIG, "mode", ["center", "horizontal", "vertical"]);
 };
 const setConfig = () => {
    return {
-      epicenter: CONFIG.epicenter.vec2.set(
-         CONFIG.epicenter.x,
-         CONFIG.epicenter.y
-      ),
-      progress: CONFIG.progress,
-      width: CONFIG.width,
-      strength: CONFIG.strength,
-      mode: CONFIG.mode,
+      ...CONFIG,
    } as WaveParams;
 };
 

.storybook/stories/useColorStrata.stories.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { StoryObj } from "@storybook/react";
+import { setArgTypes } from "../utils/setArgTypes";
+import { Setup } from "../utils/Setup";
+import type { Meta } from "@storybook/react";
+import {
+   COLORSTRATA_PARAMS,
+   ColorStrataParams,
+} from "../../packages/use-shader-fx/src/hooks/useColorStrata";
+import { UseColorStrata, UseColorStrataWithNoise } from "./UseColorStrata";
+
+const meta = {
+   title: "useColorStrata",
+   component: UseColorStrata,
+   tags: ["autodocs"],
+   decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
+} satisfies Meta<typeof UseColorStrata>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const storySetting = {
+   args: COLORSTRATA_PARAMS,
+   argTypes: setArgTypes<ColorStrataParams>(COLORSTRATA_PARAMS),
+};
+export const ColorStrata: Story = {
+   render: (args) => <UseColorStrata {...args} />,
+   ...storySetting,
+};
+export const WithNoise: Story = {
+   render: (args) => <UseColorStrataWithNoise {...args} />,
+   ...storySetting,
+};