フォルダ整理

Author: takuma-hmng8

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/hooks/useWave";
+import { WaveParams } from "@/packages/use-shader-fx/src/fxs/utils/useWave";
 import gsap from "gsap";
 
 extend({ FxMaterial });

app/playground/Playground.tsx

@@ -11,14 +11,6 @@ import {
    useBrightnessPicker,
    useChromaKey,
 } from "@/packages/use-shader-fx/src";
-import {
-   NoiseParams,
-   NOISE_PARAMS,
-} from "@/packages/use-shader-fx/src/hooks/useNoise";
-import {
-   ColorStrataParams,
-   COLORSTRATA_PARAMS,
-} from "@/packages/use-shader-fx/src/hooks/useColorStrata";
 import GUI from "lil-gui";
 import { useGUI } from "@/utils/useGUI";
 import { FxMaterial, FxMaterialProps } from "./FxMaterial";

app/useBeat/Playground.tsx

@@ -15,14 +15,7 @@ import {
    useMarble,
    useFxTexture,
 } from "@/packages/use-shader-fx/src";
-import {
-   NoiseParams,
-   NOISE_PARAMS,
-} from "@/packages/use-shader-fx/src/hooks/useNoise";
-import {
-   ColorStrataParams,
-   COLORSTRATA_PARAMS,
-} from "@/packages/use-shader-fx/src/hooks/useColorStrata";
+
 import GUI from "lil-gui";
 import { useGUI } from "@/utils/useGUI";
 import { FxMaterial, FxMaterialProps } from "./FxMaterial";

app/useBrush/FxMaterial.tsx

