add useFxBlending

Author: takuma-hmng8

.storybook/stories/UseBlending.tsx

@@ -31,7 +31,7 @@ const setConfig = () => {
 };
 
 /**
- * Blending the texture passed as map
+ * Blend map to texture. You can set the threshold for blending with brightness. You can set the dodge color by setting color. If you don't want to reflect the map's color, you can use useFxBlending instead.
  */
 export const UseBlending = (args: BlendingParams) => {
    const updateGUI = useGUI(setGUI);
@@ -51,9 +51,9 @@ export const UseBlending = (args: BlendingParams) => {
       });
       const noise = updateNoise(props);
       const fx = updateBlending(props, {
+         ...setConfig(),
          texture: bgTexture,
          map: noise,
-         ...setConfig(),
       });
       fxRef.current!.u_fx = fx;
       updateGUI();

.storybook/stories/UseFxBlending.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import * as THREE from "three";
+import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
+import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
+import { CONSTANT } from "../constant";
+import GUI from "lil-gui";
+import { useGUI } from "../../utils/useGUI";
+import {
+   useFxBlending,
+   useFluid,
+   useNoise,
+} from "../../packages/use-shader-fx/src";
+import {
+   FxBlendingParams,
+   FXBLENDING_PARAMS,
+} from "../../packages/use-shader-fx/src/hooks/useFxBlending";
+
+extend({ FxMaterial });
+
+const CONFIG: FxBlendingParams = structuredClone(FXBLENDING_PARAMS);
+const setGUI = (gui: GUI) => {
+   gui.add(CONFIG, "mapIntensity", 0, 1, 0.01);
+};
+const setConfig = () => {
+   return {
+      ...CONFIG,
+   } as FxBlendingParams;
+};
+
+/**
+ * Blend map to texture. You can change the intensity of fx applied by the rg value of map. Unlike "useBlending", the map color is not reflected.
+ */
+export const UseFxBlending = (args: FxBlendingParams) => {
+   const updateGUI = useGUI(setGUI);
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+   const [updateFluid] = useFluid({ size, dpr });
+   const [updateNoise] = useNoise({ size, dpr });
+   const [updateFxBlending] = useFxBlending({ size, dpr });
+
+   useFrame((props) => {
+      const noise = updateNoise(props);
+      const fluid = updateFluid(props);
+      const blending = updateFxBlending(props, {
+         ...setConfig(),
+         texture: fluid,
+         map: noise,
+      });
+      fxRef.current!.u_fx = blending;
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={fxRef} />
+      </mesh>
+   );
+};

.storybook/stories/useFxBlending.stories.tsx

@@ -0,0 +1,24 @@
+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 { UseFxBlending } from "./UseFxBlending";
+import {
+   FxBlendingParams,
+   FXBLENDING_PARAMS,
+} from "../../packages/use-shader-fx/src/hooks/useFxBlending";
+
+const meta = {
+   title: "useFxBlending",
+   component: UseFxBlending,
+   tags: ["autodocs"],
+   decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
+} satisfies Meta<typeof UseFxBlending>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+   args: FXBLENDING_PARAMS,
+   argTypes: setArgTypes<FxBlendingParams>(FXBLENDING_PARAMS),
+};

app/_home/index.tsx

@@ -4,7 +4,7 @@ import { useFrame, useThree } from "@react-three/fiber";
 import {
    useNoise,
    useFluid,
-   useBlending,
+   useFxBlending,
    useColorStrata,
    useBrightnessPicker,
 } from "@/packages/use-shader-fx/src";
@@ -16,13 +16,12 @@ export const Home = () => {
    });
    const [updateNoise, setNoise] = useNoise({ size, dpr });
    const [updateFluid, setFluid] = useFluid({ size, dpr });
-   const [updateBlending, setBlending] = useBlending({ size, dpr });
+   const [updateFxBlending, setFxBlending] = useFxBlending({ size, dpr });
    const [updateColorStrata, setColorStrata] = useColorStrata({ size, dpr });
    const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
 
-   setBlending({
+   setFxBlending({
       mapIntensity: 0.45,
-      brightness: new THREE.Vector3(0.2, 0.2, 0.2),
    });
 
    setNoise({
@@ -53,7 +52,7 @@ export const Home = () => {
    useFrame((props) => {
       const noise = updateNoise(props);
       const fluid = updateFluid(props);
-      const blending = updateBlending(props, {
+      const blending = updateFxBlending(props, {
          texture: fluid,
          map: noise,
       });