Merge pull request #96 from FunTechInc/v1.1.13

fix css
FunTechInc · Apr 10, 2024 · c8c7cba · c8c7cba
2 parents d388238 + 49fbc12
commit c8c7cba
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 136 deletions.
diff --git a/app/ShaderFx.tsx b/app/ShaderFx.tsx
@@ -27,21 +27,24 @@ export const ShaderFx = ({
    preserveDrawingBuffer = false,
    shadows = false,
    isDprUpdate = true,
+   eventSource,
 }: {
    children: React.ReactNode;
    preserveDrawingBuffer?: boolean;
    shadows?: boolean;
    isDprUpdate?: boolean;
+   eventSource?: HTMLElement | React.MutableRefObject<HTMLElement> | undefined;
 }) => {
    const [dpr, setDpr] = useState(1.5);
    return (
       <Suspense fallback={<Loading />}>
          <Canvas
+            eventSource={eventSource}
+            eventPrefix={eventSource ? "client" : "offset"}
             dpr={dpr}
             gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}
             shadows={shadows}>
             <PerformanceMonitor
-               factor={1}
                onChange={({ factor }) => {
                   if (preserveDrawingBuffer) {
                      return;
@@ -50,7 +53,7 @@ export const ShaderFx = ({
                      return;
                   }
                   console.log(`dpr:${dpr}`);
-                  setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
+                  setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
                }}>
                {children}
                {/* <Perf position={"bottom-left"} minimal={false} /> */}

diff --git a/app/_home/index.module.scss b/app/_home/index.module.scss
@@ -4,6 +4,7 @@
    position: fixed;
    top: 0;
    left: 0;
+   z-index: -1;
 }
 
 .wrapper {

diff --git a/app/_home/index.tsx b/app/_home/index.tsx
@@ -2,7 +2,7 @@
 
 import { ShaderFx } from "../ShaderFx";
 import { Playground } from "./Playground";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { EasingTypes } from "@/packages/use-shader-fx/src";
 import Image from "next/image";
 import s from "./index.module.scss";
@@ -25,6 +25,9 @@ const Install = () => {
 };
 
 export default function Page() {
+   const wrapper = useRef<HTMLDivElement>(
+      null
+   ) as React.MutableRefObject<HTMLDivElement>;
    const [bpm, setBpm] = useState(120);
    const [easing, setEasing] = useState<EasingTypes>("easeOutQuad");
 
@@ -64,64 +67,71 @@ export default function Page() {
    return (
       <>
          <div className={s.canvas}>
-            <ShaderFx>
+            <ShaderFx eventSource={wrapper}>
                <Playground bpm={bpm} easing={easing} />
             </ShaderFx>
          </div>
-         <div className={s.wrapper}>
-            <div className={s.content}>
-               <h1 className={s.title}>⚡️ More FXs, Less GLSL</h1>
-               <Install />
-               <p className={s.link}>
-                  Oh, right, u can download the gradient from
-                  <a href="/gradation" target="_blank">
-                     here 👉
-                  </a>
-               </p>
-               <div className={s.input}>
-                  <p>BPM:</p>
-                  <input
-                     type="number"
-                     value={bpm}
-                     onChange={(e) => {
-                        setBpm(+e.target.value);
-                     }}
-                  />
-               </div>
-               <div className={s.input}>
-                  <p>Easing:</p>
-                  <select
-                     value={easing}
-                     onChange={(e) => {
-                        setEasing(e.target.value as EasingTypes);
-                     }}>
-                     {easingTypes.map((type) => (
-                        <option key={type} value={type}>
-                           {type}
-                        </option>
-                     ))}
-                  </select>
+         <div ref={wrapper}>
+            <div className={s.wrapper}>
+               <div className={s.content}>
+                  <h1 className={s.title}>⚡️ More FXs, Less GLSL</h1>
+                  <Install />
+                  <p className={s.link}>
+                     Oh, right, u can download the gradient from
+                     <a href="/gradation" target="_blank">
+                        here 👉
+                     </a>
+                  </p>
+                  <div className={s.input}>
+                     <p>BPM:</p>
+                     <input
+                        type="number"
+                        value={bpm}
+                        onChange={(e) => {
+                           setBpm(+e.target.value);
+                        }}
+                     />
+                  </div>
+                  <div className={s.input}>
+                     <p>Easing:</p>
+                     <select
+                        value={easing}
+                        onChange={(e) => {
+                           setEasing(e.target.value as EasingTypes);
+                        }}>
+                        {easingTypes.map((type) => (
+                           <option key={type} value={type}>
+                              {type}
+                           </option>
+                        ))}
+                     </select>
+                  </div>
                </div>
+               <ul className={s.snsLink}>
+                  <li>
+                     <a
+                        href="https://github.com/FunTechInc/use-shader-fx"
+                        target={"_blank"}>
+                        <Image
+                           src="github-logo.svg"
+                           alt="GitHub"
+                           width={28}
+                           height={28}
+                        />
+                     </a>
+                  </li>
+                  <li>
+                     <a href="https://twitter.com/tkm_hmng8" target={"_blank"}>
+                        <Image
+                           src="x-logo.svg"
+                           alt="X"
+                           width={24}
+                           height={24}
+                        />
+                     </a>
+                  </li>
+               </ul>
             </div>
-            <ul className={s.snsLink}>
-               <li>
-                  <a
-                     href="https://github.com/FunTechInc/use-shader-fx"
-                     target={"_blank"}>
-                     <Image
-                        src="github-logo.svg"
-                        alt="GitHub"
-                        width={28}
-                        height={28}
-                     />
-                  </a>
-               </li>
-               <li>
-                  <a href="https://twitter.com/tkm_hmng8" target={"_blank"}>
-                     <Image src="x-logo.svg" alt="X" width={24} height={24} />
-                  </a>
-               </li>
-            </ul>
          </div>
       </>
    );

diff --git a/app/playground/Playground.tsx b/app/playground/Playground.tsx
@@ -3,19 +3,32 @@
 import * as THREE from "three";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree, extend, useLoader } from "@react-three/fiber";
-import { useFluid } from "@/packages/use-shader-fx/src";
+import { useFluid, useCoverTexture } from "@/packages/use-shader-fx/src";
 import { FxMaterial } from "./FxMaterial";
+import { useVideoTexture } from "@react-three/drei";
 
 extend({ FxMaterial });
 
 export const Playground = () => {
    const { size } = useThree();
+
+   const funkun = useVideoTexture("/FT_Ch02-comp.mp4", { width: 920 });
+   const [updateCover, setCover, { output: cover }] = useCoverTexture({
+      size,
+      dpr: 0.1,
+   });
+
+   setCover({
+      texture: funkun,
+   });
+
    const [updateFluid, setFluid, { output: fluid }] = useFluid({
       size,
       dpr: {
          dpr: 0.08,
          effect: {
-            fbo: false,
+            shader: true,
+            fbo: true,
          },
       },
    });
@@ -27,14 +40,15 @@ export const Playground = () => {
    });
 
    useFrame((props) => {
-      updateFluid(props);
+      // updateFluid(props);
+      updateCover(props);
    });
 
    return (
       <>
          <mesh>
             <planeGeometry args={[2, 2]} />
-            <fxMaterial u_fx={fluid} key={FxMaterial.key} />
+            <fxMaterial u_fx={cover} key={FxMaterial.key} />
          </mesh>
       </>
    );