@@ -11,12 +11,12 @@ declare global {
 }
 
 export type FxMaterialProps = {
-   u_fx: THREE.Texture;
+   u_tex: THREE.Texture;
 };
 
 export const FxMaterial = shaderMaterial(
    {
-      u_fx: new THREE.Texture(),
+      u_tex: new THREE.Texture(),
    },
 
    `

app/useBrush/Playground.tsx

@@ -16,7 +16,7 @@ import {
    useFxTexture,
    useBrush,
    useFPSLimiter,
-   EASING,
+   Easing,
    usePointer,
    useAlphaBlending,
 } from "@/packages/use-shader-fx/src";
@@ -28,10 +28,8 @@ extend({ FxMaterial });
 
 export const Playground = () => {
    const ref = useRef<FxMaterialProps>();
-
    const { size, viewport } = useThree();
    const bbbb = useVideoTexture("/bbbb.mov");
-   const glitch = useVideoTexture("/glitch.mov");
    const [updateBrush, setBrush, { output: brush }] = useBrush({
       size,
       dpr: viewport.dpr,
@@ -41,62 +39,70 @@ export const Playground = () => {
       dpr: viewport.dpr,
    });
 
-   const [updateFluid, setFluid, { output: fluid }] = useFluid({
+   const [updateAlphaBlending, setAlphaBlending, { output: alphaBlending }] =
+      useAlphaBlending({ size, dpr: viewport.dpr });
+
+   const [updateCS, setCS, { output: cs }] = useColorStrata({
       size,
       dpr: viewport.dpr,
    });
 
-   const [updateAlphaBlending, setAlphaBlending, { output: alphaBlending }] =
-      useAlphaBlending({ size, dpr: viewport.dpr });
-
-   setMarble({
-      scale: 0.01,
+   setCS({
+      laminateLayer: 20,
+      scale: 0.48,
+      laminateDetail: new THREE.Vector2(5.1, 5),
+      distortion: new THREE.Vector2(2.87, 2.75),
+      timeStrength: new THREE.Vector2(5.1, 2.1),
    });
 
-   setAlphaBlending({
-      texture: bbbb,
-      map: brush,
+   setMarble({
+      scale: 0.002,
+      timeStrength: 0.1,
    });
 
-   const colorVec = useRef(new THREE.Vector3());
    setBrush({
-      texture: marble,
-      // map: marble,
-      // mapIntensity: 0.15,
-      radius: 0.1,
-      // smudge: 4,
-      motionBlur: 0,
-      dissipation: 0.9,
+      map: cs,
+      texture: cs,
+      mapIntensity: 0.2,
+      radius: 0.05,
+      smudge: 4,
+      // motionBlur: 5,
+      dissipation: 0.8,
+      isCursor: false,
    });
 
-   setFluid({
-      fluid_color: (velocity: THREE.Vector2) => {
-         const rCol = Math.max(0.0, Math.abs(velocity.x) * 200);
-         const gCol = Math.max(0.0, Math.abs(velocity.y) * 200);
-         const bCol = Math.max(0.0, (rCol + gCol) / 2);
-         return colorVec.current.set(rCol, gCol, bCol);
-      },
+   setAlphaBlending({
+      texture: marble,
+      map: brush,
    });
 
-   // const updateBeat = useBeat(157);
-
-   const limiter = useFPSLimiter();
    const updatePointer = usePointer();
+   const updateBeat = useBeat(157);
 
    useFrame((props) => {
-      // const pointerValues = updatePointer(props.pointer);
+      // ref.current!.u_tex = updateAlphaBlending(props, {
+      //    texture: marble,
+      //    map: updateBrush(props, {
+      //       texture: updateMarble(props),
+      //    }),
+      // });
+      const pointerValues = updatePointer(props.pointer);
       updateBrush(props, {
-         // pointerValues,
-         // pressure: EASING.easeOutCirc(pointerValues.velocity.length()) * 10,
+         // pressure: Easing.easeOutCirc(pointerValues.velocity.length() * 10) * 2,
+         pointerValues: pointerValues,
+      });
+      // updateMarble(props);
+      // updateAlphaBlending(props);
+      const { beat, fract, floor, hash } = updateBeat(props.clock);
+      updateCS(props, {
+         beat: beat,
       });
-      updateMarble(props);
-      updateAlphaBlending(props);
    });
 
    return (
       <mesh>
          <planeGeometry args={[2, 2]} />
-         <fxMaterial key={FxMaterial.key} u_fx={alphaBlending} ref={ref} />
+         <fxMaterial key={FxMaterial.key} u_tex={cs} ref={ref} />
       </mesh>
    );
 };

app/useBrush/main.frag

@@ -1,11 +1,7 @@
 precision highp float;
 varying vec2 vUv;
-uniform sampler2D u_fx;
+uniform sampler2D u_tex;
 
 void main() {
-	vec2 uv = vUv;
-	
-	vec4 fx = texture2D(u_fx, uv);
-
-	gl_FragColor = fx;
+	gl_FragColor = texture2D(u_tex, vUv);
 }

packages/use-shader-fx/src/hooks/useBrush/index.ts renamed to packages/use-shader-fx/src/fxs/interactions/useBrush/index.ts

@@ -1,13 +1,13 @@
 import * as THREE from "three";
 import { useMesh } from "./useMesh";
-import { useCamera } from "../../utils/useCamera";
-import { useCallback, useMemo } from "react";
+import { useCamera } from "../../../utils/useCamera";
+import { useCallback, useMemo, useRef } from "react";
 import { RootState } from "@react-three/fiber";
-import { PointerValues, usePointer } from "../../utils/usePointer";
-import { setUniform } from "../../utils/setUniforms";
-import { HooksProps, HooksReturn } from "../types";
-import { useParams } from "../../utils/useParams";
-import { DoubleRenderTarget, useDoubleFBO } from "../../utils/useDoubleFBO";
+import { PointerValues, usePointer } from "../../../utils/usePointer";
+import { setUniform } from "../../../utils/setUniforms";
+import { HooksProps, HooksReturn } from "../../types";
+import { useParams } from "../../../utils/useParams";
+import { DoubleRenderTarget, useDoubleFBO } from "../../../utils/useDoubleFBO";
 
 export type BrushParams = {
    /** Texture applied to the brush, textureがtrueの場合はcolorよりも優先するよ , default:false */
@@ -32,8 +32,8 @@ export type BrushParams = {
    isCursor?: boolean;
    /** 筆圧 , default : 1.0 */
    pressure?: number;
-   /** usePointerをframeで呼び出す場合、この値にPointerValuesをセットすることで、2重の呼び出しを防ぎます , default:false */
-   pointerValues?: PointerValues | false;
+   /** When calling usePointer in a frame loop, setting PointerValues ​​to this value prevents double calls , default:null */
+   pointerValues?: PointerValues | null;
 };
 
 export type BrushObject = {
@@ -56,7 +56,7 @@ export const BRUSH_PARAMS: BrushParams = {
    color: new THREE.Vector3(1.0, 0.0, 0.0),
    isCursor: false,
    pressure: 1.0,
-   pointerValues: false,
+   pointerValues: null,
 };
 
 /**
@@ -81,6 +81,8 @@ export const useBrush = ({
 
    const [params, setParams] = useParams<BrushParams>(BRUSH_PARAMS);
 
+   const pressureEnd = useRef<number | null>(null);
+
    const updateFx = useCallback(
       (props: RootState, updateParams?: BrushParams) => {
          const { gl, pointer } = props;
@@ -108,12 +110,7 @@ export const useBrush = ({
          setUniform(material, "uMotionBlur", params.motionBlur!);
          setUniform(material, "uMotionSample", params.motionSample!);
 
-         let pointerValues: PointerValues;
-         if (params.pointerValues!) {
-            pointerValues = params.pointerValues;
-         } else {
-            pointerValues = updatePointer(pointer);
-         }
+         const pointerValues = params.pointerValues! ?? updatePointer(pointer);
 
          if (pointerValues.isVelocityUpdate) {
             setUniform(material, "uMouse", pointerValues.currentPointer);
@@ -128,7 +125,14 @@ export const useBrush = ({
          setUniform(material, "uColor", color);
 
          setUniform(material, "uIsCursor", params.isCursor!);
-         setUniform(material, "uPressure", params.pressure!);
+
+         // pressure
+         setUniform(material, "uPressureEnd", params.pressure!);
+         if (pressureEnd.current === null) {
+            pressureEnd.current = params.pressure!;
+         }
+         setUniform(material, "uPressureStart", pressureEnd.current);
+         pressureEnd.current = params.pressure!;
 
          return updateRenderTarget(gl, ({ read }) => {
             setUniform(material, "uBuffer", read);

packages/use-shader-fx/src/hooks/useBrush/shader/main.frag renamed to packages/use-shader-fx/src/fxs/interactions/useBrush/shader/main.frag

@@ -10,20 +10,22 @@ uniform float uRadius;
 uniform float uDissipation;
 uniform vec2 uResolution;
 uniform float uSmudge;
-uniform float uAspect;
 uniform vec2 uMouse;
 uniform vec2 uPrevMouse;
 uniform vec2 uVelocity;
 uniform vec3 uColor;
 uniform float uMotionBlur;
 uniform int uMotionSample;
 uniform bool uIsCursor;
-uniform float uPressure;
+uniform float uPressureStart;
+uniform float uPressureEnd;
 
 varying vec2 vUv;
 
-float isOnLine(vec2 point, vec2 start, vec2 end, float width, float aspect) {
+float isOnLine(vec2 point, vec2 start, vec2 end, float radius, float pressureStart, float pressureEnd) {
 
+	float aspect = uResolution.x / uResolution.y;
+
 	point.x *= aspect;
 	start.x *= aspect;
 	end.x *= aspect;
@@ -36,10 +38,14 @@ float isOnLine(vec2 point, vec2 start, vec2 end, float width, float aspect) {
 	float distAlongLine = dot(p0, dir);
 	float totalLength = length(end - start);
 
+	float progress = clamp(distAlongLine / totalLength, 0.0, 1.0);
+	float pressure = mix(pressureStart, pressureEnd, progress);
+	radius = min(radius,radius * pressure);
+
 	float distFromStart = length(point - start);
 	float distFromEnd = length(point - end);
 
-	bool withinLine = (distToLine < width && distAlongLine > 0.0 && distAlongLine < totalLength) || distFromStart < width || distFromEnd < width;
+	bool withinLine = (distToLine < radius && distAlongLine > 0.0 && distAlongLine < totalLength) || distFromStart < radius || distFromEnd < radius;
 
 	return float(withinLine);
 }
@@ -84,7 +90,7 @@ void main() {
 
 	vec2 velocity = uVelocity * uResolution;
 
-	float radius = max(0.0,uRadius * uPressure);
+	float radius = max(0.0,uRadius);
 
 	vec4 smudgedColor = uSmudge > 0. ? createSmudge(uv) : texture2D(uBuffer, uv);
 
@@ -95,11 +101,10 @@ void main() {
 
 	vec4 brushColor = uIsTexture ? texture2D(uTexture, uv) : vec4(uColor,1.);
 
-	float onLine = isOnLine(suv, uPrevMouse, uMouse, radius, uAspect);
+	float onLine = isOnLine(suv, uPrevMouse, uMouse, radius, uPressureStart,uPressureEnd);
 	float isOnLine = length(velocity) > 0. ? onLine : uIsCursor ? onLine : 0.;
 
 	vec4 finalColor = mix(bufferColor, brushColor, isOnLine);
 
 	gl_FragColor = finalColor;
-}
-
+}