12.11

Author: takuma-hmng8

app/domSyncer/DomSyncer.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { useEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
 import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
 import {
@@ -10,11 +10,6 @@ import {
 
 extend({ FxMaterial });
 
-/*===============================================
-TODO* 
-- 角丸
-===============================================*/
-
 const CONSTANT = {
    textureResolution: new THREE.Vector2(1440, 1029),
 };
@@ -29,35 +24,45 @@ export const DomSyncer = ({ state }: { state: number }) => {
 
    const [updateNoise] = useNoise({ size, dpr });
    const [updateTransitionBg] = useTransitionBg({ size, dpr });
-   const [updateDomSyncer] = useDomSyncer({ size, dpr }, [state]);
 
    const domArr = useRef<(HTMLElement | Element)[]>([]);
-   useEffect(() => {
+
+   const [updateDomSyncer, setDomSyncer, domSyncerObj] = useDomSyncer(
+      { size, dpr },
+      [state]
+   );
+   useLayoutEffect(() => {
       if (state === 0) {
          domArr.current = [...document.querySelectorAll(".item")!];
       } else {
          domArr.current = [...document.querySelectorAll(".item2")!];
       }
-   }, [state]);
+      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.0,
+         noiseStrength: 0.05,
       });
 
       const syncedTexture = updateDomSyncer(props, {
-         dom: domArr.current,
          texture: [...Array(domArr.current.length)].map(() => fx),
-         resolution: [...Array(domArr.current.length)].map(
-            () => CONSTANT.textureResolution
+         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;

app/domSyncer/page.tsx

@@ -30,6 +30,8 @@ export default function Page() {
                position: "fixed",
                bottom: 0,
                right: 0,
+               zIndex: 1000,
+               cursor: "pointer",
             }}>
             stateの切り替え
          </button>
@@ -49,7 +51,10 @@ export default function Page() {
                         key={i}
                         style={{
                            width: "calc(50% - 40px)",
-                           height: "120vh",
+                           height: "800px",
+                           border: "8px solid #000",
+                           zIndex: 100,
+                           borderRadius: `${i * 50}px`,
                         }}></div>
                   ))}
                </>
@@ -61,7 +66,8 @@ export default function Page() {
                         key={i}
                         style={{
                            width: "100%",
-                           height: "120vh",
+                           height: "80vh",
+                           zIndex: 100,
                         }}></div>
                   ))}
                </>

packages/use-shader-fx/src/hooks/useDomSyncer/index.ts

@@ -5,27 +5,36 @@ import { RootState, Size } from "@react-three/fiber";
 import { useSingleFBO } from "../../utils/useSingleFBO";
 import { HooksReturn } from "../types";
 import { useParams } from "../../utils/useParams";
-import { errorHandling } from "./utils/errorHandling";
+import { errorHandler } from "./utils/errorHandler";
 import { createMesh } from "./utils/createMesh";
-import { intersectionHandler } from "./utils/intersectionHandler";
+import { useIntersectionHandler } from "./utils/useIntersectionHandler";
 import { updateRect } from "./utils/updateRect";
+import { useIsIntersecting, IsIntersecting } from "./utils/useIsIntersecting";
 
 export type DomSyncerParams = {
-   texture: THREE.Texture[];
-   dom: (HTMLElement | Element | null)[];
+   texture?: THREE.Texture[];
+   dom?: (HTMLElement | Element | null)[];
    resolution?: THREE.Vector2[];
+   boderRadius?: number[];
 };
 
 export type DomSyncerObject = {
    scene: THREE.Scene;
    camera: THREE.Camera;
    renderTarget: THREE.WebGLRenderTarget;
+   /**
+    * The syncing DOM also returns a crossing decision.
+    * @param index - Index of the dom for which you want to return an intersection decision. -1 will return the entire array.
+    * @param once - If set to true, it will continue to return true once crossed.
+    */
+   isIntersecting: IsIntersecting;
 };
 
 export const DOMSYNCER_PARAMS: DomSyncerParams = {
    texture: [],
    dom: [],
    resolution: [],
+   boderRadius: [],
 };
 
 /**
@@ -51,53 +60,44 @@ export const useDomSyncer = (
    });
    const [params, setParams] = useParams<DomSyncerParams>(DOMSYNCER_PARAMS);
 
-   // dependenciesをtriggerして、meshと
+   // Avoid instancing vec2 every frame
+   const resolutionRef = useRef<THREE.Vector2>(new THREE.Vector2(0, 0));
+
+   // Update monitored doms according to the dependency array
    const [refreshTrigger, setRefreshTrigger] = useState(true);
    useEffect(() => {
       setRefreshTrigger(true);
       // eslint-disable-next-line react-hooks/exhaustive-deps
    }, dependencies);
 
-   const resolutionRef = useRef<THREE.Vector2>(new THREE.Vector2(0, 0));
-   const intersectionObserverRef = useRef<IntersectionObserver[]>([]);
-   const intersectionDomRef = useRef<(HTMLElement | Element | null)[]>([]);
-   const isIntersectingRef = useRef<boolean[]>([]);
+   const intersectionHandler = useIntersectionHandler();
+   const { isIntersectingOnceRef, isIntersectingRef, isIntersecting } =
+      useIsIntersecting();
 
    const updateFx = useCallback(
       (props: RootState, updateParams?: DomSyncerParams) => {
          const { gl, size } = props;
 
          updateParams && setParams(updateParams);
 
-         /*===============================================
-			エラーハンドリング
-			===============================================*/
-         errorHandling(params);
+         errorHandler(params);
 
-         /*===============================================
-         最初の1回だけ、materialを生成して、sceneに渡す
-			===============================================*/
          if (refreshTrigger) {
             createMesh({
                params,
                size,
-               resolutionRef,
                scene,
             });
 
             intersectionHandler({
-               intersectionObserverRef,
-               intersectionDomRef,
                isIntersectingRef,
+               isIntersectingOnceRef,
                params,
             });
 
             setRefreshTrigger(false);
          }
 
-         /*===============================================
-			rectを更新する
-			===============================================*/
          updateRect({
             params,
             size,
@@ -108,7 +108,16 @@ export const useDomSyncer = (
 
          return updateRenderTarget(gl);
       },
-      [updateRenderTarget, setParams, refreshTrigger, scene, params]
+      [
+         updateRenderTarget,
+         setParams,
+         intersectionHandler,
+         refreshTrigger,
+         scene,
+         params,
+         isIntersectingOnceRef,
+         isIntersectingRef,
+      ]
    );
 
    return [
@@ -118,6 +127,7 @@ export const useDomSyncer = (
          scene: scene,
          camera: camera,
          renderTarget: renderTarget,
+         isIntersecting: isIntersecting,
       },
    ];
 };

packages/use-shader-fx/src/hooks/useDomSyncer/shader/main.frag

@@ -4,15 +4,34 @@ varying vec2 vUv;
 uniform sampler2D u_texture;
 uniform vec2 u_textureResolution;
 uniform vec2 u_resolution;
+uniform float u_borderRadius;
 
 void main() {
-	vec2 ratio=vec2(
-		min((u_resolution.x/u_resolution.y)/(u_textureResolution.x/u_textureResolution.y),1.),
-		min((u_resolution.y/u_resolution.x)/(u_textureResolution.y/u_textureResolution.x),1.)
+	// texuture color
+	vec2 ratio = vec2(
+		min((u_resolution.x / u_resolution.y) / (u_textureResolution.x / u_textureResolution.y), 1.0),
+		min((u_resolution.y / u_resolution.x) / (u_textureResolution.y / u_textureResolution.x), 1.0)
 	);
-	vec2 uv=vec2(
-		vUv.x*ratio.x+(1.-ratio.x)*.5,
-		vUv.y*ratio.y+(1.-ratio.y)*.5
-	);
-	gl_FragColor = texture2D(u_texture, uv);
-}
+	vec2 adjustedUv = vUv * ratio + (1.0 - ratio) * 0.5;
+	vec3 textureColor = texture2D(u_texture, adjustedUv).rgb;
+
+	// Based on https://mofu-dev.com/en/blog/three-dom-alignment/
+	float maxSide = max(u_resolution.x, u_resolution.y);
+	float minSide = min(u_resolution.x, u_resolution.y);
+	vec2 aspect = u_resolution / maxSide;
+	vec2 alphaUv = vUv - 0.5;
+
+	float borderRadius = min(u_borderRadius, minSide * 0.5);
+	vec2 offset = vec2(borderRadius) / u_resolution;
+	vec2 alphaXY = smoothstep(vec2(0.5 - offset), vec2(0.5 - offset - 0.001), abs(alphaUv));
+	float alpha = min(1.0, alphaXY.x + alphaXY.y);
+
+	vec2 alphaUv2 = abs(vUv - 0.5);
+	float radius = borderRadius / maxSide;
+	alphaUv2 = (alphaUv2 - 0.5) * aspect + radius;
+	float roundAlpha = smoothstep(radius + 0.001, radius, length(alphaUv2));
+
+	alpha = min(1.0, alpha + roundAlpha);
+
+	gl_FragColor = vec4(textureColor, alpha);
+}

packages/use-shader-fx/src/hooks/useDomSyncer/utils/createMesh.ts

@@ -7,15 +7,12 @@ import fragmentShader from "../shader/main.frag";
 export const createMesh = ({
    params,
    size,
-   resolutionRef,
    scene,
 }: {
    params: DomSyncerParams;
    size: Size;
-   resolutionRef: React.MutableRefObject<THREE.Vector2>;
    scene: THREE.Scene;
 }) => {
-   // clean up
    if (scene.children.length > 0) {
       scene.children.forEach((child) => {
          if (child instanceof THREE.Mesh) {
@@ -26,13 +23,7 @@ export const createMesh = ({
       scene.remove(...scene.children);
    }
 
-   // add mesh to scene
-   params.texture.forEach((texture, i) => {
-      // If texture resolution is null, use size
-      const textureResolution = params.resolution![i]
-         ? params.resolution![i]
-         : new THREE.Vector2(size.width, size.height);
-
+   params.texture!.forEach((texture, i) => {
       const mesh = new THREE.Mesh(
          new THREE.PlaneGeometry(1, 1),
          new THREE.ShaderMaterial({
@@ -41,8 +32,11 @@ export const createMesh = ({
             transparent: true,
             uniforms: {
                u_texture: { value: texture },
-               u_textureResolution: { value: textureResolution },
-               u_resolution: { value: resolutionRef.current },
+               u_textureResolution: { value: new THREE.Vector2(0, 0) },
+               u_resolution: { value: new THREE.Vector2(0, 0) },
+               u_borderRadius: {
+                  value: params.boderRadius![i] ? params.boderRadius![i] : 0.0,
+               },
             },
          })
       );

packages/use-shader-fx/src/hooks/useDomSyncer/utils/errorHandler.ts

@@ -0,0 +1,15 @@
+import { DomSyncerParams } from "..";
+
+export const errorHandler = (params: DomSyncerParams) => {
+   const domLength = params.dom?.length;
+   const textureLength = params.texture?.length;
+   const resolutionLength = params.resolution?.length;
+
+   if (!domLength || !textureLength || !resolutionLength) {
+      throw new Error("No dom or texture or resolution is set");
+   }
+
+   if (domLength !== textureLength || domLength !== resolutionLength) {
+      throw new Error("Match dom, texture and resolution length");
+   }
+};