#24 use dom syncer

.storybook/constant.ts

@@ -1,5 +1,5 @@
 import * as THREE from "three";
 
 export const CONSTANT = {
-   imageResolution: new THREE.Vector2(1440, 1029),
+   textureResolution: new THREE.Vector2(1440, 1029),
 };

.storybook/stories/UseBrush.tsx

@@ -64,7 +64,7 @@ export const UseBrushWithTexture = (args: BrushParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const fx = updateBrush(props, {

.storybook/stories/UseDuoTone.tsx

@@ -36,7 +36,7 @@ export const UseDuoTone = (args: DuoToneParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const fx = updateDuoTone(props, {

.storybook/stories/UseFluid.tsx

@@ -73,7 +73,7 @@ export const UseFluidWithTexture = (args: FluidParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
 

.storybook/stories/UseFogProjection.tsx

@@ -48,7 +48,7 @@ export const UseFogProjection = (args: FogProjectionParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const noise = updateNoise(props);

.storybook/stories/UseRipple.tsx

@@ -69,7 +69,7 @@ export const UseRippleWithTexture = (args: RippleParams) => {
 
    useFrame((props) => {
       const bgTexture = updateTransitionBg(props, {
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const fx = updateRipple(props, setConfig());

.storybook/stories/UseTransitionBg.tsx

@@ -48,7 +48,7 @@ export const UseTransitionBg = (args: TransitionBgParams) => {
       const noise = updateNoise(props);
       const fx = updateTransitionBg(props, {
          noiseMap: noise,
-         imageResolution: CONSTANT.imageResolution,
+         textureResolution: CONSTANT.textureResolution,
          texture0: bg,
          texture1: momo,
          ...setConfig(),

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/index.tsx → app/_home/index.tsx

@@ -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/domSyncer/DomSyncer.tsx

@@ -0,0 +1,79 @@
+import * as THREE from "three";
+import { useLayoutEffect, useRef } from "react";
+import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
+import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
+import {
+   useDomSyncer,
+   useNoise,
+   useTransitionBg,
+} from "@/packages/use-shader-fx/src";
+
+extend({ FxMaterial });
+
+const CONSTANT = {
+   textureResolution: new THREE.Vector2(1440, 1029),
+};
+
+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 });
+   const [updateTransitionBg] = useTransitionBg({ size, dpr });
+
+   const domArr = useRef<(HTMLElement | Element)[]>([]);
+
+   const [updateDomSyncer, setDomSyncer, domSyncerObj] = useDomSyncer(
+      { size, dpr },
+      [state]
+   );
+   useLayoutEffect(() => {
+      if (state === 0) {
+         domArr.current = [...document.querySelectorAll(".item")!];
+      } else {
+         domArr.current = [...document.querySelectorAll(".item2")!];
+      }
+      setDomSyncer({
+         dom: domArr.current,
+         boderRadius: [...Array(domArr.current.length)].map((_, i) => i * 50.0),
+      });
+   }, [state, setDomSyncer, momo]);
+
+   const resolutionRef = useRef(new THREE.Vector2(0, 0));
+   useFrame((props) => {
+      const noise = updateNoise(props);
+      const fx = updateTransitionBg(props, {
+         noiseMap: noise,
+         textureResolution: CONSTANT.textureResolution,
+         texture0: momo,
+         texture1: momo,
+         noiseStrength: 0.05,
+      });
+
+      const syncedTexture = updateDomSyncer(props, {
+         texture: [...Array(domArr.current.length)].map(() => fx),
+         resolution: [...Array(domArr.current.length)].map(() =>
+            resolutionRef.current.set(props.size.width, props.size.height)
+         ),
+      });
+
+      // console.log(domSyncerObj.isIntersecting(-1, false));
+
+      const main = mainShaderRef.current;
+      if (main) {
+         main.u_fx = syncedTexture;
+         main.u_alpha = 0.0;
+      }
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={mainShaderRef} />
+      </mesh>
+   );
+};

app/domSyncer/page.tsx

@@ -0,0 +1,78 @@
+"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,
+               zIndex: 1000,
+               cursor: "pointer",
+            }}>
+            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: "800px",
+                           border: "8px solid #000",
+                           zIndex: 100,
+                           borderRadius: `${i * 50}px`,
+                        }}></div>
+                  ))}
+               </>
+            ) : (
+               <>
+                  {[...Array(2)].map((_, i) => (
+                     <div
+                        className="item2"
+                        key={i}
+                        style={{
+                           width: "100%",
+                           height: "80vh",
+                           zIndex: 100,
+                        }}></div>
+                  ))}
+               </>
+            )}
+         </div>
+      </>
+   );
+}

app/layout.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/page.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",