パッケージ化

Author: takuma-hmng8

README.md

@@ -1,3 +1,5 @@
+![use-shader-fx](public/app.jpg)
+
 # Usage
 
 それぞれの fxHook からは{updateFx,setParams,fxObject}を受け取ります。

app/fx/Scene.tsx

@@ -1,56 +1,66 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import * as THREE from "three";
-import { useFrame, useLoader, extend } from "@react-three/fiber";
-import { RippleParams, useRipple } from "./hooks/useRipple";
-import { useFlowmap, FlowmapParams } from "./hooks/useFlowmap";
-import { useSimpleFruid } from "./hooks/useSimpleFruid";
-import { FruidParams, useFruid } from "./hooks/useFruid";
-import { useBrush } from "./hooks/useBrush";
-import { TransitionBgParams, useTransitionBg } from "./hooks/useTransitionBg";
+import { useRipple } from "@/packages/use-shader-fx/src";
+import { useFlowmap } from "@/packages/use-shader-fx/src";
+import { useSimpleFruid } from "@/packages/use-shader-fx/src";
+import { useFruid } from "@/packages/use-shader-fx/src";
+import { useBrush } from "@/packages/use-shader-fx/src";
+import { useTransitionBg } from "@/packages/use-shader-fx/src";
+import { useDuoTone } from "@/packages/use-shader-fx/src";
+import { useFogProjection } from "@/packages/use-shader-fx/src";
+import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
 import { MainShaderMaterial, TMainShaderUniforms } from "./ShaderMaterial";
+import { usePerformanceMonitor } from "@react-three/drei";
 import { useGUI } from "./gui/useGUI";
 import { CONFIG } from "./config";
-import { DuoToneParams, useDuoTone } from "./hooks/useDuoTone";
-import {
-   FogProjectionParams,
-   useFogProjection,
-} from "./hooks/useFogProjection";
-import { usePerformanceMonitor } from "@react-three/drei";
 
 extend({ MainShaderMaterial });
 
