Merge pull request #76 from FunTechInc/v1.1.3

type modification

Author: takuma-hmng8

app/apple-icon.jpg

@@ -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;
 }
 

app/gradation/Playground.tsx

@@ -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/build/use-shader-fx.js.map

@@ -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/build/use-shader-fx.umd.cjs.map

@@ -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/package-lock.json

@@ -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/package.json

@@ -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 };