Merge pull request #74 from FunTechInc/minor-update

Minor update

Author: takuma-hmng8

.storybook/constant.ts

@@ -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 { UseAlphaBlending } from "./UseAlphaBlending";
+import {
+   ALPHABLENDING_PARAMS,
+   AlphaBlendingParams,
+} from "../../packages/use-shader-fx/src/fxs/utils/useAlphaBlending";
+
+const meta = {
+   title: "utils/useAlphaBlending",
+   component: UseAlphaBlending,
+   tags: ["autodocs"],
+   decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
+} satisfies Meta<typeof UseAlphaBlending>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+   args: ALPHABLENDING_PARAMS,
+   argTypes: setArgTypes<AlphaBlendingParams>(ALPHABLENDING_PARAMS),
+};

.storybook/public/app-head.jpg

@@ -0,0 +1,64 @@
+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 GUI from "lil-gui";
+import { useGUI } from "../../utils/useGUI";
+import {
+   useAlphaBlending,
+   useMarble,
+   useBrush,
+} from "../../packages/use-shader-fx/src";
+import {
+   ALPHABLENDING_PARAMS,
+   AlphaBlendingParams,
+} from "../../packages/use-shader-fx/src/fxs/utils/useAlphaBlending";
+
+extend({ FxMaterial });
+
+const CONFIG: AlphaBlendingParams = structuredClone(ALPHABLENDING_PARAMS);
+const setGUI = (gui: GUI) => {};
+const setConfig = () => {
+   return {
+      ...CONFIG,
+   } as AlphaBlendingParams;
+};
+
+export const UseAlphaBlending = (args: AlphaBlendingParams) => {
+   const updateGUI = useGUI(setGUI);
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+
+   const [updateBrush, setBrush, { output: brush }] = useBrush({ size, dpr });
+   const [update, set, { output }] = useAlphaBlending({ size, dpr });
+   const [updateMarble, setMarble, { output: marble }] = useMarble({
+      size,
+      dpr,
+   });
+
+   set({
+      texture: marble,
+      map: brush,
+   });
+
+   useFrame((props) => {
+      updateBrush(props);
+      updateMarble(props);
+      update(props);
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial
+            key={FxMaterial.key}
+            u_fx={output}
+            u_alpha={0.0}
+            ref={fxRef}
+         />
+      </mesh>
+   );
+};

.storybook/public/favicon.ico

@@ -2,20 +2,19 @@ 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 {
    useBlending,
-   useFxTexture,
    useNoise,
    useBrightnessPicker,
    useFluid,
+   useCoverTexture,
 } from "../../packages/use-shader-fx/src";
 import {
    BlendingParams,
    BLENDING_PARAMS,
-} from "../../packages/use-shader-fx/src/hooks/useBlending";
+} from "../../packages/use-shader-fx/src/fxs/utils/useBlending";
 
 extend({ FxMaterial });
 
