update

packages/use-shader-fx/package.json

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

packages/use-shader-fx/src/hooks/useGrid/index.ts

@@ -48,7 +48,9 @@ export const useGrid = ({
          const { gl, clock } = rootState;
          newValues && setValues(newValues, false);
          material.uniforms.tick.value =
-            newValues?.tick || clock.getElapsedTime();
+            typeof newValues?.tick === "function"
+               ? newValues.tick(material.uniforms.tick.value)
+               : newValues?.tick || clock.getElapsedTime();
          return updateRenderTarget({ gl });
       },
       [setValues, updateRenderTarget, material]

packages/use-shader-fx/src/hooks/useNoise/index.ts

@@ -54,7 +54,9 @@ export const useNoise = ({
          const { gl, clock } = rootState;
          newValues && setValues(newValues, false);
          material.uniforms.tick.value =
-            newValues?.tick || clock.getElapsedTime();
+            typeof newValues?.tick === "function"
+               ? newValues.tick(material.uniforms.tick.value)
+               : newValues?.tick || clock.getElapsedTime();
          return updateRenderTarget({ gl });
       },
       [setValues, updateRenderTarget, material]

packages/use-shader-fx/types/hooks/index.d.ts

@@ -0,0 +1,9 @@
+import { useNoise, NoiseProps } from "./useNoise";
+export type FxTypes = typeof useNoise;
+export type FxProps<T> = T extends typeof useNoise ? NoiseProps : never;
+export * from "./useNoise";
+export * from "./useFluid";
+export * from "./useBuffer";
+export * from "./useRawBlank";
+export * from "./useBlank";
+export * from "./useGrid";

packages/use-shader-fx/types/hooks/types/index.d.ts

@@ -0,0 +1,73 @@
+import * as THREE from "three";
+import { BasicFxMaterial } from "../../materials/core/BasicFxMaterial";
+import { DoubleRenderTarget } from "../../utils";
+export type Size = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    updateStyle?: boolean;
+};
+export type Dpr = number | {
+    /** you can set whether `dpr` affects `shader`. default : `false` */
+    shader?: false | number;
+    /** you can set whether `dpr` affects `fbo`. default : `false` */
+    fbo?: false | number;
+};
+export type RootState = {
+    /** The instance of the renderer */
+    gl: THREE.WebGLRenderer;
+    /** Default clock */
+    clock: THREE.Clock;
+    /** Normalized event coordinates */
+    pointer: THREE.Vector2;
+    /** Reactive pixel-size of the canvas */
+    size: Size;
+};
+/**
+ * sceneやmaterialなどはミュータブルなオブジェクトであり、non-reactiveであるべき
+ */
+export interface HooksProps {
+    /** Width,Height in pixels, or `size` from r3f */
+    size: Size;
+    /** Pixel-ratio, use `window.devicePixelRatio` or viewport.dpr from r3f */
+    dpr: Dpr;
+    /** Whether to `setSize` the FBO when updating size or dpr. default : `false` */
+    fboAutoSetSize?: boolean;
+    /**
+     * @type `THREE.RenderTargetOptions`
+     * @param depthBuffer Unlike the default in three.js, the default is `false`.
+     */
+    renderTargetOptions?: THREE.RenderTargetOptions;
+    materialParameters?: THREE.ShaderMaterialParameters;
+}
+/**
+ * @returns {HooksReturn<T, O, C>}
+ *  render - Functions to update parameters and render.
+ *  setValues - Function to update parameters only.
+ *  texture - texture
+ *  material - material
+ *  scene - scene
+ *
+ * @template V The type for the FX parameters.
+ * @template O The type for the material.
+ */
+export type HooksReturn<V = {}, M = BasicFxMaterial, A = {}> = {
+    /**
+     * Functions to update parameters and render.
+     * @param rootState RootState
+     * @param newValues params of fxHooks. basicFxの追加/削除による再コンパイルや、fitの変更によるresolutionの変更は伴わない。再コンパイルを伴う場合はsetValuesを使う。
+     */
+    render: (rootState: RootState, newValues?: V) => THREE.Texture;
+    /**
+     * Function to update parameters only.
+     * @param newValues params of fxHooks
+     * @param needsUpdate basicFxの追加/削除による再コンパイルや、fitの変更によるresolutionの変更を伴うかどうか. default : `true`
+     */
+    setValues: (newValues: V, needsUpdate?: boolean) => void;
+    texture: THREE.Texture;
+    material?: M;
+    scene?: THREE.Scene;
+    camera?: THREE.Camera;
+    renderTarget?: THREE.WebGLRenderTarget | DoubleRenderTarget;
+} & A;

packages/use-shader-fx/types/hooks/useBlank/index.d.ts

@@ -0,0 +1,29 @@
+import { HooksProps, HooksReturn } from "../types";
+import { BlankMaterial } from "../../materials";
+import { ShaderWithUniforms } from "../../shaders/uniformsUtils";
+type BlankConfig = {
+    pointerLerp?: number;
+};
+export type BlankProps = HooksProps & ShaderWithUniforms;
+/**
+ * type DefaultUniforms = {
+   resolution: { value: THREE.Vector2 };
+   texelSize: { value: THREE.Vector2 };
+   aspectRatio: { value: number };
+   maxAspect: { value: THREE.Vector2 };
+   renderCount: { value: number };
+    はデフォルトである
+    あとvaringでvUvつかえる
+
+    加えて、
+    time
+    pointer
+    backbuffer
+    もデフォルトで使える
+
+    あと、pointerLerp使えるよ
+
+ * @link https://github.com/FunTechInc/use-shader-fx?tab=readme-ov-file#usage
+ */
+export declare const useBlank: ({ size, dpr, fboAutoSetSize, renderTargetOptions, materialParameters, pointerLerp, ...shaderWithUniforms }: BlankProps & BlankConfig) => HooksReturn<{}, BlankMaterial>;
+export {};

packages/use-shader-fx/types/hooks/useBuffer/index.d.ts

@@ -0,0 +1,7 @@
+import { HooksProps, HooksReturn } from "../types";
+import { BufferMaterial, BufferMaterialProps, BufferValues } from "../../materials";
+export type BufferProps = HooksProps & BufferValues;
+/**
+ * @link https://github.com/FunTechInc/use-shader-fx?tab=readme-ov-file#usage
+ */
+export declare const useBuffer: ({ size, dpr, fboAutoSetSize, renderTargetOptions, materialParameters, ...uniformValues }: BufferProps) => HooksReturn<BufferValues, BufferMaterial & BufferMaterialProps>;

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

@@ -0,0 +1,14 @@
+import * as THREE from "three";
+import { HooksProps, HooksReturn } from "../types";
+import { BasicFxValues, FluidMaterials } from "../../materials";
+export type FluidValues = {
+    pressureIterations?: number;
+} & BasicFxValues & FluidMaterials.AdvectionValuesClient & FluidMaterials.DivergenceValuesClient & FluidMaterials.PoissonValuesClient & FluidMaterials.PressureValuesClient & FluidMaterials.SplatValuesClient;
+export type FluidProps = HooksProps & FluidValues;
+/**
+ * @link https://github.com/FunTechInc/use-shader-fx?tab=readme-ov-file#usage
+ */
+export declare const useFluid: ({ size, dpr, fboAutoSetSize, renderTargetOptions, materialParameters, ...uniformValues }: FluidProps) => HooksReturn<FluidValues, any, {
+    /** velocity map */
+    velocity: THREE.Texture;
+}>;

packages/use-shader-fx/types/hooks/useFluid/scenes/useAdvection.d.ts

@@ -0,0 +1,10 @@
+import { RootState, Size } from "../../types";
+import { FluidMaterials } from "../../../materials";
+import { SingleFBOUpdateFunction } from "../../../utils";
+export declare const useAdvection: ({ size, dpr, ...uniformValues }: {
+    size: Size;
+    dpr: number | false;
+} & FluidMaterials.AdvectionValues, updateRenderTarget: SingleFBOUpdateFunction) => {
+    render: (rootState: RootState) => void;
+    material: FluidMaterials.AdvectionMaterial;
+};

packages/use-shader-fx/types/hooks/useFluid/scenes/useDivergence.d.ts

@@ -0,0 +1,10 @@
+import { RootState, Size } from "../../types";
+import { FluidMaterials } from "../../../materials";
+import { SingleFBOUpdateFunction } from "../../../utils";
+export declare const useDivergence: ({ size, dpr, ...uniformValues }: {
+    size: Size;
+    dpr: number | false;
+} & FluidMaterials.DivergenceValues, updateRenderTarget: SingleFBOUpdateFunction) => {
+    render: (rootState: RootState) => void;
+    material: FluidMaterials.DivergenceMaterial;
+};

packages/use-shader-fx/types/hooks/useFluid/scenes/useOutput.d.ts

@@ -0,0 +1,10 @@
+import { RootState, Size } from "../../types";
+import { SingleFBOUpdateFunction } from "../../../utils";
+import { FluidMaterials } from "../../../materials";
+export declare const useOutput: ({ size, dpr, ...values }: {
+    size: Size;
+    dpr: number | false;
+} & FluidMaterials.OutputValues, updateRenderTarget: SingleFBOUpdateFunction) => {
+    render: (rootState: RootState) => void;
+    material: FluidMaterials.OutputMaterial;
+};

packages/use-shader-fx/types/hooks/useFluid/scenes/usePoisson.d.ts

@@ -0,0 +1,11 @@
+import { RootState, Size } from "../../types";
+import { DoubleFBOUpdateFunction } from "../../../utils";
+import { FluidMaterials } from "../../../materials";
+export declare const usePoisson: ({ size, dpr, pressureIterations, ...uniformValues }: {
+    size: Size;
+    dpr: number | false;
+    pressureIterations?: number;
+} & Omit<FluidMaterials.PoissonValues, "pressure">, updateRenderTarget: DoubleFBOUpdateFunction) => {
+    render: (rootState: RootState) => void;
+    material: FluidMaterials.PoissonMaterial;
+};

packages/use-shader-fx/types/hooks/useFluid/scenes/usePressure.d.ts

@@ -0,0 +1,10 @@
+import { RootState, Size } from "../../types";
+import { SingleFBOUpdateFunction } from "../../../utils";
+import { FluidMaterials } from "../../../materials";
+export declare const usePressure: ({ size, dpr, ...uniformValues }: {
+    size: Size;
+    dpr: number | false;
+} & FluidMaterials.PressureValues, updateRenderTarget: SingleFBOUpdateFunction) => {
+    render: (rootState: RootState) => void;
+    material: FluidMaterials.PressureMaterial;
+};

packages/use-shader-fx/types/hooks/useFluid/scenes/useSplat.d.ts

@@ -0,0 +1,10 @@
+import { RootState, Size } from "../../types";
+import { SingleFBOUpdateFunction } from "../../../utils";
+import { FluidMaterials } from "../../../materials";
+export declare const useSplat: ({ size, dpr, ...uniformValues }: {
+    size: Size;
+    dpr: number | false;
+} & FluidMaterials.SplatValuesClient, updateRenderTarget: SingleFBOUpdateFunction) => {
+    render: (rootState: RootState) => void;
+    material: FluidMaterials.SplatMaterial;
+};

packages/use-shader-fx/types/hooks/useGrid/index.d.ts

@@ -0,0 +1,7 @@
+import { HooksProps, HooksReturn } from "../types";
+import { GridMaterial, GridValues, GridMaterialProps } from "../../materials";
+export type GridProps = HooksProps & GridValues;
+/**
+ * @link https://github.com/FunTechInc/use-shader-fx?tab=readme-ov-file#usage
+ */
+export declare const useGrid: ({ size, dpr, fboAutoSetSize, renderTargetOptions, materialParameters, ...uniformValues }: GridProps) => HooksReturn<GridValues, GridMaterial & GridMaterialProps>;

packages/use-shader-fx/types/hooks/useNoise/index.d.ts

@@ -0,0 +1,7 @@
+import { HooksProps, HooksReturn } from "../types";
+import { NoiseMaterial, NoiseMaterialProps, NoiseValues } from "../../materials";
+export type NoiseProps = HooksProps & NoiseValues;
+/**
+ * @link https://github.com/FunTechInc/use-shader-fx?tab=readme-ov-file#usage
+ */
+export declare const useNoise: ({ size, dpr, fboAutoSetSize, renderTargetOptions, materialParameters, ...uniformValues }: NoiseProps) => HooksReturn<NoiseValues, NoiseMaterial & NoiseMaterialProps>;

packages/use-shader-fx/types/hooks/useRawBlank/index.d.ts

@@ -0,0 +1,17 @@
+import { HooksProps, HooksReturn } from "../types";
+import { RawBlankMaterial } from "../../materials";
+import { ShaderWithUniforms } from "../../shaders/uniformsUtils";
+export type RawBlankProps = HooksProps & ShaderWithUniforms;
+/**
+ * type DefaultUniforms = {
+   resolution: { value: THREE.Vector2 };
+   texelSize: { value: THREE.Vector2 };
+   aspectRatio: { value: number };
+   maxAspect: { value: THREE.Vector2 };
+   renderCount: { value: number };
+    はデフォルトである
+    あとvaringでvUvつかえる
+
+ * @link https://github.com/FunTechInc/use-shader-fx?tab=readme-ov-file#usage
+ */
+export declare const useRawBlank: ({ size, dpr, fboAutoSetSize, renderTargetOptions, materialParameters, ...shaderWithUniforms }: RawBlankProps) => HooksReturn<{}, RawBlankMaterial>;

packages/use-shader-fx/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./hooks";
+export * from "./materials";
+export * from "./misc";
+export { useDoubleFBO, useSingleFBO } from "./utils";

packages/use-shader-fx/types/libs/Easings.d.ts

@@ -0,0 +1,9 @@
+export type EasingTypes = "easeInSine" | "easeOutSine" | "easeInOutSine" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInExpo" | "easeOutExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "easeInBack" | "easeOutBack" | "easeInOutBack" | "easeInElastic" | "easeOutElastic" | "easeInOutElastic" | "easeInBounce" | "easeOutBounce" | "easeInOutBounce";
+type EasingFunctions = {
+    [K in EasingTypes]: (x: number) => number;
+};
+/**
+ * from https://github.com/ai/easings.net
+ */
+export declare const Easing: EasingFunctions;
+export {};

packages/use-shader-fx/types/libs/constants.d.ts

@@ -0,0 +1,10 @@
+import * as THREE from "three";
+export declare const ISDEV: boolean;
+export declare const MATERIAL_BASIC_PARAMS: {
+    transparent: boolean;
+    depthTest: boolean;
+    depthWrite: boolean;
+};
+export declare const DEFAULT_TEXTURE: THREE.DataTexture;
+export declare const APP_NAME = "use-shader-fx";
+export declare const THREE_FLAG_PROPS: string[];

packages/use-shader-fx/types/libs/types.d.ts

@@ -0,0 +1,2 @@
+/** 0:r,1:g,2:b,3:a */
+export type Vec4Channel = 0 | 1 | 2 | 3;