type modification

app/gradation/Playground.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as THREE from "three";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useFrame, useThree, extend } from "@react-three/fiber";
 import {
    useNoise,
@@ -36,14 +36,17 @@ const setConfig = (key: "marble" | "colorStrata" | "hsv") => {
 
 function useDownloadCanvas() {
    const { gl } = useThree();
-   const downloadImage = (filename = "image.png") => {
-      const image = gl.domElement.toDataURL("image/png");
-      const link = document.createElement("a");
-      link.download = filename;
-      link.href = image;
-      link.click();
-      link.remove();
-   };
+   const downloadImage = useCallback(
+      (filename = "image.png") => {
+         const image = gl.domElement.toDataURL("image/png");
+         const link = document.createElement("a");
+         link.download = filename;
+         link.href = image;
+         link.click();
+         link.remove();
+      },
+      [gl]
+   );
    return downloadImage;
 }
 

packages/use-shader-fx/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@funtech-inc/use-shader-fx",
-   "version": "1.1.2",
+   "version": "1.1.3",
    "description": "⚡️ More FXs, Less GLSL",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

packages/use-shader-fx/src/fxs/interactions/useBrush/index.ts

@@ -27,7 +27,10 @@ export type BrushParams = {
    /** Number of motion blur samples. Affects performance default: 5 */
    motionSample?: number;
    /** brush color , it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */
-   color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;
+   color?:
+      | ((velocity: THREE.Vector2) => THREE.Vector3)
+      | THREE.Vector3
+      | THREE.Color;
    /** Follows the cursor even if it loses speed , default:false */
    isCursor?: boolean;
    /** brush pressure (0 to 1) , default : 1.0 */
@@ -118,7 +121,7 @@ export const useBrush = ({
          }
          setUniform(material, "uVelocity", pointerValues.velocity);
 
-         const color: THREE.Vector3 =
+         const color: THREE.Vector3 | THREE.Color =
             typeof params.color === "function"
                ? params.color(pointerValues.velocity)
                : params.color!;

packages/use-shader-fx/src/fxs/interactions/useBrush/useMesh.ts

@@ -24,7 +24,7 @@ export class BrushMaterial extends THREE.ShaderMaterial {
       uMouse: { value: number };
       uPrevMouse: { value: number };
       uVelocity: { value: number };
-      uColor: { value: THREE.Vector3 };
+      uColor: { value: THREE.Vector3 | THREE.Color };
       uIsCursor: { value: boolean };
       uPressureStart: { value: number };
       uPressureEnd: { value: number };

packages/use-shader-fx/src/fxs/interactions/useFluid/index.ts

@@ -27,7 +27,10 @@ export type FluidParams = {
    /** splat radius , default:0.002 */
    splat_radius?: number;
    /** Fluid Color.THREE.Vector3 Alternatively, it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */
-   fluid_color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;
+   fluid_color?:
+      | ((velocity: THREE.Vector2) => THREE.Vector3)
+      | THREE.Vector3
+      | THREE.Color;
    /** When calling usePointer in a frame loop, setting PointerValues ​​to this value prevents double calls , default:false */
    pointerValues?: PointerValues | false;
 };
@@ -163,7 +166,7 @@ export const useFluid = ({
             updateDensityFBO(gl, ({ read }) => {
                setMeshMaterial(materials.splatMaterial);
                setUniform(materials.splatMaterial, "uTarget", read);
-               const color: THREE.Vector3 =
+               const color: THREE.Vector3 | THREE.Color =
                   typeof params.fluid_color === "function"
                      ? params.fluid_color(pointerValues.velocity)
                      : params.fluid_color!;

packages/use-shader-fx/src/fxs/interactions/useFluid/materials/useSplatMaterial.ts

@@ -7,7 +7,7 @@ export class SplatMaterial extends THREE.ShaderMaterial {
    uniforms!: {
       uTarget: { value: THREE.Texture };
       aspectRatio: { value: number };
-      color: { value: THREE.Vector3 };
+      color: { value: THREE.Vector3 | THREE.Color };
       point: { value: THREE.Vector2 };
       radius: { value: number };
       texelSize: { value: THREE.Vector2 };

packages/use-shader-fx/types/fxs/interactions/useBrush/index.d.ts

@@ -20,7 +20,7 @@ export type BrushParams = {
     /** Number of motion blur samples. Affects performance default: 5 */
     motionSample?: number;
     /** brush color , it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */
-    color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;
+    color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3 | THREE.Color;
     /** Follows the cursor even if it loses speed , default:false */
     isCursor?: boolean;
     /** brush pressure (0 to 1) , default : 1.0 */

packages/use-shader-fx/types/fxs/interactions/useBrush/useMesh.d.ts

@@ -48,7 +48,7 @@ export declare class BrushMaterial extends THREE.ShaderMaterial {
             value: number;
         };
         uColor: {
-            value: THREE.Vector3;
+            value: THREE.Vector3 | THREE.Color;
         };
         uIsCursor: {
             value: boolean;

packages/use-shader-fx/types/fxs/interactions/useFluid/index.d.ts

@@ -19,7 +19,7 @@ export type FluidParams = {
     /** splat radius , default:0.002 */
     splat_radius?: number;
     /** Fluid Color.THREE.Vector3 Alternatively, it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */
-    fluid_color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;
+    fluid_color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3 | THREE.Color;
     /** When calling usePointer in a frame loop, setting PointerValues ​​to this value prevents double calls , default:false */
     pointerValues?: PointerValues | false;
 };

packages/use-shader-fx/types/fxs/interactions/useFluid/materials/useSplatMaterial.d.ts

@@ -8,7 +8,7 @@ export declare class SplatMaterial extends THREE.ShaderMaterial {
             value: number;
         };
         color: {
-            value: THREE.Vector3;
+            value: THREE.Vector3 | THREE.Color;
         };
         point: {
             value: THREE.Vector2;