+/*===============================================
+TODO*
+- dprは入れ込んだほうがいいかも?
+- 初期値とGUIの整理
+- read meの整理
+- fx hookは配列で返すようにするか
+	- 配列とオブジェクトの出ストラクチャリングについてちゃんとstyle bookにまとめよっと
+	- いや、名前に意味があるし、拡張性的には、オブジェクトか？
+		- usePointerは確実にオブジェクトで返すいのがいいよな。名前に意味があるし。順不同だから。
+		- そう考えると、順は確定してるし、今後も増やす必要はないから（むしろそういう設計にしたほうがいい）、配列か
+===============================================*/
+
 export const Scene = () => {
-   const [bg, bg2, smoke, ripple, noise, pNoise] = useLoader(
-      THREE.TextureLoader,
-      [
-         "background.jpg",
-         "background2.jpeg",
-         "smoke.png",
-         "ripple.png",
-         "noise.png",
-         "p-noise.webp",
-      ]
-   );
+   const [bg, bg2, ripple, noise] = useLoader(THREE.TextureLoader, [
+      "thumbnail.jpg",
+      "momo.jpg",
+      "ripple.png",
+      "noise.png",
+   ]);
    const updateGUI = useGUI();
    const mainShaderRef = useRef<TMainShaderUniforms>();
 
+   const size = useThree((state) => state.size);
+   const dpr = useThree((state) => state.viewport.dpr);
+
    // fx
-   const { updateFx: updateRipple } = useRipple({ texture: smoke });
-   const { updateFx: updateFruid, setParams: setFruid } = useFruid();
-   const { updateFx: updateFlowmap } = useFlowmap();
-   const { updateFx: updateSimpleFruid } = useSimpleFruid();
-   const { updateFx: updateBrush } = useBrush();
+   const { updateFx: updateRipple } = useRipple({ texture: ripple, size });
+   const { updateFx: updateFruid, setParams: setFruid } = useFruid({
+      size,
+      dpr,
+   });
+   const { updateFx: updateFlowmap } = useFlowmap({ size });
+   const { updateFx: updateSimpleFruid } = useSimpleFruid({ size });
+   const { updateFx: updateBrush } = useBrush({ size });
 
    // post fx
-   const { updateFx: updateTransitionBg } = useTransitionBg();
-   const { updateFx: updateDuoTone } = useDuoTone();
-   const { updateFx: updateFogProjection } = useFogProjection();
+   const { updateFx: updateTransitionBg } = useTransitionBg({ size, dpr });
+   const { updateFx: updateDuoTone } = useDuoTone({ size });
+   const { updateFx: updateFogProjection } = useFogProjection({ size });
 
    // Monitor performance changes and execute update functions of params
    usePerformanceMonitor({
-      onChange(api) {
+      onChange({ factor }) {
          setFruid({
-            pressure_iterations: Math.round(20 * api.factor),
+            pressure_iterations: Math.round(20 * factor),
          });
       },
    });
@@ -81,7 +91,7 @@ export const Scene = () => {
             break;
          case 2:
             fx = updateBrush(props, {
-               texture: smoke,
+               texture: ripple,
                radius: CONFIG.brush.radius,
                alpha: CONFIG.brush.alpha,
                smudge: CONFIG.brush.smudge,

app/fx/config.ts

@@ -8,9 +8,9 @@ export const CONFIG = {
    transitionBg: {
       noiseStrength: 0.0,
       progress: 0.0,
-      dir: new THREE.Vector2(0.3, 0.2),
-      imageResolution: new THREE.Vector2(1440, 1440),
-      active: false,
+      dir: new THREE.Vector2(0.3, 0.4),
+      imageResolution: new THREE.Vector2(1440, 1029),
+      active: true,
       transformDir: 1,
       transform: () => {
          CONFIG.transitionBg.transformDir =
@@ -21,12 +21,12 @@ export const CONFIG = {
          tl.to(CONFIG.transitionBg, {
             noiseStrength: 0.2,
             progress: 0.5,
-            ease: "power3.in",
+            ease: "power2.in",
          });
          tl.to(CONFIG.transitionBg, {
             noiseStrength: 0.0,
             progress: CONFIG.transitionBg.transformDir > 0 ? 0.0 : 1.0,
-            ease: "power3.out",
+            ease: "power2.out",
          });
       },
    },
@@ -36,11 +36,11 @@ export const CONFIG = {
       active: false,
    },
    fogProjection: {
-      timeStrength: 0.2,
-      distortionStrength: 0.1,
-      fogEdge0: 0.0,
-      fogEdge1: 0.9,
-      fogColor: new THREE.Color(0xffffff),
+      timeStrength: 0.23,
+      distortionStrength: 0.04,
+      fogEdge0: 0.43,
+      fogEdge1: 0.88,
+      fogColor: new THREE.Color(0xd5cea3),
       active: false,
    },
    /*===============================================
@@ -56,9 +56,9 @@ export const CONFIG = {
    fruid: {
       density_dissipation: 0.98,
       velocity_dissipation: 0.99,
-      velocity_acceleration: 8.0,
+      velocity_acceleration: 10.0,
       pressure_dissipation: 0.9,
-      curl_strength: 4,
+      curl_strength: 35,
       splat_radius: 0.002,
       fruidVec: new THREE.Vector3(),
       fruid_color: (velocity: THREE.Vector2) => {

app/fx/hooks/utils/useResolution.ts

@@ -9,19 +9,18 @@ import { PerformanceMonitor } from "@react-three/drei";
 export const Fx = () => {
    const [dpr, setDpr] = useState(1.5);
    return (
-      <>
-         <Canvas dpr={dpr}>
-            <PerformanceMonitor
-               factor={1}
-               onChange={({ factor }) =>
-                  setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10)
-               }>
-               <Suspense fallback={null}>
-                  <Scene />
-               </Suspense>
-               <Perf position={"bottom-right"} minimal={false} />
-            </PerformanceMonitor>
-         </Canvas>
-      </>
+      <Canvas dpr={dpr}>
+         <PerformanceMonitor
+            factor={1}
+            onChange={({ factor }) => {
+               console.log(`dpr:${dpr}`);
+               setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
+            }}>
+            <Suspense fallback={null}>
+               <Scene />
+            </Suspense>
+            <Perf position={"bottom-right"} minimal={false} />
+         </PerformanceMonitor>
+      </Canvas>
    );
 };

app/fx/index.tsx

@@ -0,0 +1,4 @@
+/node_modules
+/src
+glsl.d.ts
+tsconfig.json