fruid >= fluid

Author: takuma-hmng8

Diff for: .storybook/stories/UseFruid.tsx renamed to .storybook/stories/UseFluid.tsx

@@ -9,15 +9,15 @@ import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
 import { CONSTANT } from "../constant";
 import GUI from "lil-gui";
 import { useGUI } from "../../utils/useGUI";
-import { useFruid, useTransitionBg } from "../../packages/use-shader-fx/src";
+import { useFluid, useTransitionBg } from "../../packages/use-shader-fx/src";
 import {
-   FRUID_PARAMS,
-   FruidParams,
-} from "../../packages/use-shader-fx/src/hooks/useFruid";
+   FLUID_PARAMS,
+   FluidParams,
+} from "../../packages/use-shader-fx/src/hooks/useFluid";
 
 extend({ FxMaterial, FxTextureMaterial });
 
-const CONFIG: FruidParams = structuredClone(FRUID_PARAMS);
+const CONFIG: FluidParams = structuredClone(FLUID_PARAMS);
 const setGUI = (gui: GUI) => {
    gui.add(CONFIG, "density_dissipation", 0, 1, 0.01);
    gui.add(CONFIG, "velocity_dissipation", 0, 1, 0.01);
@@ -36,19 +36,19 @@ const setConfig = () => {
       pressure_iterations: CONFIG.pressure_iterations,
       curl_strength: CONFIG.curl_strength,
       splat_radius: CONFIG.splat_radius,
-   } as FruidParams;
+   } as FluidParams;
 };
 
-export const UseFruid = (args: FruidParams) => {
+export const UseFluid = (args: FluidParams) => {
    const updateGUI = useGUI(setGUI);
 
    const fxRef = React.useRef<FxMaterialProps>();
    const size = useThree((state) => state.size);
    const dpr = useThree((state) => state.viewport.dpr);
-   const [updateFruid] = useFruid({ size, dpr });
+   const [updateFluid] = useFluid({ size, dpr });
 
    useFrame((props) => {
-      const fx = updateFruid(props, setConfig());
+      const fx = updateFluid(props, setConfig());
       fxRef.current!.u_fx = fx;
       updateGUI();
    });
@@ -61,12 +61,12 @@ export const UseFruid = (args: FruidParams) => {
    );
 };
 
-export const UseFruidWithTexture = (args: FruidParams) => {
+export const UseFluidWithTexture = (args: FluidParams) => {
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxTextureMaterialProps>();
    const size = useThree((state) => state.size);
    const dpr = useThree((state) => state.viewport.dpr);
-   const [updateFruid] = useFruid({ size, dpr });
+   const [updateFluid] = useFluid({ size, dpr });
 
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const [updateTransitionBg] = useTransitionBg({ size, dpr });
@@ -77,7 +77,7 @@ export const UseFruidWithTexture = (args: FruidParams) => {
          texture0: bg,
       });
 
-      const fx = updateFruid(props, setConfig());
+      const fx = updateFluid(props, setConfig());
 
       fxRef.current!.u_postFx = bgTexture;
       fxRef.current!.u_fx = fx;

Diff for: .storybook/stories/useFruid.stories.tsx renamed to .storybook/stories/useFluid.stories.tsx

@@ -4,30 +4,30 @@ import { setArgTypes } from "../utils/setArgTypes";
 import { Setup } from "../utils/Setup";
 import type { Meta } from "@storybook/react";
 import {
-   FRUID_PARAMS,
-   FruidParams,
-} from "../../packages/use-shader-fx/src/hooks/useFruid";
-import { UseFruid, UseFruidWithTexture } from "./UseFruid";
+   FLUID_PARAMS,
+   FluidParams,
+} from "../../packages/use-shader-fx/src/hooks/useFluid";
+import { UseFluid, UseFluidWithTexture } from "./UseFluid";
 
 const meta = {
-   title: "useFruid",
-   component: UseFruid,
+   title: "useFluid",
+   component: UseFluid,
    tags: ["autodocs"],
    decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
-} satisfies Meta<typeof UseFruid>;
+} satisfies Meta<typeof UseFluid>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 const storySetting = {
-   args: FRUID_PARAMS,
-   argTypes: setArgTypes<FruidParams>(FRUID_PARAMS),
+   args: FLUID_PARAMS,
+   argTypes: setArgTypes<FluidParams>(FLUID_PARAMS),
 };
