add useCosPalette

.storybook/stories/UseCosPalette.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as THREE from "three";
+import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
+import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
+import { CONSTANT } from "../constant";
+import GUI from "lil-gui";
+import { useGUI } from "../../utils/useGUI";
+import { useCosPalette, useFxTexture } from "../../packages/use-shader-fx/src";
+import {
+   CosPaletteParams,
+   COSPALETTE_PARAMS,
+} from "../../packages/use-shader-fx/src/hooks/useCosPalette";
+
+extend({ FxMaterial });
+
+const CONFIG: CosPaletteParams = structuredClone(COSPALETTE_PARAMS);
+const setGUI = (gui: GUI) => {
+   gui.addColor(CONFIG, "color1");
+   gui.addColor(CONFIG, "color2");
+   gui.addColor(CONFIG, "color3");
+   gui.addColor(CONFIG, "color4");
+   gui.add(CONFIG.rgbWeight!, "x", 0, 1, 0.299);
+   gui.add(CONFIG.rgbWeight!, "y", 0, 1, 0.587);
+   gui.add(CONFIG.rgbWeight!, "z", 0, 1, 0.114);
+};
+const setConfig = () => {
+   return {
+      ...CONFIG,
+   } as CosPaletteParams;
+};
+
+
+export const UseCosPalette = (args: CosPaletteParams) => {
+   const updateGUI = useGUI(setGUI);
+   const [bg] = useLoader(THREE.TextureLoader, ["momo.jpg"]);
+
+   const fxRef = React.useRef<FxMaterialProps>();
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+   const [updateCosPalette] = useCosPalette({ size, dpr });
+   const [updateFxTexture, setFxTexture] = useFxTexture({ size, dpr });
+
+   setFxTexture({ 
+      textureResolution: CONSTANT.textureResolution,
+      texture0: bg,
+   });
+
+   useFrame((props) => {
+      const tex = updateFxTexture(props);
+      const fx = updateCosPalette(props, {
+         ...setConfig(),
+         texture: tex,
+      });
+      fxRef.current!.u_fx = fx;
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={fxRef} />
+      </mesh>
+   );
+};

.storybook/stories/useCosPalette.stories.tsx

@@ -0,0 +1,30 @@
+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 { UseCosPalette } from "./UseCosPalette";
+import {
+   COSPALETTE_PARAMS,
+   CosPaletteParams,
+} from "../../packages/use-shader-fx/src/hooks/useCosPalette";
+
+const meta = {
+   title: "useCosPalette",
+   component: UseCosPalette,
+   tags: ["autodocs"],
+   decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
+} satisfies Meta<typeof UseCosPalette>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const storySetting = {
+   args: COSPALETTE_PARAMS,
+   argTypes: setArgTypes<CosPaletteParams>(COSPALETTE_PARAMS),
+};
+
+export const Default: Story = {
+   render: (args) => <UseCosPalette {...args} />,
+   ...storySetting,
+};

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

@@ -0,0 +1,93 @@
+import { useCallback, useMemo } from "react";
+import * as THREE from "three";
+import { useMesh } from "./useMesh";
+import { RootState } from "@react-three/fiber";
+import { useCamera } from "../../utils/useCamera";
+import { useSingleFBO } from "../../utils/useSingleFBO";
+import { setUniform } from "../../utils/setUniforms";
+import { useParams } from "../../utils/useParams";
+import { HooksProps, HooksReturn } from "../types";
+
+export type CosPaletteParams = {
+   /** color1, default:rgb(50%, 50%, 50%) */
+   color1?: THREE.Color;
+   /** color2, default:rgb(50%, 50%, 50%) */
+   color2?: THREE.Color;
+   /** color3, default:rgb(100%, 100%, 100%) */
+   color3?: THREE.Color;
+   /** color4, default:rgb(0%, 10%, 20%) */
+   color4?: THREE.Color;
+   /** texture to be used as a palette */
+   texture?: THREE.Texture;
+   /** weight of the rgb, default:THREE.Vector3(1.0,0.0,0.0) */
+   rgbWeight?: THREE.Vector3;
+};
+
+export type ColorPaletteObject = {
+   scene: THREE.Scene;
+   material: THREE.Material;
+   camera: THREE.Camera;
+   renderTarget: THREE.WebGLRenderTarget;
+   output: THREE.Texture;
+};
+
+export const COSPALETTE_PARAMS: CosPaletteParams = {
+   texture: new THREE.Texture(),   
+   color1: new THREE.Color().set(0.5,0.5,0.5),
+   color2: new THREE.Color().set(0.5,0.5,0.5),
+   color3: new THREE.Color().set(1,1,1),
+   color4: new THREE.Color().set(0,0.1,0.2),
+   rgbWeight: new THREE.Vector3(0.299,0.587,0.114),
+};
+
+/**
+ * @link https://github.com/takuma-hmng8/use-shader-fx#usage  
+ */
+export const useCosPalette = ({
+   size,
+   dpr,
+   samples = 0,
+}: HooksProps): HooksReturn<CosPaletteParams, ColorPaletteObject> => {
+   const scene = useMemo(() => new THREE.Scene(), []);
+   const material = useMesh(scene);
+   const camera = useCamera(size);
+   const [renderTarget, updateRenderTarget] = useSingleFBO({
+      scene,
+      camera,
+      size,
+      dpr,
+      samples,
+   });
+
+   const [params, setParams] = useParams<CosPaletteParams>(COSPALETTE_PARAMS);
+
+   const updateFx = useCallback(
+      (props: RootState, updateParams?: CosPaletteParams) => {
+         const { gl } = props;
+
+         updateParams && setParams(updateParams);
+
+         setUniform(material, "uTexture", params.texture!);
+         setUniform(material, "uColor1", params.color1!);
+         setUniform(material, "uColor2", params.color2!);
+         setUniform(material, "uColor3", params.color3!);
+         setUniform(material, "uColor4", params.color4!);
+         setUniform(material, "uRgbWeight", params.rgbWeight!);
+
+         return updateRenderTarget(gl);
+      },
+      [updateRenderTarget, material, setParams, params]
+   );
+
+   return [
+      updateFx,
+      setParams,
+      {
+         scene: scene,
+         material: material,
+         camera: camera,
+         renderTarget: renderTarget,
+         output: renderTarget.texture,
+      },
+   ];
+};

packages/use-shader-fx/src/hooks/useCosPalette/shader/main.frag

@@ -0,0 +1,33 @@
+precision highp float;
+precision highp int;
+
+varying vec2 vUv;
+uniform sampler2D uTexture;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform vec3 uColor4;
+uniform vec3 uRgbWeight;
+
+
+// Based on glsl-cos-palette by Erkaman
+// https://github.com/Erkaman/glsl-cos-palette
+vec3 cosPalette(  float t,  vec3 color1,  vec3 color2,  vec3 color3, vec3 color4 ){
+    return color1 + color2 * cos( 6.28318 * ( color3 * t + color4) );
+}
+
+void main() {
+
+	vec4 tex = texture2D(uTexture, vUv);
+	float gray = dot(tex.rgb, uRgbWeight);		
+
+	vec3 outColor = cosPalette(
+		gray,
+		uColor1,
+		uColor2,
+		uColor3,
+		uColor4
+	);
+
+	gl_FragColor = vec4(outColor, tex.a);
+}

packages/use-shader-fx/src/hooks/useCosPalette/shader/main.vert

@@ -0,0 +1,6 @@
+varying vec2 vUv;
+
+void main() {
+	vUv = uv;
+	gl_Position = vec4(position, 1.0);
+}

packages/use-shader-fx/src/hooks/useCosPalette/useMesh.ts

@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import vertexShader from "./shader/main.vert";
+import fragmentShader from "./shader/main.frag";
+import { useAddMesh } from "../../utils/useAddMesh";
+
+export class CosPaletteMaterial extends THREE.ShaderMaterial {
+   uniforms!: {
+      uTexture: { value: THREE.Texture };
+      uRgbWeight: { value: THREE.Vector3 };
+      uColor1: { value: THREE.Color };
+      uColor2: { value: THREE.Color };
+      uColor3: { value: THREE.Color };
+      uColor4: { value: THREE.Color };
+   };
+}
+
+export const useMesh = (scene: THREE.Scene) => {   
+   const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);
+   const material = useMemo(
+      () =>
+         new THREE.ShaderMaterial({
+            uniforms: {
+               uTexture: { value: new THREE.Texture() },
+               uRgbWeight: { value: new THREE.Vector3(0.299,0.587,0.114)},
+               uColor1: { value: new THREE.Color().set(0.5,0.5,0.5) },
+               uColor2: { value: new THREE.Color().set(0.5,0.5,0.5) },
+               uColor3: { value: new THREE.Color().set(1,1,1) },
+               uColor4: { value: new THREE.Color().set(0,0.1,0.2) },
+            },
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader,
+         }),
+      []
+   );
+   useAddMesh(scene, geometry, material);
+   return material as CosPaletteMaterial;
+};

packages/use-shader-fx/src/index.js

@@ -15,6 +15,7 @@ export {
 } from "./hooks/useBrightnessPicker";
 export { useColorStrata, COLORSTRATA_PARAMS } from "./hooks/useColorStrata";
 export { useFxBlending, FXBLENDING_PARAMS } from "./hooks/useFxBlending";
+export { useCosPalette, COSPALETTE_PARAMS } from "./hooks/useCosPalette";
 
 // utils
 export { setUniform } from "./utils/setUniforms";