useDomSyncerの追加

Author: takuma-hmng8

app/ShaderFx.tsx

@@ -4,11 +4,8 @@ import { Suspense, useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Perf } from "r3f-perf";
 import { PerformanceMonitor } from "@react-three/drei";
-import { Demo } from "./_demo";
 
-// import CreateShaderFx from "@/CreateShaderFx";
-
-export const ShaderFx = () => {
+export const ShaderFx = ({ children }: { children: React.ReactNode }) => {
    const [dpr, setDpr] = useState(1.0);
    return (
       <Canvas dpr={dpr}>
@@ -18,10 +15,7 @@ export const ShaderFx = () => {
                console.log(`dpr:${dpr}`);
                setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
             }}>
-            <Suspense fallback={null}>
-               {/* When creating fx, please rewrite to CreateShaderFx */}
-               <Demo />
-            </Suspense>
+            <Suspense fallback={null}>{children}</Suspense>
             <Perf position={"bottom-left"} minimal={false} />
          </PerformanceMonitor>
       </Canvas>

app/_demo/config.ts app/_home/config.ts

@@ -15,7 +15,7 @@ import {
 
 extend({ FxTransparentMaterial });
 
-export const Demo = () => {
+export const Home = () => {
    const updateGUI = useGUI(setGUI);
    const mainShaderRef = useRef<FxTransparentMaterialProps>();
 
@@ -90,7 +90,7 @@ the simplest demo
 // import { useFrame, useThree } from "@react-three/fiber";
 // import { useFluid } from "@hmng8/use-shader-fx";
 
-// export const Demo = () => {
+// export const Home = () => {
 //    const ref = useRef<THREE.ShaderMaterial>(null);
 //    const size = useThree((state) => state.size);
 //    const dpr = useThree((state) => state.viewport.dpr);

app/_demo/index.tsx app/_home/index.tsx

@@ -0,0 +1,57 @@
+import * as THREE from "three";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
+import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
+import { useDomSyncer, useNoise } from "@/packages/use-shader-fx/src";
+
+extend({ FxMaterial });
+
+/*===============================================
+TODO* 
+- 角丸
+- リサイズ
+- resolutionの調整
+===============================================*/
+
+export const DomSyncer = ({ state }: { state: number }) => {
+   const mainShaderRef = useRef<FxMaterialProps>();
+
+   const [momo] = useLoader(THREE.TextureLoader, ["momo.jpg"]);
+
+   const size = useThree((state) => state.size);
+   const dpr = useThree((state) => state.viewport.dpr);
+
+   const [updateNoise] = useNoise({ size, dpr });
+
+   // TODO* dependencyを2引数に渡すようにする
+   const [updateDomSyncer] = useDomSyncer({ size, dpr }, [state]);
+
+   const domArr = useRef<(HTMLElement | Element)[]>([]);
+   useEffect(() => {
+      if (state === 0) {
+         domArr.current = [...document.querySelectorAll(".item")!];
+      } else {
+         domArr.current = [...document.querySelectorAll(".item2")!];
+      }
+   }, [state]);
+
+   useFrame((props) => {
+      const noise = updateNoise(props);
+      // TODO*ここにtextureとDOMをセットにした配列を渡す[texture, dom][]
+      const tex = updateDomSyncer(props, {
+         dom: domArr.current,
+         texture: [...Array(domArr.current.length)].map((_, i) => noise),
+      });
+      const main = mainShaderRef.current;
+      if (main) {
+         main.u_fx = tex;
+      }
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={mainShaderRef} />
+      </mesh>
+   );
+};

app/domSyncer/DomSyncer.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { ShaderFx } from "../ShaderFx";
+import { DomSyncer } from "./DomSyncer";
+
+export default function Page() {
+   const [domSwitch, setDomSwitch] = useState(0);
+   return (
+      <>
+         <div
+            style={{
+               position: "fixed",
+               top: 0,
+               width: "100%",
+               height: "100%",
+            }}>
+            <ShaderFx>
+               <DomSyncer state={domSwitch} />
+            </ShaderFx>
+         </div>
+         <button
+            onClick={() => {
+               setDomSwitch((prev) => (prev === 0 ? 1 : 0));
+            }}
+            style={{
+               width: "200px",
+               height: "200px",
+               backgroundColor: "red",
+               position: "fixed",
+               bottom: 0,
+               right: 0,
+            }}>
+            stateの切り替え
+         </button>
+         <div
+            style={{
+               display: "flex",
+               flexWrap: "wrap",
+               justifyContent: "center",
+               gap: "40px",
+               padding: "16px",
+            }}>
+            {domSwitch === 0 ? (
+               <>
+                  {[...Array(4)].map((_, i) => (
+                     <div
+                        className="item"
+                        key={i}
+                        style={{
+                           width: "calc(50% - 40px)",
+                           height: "80vh",
+                        }}></div>
+                  ))}
+               </>
+            ) : (
+               <>
+                  {[...Array(2)].map((_, i) => (
+                     <div
+                        className="item2"
+                        key={i}
+                        style={{
+                           width: "100%",
+                           height: "50vh",
+                        }}></div>
+                  ))}
+               </>
+            )}
+         </div>
+      </>
+   );
+}

app/domSyncer/page.tsx

@@ -19,15 +19,7 @@ export default function RootLayout({
 }) {
    return (
       <html lang="en">
-         <body
-            className={playfair.className}
-            style={{
-               overflow: "hidden",
-               height: "100svh",
-               // background: "#f8f8f8",
-            }}>
-            {children}
-         </body>
+         <body className={playfair.className}>{children}</body>
       </html>
    );
 }

app/layout.tsx

@@ -1,9 +1,14 @@
+"use client";
+
 import { ShaderFx } from "./ShaderFx";
+import { Home } from "./_home";
 
-export default function Home() {
+export default function Page() {
    return (
       <div style={{ width: "100%", height: "100svh" }}>
-         <ShaderFx />
+         <ShaderFx>
+            <Home />
+         </ShaderFx>
          <h1
             style={{
                fontSize: "10vw",