update Noise

Author: takuma-hmng8

Diff for: .storybook/stories/UseFogProjection.tsx renamed to .storybook/stories/UseBlending.tsx

@@ -6,37 +6,37 @@ import { CONSTANT } from "../constant";
 import GUI from "lil-gui";
 import { useGUI } from "../../utils/useGUI";
 import {
-   useFogProjection,
+   useBlending,
    useFxTexture,
    useNoise,
 } from "../../packages/use-shader-fx/src";
 import {
-   FogProjectionParams,
-   FOGPROJECTION_PARAMS,
-} from "../../packages/use-shader-fx/src/hooks/useFogProjection";
+   BlendingParams,
+   BLENDING_PARAMS,
+} from "../../packages/use-shader-fx/src/hooks/useBlending";
 
 extend({ FxMaterial });
 
-const CONFIG: FogProjectionParams = structuredClone(FOGPROJECTION_PARAMS);
+const CONFIG: BlendingParams = structuredClone(BLENDING_PARAMS);
 const setGUI = (gui: GUI) => {
    gui.add(CONFIG, "distortionStrength", 0, 1, 0.01);
-   gui.add(CONFIG, "fogEdge0", 0, 1, 0.01);
-   gui.add(CONFIG, "fogEdge1", 0, 1, 0.01);
-   gui.addColor(CONFIG, "fogColor");
+   gui.add(CONFIG, "edge0", 0, 1, 0.01);
+   gui.add(CONFIG, "edge1", 0, 1, 0.01);
+   gui.addColor(CONFIG, "color");
 };
 const setConfig = () => {
    return {
       distortionStrength: CONFIG.distortionStrength,
-      fogEdge0: CONFIG.fogEdge0,
-      fogEdge1: CONFIG.fogEdge1,
-      fogColor: CONFIG.fogColor,
-   } as FogProjectionParams;
+      edge0: CONFIG.edge0,
+      edge1: CONFIG.edge1,
+      color: CONFIG.color,
+   } as BlendingParams;
 };
 
 /**
- * Adds noise to the received texture and returns the texture. It's like projecting an image onto fog!
+ * Blending the texture passed as map
  */
-export const UseFogProjection = (args: FogProjectionParams) => {
+export const UseBlending = (args: BlendingParams) => {
    const updateGUI = useGUI(setGUI);
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
@@ -45,17 +45,17 @@ export const UseFogProjection = (args: FogProjectionParams) => {
    });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateNoise] = useNoise({ size, dpr });
