2.19

Author: takuma-hmng8

app/useBrush/FxMaterial.tsx

@@ -0,0 +1,30 @@
+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_fx: THREE.Texture;
+};
+
+export const FxMaterial = shaderMaterial(
+   {
+      u_fx: new THREE.Texture(),
+   },
+
+   `
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+   fragment
+);

app/useBrush/Playground.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import * as THREE from "three";
+import { useEffect, useRef } from "react";
+import { useFrame, useThree, extend } from "@react-three/fiber";
+import {
+   useNoise,
+   useFluid,
+   useFxBlending,
+   useColorStrata,
+   useBrightnessPicker,
+   useChromaKey,
+   useBeat,
+   useRipple,
+   useMarble,
+   useFxTexture,
+   useBrush,
+} 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";
+import { useTexture, useVideoTexture } from "@react-three/drei";
+import { Console } from "console";
+
+extend({ FxMaterial });
+
+/*===============================================
+TODO:
+~~ 初期状態で真ん中に来ないようにする ~~
+
+- falloffつける:速度に応じて小さくなって消滅する係数
+	- disipaccionと関係sる値
+- uniform名、変数名を満足いくものにする
+
+- colorをfluidみたく関数しましょっか
+
+- パフォーマンス
+
+- あんまうまくいかなかったら、useFlowmapを別途つくる？
+	- パクリすぎるかも？
+===============================================*/
+
+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 }] = useBrush({
+      size,
+      dpr: viewport.dpr,
+   });
+
+   setBrush({
+      radius: 0.4,
+      smudge: 4,
+      motionBlur: 3,
+      motionSample: 8,
+      dissipation: 0.93,
+   });
+
+   // const updateBeat = useBeat(157);
+
+   useFrame((props) => {
+      updateBrush(props);
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} u_fx={output} ref={ref} />
+      </mesh>
+   );
+};

app/useBrush/main.frag

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

app/useBrush/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>
+               <Playground />
+            </ShaderFx>
+         </div>
+      </div>
+   );
+}

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

@@ -41,7 +41,7 @@ export const BRUSH_PARAMS: BrushParams = {
    dissipation: 1.0,
    motionBlur: 0.0,
    motionSample: 5,
-   color: new THREE.Color(0xffffff),
+   color: new THREE.Color(0xff0000),
 };
 
 /**

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

@@ -44,6 +44,8 @@ float isOnLine(vec2 point, vec2 start, vec2 end, float width, float aspect) {
 	return float(withinLine);
 }
 
+// IDEA : マルチサンプリングしてるんだけど、もっといい方法ありそうだけどな〜
+// IDEA ; 普通にマウスからの距離でいけないかな〜
 vec4 createSmudge(){
 	vec2 offsets[9];
 	offsets[0] = vec2(-1, -1); offsets[1] = vec2( 0, -1); offsets[2] = vec2( 1, -1);
@@ -60,6 +62,7 @@ vec4 createSmudge(){
 	return smudgedColor / 9.0;
 }
 
+//IDEA : 速度からサンプリングして擬似的なモーションブラーしてるんだけど、ここで速度による拡散作れないかな〜
 vec4 createMotionBlur(vec4 baseColor, vec2 velocity, float motion, int samples) {
 	vec4 motionBlurredColor = baseColor;
 	vec2 scaledVelocity = velocity * motion;
@@ -71,9 +74,7 @@ vec4 createMotionBlur(vec4 baseColor, vec2 velocity, float motion, int samples)
 	return motionBlurredColor / float(samples);
 }
 
-
 void main() {
-	// Convert UV coordinates to range [-1, 1]
 	vec2 st = vUv * 2.0 - 1.0;
 
 	// velocity vector
@@ -94,11 +95,19 @@ void main() {
 	vec3 color = uColor;
 
 	// map texture to color
+	// TODO：ここのミックスもよう使い勝手わるい
 	vec4 textureColor = texture2D(uTexture, vUv);
 	vec3 finalColor = mix(color, textureColor.rgb, textureColor.a);
 
-	float onLine = isOnLine(st, uPrevMouse, uMouse, modifiedRadius, uAspect);
-	bufferColor.rgb = mix(bufferColor.rgb, finalColor, onLine);
+	// ここ0 || 1で かえって来る
+	float onLine = length(uVelocity) > 0. ? isOnLine(st, uPrevMouse, uMouse, modifiedRadius, uAspect) : .0;
 
-	gl_FragColor = vec4(bufferColor.rgb,1.0);
+	// ここで、onlineの値に乗算するのが良さそう　falloff
+	// float falloff = smoothstep(.9, 0.0, onLine);
+	
+	bufferColor.rgb = mix(bufferColor.rgb, finalColor, onLine);
+
+	gl_FragColor = vec4(bufferColor.rgb,1.);
+
+
 }