FunTechInc · takuma-hmng8 · May 29, 2024 · May 29, 2024 · May 29, 2024
diff --git a/app/stickers/Background.tsx b/app/stickers/Background.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import * as THREE from "three";
+import { memo } from "react";
+import { Environment } from "@react-three/drei";
+
+export const Background = memo(
+   ({
+      stickerMap,
+      scene,
+   }: {
+      stickerMap: THREE.Texture;
+      scene: THREE.Scene;
+   }) => {
+      return (
+         <>
+            <Environment
+               frames={1}
+               files={"/env/empty_warehouse_01_1k.hdr"}
+               environmentIntensity={0.8}
+               scene={scene}
+            />
+            <mesh scale={100}>
+               <sphereGeometry args={[3, 32, 32]} />
+               <meshBasicMaterial
+                  color={new THREE.Color(0x666666)}
+                  map={stickerMap}
+                  side={THREE.BackSide}
+               />
+            </mesh>
+         </>
+      );
+   }
+);
+Background.displayName = "Background";
diff --git a/app/stickers/CanvasState.ts b/app/stickers/CanvasState.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { CLICKED_WOBBLE_STRENGTH } from "./StickerBall";
-import { STICKER_TEXTURES_LENGTH } from "./useStickers";
+import { STICKER_TEXTURES_LENGTH } from "./StickerBall/useStickers";
 
 export class CanvasState {
    private static instance: CanvasState;
@@ -18,7 +18,7 @@ export class CanvasState {
    };
 
    public CAMERA_Z = {
-      zoom: 3.5,
+      zoom: 3.2,
       default: 4,
    };
 

diff --git a/app/stickers/Playground.tsx b/app/stickers/Playground.tsx
@@ -1,46 +1,81 @@
 "use client";
 
 import * as THREE from "three";
-import { memo } from "react";
-import { Environment, OrbitControls } from "@react-three/drei";
-import { useFrame } from "@react-three/fiber";
-import { useStickers } from "./useStickers";
+import { useMemo, useRef } from "react";
+import { OrbitControls } from "@react-three/drei";
+import { useFrame, createPortal, extend, useThree } from "@react-three/fiber";
+import { useStickers } from "./StickerBall/useStickers";
 import { CanvasState } from "./CanvasState";
 import { StickerBall } from "./StickerBall";
-import { Easing, Utils } from "@/packages/use-shader-fx/src";
+import {
+   Easing,
+   Utils,
+   useResizeBoundary,
+   useSingleFBO,
+} from "@/packages/use-shader-fx/src";
+import { Background } from "./Background";
+import { FxMaterial, FxMaterialProps } from "./romanticism/FxMaterial";
+import { useRomanticism } from "./romanticism/useRomanticism";
 
-const Background = memo(({ stickerMap }: { stickerMap: THREE.Texture }) => {
-   return (
-      <>
-         <Environment preset="warehouse" environmentIntensity={0.5} />
-         <mesh scale={100}>
-            <sphereGeometry args={[3, 32, 32]} />
-            <meshBasicMaterial
-               color={new THREE.Color(0x444444)}
-               map={stickerMap}
-               side={THREE.BackSide}
-            />
-         </mesh>
-      </>
-   );
-});
-Background.displayName = "Background";
+extend({ FxMaterial });
 
 export const Playground = () => {
-   const { stickerMap, normalMap, isReady, silhouette } = useStickers();
+   const { camera, size, viewport, gl } = useThree();
 
    const canvasState = CanvasState.getInstance();
 
-   useFrame(({ camera, clock }, delta) => {
+   // 1000以上リサイズした場合のみリサイズする
+   const resizeBoundary = useResizeBoundary({
+      gl,
+      size,
+      boundFor: "larger",
+      threshold: 1000,
+   });
+
+   // stickers
+   const { stickerMap, normalMap, isReady, silhouette } =
+      useStickers(resizeBoundary);
+
+   // offscreen to stickers
+   const offscreenScene = useMemo(() => new THREE.Scene(), []);
+   const [portalStickers, updatePortalStickers] = useSingleFBO({
+      scene: offscreenScene,
+      camera,
+      size,
+      dpr: viewport.dpr,
+      depthBuffer: true,
+      isSizeUpdate: resizeBoundary.isUpdate,
+   });
+
+   // romanticism
+   const romanticism = useRomanticism(portalStickers.texture);
+   const materialRef = useRef<FxMaterialProps>(null);
+
+   useFrame(({ camera, clock, pointer, gl }) => {
       if (!isReady) {
          return;
       }
 
-      // control camera state
-      if (canvasState.cameraState.point.z < canvasState.CAMERA_Z.default) {
-         canvasState.cameraState.point.z += delta;
+      // update portalized stickers
+      updatePortalStickers(gl);
+
+      // update romanticism
+      if (materialRef.current) {
+         materialRef.current.u_time = clock.getElapsedTime();
       }
-      camera.position.lerp(canvasState.cameraState.point, 0.16);
+
+      // control camera state
+      const _pointer = pointer.clone().multiplyScalar(0.32);
+      canvasState.cameraState.point.lerp(
+         {
+            ..._pointer, // uncomment this line to enable camera movement
+            // x: 0,
+            // y: 0,
+            z: canvasState.CAMERA_Z.default,
+         },
+         0.12
+      );
+      camera.position.lerp(canvasState.cameraState.point, 0.14);
       camera.lookAt(0, 0, 0);
 
       // control clock state
@@ -61,23 +96,37 @@ export const Playground = () => {
       }
    });
    return (
-      <mesh visible={isReady}>
-         <StickerBall
-            stickerMap={stickerMap}
-            normalMap={normalMap}
-            silhouetteMap={silhouette}
-         />
-         <Background stickerMap={stickerMap} />
-         <OrbitControls
-            enabled={true}
-            enableZoom={false}
-            enablePan={false}
-            rotateSpeed={0.12}
-            minAzimuthAngle={-0.785} // -45
-            maxAzimuthAngle={0.785} // 45
-            minPolarAngle={1.134} // 65
-            maxPolarAngle={1.919} // 110
-         />
-      </mesh>
+      <>
+         {createPortal(
+            <mesh visible={isReady}>
+               <StickerBall
+                  stickerMap={stickerMap}
+                  normalMap={normalMap}
+                  silhouetteMap={silhouette}
+               />
+               <Background stickerMap={stickerMap} scene={offscreenScene} />
+               <OrbitControls
+                  enabled={true}
+                  enableZoom={false}
+                  enablePan={false}
+                  rotateSpeed={0.12}
+                  minAzimuthAngle={-0.785} // -45
+                  maxAzimuthAngle={0.785} // 45
+                  minPolarAngle={1.134} // 65
+                  maxPolarAngle={1.919} // 110
+               />
+            </mesh>,
+            offscreenScene
+         )}
+         <mesh visible={isReady}>
+            <planeGeometry args={[2, 2]} />
+            <fxMaterial
+               ref={materialRef}
+               u_romance={romanticism}
+               u_original={portalStickers.texture}
+               key={FxMaterial.key}
+            />
+         </mesh>
+      </>
    );
 };
diff --git a/app/stickers/useStickers.ts → app/stickers/StickerBall/useStickers.ts b/app/stickers/useStickers.ts → app/stickers/StickerBall/useStickers.ts
@@ -1,15 +1,8 @@
 import * as THREE from "three";
-import {
-   useMemo,
-   useCallback,
-   useReducer,
-   useRef,
-   useState,
-   useEffect,
-} from "react";
-import { useFrame, useThree, useLoader } from "@react-three/fiber";
-import { useBlank, useBrush } from "@/packages/use-shader-fx/src";
-import { CanvasState } from "./CanvasState";
+import { useMemo, useCallback, useRef, useState } from "react";
+import { useFrame, useThree, useLoader, Size } from "@react-three/fiber";
+import { ResizeBoundary, Utils, useBlank } from "@/packages/use-shader-fx/src";
+import { CanvasState } from "../CanvasState";
 
 const STICKER_TEXCOORD = `
 	vec2 stamp = uStampPoint;
@@ -61,7 +54,7 @@ const STICKER_TEXTURES = [
 
 export const STICKER_TEXTURES_LENGTH = STICKER_TEXTURES.length;
 
-export const useStickers = () => {
+export const useStickers = (resizeBoundary: ResizeBoundary) => {
    const canvasState = CanvasState.getInstance();
 
    const textures = useLoader(THREE.TextureLoader, [
@@ -82,7 +75,8 @@ export const useStickers = () => {
 
    const [updateSticker, _, { output: stickerMap }] = useBlank({
       size,
-      dpr: 6,
+      dpr: Math.min(resizeBoundary.maxDpr, 6),
+      isSizeUpdate: resizeBoundary.isUpdate,
       onBeforeInit: useCallback(
          (parameters: any) => {
             Object.assign(parameters.uniforms, {
@@ -120,6 +114,11 @@ export const useStickers = () => {
 					usf_FragColor = finalColor;
          	`
             );
+
+            parameters.fragmentShader = parameters.fragmentShader.replace(
+               "precision highp float;",
+               "precision lowp float;"
+            );
          },
          // eslint-disable-next-line react-hooks/exhaustive-deps
          []
@@ -128,7 +127,8 @@ export const useStickers = () => {
 
    const [updateNormal, __, { output: normalMap }] = useBlank({
       size,
-      dpr: 4,
+      dpr: Math.min(resizeBoundary.maxDpr, 4),
+      isSizeUpdate: resizeBoundary.isUpdate,
       onBeforeInit: useCallback(
          (shader: any) => {
             Object.assign(shader.uniforms, {
@@ -201,6 +201,11 @@ export const useStickers = () => {
 					usf_FragColor = finalColor;
          	`
             );
+
+            shader.fragmentShader = shader.fragmentShader.replace(
+               "precision highp float;",
+               "precision lowp float;"
+            );
          },
          // eslint-disable-next-line react-hooks/exhaustive-deps
          []
@@ -209,6 +214,13 @@ export const useStickers = () => {
 
    const tickCount = useRef(-2);
 
+   if (
+      resizeBoundary.isUpdate &&
+      tickCount.current === canvasState.stickerState.count
+   ) {
+      tickCount.current -= 2;
+   }
+
    const [isReady, setIsReady] = useState(false);
 
    useFrame((state) => {
@@ -218,7 +230,7 @@ export const useStickers = () => {
 
       tickCount.current++;
 
-      if (tickCount.current === 0) {
+      if (tickCount.current === 0 && !isReady) {
          setIsReady(true);
       }
 

diff --git a/app/stickers/UI/Cursor/GifPreloader.tsx b/app/stickers/UI/Cursor/GifPreloader.tsx
@@ -1,6 +1,6 @@
 import { memo } from "react";
 import Image from "next/image";
-import { STICKER_TEXTURES_LENGTH } from "../../useStickers";
+import { STICKER_TEXTURES_LENGTH } from "../../StickerBall/useStickers";
 
 const GIF_IMAGES = [...Array(STICKER_TEXTURES_LENGTH)].map(
    (_, i) => `/stickers/gif/gif${i}.gif`

diff --git a/app/stickers/UI/Cursor/index.tsx b/app/stickers/UI/Cursor/index.tsx
@@ -7,13 +7,14 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import gsap from "gsap";
 import { GifPreloader } from "./GifPreloader";
 import { Confetti } from "./Confetti";
-import { useIsTouchDevice } from "@funtech-inc/spice";
+import { useIsTouchDevice, useFrame } from "@funtech-inc/spice";
 import s from "./index.module.scss";
 
 const updateTargetPoint = (target: HTMLDivElement, point: THREE.Vector2) => {
-   const targetRect = target.getBoundingClientRect();
-   target.style.left = `${point.x - targetRect.width / 2}px`;
-   target.style.top = `${point.y - targetRect.height / 2}px`;
+   const width = target.clientWidth;
+   const height = target.clientHeight;
+   target.style.left = `${point.x - width / 2}px`;
+   target.style.top = `${point.y - height / 2}px`;
 };
 
 const CURSOR_LERP = 0.8;
@@ -58,7 +59,6 @@ export const CursorUI = () => {
       canvasState.stickerState.nextStickerIndex
    );
 
-   const rafID = useRef<number>(0);
    const cursorRef = useRef<HTMLDivElement>(null);
    const imageRef = useRef<HTMLImageElement>(null);
    const confettiRef = useRef<HTMLDivElement>(null);
@@ -170,7 +170,7 @@ export const CursorUI = () => {
       [canvasState]
    );
 
-   const handleFrame = useCallback(() => {
+   useFrame(() => {
       const isOver = canvasState.cursorState.isOver;
 
       // update sticker index
@@ -194,21 +194,7 @@ export const CursorUI = () => {
          updateCursorPoint(false);
       }
       prevIsOver.current = isOver;
-      rafID.current = requestAnimationFrame(handleFrame);
-   }, [
-      canvasState.stickerState,
-      stickerIndex,
-      canvasState.cursorState,
-      onStickerChange,
-      onOver,
-      onOut,
-      updateCursorPoint,
-   ]);
-
-   useEffect(() => {
-      rafID.current = requestAnimationFrame(handleFrame);
-      return () => cancelAnimationFrame(rafID.current);
-   }, [handleFrame]);
+   });
 
    return (
       <div className={s.container}>