@@ -36,14 +35,13 @@ const setConfig = () => {
  */
 export const UseBlending = (args: BlendingParams) => {
    const updateGUI = useGUI(setGUI);
-   const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
+   const [bg] = useLoader(THREE.TextureLoader, ["momo.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
    const { size, dpr } = useThree((state) => {
       return { size: state.size, dpr: state.viewport.dpr };
    });
-   const [updateFxTexture] = useFxTexture({ size, dpr });
-   const [updateNoise] = useNoise({ size, dpr });
-   const [updateFluid, setFluid] = useFluid({ size, dpr });
+   const [updateCover] = useCoverTexture({ size, dpr });
+   const [updateFluid, setFluid, { output: fluid }] = useFluid({ size, dpr });
    const [updateBlending, setBlending] = useBlending({ size, dpr });
    const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
 
@@ -65,9 +63,8 @@ export const UseBlending = (args: BlendingParams) => {
    });
 
    useFrame((props) => {
-      const bgTexture = updateFxTexture(props, {
-         textureResolution: CONSTANT.textureResolution,
-         texture0: bg,
+      const bgTexture = updateCover(props, {
+         texture: bg,
       });
       const fluid = updateFluid(props);
       const picked = updateBrightnessPicker(props, { texture: fluid });

.storybook/public/logo.svg

@@ -11,7 +11,7 @@ import {
 import {
    BrightnessPickerParams,
    BRIGHTNESSPICKER_PARAMS,
-} from "../../packages/use-shader-fx/src/hooks/useBrightnessPicker";
+} from "../../packages/use-shader-fx/src/fxs/utils/useBrightnessPicker";
 
 extend({ FxMaterial });
 

.storybook/public/thumbnail.jpg

@@ -4,12 +4,11 @@ import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
 import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
 import GUI from "lil-gui";
 import { useGUI } from "../../utils/useGUI";
-import { CONSTANT } from "../constant";
 import { useBrush, useFxTexture } from "../../packages/use-shader-fx/src";
 import {
    BrushParams,
    BRUSH_PARAMS,
-} from "../../packages/use-shader-fx/src/hooks/useBrush";
+} from "../../packages/use-shader-fx/src/fxs/interactions/useBrush";
 
 extend({ FxMaterial });
 
@@ -57,16 +56,15 @@ export const UseBrushWithTexture = (args: BrushParams) => {
       return { size: state.size, dpr: state.viewport.dpr };
    });
    const [updateFxTexture] = useFxTexture({ size, dpr });
-   const [updateBrush] = useBrush({ size, dpr });
+   const [updateBrush, setBrush] = useBrush({ size, dpr });
 
    useFrame((props) => {
       const bgTexture = updateFxTexture(props, {
-         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const fx = updateBrush(props, {
-         texture: bgTexture,
          ...setConfig(),
+         texture: bgTexture,
       });
       fxRef.current!.u_fx = fx;
       updateGUI();

.storybook/stories/UseAlphaBlending.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 { UseChromaKey } from "./UseChromaKey";
+import {
+   CHROMAKEY_PARAMS,
+   ChromaKeyParams,
+} from "../../packages/use-shader-fx/src/fxs/misc/useChromaKey";
+
+const meta = {
+   title: "misc/useChromaKey",
+   component: UseChromaKey,
+   tags: ["autodocs"],
+   decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
+} satisfies Meta<typeof UseChromaKey>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+   args: CHROMAKEY_PARAMS,
+   argTypes: setArgTypes<ChromaKeyParams>(CHROMAKEY_PARAMS),
+};

.storybook/stories/UseAlphaBlending.tsx

@@ -0,0 +1,74 @@
+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 GUI from "lil-gui";
+import { useGUI } from "../../utils/useGUI";
+import {
+   useChromaKey,
+   useCoverTexture,
+} from "../../packages/use-shader-fx/src";
+import {
+   CHROMAKEY_PARAMS,
+   ChromaKeyParams,
+} from "../../packages/use-shader-fx/src/fxs/misc/useChromaKey";
+
+extend({ FxMaterial });
+
+const CONFIG: ChromaKeyParams = structuredClone(CHROMAKEY_PARAMS);
+const setGUI = (gui: GUI) => {
+   gui.addColor(CONFIG, "keyColor");
+   gui.add(CONFIG, "similarity", 0, 1, 0.01);
+   gui.add(CONFIG, "smoothness", 0, 1, 0.01);
+   gui.add(CONFIG, "spill", 0, 1, 0.01);
+   gui.addColor(CONFIG, "color");
+   gui.add(CONFIG, "contrast", 0, 2, 0.01);
+   gui.add(CONFIG, "brightness", 0, 2, 0.01);
+   gui.add(CONFIG, "gamma", 0, 2, 0.01);
+};
+const setConfig = () => {
+   return {
+      ...CONFIG,
+   } as ChromaKeyParams;
+};
+
+export const UseChromaKey = (args: ChromaKeyParams) => {
+   const updateGUI = useGUI(setGUI);
+   const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+
+   const [update, set, { output }] = useChromaKey({ size, dpr });
+
+   const [updateCover, setCover, { output: cover }] = useCoverTexture({
+      size,
+      dpr,
+   });
+
+   setCover({
+      texture: bg,
+   });
+
+   useFrame((props) => {
+      updateCover(props);
+      update(props, {
+         ...setConfig(),
+         texture: cover,
+      });
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial
+            key={FxMaterial.key}
+            u_fx={output}
+            u_alpha={0.0}
+            ref={fxRef}
+         />
+      </mesh>
+   );
+};

.storybook/stories/UseBlending.tsx

@@ -8,7 +8,7 @@ import { useColorStrata, useNoise } from "../../packages/use-shader-fx/src";
 import {
    COLORSTRATA_PARAMS,
    ColorStrataParams,
-} from "../../packages/use-shader-fx/src/hooks/useColorStrata";
+} from "../../packages/use-shader-fx/src/fxs/noises/useColorStrata";
 
 extend({ FxMaterial });
 

.storybook/stories/UseBrightnessPicker.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 { UseCoverTexture } from "./UseCoverTexture";
+import {
+   COVERTEXTURE_PARAMS,
+   CoverTextureParams,
+} from "../../packages/use-shader-fx/src/fxs/utils/useCoverTexture";
+
+const meta = {
+   title: "utils/useCoverTexture",
+   component: UseCoverTexture,
+   tags: ["autodocs"],
+   decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
+} satisfies Meta<typeof UseCoverTexture>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+   args: COVERTEXTURE_PARAMS,
+   argTypes: setArgTypes<CoverTextureParams>(COVERTEXTURE_PARAMS),
+};

.storybook/stories/UseBrush.tsx

@@ -0,0 +1,54 @@
+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 GUI from "lil-gui";
+import { useGUI } from "../../utils/useGUI";
+import { useCoverTexture } from "../../packages/use-shader-fx/src";
+import {
+   COVERTEXTURE_PARAMS,
+   CoverTextureParams,
+} from "../../packages/use-shader-fx/src/fxs/utils/useCoverTexture";
+
+extend({ FxMaterial });
+
+const CONFIG: CoverTextureParams = structuredClone(COVERTEXTURE_PARAMS);
+const setGUI = (gui: GUI) => {};
+const setConfig = () => {
+   return {
+      ...CONFIG,
+   } as CoverTextureParams;
+};
+
+/** The hook with `~~Texutre` calculates the texture resolution and canvas resolution and covers the texture. */
+export const UseCoverTexture = (args: CoverTextureParams) => {
+   const [bg] = useLoader(THREE.TextureLoader, ["/momo.jpg"]);
+   const updateGUI = useGUI(setGUI);
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+
+   const [update, set, { output }] = useCoverTexture({ size, dpr });
+
+   set({
+      texture: bg,
+   });
+
+   useFrame((props) => {
+      update(props);
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial
+            key={FxMaterial.key}
+            u_fx={output}
+            u_alpha={0.0}
+            ref={fxRef}
+         />
+      </mesh>
+   );
+};