demo update

app/ShaderFx.tsx

@@ -9,7 +9,7 @@ import { Demo } from "./_demo";
 // import CreateShaderFx from "@/CreateShaderFx";
 
 export const ShaderFx = () => {
-   const [dpr, setDpr] = useState(0.5);
+   const [dpr, setDpr] = useState(1.0);
    return (
       <Canvas dpr={dpr}>
          <PerformanceMonitor

app/_demo/config.ts

@@ -1,69 +1,35 @@
 import * as THREE from "three";
-import gsap from "gsap";
 import GUI from "lil-gui";
 
-import { TRANSITIONBG_PARAMS } from "@/packages/use-shader-fx/src/hooks/useTransitionBg";
 import { FRUID_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFruid";
 import { FOGPROJECTION_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFogProjection";
 
 export const CONFIG = {
-   transitionBg: {
-      ...structuredClone(TRANSITIONBG_PARAMS),
-      dir: new THREE.Vector2(0.3, 0.4),
-      imageResolution: new THREE.Vector2(1440, 1029),
-      active: true,
-      transformDir: 1,
-      transform: () => {
-         CONFIG.transitionBg.transformDir *= -1;
-         const tl = gsap.timeline({
-            defaults: { duration: 2 },
-         });
-         tl.to(CONFIG.transitionBg, {
-            noiseStrength: 0.2,
-            progress: 0.5,
-            ease: "power2.in",
-         });
-         tl.to(CONFIG.transitionBg, {
-            noiseStrength: 0.0,
-            progress: CONFIG.transitionBg.transformDir > 0 ? 0.0 : 1.0,
-            ease: "power2.out",
-         });
-      },
-   },
    fogProjection: {
       ...structuredClone(FOGPROJECTION_PARAMS),
-      fogColor: new THREE.Color(0xd5cea3),
-      active: true,
+      fogColor: new THREE.Color(0xffffff),
+      fogEdge0: 0.5,
+      fogEdge1: 1.0,
+      distortionStrength: 0.2,
    },
    fruid: {
       ...structuredClone(FRUID_PARAMS),
       fruidVec: new THREE.Vector3(),
       fruid_color: (velocity: THREE.Vector2) => {
-         const rCol = Math.max(0.0, velocity.x * 100);
-         const gCol = Math.max(0.0, velocity.y * 100);
-         const bCol = (rCol + gCol) / 2;
+         const rCol = Math.max(0.2, velocity.x * 100);
+         const gCol = Math.max(0.2, velocity.y * 100);
+         const bCol = Math.max(0.4, (rCol + gCol) / 2);
          return CONFIG.fruid.fruidVec.set(rCol, gCol, bCol);
       },
    },
 };
 
 export const setGUI = (gui: GUI) => {
-   const transitionBg = gui.addFolder("transitionBg");
-   transitionBg.add(CONFIG.transitionBg, "noiseStrength", 0, 1, 0.01);
-   transitionBg.add(CONFIG.transitionBg, "progress", 0, 1, 0.01);
-   if (CONFIG.transitionBg.dir) {
-      transitionBg.add(CONFIG.transitionBg.dir, "x", 0, 1, 0.01);
-      transitionBg.add(CONFIG.transitionBg.dir, "y", 0, 1, 0.01);
-   }
-   transitionBg.add(CONFIG.transitionBg, "transform");
-   transitionBg.add(CONFIG.transitionBg, "active");
-
    const fogProjection = gui.addFolder("fogProjection");
    fogProjection.add(CONFIG.fogProjection, "distortionStrength", 0, 10, 0.01);
    fogProjection.add(CONFIG.fogProjection, "fogEdge0", 0, 1, 0.01);
    fogProjection.add(CONFIG.fogProjection, "fogEdge1", 0, 1, 0.01);
    fogProjection.addColor(CONFIG.fogProjection, "fogColor");
-   fogProjection.add(CONFIG.fogProjection, "active");
 
    const fruid = gui.addFolder("fruid");
    fruid.add(CONFIG.fruid, "density_dissipation", 0, 1, 0.01);

app/_demo/index.tsx

@@ -1,29 +1,23 @@
 import { useRef } from "react";
-import * as THREE from "three";
-import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
+import { useFrame, extend, useThree } from "@react-three/fiber";
 import { usePerformanceMonitor } from "@react-three/drei";
 import { CONFIG, setGUI } from "./config";
 import { useGUI } from "@/utils/useGUI";
 import {
-   FxTextureMaterial,
-   FxTextureMaterialProps,
-} from "@/utils/fxTextureMaterial";
+   FxTransparentMaterial,
+   FxTransparentMaterialProps,
+} from "@/utils/fxTransparentMaterial";
 import {
    useFruid,
-   useTransitionBg,
    useFogProjection,
    useNoise,
 } from "@/packages/use-shader-fx/src";
 
-extend({ FxTextureMaterial });
+extend({ FxTransparentMaterial });
 
 export const Demo = () => {
-   const [bg, bg2] = useLoader(THREE.TextureLoader, [
-      "thumbnail.jpg",
-      "momo.jpg",
-   ]);
    const updateGUI = useGUI(setGUI);
-   const mainShaderRef = useRef<FxTextureMaterialProps>();
+   const mainShaderRef = useRef<FxTransparentMaterialProps>();
 
    const size = useThree((state) => state.size);
    const dpr = useThree((state) => state.viewport.dpr);
@@ -35,7 +29,6 @@ export const Demo = () => {
       dpr,
    });
 
-   const [updateTransitionBg] = useTransitionBg({ size, dpr });
    const [updateFogProjection] = useFogProjection({ size, dpr });
 
    usePerformanceMonitor({
@@ -48,9 +41,7 @@ export const Demo = () => {
 
    useFrame((props) => {
       const noise = updateNoise(props, {
-         timeStrength: 0.3,
-         noiseOctaves: 8,
-         fbmOctaves: 3,
+         timeStrength: 0.4,
       });
 
       const fx = updateFruid(props, {
@@ -63,39 +54,29 @@ export const Demo = () => {
          fruid_color: CONFIG.fruid.fruid_color,
       });
 
-      let postFx = updateTransitionBg(props, {
-         imageResolution: CONFIG.transitionBg.imageResolution,
-         noiseStrength: CONFIG.transitionBg.noiseStrength,
-         progress: CONFIG.transitionBg.progress,
-         dir: CONFIG.transitionBg.dir,
-         texture0: bg,
-         texture1: bg2,
+      const postFx = updateFogProjection(props, {
+         distortionStrength: CONFIG.fogProjection.distortionStrength,
+         fogEdge0: CONFIG.fogProjection.fogEdge0,
+         fogEdge1: CONFIG.fogProjection.fogEdge1,
+         fogColor: CONFIG.fogProjection.fogColor,
+         texture: fx,
          noiseMap: noise,
       });
 
-      if (CONFIG.fogProjection.active) {
-         postFx = updateFogProjection(props, {
-            distortionStrength: CONFIG.fogProjection.distortionStrength,
-            fogEdge0: CONFIG.fogProjection.fogEdge0,
-            fogEdge1: CONFIG.fogProjection.fogEdge1,
-            fogColor: CONFIG.fogProjection.fogColor,
-            texture: postFx,
-            noiseMap: noise,
-         });
-      }
-
       const main = mainShaderRef.current;
       if (main) {
-         main.u_fx = fx;
-         main.u_postFx = postFx;
+         main.u_fx = postFx;
       }
       updateGUI();
    });
 
    return (
       <mesh>
          <planeGeometry args={[2, 2]} />
-         <fxTextureMaterial key={FxTextureMaterial.key} ref={mainShaderRef} />
+         <fxTransparentMaterial
+            key={FxTransparentMaterial.key}
+            ref={mainShaderRef}
+         />
       </mesh>
    );
 };

app/layout.tsx

@@ -1,8 +1,11 @@
 import "the-new-css-reset/css/reset.css";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Playfair_Display } from "next/font/google";
 
-const inter = Inter({ subsets: ["latin"] });
+const playfair = Playfair_Display({
+   subsets: ["latin"],
+   variable: "--font-playfair",
+});
 
 const metadata: Metadata = {
    title: "use-shader-fx",
@@ -17,8 +20,12 @@ export default function RootLayout({
    return (
       <html lang="en">
          <body
-            className={inter.className}
-            style={{ overflow: "hidden", height: "100svh" }}>
+            className={playfair.className}
+            style={{
+               overflow: "hidden",
+               height: "100svh",
+               // background: "#f8f8f8",
+            }}>
             {children}
          </body>
       </html>

app/page.tsx

@@ -4,6 +4,23 @@ export default function Home() {
    return (
       <div style={{ width: "100%", height: "100svh" }}>
          <ShaderFx />
+         <h1
+            style={{
+               fontSize: "10vw",
+               position: "fixed",
+               top: "0px",
+               zIndex: -100,
+               fontWeight: 700,
+               lineHeight: 1,
+               textAlign: "center",
+               width: "100%",
+               height: "100%",
+               display: "flex",
+               justifyContent: "center",
+               alignItems: "center",
+            }}>
+            use-shader-fx
+         </h1>
       </div>
    );
 }

utils/fxTransparentMaterial.tsx

@@ -0,0 +1,42 @@
+import * as THREE from "three";
+import { shaderMaterial } from "@react-three/drei";
+
+declare global {
+   namespace JSX {
+      interface IntrinsicElements {
+         fxTransparentMaterial: any;
+      }
+   }
+}
+
+export type FxTransparentMaterialProps = {
+   u_fx: THREE.Texture | null;
+};
+
+export const FxTransparentMaterial = shaderMaterial(
+   {
+      u_fx: null,
+   },
+   `
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+   `
+		precision highp float;
+		varying vec2 vUv;
+		uniform sampler2D u_fx;
+
+		void main() {
+			vec2 uv = vUv;
+			vec3 color = texture2D(u_fx, uv).rgb;
+			float brightness = dot(color, vec3(.2, .2, .2));
+			float minVal = 0.0;
+			float maxVal = 1.0;
+			float alpha = smoothstep(minVal, maxVal, brightness);
+			gl_FragColor = vec4(color, alpha);
+		}
+	`
+);