Merge pull request #94 from FunTechInc/v1.1.13

V1.1.13

Author: takuma-hmng8

README.md

@@ -68,7 +68,7 @@ From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in ar
 const [updateFx, setParams, fxObject] = useSomeFx(config);
 ```
 
-Execute `updateFx` in `useFrame`. The first argument receives the RootState from `useFrame`, and the second one takes `HookPrams`. Each fx has its `HookPrams`, and each type is exported.
+invoke `updateFx` in `useFrame`. The first argument receives the RootState from `useFrame`, and the second one takes `HookPrams`. Each fx has its `HookPrams`, and each type is exported.
 
 ```js
 useFrame((props) => {
@@ -288,6 +288,29 @@ usePerformanceMonitor({
 });
 ```
 
+When using some expensive FX (such as `useFluid`), lowering the `dpr` of the FBO of that FX can improve performance.
+
+```js
+const [updateFx, setParams, fxObject] = useSomeFx({ size, dpr: 0.01 });
+```
+
+Also, you can make more detailed adjustments by passing an object to `dpr` instead of `number`.
+
+```ts
+type Dpr =
+   | number
+   | {
+        dpr: number;
+        /** you can set whether `dpr` affects `shader` and `fbo`. default is `true` for both */
+        effect?: {
+           /** default : `true` */
+           shader?: boolean;
+           /** default : `true` */
+           fbo?: boolean;
+        };
+     };
+```
+
 # Misc
 
 ## useDomSyncer

app/ShaderFx.tsx

@@ -53,7 +53,6 @@ export const ShaderFx = ({
                   setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
                }}>
                {children}
-               {/* <Suspense fallback={null}>{children}</Suspense> */}
                {/* <Perf position={"bottom-left"} minimal={false} /> */}
             </PerformanceMonitor>
          </Canvas>

app/playground/FxMaterial.tsx

@@ -31,8 +31,11 @@ export const FxMaterial = shaderMaterial(
 		uniform sampler2D u_fx;
 
 		void main() {
-			gl_FragColor = texture2D(u_fx,vUv);
-			// gl_FragColor = vec4(1.,1.,0.,1.);
+			vec2 uv = vUv;
+			vec4 color = texture2D(u_fx, uv);
+			gl_FragColor = color;
+			// gl_FragColor.rgb = color.rgb;
+			// gl_FragColor.a = color.r + color.g + color.b;
 		}
 	`
 );

app/playground/Playground.tsx

@@ -1,26 +1,57 @@
 "use client";
 
 import * as THREE from "three";
-import { useEffect, useMemo } from "react";
+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 {
+   useCoverTexture,
+   useFluid,
+   useSingleFBO,
+} from "@/packages/use-shader-fx/src";
 import { FxMaterial } from "./FxMaterial";
 
 extend({ FxMaterial });
 
 export const Playground = () => {
    const { size, viewport, camera } = useThree();
 
-   const [updateFluid, , { output }] = useFluid({ size, dpr: viewport.dpr });
+   const [funkun] = useLoader(THREE.TextureLoader, ["/funkun.jpg"]);
+
+   const [updateCover, setCover, { output: cover }] = useCoverTexture({
+      size,
+      dpr: 0.01,
+   });
+   setCover({
+      texture: funkun,
+   });
+
+   const [updateFluid, setFluid, { output: fluid }] = useFluid({
+      size,
+      dpr: {
+         dpr: 0.08,
+         effect: {
+            fbo: false,
+         },
+      },
+   });
+
+   setFluid({
+      density_dissipation: 0.99,
+      velocity_dissipation: 0.99,
+      splat_radius: 0.001,
+   });
 
    useFrame((props) => {
-      updateFluid(props);
+      updateCover(props);
+      // updateFluid(props);
    });
 
    return (
-      <mesh>
-         <planeGeometry args={[2, 2]} />
-         <fxMaterial u_fx={output} key={FxMaterial.key} />
-      </mesh>
+      <>
+         <mesh>
+            <planeGeometry args={[2, 2]} />
+            <fxMaterial u_fx={cover} key={FxMaterial.key} />
+         </mesh>
+      </>
    );
 };

app/useMorphParticles/Playground.tsx

@@ -120,7 +120,7 @@ export const Playground = () => {
          // map: funkun,
          // alphaMap: funkunAlpha,
          beat: b.beat,
-         morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
+         // morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
          // morphProgress: 0.5,
       });
       updateGUI();