-export const Fruid: Story = {
-   render: (args) => <UseFruid {...args} />,
+export const Fluid: Story = {
+   render: (args) => <UseFluid {...args} />,
    ...storySetting,
 };
 export const WithTexture: Story = {
-   render: (args) => <UseFruidWithTexture {...args} />,
+   render: (args) => <UseFluidWithTexture {...args} />,
    ...storySetting,
 };

Diff for: README.md

@@ -18,7 +18,7 @@ From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in ar
 3. `fxObject` - An object that holds various FX components, such as scene, camera, material, and renderTarget.
 
 ```js
-const [updateFx, setParams, fxObject] = useFruid(config);
+const [updateFx, setParams, fxObject] = useFluid(config);
 ```
 
 Execute `updateFx` in `useFrame`. The first argument receives the RootState from `useFrame`, and the second one takes `HookPrams`. Each fx has its `HookPrams`, and each type is exported.
@@ -41,15 +41,15 @@ This is the simplest example!
 import * as THREE from "three";
 import { useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useFruid } from "@hmng8/use-shader-fx";
+import { useFluid } from "@hmng8/use-shader-fx";
 
 export const Demo = () => {
    const ref = useRef<THREE.ShaderMaterial>(null);
    const size = useThree((state) => state.size);
    const dpr = useThree((state) => state.viewport.dpr);
-   const [updateFruid] = useFruid({ size, dpr });
+   const [updateFluid] = useFluid({ size, dpr });
    useFrame((props) => {
-      ref.current!.uniforms.u_fx.value = updateFruid(props);
+      ref.current!.uniforms.u_fx.value = updateFluid(props);
    });
 
    return (

Diff for: app/_demo/config.ts

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import GUI from "lil-gui";
 
-import { FRUID_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFruid";
+import { FLUID_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFluid";
 import { FOGPROJECTION_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFogProjection";
 
 export const CONFIG = {
@@ -12,14 +12,14 @@ export const CONFIG = {
       fogEdge1: 1.0,
       distortionStrength: 0.2,
    },
-   fruid: {
-      ...structuredClone(FRUID_PARAMS),
-      fruidVec: new THREE.Vector3(),
-      fruid_color: (velocity: THREE.Vector2) => {
+   fluid: {
+      ...structuredClone(FLUID_PARAMS),
+      fluidVec: new THREE.Vector3(),
+      fluid_color: (velocity: THREE.Vector2) => {
          const rCol = Math.max(0.2, velocity.x * 100);
          const gCol = Math.max(0.2, velocity.y * 100);
          const bCol = Math.max(0.4, (rCol + gCol) / 2);
-         return CONFIG.fruid.fruidVec.set(rCol, gCol, bCol);
+         return CONFIG.fluid.fluidVec.set(rCol, gCol, bCol);
       },
    },
 };
@@ -31,11 +31,11 @@ export const setGUI = (gui: GUI) => {
    fogProjection.add(CONFIG.fogProjection, "fogEdge1", 0, 1, 0.01);
    fogProjection.addColor(CONFIG.fogProjection, "fogColor");
 
-   const fruid = gui.addFolder("fruid");
-   fruid.add(CONFIG.fruid, "density_dissipation", 0, 1, 0.01);
-   fruid.add(CONFIG.fruid, "velocity_dissipation", 0, 1, 0.01);
-   fruid.add(CONFIG.fruid, "pressure_dissipation", 0, 1, 0.01);
-   fruid.add(CONFIG.fruid, "velocity_acceleration", 0, 100, 1);
-   fruid.add(CONFIG.fruid, "curl_strength", 0, 100, 1);
-   fruid.add(CONFIG.fruid, "splat_radius", 0, 0.1, 0.001);
+   const Fluid = gui.addFolder("Fluid");
+   Fluid.add(CONFIG.fluid, "density_dissipation", 0, 1, 0.01);
+   Fluid.add(CONFIG.fluid, "velocity_dissipation", 0, 1, 0.01);
+   Fluid.add(CONFIG.fluid, "pressure_dissipation", 0, 1, 0.01);
+   Fluid.add(CONFIG.fluid, "velocity_acceleration", 0, 100, 1);
+   Fluid.add(CONFIG.fluid, "curl_strength", 0, 100, 1);
+   Fluid.add(CONFIG.fluid, "splat_radius", 0, 0.1, 0.001);
 };

Diff for: app/_demo/index.tsx

@@ -8,7 +8,7 @@ import {
    FxTransparentMaterialProps,
 } from "@/utils/fxTransparentMaterial";
 import {
-   useFruid,
+   useFluid,
    useFogProjection,
    useNoise,
 } from "@/packages/use-shader-fx/src";
@@ -24,7 +24,7 @@ export const Demo = () => {
 
    const [updateNoise] = useNoise({ size, dpr });
 
-   const [updateFruid, setFruid] = useFruid({
+   const [updateFluid, setFluid] = useFluid({
       size,
       dpr,
    });
@@ -33,7 +33,7 @@ export const Demo = () => {
 
    usePerformanceMonitor({
       onChange({ factor }) {
-         setFruid({
+         setFluid({
             pressure_iterations: Math.max(2, Math.floor(20 * factor)),
          });
       },
@@ -44,14 +44,14 @@ export const Demo = () => {
          timeStrength: 0.4,
       });
 
-      const fx = updateFruid(props, {
-         density_dissipation: CONFIG.fruid.density_dissipation,
-         velocity_dissipation: CONFIG.fruid.velocity_dissipation,
-         velocity_acceleration: CONFIG.fruid.velocity_acceleration,
-         pressure_dissipation: CONFIG.fruid.pressure_dissipation,
-         curl_strength: CONFIG.fruid.curl_strength,
-         splat_radius: CONFIG.fruid.splat_radius,
-         fruid_color: CONFIG.fruid.fruid_color,
+      const fx = updateFluid(props, {
+         density_dissipation: CONFIG.fluid.density_dissipation,
+         velocity_dissipation: CONFIG.fluid.velocity_dissipation,
+         velocity_acceleration: CONFIG.fluid.velocity_acceleration,
+         pressure_dissipation: CONFIG.fluid.pressure_dissipation,
+         curl_strength: CONFIG.fluid.curl_strength,
+         splat_radius: CONFIG.fluid.splat_radius,
+         fluid_color: CONFIG.fluid.fluid_color,
       });
 
       const postFx = updateFogProjection(props, {
@@ -88,15 +88,15 @@ the simplest demo
 // import * as THREE from "three";
 // import { useRef } from "react";
 // import { useFrame, useThree } from "@react-three/fiber";
-// import { useFruid } from "@hmng8/use-shader-fx";
+// import { useFluid } from "@hmng8/use-shader-fx";
 
 // export const Demo = () => {
 //    const ref = useRef<THREE.ShaderMaterial>(null);
 //    const size = useThree((state) => state.size);
 //    const dpr = useThree((state) => state.viewport.dpr);
-//    const [updateFruid] = useFruid({ size, dpr });
+//    const [updateFluid] = useFluid({ size, dpr });
 //    useFrame((props) => {
-//       ref.current!.uniforms.u_fx.value = updateFruid(props);
+//       ref.current!.uniforms.u_fx.value = updateFluid(props);
 //    });
 
 //    return (