README

Author: takuma-hmng8

README.md

@@ -6,9 +6,54 @@ For details on each FX, please refer to Storybook
 👉 [Storybook](https://use-shader-fx-stories.vercel.app/) 👈
 
 ```bash
-npm install @hmng8/use-shader-fx
+npm install @funtech-inc/use-shader-fx
 ```
 
+# Hooks Index
+
+### FXs
+
+<table>
+<tr>
+<th><strong>effects</strong></th>
+<td><a href="">useSimpleBlur</a>, <a href="">useWave</a></td>
+</tr>
+
+<tr>
+<th><strong>interactions</strong></th>
+<td><a href="">useBrush</a>, <a href="">useFluid</a>, <a href="">useRipple</a></td>
+</tr>
+
+<tr>
+<th><strong>misc</strong></th>
+<td><a href="">useChromaKey</a></td>
+</tr>
+
+<tr>
+<th><strong>noises</strong></th>
+<td><a href="">useColorStrata</a>, <a href="">useMarble</a>, <a href="">useNoise</a></td>
+</tr>
+
+<tr>
+<th><strong>utils</strong></th>
+<td><a href="">useAlphaBlending</a>, <a href="">useBlending</a>, <a href="">useBrightnessPicker</a>, <a href="">useCoverTexture</a>, <a href="">useDuoTone</a>, <a href="">useFxBlending</a>, <a href="">useFxTexture</a>, <a href="">useHSV</a></td>
+</tr>
+
+<tr>
+<th><strong>misc</strong></th>
+<td><a href="">useBeat</a>, <a href="">useFPSLimiter</a>, <a href="">usePointer</a>, <a href="">useDomSyncer</a></td>
+</tr>
+</table>
+
+### Misc
+
+<table>
+<tr>
+<th><strong>misc</strong></th>
+<td><a href="#usebeat">useBeat</a>, <a href="#usefpslimiter">useFPSLimiter</a>, <a href="#usepointer">usePointer</a>, <a href="#usedomsyncer">useDomSyncer</a></td>
+</tr>
+</table>
+
 # Usage
 
 From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in array format. The `config` is an object, which varies for each Hook, containing details such as `size`,`dpr` and `samples`.
@@ -304,17 +349,6 @@ Generates and returns a `THREE.OrthographicCamera`.
 const camera = useCamera(size);
 ```
 
-## usePointer
-
-When given the `pointer` vector2 from r3f's `RootState`, it generates an update function that returns {currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity}.
-
-```js
-const updatePointer = usePointer();
-
-const { currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity } =
-   updatePointer(pointer);
-```
-
 ## useResolution
 
 This hook returns `resolution`. If `dpr` isn't set (or set to false), dpr won't be multiplied.
@@ -359,7 +393,7 @@ const [renderTargets, copyTexture] = useCopyTexture(UseFboProps, length);
 copyTexture(gl, index); // return texture
 ```
 
-# Other Hooks
+# Misc
 
 ## useDomSyncer
 
@@ -460,3 +494,65 @@ type DomSyncerParams = {
 ```
 
 `updateKey` : Because DOM rendering and React updates occur asynchronously, there may be a lag between updating dependent arrays and setting DOM arrays. That's what the Key is for. If the dependent array is updated but the Key is not, the loop will skip and return an empty texture. By updating the timing key when DOM acquisition is complete, you can perfectly synchronize DOM and Mesh updates.
+
+## usePointer
+
+When given the `pointer` vector2 from r3f's `RootState`, it generates an update function that returns {currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity}.
+You can also add `lerp` (0~1, lerp intensity (0 to less than 1) , default: 0)
+
+```js
+const updatePointer = usePointer(lerp);
+
+const { currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity } =
+   updatePointer(pointer);
+```
+
+You can override the pointer process by passing `pointerValues` to `updateFx` in the `useFrame`.
+
+```ts
+useFrame((props) => {
+   const pointerValues = updatePointer(props.pointer);
+   updateBrush(props, {
+      pointerValues: pointerValues,
+   });
+});
+```
+
+## useBeat
+
+Time-sensitive hooks such as `useNoise` and `useMarble` accept `beat`.
+The second argument can be `easing`.
+easing functions are referenced from https://github.com/ai/easings.net , default : "easeOutQuart"
+
+```ts
+const beting = useBeat(bpm, "easeOutQuad");
+useFrame((props) => {
+   const { beat, hash } = beting(props.clock);
+   updateMarble(props, {
+      beat: beat,
+   });
+});
+```
+
+```ts
+type BeatValues = {
+   beat: number;
+   floor: number;
+   fract: number;
+   /** unique hash specific to the beat */
+   hash: number;
+};
+```
+
+## useFPSLimiter
+
+Allows you to skip FX that do not need to be processed at 60 FPS.
+
+```ts
+const limiter = useFPSLimiter(30);
+useFrame((props) => {
+   if (!limiter(props.clock)) {
+      return;
+   }
+});
+```

app/ShaderFx.tsx

@@ -22,7 +22,7 @@ export const ShaderFx = ({
                   return;
                }
                console.log(`dpr:${dpr}`);
-               setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
+               setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
             }}>
             <Suspense fallback={null}>{children}</Suspense>
             {/* <Perf position={"bottom-left"} minimal={false} /> */}

app/comingsoon/FxMaterial.tsx renamed to app/_home/FxMaterial.tsx

@@ -13,6 +13,7 @@ declare global {
 export type FxMaterialProps = {
    u_noise: THREE.Texture;
    u_colorStrata: THREE.Texture;
+   u_brush: THREE.Texture;
    u_grain: THREE.Texture;
    u_noiseIntensity: number;
 };
@@ -21,6 +22,7 @@ export const FxMaterial = shaderMaterial(
    {
       u_noise: new THREE.Texture(),
       u_colorStrata: new THREE.Texture(),
+      u_brush: new THREE.Texture(),
       u_grain: new THREE.Texture(),
       u_noiseIntensity: 1,
    },

app/comingsoon/Playground.tsx renamed to app/_home/Playground.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as THREE from "three";
 import { useEffect, useRef } from "react";
 import { useFrame, useThree, extend } from "@react-three/fiber";
@@ -9,9 +7,14 @@ import {
    useMarble,
    useHSV,
    useBeat,
+   useBrush,
+   useCoverTexture,
+   usePointer,
+   useFPSLimiter,
 } from "@/packages/use-shader-fx/src";
+
 import { FxMaterial, FxMaterialProps } from "./FxMaterial";
-import { useFBX } from "@react-three/drei";
+import { useVideoTexture } from "@react-three/drei";
 
 extend({ FxMaterial });
 
@@ -40,7 +43,10 @@ const CONFIG = {
       CONFIG.marble.complexity = Math.random() * 10;
       CONFIG.marble.complexityAttenuation = Math.random();
       CONFIG.marble.scale = Math.random() * 0.001;
-      CONFIG.colorStrata.laminateLayer = Math.random() * 100;
+      CONFIG.colorStrata.laminateLayer = Math.max(
+         Math.floor(Math.random() * 5),
+         1
+      );
       CONFIG.colorStrata.scale = Math.max(Math.random(), 0.1);
       CONFIG.colorStrata.laminateInterval = new THREE.Vector2(
          Math.max(Math.random(), 0.2),
@@ -59,9 +65,8 @@ const CONFIG = {
          Math.random(),
          Math.random()
       );
-      CONFIG.noiseIntensity = Math.random() * 10;
+      CONFIG.noiseIntensity = Math.random() * 20;
    },
-   save: () => {},
 };
 
 const setConfig = (key: "marble" | "colorStrata" | "hsv") => {
@@ -70,19 +75,11 @@ const setConfig = (key: "marble" | "colorStrata" | "hsv") => {
    };
 };
 
-// function FunKun() {
-//    let fbx = useFBX("/funkun.fbx");
-//    return <primitive object={fbx} scale={0.1} />;
-// }
-
-export const Playground = () => {
+export const Playground = ({ bpm }: { bpm: number }) => {
    const ref = useRef<FxMaterialProps>();
-
-   useEffect(() => {
-      CONFIG.random();
-   }, []);
-
    const { size, viewport } = useThree();
+   const funkun = useVideoTexture("/FT_Ch02.mp4");
+
    const [updateNoise, setNoise, { output: noise }] = useNoise({
       size,
       dpr: viewport.dpr,
@@ -97,34 +94,66 @@ export const Playground = () => {
       size,
       dpr: viewport.dpr,
    });
-
-   setNoise({
-      scale: 1000,
-      warpOctaves: 1,
-      noiseOctaves: 1,
-      fbmOctaves: 1,
-      timeStrength: 1,
+   const [updateBrush, setBrush, { output: brush }] = useBrush({
+      size,
+      dpr: viewport.dpr,
    });
-
-   setMarble({
-      ...setConfig("marble"),
-      timeStrength: 0.5,
+   const [updateCover, setCover, { output: cover }] = useCoverTexture({
+      size,
+      dpr: viewport.dpr,
    });
 
-   setColorStrata({
-      ...setConfig("colorStrata"),
-      timeStrength: new THREE.Vector2(0, 0),
-   });
+   useEffect(() => {
+      CONFIG.random();
+      setNoise({
+         scale: 1000,
+         warpOctaves: 1,
+         noiseOctaves: 1,
+         fbmOctaves: 1,
+         timeStrength: 1,
+      });
 
-   setHSV({
-      ...setConfig("hsv"),
-      texture: colorStrata,
-   });
+      setMarble({
+         ...setConfig("marble"),
+         timeStrength: 0.5,
+         iterations: 3,
+      });
+
+      setColorStrata({
+         ...setConfig("colorStrata"),
+         timeStrength: new THREE.Vector2(0, 0),
+      });
+
+      setHSV({
+         ...setConfig("hsv"),
+         texture: colorStrata,
+      });
+
+      setCover({
+         texture: funkun,
+         textureResolution: new THREE.Vector2(1280, 720),
+      });
+
+      setBrush({
+         map: noise,
+         texture: cover,
+         mapIntensity: 0.3,
+         radius: 0.2,
+         dissipation: 0.9,
+         isCursor: true,
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+   }, []);
 
-   const beting = useBeat(110);
+   const beting = useBeat(bpm, "easeOutQuad");
+   const updatePointer = usePointer(0.8);
+   const limiter = useFPSLimiter(40);
    const hashMemo = useRef(0);
 
    useFrame((props) => {
+      if (!limiter(props.clock)) {
+         return;
+      }
       const { beat, hash } = beting(props.clock);
       if (hash !== hashMemo.current) {
          hashMemo.current = hash;
@@ -141,22 +170,23 @@ export const Playground = () => {
          ...(setConfig("marble") as any),
          beat: beat,
       });
+      updateCover(props);
+      const pointerValues = updatePointer(props.pointer);
+      updateBrush(props, {
+         pointerValues: pointerValues,
+      });
       ref.current!.u_noiseIntensity = CONFIG.noiseIntensity;
    });
 
    return (
-      // <mesh>
-      //    <ambientLight />
-      //    <pointLight position={[10, 10, 10]} />
-      //    <FunKun />
-      // </mesh>
       <mesh>
          <planeGeometry args={[2, 2]} />
          <fxMaterial
             key={FxMaterial.key}
             u_noise={marble}
             u_grain={noise}
             u_colorStrata={hsv}
+            u_brush={brush}
             ref={ref}
          />
       </mesh>