gradation追加

Author: takuma-hmng8

app/ShaderFx.tsx

@@ -5,18 +5,27 @@ import { Canvas } from "@react-three/fiber";
 import { Perf } from "r3f-perf";
 import { PerformanceMonitor } from "@react-three/drei";
 
-export const ShaderFx = ({ children }: { children: React.ReactNode }) => {
+export const ShaderFx = ({
+   children,
+   preserveDrawingBuffer = false,
+}: {
+   children: React.ReactNode;
+   preserveDrawingBuffer?: boolean;
+}) => {
    const [dpr, setDpr] = useState(1.5);
    return (
-      <Canvas dpr={dpr}>
+      <Canvas dpr={dpr} gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}>
          <PerformanceMonitor
             factor={1}
             onChange={({ factor }) => {
+               if (preserveDrawingBuffer) {
+                  return;
+               }
                console.log(`dpr:${dpr}`);
-               // setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
+               setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
             }}>
             <Suspense fallback={null}>{children}</Suspense>
-            <Perf position={"bottom-left"} minimal={false} />
+            {/* <Perf position={"bottom-left"} minimal={false} /> */}
          </PerformanceMonitor>
       </Canvas>
    );

app/domSyncer/DomSyncer.tsx

@@ -8,7 +8,7 @@ import {
    useFxTexture,
    useCopyTexture,
 } from "@/packages/use-shader-fx/src";
-import { WaveParams } from "@/packages/use-shader-fx/src/fxs/utils/useWave";
+import { WaveParams } from "@/packages/use-shader-fx/src/fxs/effects/useWave";
 import gsap from "gsap";
 
 extend({ FxMaterial });

app/gradation/FxMaterial.tsx

@@ -0,0 +1,36 @@
+import * as THREE from "three";
+import { shaderMaterial } from "@react-three/drei";
+import fragment from "./main.frag";
+
+declare global {
+   namespace JSX {
+      interface IntrinsicElements {
+         fxMaterial: any;
+      }
+   }
+}
+
+export type FxMaterialProps = {
+   u_noise: THREE.Texture;
+   u_colorStrata: THREE.Texture;
+   u_grain: THREE.Texture;
+   u_noiseIntensity: number;
+};
+
+export const FxMaterial = shaderMaterial(
+   {
+      u_noise: new THREE.Texture(),
+      u_colorStrata: new THREE.Texture(),
+      u_grain: new THREE.Texture(),
+      u_noiseIntensity: 1,
+   },
+
+   `
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+   fragment
+);

app/gradation/Playground.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import * as THREE from "three";
+import { useEffect, useRef } from "react";
+import { useFrame, useThree, extend } from "@react-three/fiber";
+import {
+   useNoise,
+   useColorStrata,
+   useMarble,
+   useHSV,
+} from "@/packages/use-shader-fx/src";
+import { FxMaterial, FxMaterialProps } from "./FxMaterial";
+import GUI from "lil-gui";
+import { useGUI } from "@/utils/useGUI";
+
+extend({ FxMaterial });
+
+const CONFIG = {
+   marble: {
+      pattern: 10,
+      complexity: 1.5,
+      complexityAttenuation: 0.2,
+      scale: 0.002,
+   },
+   colorStrata: {
+      laminateLayer: 6,
+      scale: 0.2,
+      laminateInterval: new THREE.Vector2(0.55, 0.23),
+      laminateDetail: new THREE.Vector2(0, 3.5),
+      distortion: new THREE.Vector2(1.64, 4.22),
+      colorFactor: new THREE.Vector3(0.6, 0.1, 0),
+   },
+   hsv: {
+      brightness: 1.5,
+      saturation: 0.4,
+   },
+   noiseIntensity: 2,
+   random: () => {
+      CONFIG.marble.pattern = Math.random() * 1000;
+      CONFIG.marble.complexity = Math.random() * 10;
+      CONFIG.marble.complexityAttenuation = Math.random();
+      CONFIG.marble.scale = Math.random() * 0.001;
+      CONFIG.colorStrata.laminateLayer = Math.random() * 100;
+      CONFIG.colorStrata.scale = Math.max(Math.random(), 0.1);
+      CONFIG.colorStrata.laminateInterval = new THREE.Vector2(
+         Math.random(),
+         Math.random()
+      );
+      CONFIG.colorStrata.laminateDetail = new THREE.Vector2(
+         Math.random(),
+         Math.random()
+      );
+      CONFIG.colorStrata.distortion = new THREE.Vector2(
+         Math.random() * 10,
+         Math.random() * 10
+      );
+      CONFIG.colorStrata.colorFactor = new THREE.Vector3(
+         Math.random(),
+         Math.random(),
+         Math.random()
+      );
+      CONFIG.hsv.brightness = Math.max(Math.random() * 3, 0.1);
+      CONFIG.hsv.saturation = Math.random() * 3;
+      CONFIG.noiseIntensity = Math.random() * 10;
+   },
+   save: () => {},
+};
+const setGUI = (gui: GUI) => {
+   gui.add(CONFIG, "random").name("Randomize");
+   gui.add(CONFIG, "save").name("Save");
+};
+
+const setConfig = (key: "marble" | "colorStrata" | "hsv") => {
+   return {
+      ...CONFIG[key],
+   };
+};
+
+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();
+   };
+   return downloadImage;
+}
+
+export const Playground = () => {
+   const ref = useRef<FxMaterialProps>();
+
+   const saveImage = useDownloadCanvas();
+   useEffect(() => {
+      CONFIG.save = saveImage;
+      CONFIG.random();
+   }, [saveImage]);
+   useGUI(setGUI);
+
+   const { size, viewport } = useThree();
+   const [updateNoise, setNoise, { output: noise }] = useNoise({
+      size,
+      dpr: viewport.dpr,
+   });
+   const [updateColorStrata, setColorStrata, { output: colorStrata }] =
+      useColorStrata({ size, dpr: viewport.dpr });
+   const [updateMarble, setMarble, { output: marble }] = useMarble({
+      size,
+      dpr: viewport.dpr,
+   });
+   const [updateHSV, setHSV, { output: hsv }] = useHSV({
+      size,
+      dpr: viewport.dpr,
+   });
+
+   setNoise({
+      scale: 1000,
+      warpOctaves: 1,
+      noiseOctaves: 1,
+      fbmOctaves: 1,
+      timeStrength: 0,
+   });
+
+   setMarble({
+      ...setConfig("marble"),
+      timeStrength: 0,
+   });
+
+   setColorStrata({
+      ...setConfig("colorStrata"),
+      timeStrength: new THREE.Vector2(0, 0),
+   });
+
+   setHSV({
+      ...setConfig("hsv"),
+      texture: colorStrata,
+   });
+
+   useFrame((props) => {
+      updateNoise(props);
+      updateColorStrata(props, {
+         ...(setConfig("colorStrata") as any),
+      });
+      updateHSV(props, {
+         ...(setConfig("hsv") as any),
+      });
+      updateMarble(props, {
+         ...(setConfig("marble") as any),
+      });
+      ref.current!.u_noiseIntensity = CONFIG.noiseIntensity;
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial
+            key={FxMaterial.key}
+            u_noise={marble}
+            u_grain={noise}
+            u_colorStrata={hsv}
+            ref={ref}
+         />
+      </mesh>
+   );
+};

app/gradation/main.frag

@@ -0,0 +1,20 @@
+precision highp float;
+varying vec2 vUv;
+uniform sampler2D u_noise;
+uniform float u_noiseIntensity;
+uniform sampler2D u_colorStrata;
+uniform sampler2D u_grain;
+
+void main() {
+
+	vec2 uv = vUv;
+	vec4 grain = texture2D(u_grain, uv);
+	vec4 noise = texture2D(u_noise, uv);
+	
+	uv += grain.rg;
+	uv += noise.rg * u_noiseIntensity;
+	vec4 colorStrata = texture2D(u_colorStrata,uv);
+
+	gl_FragColor = colorStrata;
+	gl_FragColor.a = 1.0;
+}

app/gradation/page.tsx

@@ -0,0 +1,20 @@
+import { ShaderFx } from "../ShaderFx";
+import { Playground } from "./Playground";
+
+export default function Page() {
+   return (
+      <div style={{ width: "100%" }}>
+         <div
+            style={{
+               position: "fixed",
+               width: "100%",
+               height: "100svh",
+               pointerEvents: "none",
+            }}>
+            <ShaderFx preserveDrawingBuffer>
+               <Playground />
+            </ShaderFx>
+         </div>
+      </div>
+   );
+}

app/useBrush/Playground.tsx

@@ -81,7 +81,7 @@ export const Playground = () => {
       map: brush,
    });
 
-   const updatePointer = usePointer();
+   const updatePointer = usePointer(0);
    const updateBeat = useBeat(157);
 
    useFrame((props) => {