3.6

Author: takuma-hmng8

app/useParticle/FxMaterial.tsx renamed to app/useMorphParticles/FxMaterial.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import * as THREE from "three";
+import { use, useCallback, useEffect, useMemo, useRef } from "react";
+import {
+   useFrame,
+   useThree,
+   extend,
+   useLoader,
+   Size,
+} from "@react-three/fiber";
+import {
+   useCreateMorphParticles,
+   MORPHPARTICLES_PARAMS,
+   MorphParticlesParams,
+   useBeat,
+} from "@/packages/use-shader-fx/src";
+import { FxMaterial, FxMaterialProps } from "./FxMaterial";
+import GUI from "lil-gui";
+import { useGUI } from "@/utils/useGUI";
+import { OrbitControls } from "@react-three/drei";
+
+extend({ FxMaterial });
+
+const CONFIG: MorphParticlesParams = structuredClone(MORPHPARTICLES_PARAMS);
+const setGUI = (gui: GUI) => {
+   gui.add(CONFIG, "blurAlpha", 0, 1, 0.01);
+   gui.add(CONFIG, "blurRadius", 0, 2, 0.01);
+   gui.add(CONFIG, "pointSize", 0.01, 2, 0.01);
+   gui.addColor(CONFIG, "color0");
+   gui.addColor(CONFIG, "color1");
+   gui.addColor(CONFIG, "color2");
+   gui.addColor(CONFIG, "color3");
+   gui.add(CONFIG, "wobbleStrength", 0, 10, 0.01);
+   gui.add(CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
+   gui.add(CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
+   gui.add(CONFIG, "warpStrength", 0, 10, 0.01);
+   gui.add(CONFIG, "warpPositionFrequency", 0, 10, 0.01);
+   gui.add(CONFIG, "warpTimeFrequency", 0, 10, 0.01);
+};
+const setConfig = () => {
+   return {
+      ...CONFIG,
+   } as MorphParticlesParams;
+};
+
+/*===============================================
+TODO 
+- useMorphParticles
+	v morphする
+		- tjの40
+	v picture
+		v 全体にマップするtexture
+	v particleにマップするtexture
+		- 
+	- wobble
+		- 4Dノイズかける（時間が入るから）
+		- wobble3Dの仕組みを利用する
+	v color
+		v 4色双線形補間
+	v particleのサイズ
+	v 球体にするレベル
+===============================================*/
+
+export const Playground = () => {
+   const updateGUI = useGUI(setGUI);
+   const ref = useRef<FxMaterialProps>();
+   const [funkun, funkunAlpha] = useLoader(THREE.TextureLoader, [
+      "/funkun.jpg",
+      "/funkun-alpha.jpg",
+   ]);
+   const { size, viewport, gl } = useThree();
+
+   const morphList = [
+      new THREE.PlaneGeometry(5, 5, 100, 100).attributes.position
+         .array as Float32Array,
+      new THREE.TorusGeometry(2.5, 1, 50, 30).attributes.position
+         .array as Float32Array,
+   ];
+
+   const [updatePoints, points] = useCreateMorphParticles({
+      scene: false,
+      size,
+      dpr: viewport.dpr,
+      geometry: new THREE.IcosahedronGeometry(2.5, 50),
+      // positions: morphList,
+      // geometry: new THREE.PlaneGeometry(5, 5, 100, 100),
+   });
+   const beat = useBeat(140, "easeOutCubic");
+   useFrame((props) => {
+      const b = beat(props.clock);
+      updatePoints(props, {
+         ...setConfig(),
+         // picture: funkun,
+         // alphaPicture: funkunAlpha,
+         map: funkun,
+         alphaMap: funkunAlpha,
+         beat: b.beat,
+         morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
+      });
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <OrbitControls />
+         <primitive object={points.points} />
+      </mesh>
+   );
+};

app/useMorphParticles/Playground.tsx

@@ -26,16 +26,30 @@ const uniforms = {
    uTime: new THREE.Uniform(0),
    uPositionFrequency: new THREE.Uniform(0.5),
    uTimeFrequency: new THREE.Uniform(0.2),
-   uStrength: new THREE.Uniform(0.9),
+   uStrength: new THREE.Uniform(0.1),
    uWarpPositionFrequency: new THREE.Uniform(0.2),
    uWarpTimeFrequency: new THREE.Uniform(0.2),
    uWarpStrength: new THREE.Uniform(0.2),
    uColorA: new THREE.Uniform(new THREE.Color("white")),
-   uColorB: new THREE.Uniform(new THREE.Color("black")),
+   uColorB: new THREE.Uniform(new THREE.Color("orange")),
    uBaloon: new THREE.Uniform(0),
    uFx: new THREE.Uniform(new THREE.Texture()),
 };
 
+/*===============================================
+TODO : 
+- onbeforeConopileを使って、meshPhusycalMaterialのuniforomsを更新する。
+	- デフォルトで
+	- 気が向いたらtoonShaderも追加する？
+- isPrimitiveみたいな感じで、Object3Dをsceneに追加しないパターンもつくる。
+	- Lightとかがあるから、primitiveで使う方がユースケース的にはあるよな
+	- まあLightもuseEffectとかで追加できるから、isPrimitiveは例外的な使い方としよう。
+- r3fはprimitiveをanmount時にsceneから削除するのかな？ 追加されてるobjectは自分でdisposeしないといけないのはわかる。
+- あと、primitiveの場合は、useFrameとかも使えないのかな？
+
+- 内部的にraycaster使ってonPointerMoveも更新関数に追加するとかありかもね。
+===============================================*/
+
 export const Playground = () => {
    const { size, viewport, scene: rootScene, camera } = useThree();
 
@@ -95,34 +109,29 @@ export const Playground = () => {
    const beat = useBeat(140);
    const updatePointer = usePointer();
 
-   const raycaster = useMemo(() => new THREE.Raycaster(), []);
-   const rayCursor = useRef<THREE.Vector2 | null>(null);
+   const refPointer = useRef(new THREE.Vector2(0, 0));
+   const handlePointerMove = (e: any) =>
+      (refPointer.current = e.uv.multiplyScalar(2).subScalar(1));
 
    useFrame((props) => {
       const b = beat(props.clock);
       updateFluid(props);
       mesh.material.uniforms.uTime.value = b.beat;
-
-      raycaster.setFromCamera(props.pointer, camera);
-      const intersects = raycaster.intersectObject(mesh);
-      if (intersects.length > 0) {
-         const uv = intersects[0]?.uv as THREE.Vector2;
-         if (!uv) return;
-         rayCursor.current = uv.multiplyScalar(2).subScalar(1);
-      }
-      if (rayCursor.current) {
-         mesh.material.uniforms.uFx.value = updateFluid(props, {
-            pointerValues: updatePointer(rayCursor.current),
-         });
-      }
+      mesh.material.uniforms.uFx.value = updateFluid(props, {
+         pointerValues: updatePointer(refPointer.current),
+      });
    });
 
    return (
       <mesh>
          <ambientLight />
          <directionalLight />
          <OrbitControls />
-         <primitive object={mesh} position={[0, 0, 0]} />
+         <primitive
+            onPointerMove={handlePointerMove}
+            object={mesh}
+            position={[0, 0, 0]}
+         />
       </mesh>
    );
 };