-   const [updateFogProjection] = useFogProjection({ size, dpr });
+   const [updateBlending] = useBlending({ size, dpr });
 
    useFrame((props) => {
       const bgTexture = updateFxTexture(props, {
          textureResolution: CONSTANT.textureResolution,
          texture0: bg,
       });
       const noise = updateNoise(props);
-      const fx = updateFogProjection(props, {
+      const fx = updateBlending(props, {
          texture: bgTexture,
-         noiseMap: noise,
+         map: noise,
          ...setConfig(),
       });
       fxRef.current!.u_fx = fx;

Diff for: .storybook/stories/UseBrightnessPicker.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import * as THREE from "three";
+import { useFrame, extend, useThree } from "@react-three/fiber";
+import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
+import GUI from "lil-gui";
+import { useGUI } from "../../utils/useGUI";
+import {
+   useNoise,
+   useBrightnessPicker,
+} from "../../packages/use-shader-fx/src";
+import {
+   BrightnessPickerParams,
+   BRIGHTNESSPICKER_PARAMS,
+} from "../../packages/use-shader-fx/src/hooks/useBrightnessPicker";
+
+extend({ FxMaterial });
+
+const CONFIG = {
+   ...structuredClone(BRIGHTNESSPICKER_PARAMS),
+   r: 0.5,
+   g: 0.5,
+   b: 0.5,
+};
+const brightness = new THREE.Vector3(CONFIG.r, CONFIG.g, CONFIG.b);
+const setGUI = (gui: GUI) => {
+   gui.add(CONFIG, "r", 0, 1, 0.01);
+   gui.add(CONFIG, "g", 0, 1, 0.01);
+   gui.add(CONFIG, "b", 0, 1, 0.01);
+   gui.add(CONFIG, "min", 0, 1, 0.01);
+   gui.add(CONFIG, "max", 0, 1, 0.01);
+};
+const setConfig = () => {
+   return {
+      brightness: brightness.set(CONFIG.r, CONFIG.g, CONFIG.b),
+      min: CONFIG.min,
+      max: CONFIG.max,
+   } as BrightnessPickerParams;
+};
+
+/**
+ * Blending the texture passed as map
+ */
+export const UseBrightnessPicker = (args: BrightnessPickerParams) => {
+   const updateGUI = useGUI(setGUI);
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+
+   const [updateNoise] = useNoise({ size, dpr });
+   const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
+
+   useFrame((props) => {
+      const noise = updateNoise(props);
+      const fx = updateBrightnessPicker(props, {
+         texture: noise,
+         ...setConfig(),
+      });
+      fxRef.current!.u_fx = fx;
+      fxRef.current!.u_alpha = 0.0;
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={fxRef} />
+      </mesh>
+   );
+};

Diff for: .storybook/stories/UseFxTexture.tsx

@@ -16,7 +16,7 @@ extend({ FxMaterial });
 const CONFIG: FxTextureParams = structuredClone(FXTEXTURE_PARAMS);
 const DIR = new THREE.Vector2(0, 0);
 const setGUI = (gui: GUI) => {
-   gui.add(CONFIG, "mapIntensity", 0, 1, 0.01);
+   gui.add(CONFIG, "mapIntensity", 0, 10, 0.1);
    gui.add(CONFIG, "progress", 0, 1, 0.01);
    gui.add(DIR, "x", -1, 1, 0.01);
    gui.add(DIR, "y", -1, 1, 0.01);

Diff for: .storybook/stories/useFogProjection.stories.tsx renamed to .storybook/stories/useBlending.stories.tsx

@@ -3,22 +3,22 @@ import type { StoryObj } from "@storybook/react";
 import { setArgTypes } from "../utils/setArgTypes";
 import { Setup } from "../utils/Setup";
 import type { Meta } from "@storybook/react";
-import { UseFogProjection } from "./UseFogProjection";
+import { UseBlending } from "./UseBlending";
 import {
-   FogProjectionParams,
-   FOGPROJECTION_PARAMS,
-} from "../../packages/use-shader-fx/src/hooks/useFogProjection";
+   BlendingParams,
+   BLENDING_PARAMS,
+} from "../../packages/use-shader-fx/src/hooks/useBlending";
 
 const meta = {
-   title: "useFogProjection",
-   component: UseFogProjection,
+   title: "useBlending",
+   component: UseBlending,
    tags: ["autodocs"],
    decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
-} satisfies Meta<typeof UseFogProjection>;
+} satisfies Meta<typeof UseBlending>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-   args: FOGPROJECTION_PARAMS,
-   argTypes: setArgTypes<FogProjectionParams>(FOGPROJECTION_PARAMS),
+   args: BLENDING_PARAMS,
+   argTypes: setArgTypes<BlendingParams>(BLENDING_PARAMS),
 };

Diff for: .storybook/stories/useBrightnessPicker.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { StoryObj } from "@storybook/react";
+import { setArgTypes } from "../utils/setArgTypes";
+import { Setup } from "../utils/Setup";
+import type { Meta } from "@storybook/react";
+import { UseBrightnessPicker } from "./UseBrightnessPicker";
+import {
+   BrightnessPickerParams,
+   BRIGHTNESSPICKER_PARAMS,
+} from "../../packages/use-shader-fx/src/hooks/useBrightnessPicker";
+
+const meta = {
+   title: "useBrightnessPicker",
+   component: UseBrightnessPicker,
+   tags: ["autodocs"],
+   decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
+} satisfies Meta<typeof UseBrightnessPicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+   args: BRIGHTNESSPICKER_PARAMS,
+   argTypes: setArgTypes<BrightnessPickerParams>(BRIGHTNESSPICKER_PARAMS),
+};

Diff for: app/_home/config.ts

@@ -2,15 +2,15 @@ import * as THREE from "three";
 import GUI from "lil-gui";
 
 import { FLUID_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFluid";
-import { FOGPROJECTION_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFogProjection";
+import { BLENDING_PARAMS } from "@/packages/use-shader-fx/src/hooks/useBlending";
 
 export const CONFIG = {
    fogProjection: {
-      ...structuredClone(FOGPROJECTION_PARAMS),
-      fogColor: new THREE.Color(0xffffff),
-      fogEdge0: 0.5,
-      fogEdge1: 1.0,
-      distortionStrength: 0.2,
+      ...structuredClone(BLENDING_PARAMS),
+      fogColor: new THREE.Color(0x000000),
+      fogEdge0: 0.0,
+      fogEdge1: 0.9,
+      distortionStrength: 3.0,
    },
    fluid: {
       ...structuredClone(FLUID_PARAMS),

Diff for: app/_home/index.tsx

@@ -3,21 +3,19 @@ import { useFrame, extend, useThree } from "@react-three/fiber";
 import { usePerformanceMonitor } from "@react-three/drei";
 import { CONFIG, setGUI } from "./config";
 import { useGUI } from "@/utils/useGUI";
-import {
-   FxTransparentMaterial,
-   FxTransparentMaterialProps,
-} from "@/utils/fxTransparentMaterial";
+import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
 import {
    useFluid,
-   useFogProjection,
+   useBlending,
    useNoise,
+   useBrightnessPicker,
 } from "@/packages/use-shader-fx/src";
 
-extend({ FxTransparentMaterial });
+extend({ FxMaterial });
 
 export const Home = () => {
    const updateGUI = useGUI(setGUI);
-   const mainShaderRef = useRef<FxTransparentMaterialProps>();
+   const mainShaderRef = useRef<FxMaterialProps>();
 
    const { size, dpr } = useThree((state) => {
       return { size: state.size, dpr: state.viewport.dpr };
@@ -30,7 +28,9 @@ export const Home = () => {
       dpr,
    });
 
-   const [updateFogProjection] = useFogProjection({ size, dpr });
+   const [updateBlending] = useBlending({ size, dpr });
+
+   const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
 
    usePerformanceMonitor({
       onChange({ factor }) {
@@ -42,7 +42,9 @@ export const Home = () => {
 
    useFrame((props) => {
       const noise = updateNoise(props, {
-         timeStrength: 0.4,
+         scale: 0.002,
+         timeStrength: 0.2,
+         warpStrength: 2.0,
       });
 
       const fx = updateFluid(props, {
@@ -55,49 +57,57 @@ export const Home = () => {
          fluid_color: CONFIG.fluid.fluid_color,
       });
 
-      const postFx = updateFogProjection(props, {
+      const postFx = updateBlending(props, {
          distortionStrength: CONFIG.fogProjection.distortionStrength,
-         fogEdge0: CONFIG.fogProjection.fogEdge0,
-         fogEdge1: CONFIG.fogProjection.fogEdge1,
-         fogColor: CONFIG.fogProjection.fogColor,
+         edge0: CONFIG.fogProjection.fogEdge0,
+         edge1: CONFIG.fogProjection.fogEdge1,
+         color: CONFIG.fogProjection.fogColor,
          texture: fx,
-         noiseMap: noise,
+         map: noise,
+      });
+
+      const final = updateBrightnessPicker(props, {
+         texture: postFx,
       });
 
       const main = mainShaderRef.current;
       if (main) {
-         main.u_fx = postFx;
+         main.u_fx = final;
+         main.u_alpha = 0.0;
       }
       updateGUI();
    });
 
    return (
       <mesh>
          <planeGeometry args={[2, 2]} />
-         <fxTransparentMaterial
-            key={FxTransparentMaterial.key}
-            ref={mainShaderRef}
-         />
+         <fxMaterial ref={mainShaderRef} />
       </mesh>
    );
 };
 
 /*===============================================
-the simplest demo
+playground
 ===============================================*/
 
 // import * as THREE from "three";
 // import { useRef } from "react";
 // import { useFrame, useThree } from "@react-three/fiber";
-// import { useFluid } from "@hmng8/use-shader-fx";
+// import { useNoise } from "@/packages/use-shader-fx/src";
 
 // export const Home = () => {
 //    const ref = useRef<THREE.ShaderMaterial>(null);
 //    const size = useThree((state) => state.size);
 //    const dpr = useThree((state) => state.viewport.dpr);
-//    const [updateFluid] = useFluid({ size, dpr });
+//    const [updateNoise] = useNoise({ size, dpr });
+
 //    useFrame((props) => {
-//       ref.current!.uniforms.u_fx.value = updateFluid(props);
+//       ref.current!.uniforms.u_fx.value = updateNoise(props, {
+//          scale: 0.002,
+//          warpOctaves: 2,
+//          timeStrength: 0.2,
+//          warpStrength: 20.0,
+//       });
 //    });
 
 //    return (
@@ -116,10 +126,22 @@ the simplest demo
 // 						precision highp float;
 // 						varying vec2 vUv;
 // 						uniform sampler2D u_fx;
-
+// 						float sq(float x) {
+// 							return x*x*7.0;
+// 						}
 // 						void main() {
 // 							vec2 uv = vUv;
-// 							gl_FragColor = texture2D(u_fx, uv);
+// 							vec3 noise = texture2D(u_fx, uv).rgb;
+// 							vec3 col;
+// 							vec2 p = noise.rg * .4;
+// 							for(float j = 0.0; j < 3.0; j++){
+// 								for(float i = 1.0; i < 8.0; i++){
+// 										p.x += 0.01 / (i + j) * cos(i * 10.0 * p.y + sin(i + j));
+// 										p.y += 0.01 / (i + j)* cos(i * 10.0 * p.x + sin(i + j));
+// 								}
+// 								col[int(j)] = sin(.5 * 7.0*sq(p.x)) + sin(7.0*sq(p.y));
+// 							}
+// 							gl_FragColor = vec4(col, 1.0);
 // 						}
 // 					`}
 //             uniforms={{

Diff for: app/domSyncer/DomSyncer.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
 import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
 import {