Skip to content

Commit 76ed953

Browse files
author
takuma-hmng8
committed
update brush
1 parent 94f24f0 commit 76ed953

File tree

12 files changed

+366
-109
lines changed

12 files changed

+366
-109
lines changed

‎app/useBrush/Playground.tsx‎

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,68 +15,88 @@ import {
1515
useMarble,
1616
useFxTexture,
1717
useBrush,
18+
useFPSLimiter,
19+
EASING,
20+
usePointer,
21+
useAlphaBlending,
1822
} from "@/packages/use-shader-fx/src";
19-
import {
20-
NoiseParams,
21-
NOISE_PARAMS,
22-
} from "@/packages/use-shader-fx/src/hooks/useNoise";
23-
import {
24-
ColorStrataParams,
25-
COLORSTRATA_PARAMS,
26-
} from "@/packages/use-shader-fx/src/hooks/useColorStrata";
27-
import GUI from "lil-gui";
28-
import { useGUI } from "@/utils/useGUI";
23+
2924
import { FxMaterial, FxMaterialProps } from "./FxMaterial";
3025
import { useTexture, useVideoTexture } from "@react-three/drei";
31-
import { Console } from "console";
3226

3327
extend({ FxMaterial });
3428

35-
/*===============================================
36-
TODO:
37-
~~ 初期状態で真ん中に来ないようにする ~~
38-
39-
- falloffつける:速度に応じて小さくなって消滅する係数
40-
- disipaccionと関係sる値
41-
- uniform名、変数名を満足いくものにする
42-
43-
- colorをfluidみたく関数しましょっか
44-
45-
- パフォーマンス
46-
47-
- あんまうまくいかなかったら、useFlowmapを別途つくる？
48-
- パクリすぎるかも？
49-
===============================================*/
50-
5129
export const Playground = () => {
5230
const ref = useRef<FxMaterialProps>();
5331

5432
const { size, viewport } = useThree();
55-
// const bbbb = useVideoTexture("/bbbb.mov");
56-
// const glitch = useVideoTexture("/glitch.mov");
57-
const [updateBrush, setBrush, { output }] = useBrush({
33+
const bbbb = useVideoTexture("/bbbb.mov");
34+
const glitch = useVideoTexture("/glitch.mov");
35+
const [updateBrush, setBrush, { output: brush }] = useBrush({
36+
size,
37+
dpr: viewport.dpr,
38+
});
39+
const [updateMarble, setMarble, { output: marble }] = useMarble({
5840
size,
5941
dpr: viewport.dpr,
6042
});
6143

44+
const [updateFluid, setFluid, { output: fluid }] = useFluid({
45+
size,
46+
dpr: viewport.dpr,
47+
});
48+
49+
const [updateAlphaBlending, setAlphaBlending, { output: alphaBlending }] =
50+
useAlphaBlending({ size, dpr: viewport.dpr });
51+
52+
setMarble({
53+
scale: 0.01,
54+
});
55+
56+
setAlphaBlending({
57+
texture: bbbb,
58+
map: brush,
59+
});
60+
61+
const colorVec = useRef(new THREE.Vector3());
6262
setBrush({
63-
radius: 0.4,
64-
smudge: 4,
65-
motionBlur: 3,
66-
motionSample: 8,
67-
dissipation: 0.93,
63+
texture: marble,
64+
// map: marble,
65+
// mapIntensity: 0.15,
66+
radius: 0.1,
67+
// smudge: 4,
68+
motionBlur: 0,
69+
dissipation: 0.9,
70+
});
71+
72+
setFluid({
73+
fluid_color: (velocity: THREE.Vector2) => {
74+
const rCol = Math.max(0.0, Math.abs(velocity.x) * 200);
75+
const gCol = Math.max(0.0, Math.abs(velocity.y) * 200);
76+
const bCol = Math.max(0.0, (rCol + gCol) / 2);
77+
return colorVec.current.set(rCol, gCol, bCol);
78+
},
6879
});
6980

7081
// const updateBeat = useBeat(157);
7182

83+
const limiter = useFPSLimiter();
84+
const updatePointer = usePointer();
85+
7286
useFrame((props) => {
73-
updateBrush(props);
87+
// const pointerValues = updatePointer(props.pointer);
88+
updateBrush(props, {
89+
// pointerValues,
90+
// pressure: EASING.easeOutCirc(pointerValues.velocity.length()) * 10,
91+
});
92+
updateMarble(props);
93+
updateAlphaBlending(props);
7494
});
7595

7696
return (
7797
<mesh>
7898
<planeGeometry args={[2, 2]} />
79-
<fxMaterial key={FxMaterial.key} u_fx={output} ref={ref} />
99+
<fxMaterial key={FxMaterial.key} u_fx={alphaBlending} ref={ref} />
80100
</mesh>
81101
);
82102
};

‎packages/use-shader-fx/src/hooks/useAlphaBlending/index.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import * as THREE from "three";
2+
import { useMesh } from "./useMesh";
3+
import { useCamera } from "../../utils/useCamera";
4+
import { useCallback, useMemo } from "react";
5+
import { RootState } from "@react-three/fiber";
6+
import { setUniform } from "../../utils/setUniforms";
7+
import { HooksProps, HooksReturn } from "../types";
8+
import { useParams } from "../../utils/useParams";
9+
import { useSingleFBO } from "../../utils/useSingleFBO";
10+
11+
export type AlphaBlendingParams = {
12+
/** , default: */
13+
texture?: THREE.Texture;
14+
/** , default: */
15+
map?: THREE.Texture;
16+
};
17+
18+
export type AlphaBlendingObject = {
19+
scene: THREE.Scene;
20+
material: THREE.Material;
21+
camera: THREE.Camera;
22+
renderTarget: THREE.WebGLRenderTarget;
23+
output: THREE.Texture;
24+
};
25+
26+
export const ALPHABLENDING_PARAMS: AlphaBlendingParams = {
27+
texture: new THREE.Texture(),
28+
map: new THREE.Texture(),
29+
};
30+
31+
/**
32+
* @link https://github.com/takuma-hmng8/use-shader-fx#usage
33+
*/
34+
export const useAlphaBlending = ({
35+
size,
36+
dpr,
37+
samples = 0,
38+
}: HooksProps): HooksReturn<AlphaBlendingParams, AlphaBlendingObject> => {
39+
const scene = useMemo(() => new THREE.Scene(), []);
40+
const material = useMesh({ scene, size, dpr });
41+
const camera = useCamera(size);
42+
43+
const [renderTarget, updateRenderTarget] = useSingleFBO({
44+
scene,
45+
camera,
46+
size,
47+
dpr,
48+
samples,
49+
});
50+
51+
const [params, setParams] =
52+
useParams<AlphaBlendingParams>(ALPHABLENDING_PARAMS);
53+
54+
const updateFx = useCallback(
55+
(props: RootState, updateParams?: AlphaBlendingParams) => {
56+
const { gl } = props;
57+
58+
updateParams && setParams(updateParams);
59+
60+
setUniform(material, "uTexture", params.texture!);
61+
setUniform(material, "uMap", params.map!);
62+
63+
return updateRenderTarget(gl);
64+
},
65+
[material, updateRenderTarget, params, setParams]
66+
);
67+
68+
return [
69+
updateFx,
70+
setParams,
71+
{
72+
scene: scene,
73+
material: material,
74+
camera: camera,
75+
renderTarget: renderTarget,
76+
output: renderTarget.texture,
77+
},
78+
];
79+
};

‎packages/use-shader-fx/src/hooks/useAlphaBlending/shader/main.frag‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
precision highp float;
2+
3+
uniform sampler2D uTexture;
4+
uniform sampler2D uMap;
5+
6+
varying vec2 vUv;
7+
8+
void main() {
9+
vec2 uv = vUv;
10+
vec4 tex = texture2D(uTexture, uv);
11+
vec4 map = texture2D(uMap, uv);
12+
gl_FragColor = mix(tex,map,map.a);
13+
}
14+

‎packages/use-shader-fx/src/hooks/useAlphaBlending/shader/main.vert‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
varying vec2 vUv;
2+
3+
void main() {
4+
vUv = uv;
5+
gl_Position = vec4(position, 1.0);
6+
}

‎packages/use-shader-fx/src/hooks/useAlphaBlending/useMesh.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as THREE from "three";
2+
import vertexShader from "./shader/main.vert";
3+
import fragmentShader from "./shader/main.frag";
4+
import { useMemo } from "react";
5+
import { useAddMesh } from "../../utils/useAddMesh";
6+
import { Size } from "@react-three/fiber";
7+
8+
export class AlphaBlendingMaterial extends THREE.ShaderMaterial {
9+
uniforms!: {
10+
uTexture: { value: THREE.Texture };
11+
uMap: { value: THREE.Texture };
12+
};
13+
}
14+
15+
export const useMesh = ({
16+
scene,
17+
size,
18+
dpr,
19+
}: {
20+
scene: THREE.Scene;
21+
size: Size;
22+
dpr: number;
23+
}) => {
24+
const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);
25+
const material = useMemo(
26+
() =>
27+
new THREE.ShaderMaterial({
28+
uniforms: {
29+
uTexture: { value: new THREE.Texture() },
30+
uMap: { value: new THREE.Texture() },
31+
},
32+
vertexShader: vertexShader,
33+
fragmentShader: fragmentShader,
34+
}),
35+
[]
36+
);
37+
38+
useAddMesh(scene, geometry, material);
39+
return material as AlphaBlendingMaterial;
40+
};

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

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@ import { useMesh } from "./useMesh";
33
import { useCamera } from "../../utils/useCamera";
44
import { useCallback, useMemo } from "react";
55
import { RootState } from "@react-three/fiber";
6-
import { usePointer } from "../../utils/usePointer";
6+
import { PointerValues, usePointer } from "../../utils/usePointer";
77
import { setUniform } from "../../utils/setUniforms";
88
import { HooksProps, HooksReturn } from "../types";
99
import { useParams } from "../../utils/useParams";
1010
import { DoubleRenderTarget, useDoubleFBO } from "../../utils/useDoubleFBO";
1111

1212
export type BrushParams = {
13-
/** Texture applied to the brush.Mixed with the value of a , default:THREE.Texture() */
14-
texture?: THREE.Texture;
13+
/** Texture applied to the brush, textureがtrueの場合はcolorよりも優先するよ , default:false */
14+
texture?: THREE.Texture | false;
15+
/** fxマップをつけられるよ , default:false */
16+
map?: THREE.Texture | false;
17+
/** default:0.1 */
18+
mapIntensity?: number;
1519
/** size of the stamp, percentage of the size ,default:0.05 */
1620
radius?: number;
1721
/** Strength of smudge effect , default:0.0*/
@@ -22,8 +26,14 @@ export type BrushParams = {
2226
motionBlur?: number;
2327
/** Number of motion blur samples. Affects performance default: 5 */
2428
motionSample?: number;
25-
/** brush color , default:THREE.Color(0xffffff) */
26-
color?: THREE.Color;
29+
/** brush color , it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */
30+
color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;
31+
/** 速度が失ってもカーソルに追従する */
32+
isCursor?: boolean;
33+
/** 筆圧 , default : 1.0 */
34+
pressure?: number;
35+
/** usePointerをframeで呼び出す場合、この値にPointerValuesをセットすることで、2重の呼び出しを防ぎます , default:false */
36+
pointerValues?: PointerValues | false;
2737
};
2838

2939
export type BrushObject = {
@@ -35,13 +45,18 @@ export type BrushObject = {
3545
};
3646

3747
export const BRUSH_PARAMS: BrushParams = {
38-
texture: new THREE.Texture(),
48+
texture: false,
49+
map: false,
50+
mapIntensity: 0.1,
3951
radius: 0.05,
4052
smudge: 0.0,
4153
dissipation: 1.0,
4254
motionBlur: 0.0,
4355
motionSample: 5,
44-
color: new THREE.Color(0xff0000),
56+
color: new THREE.Vector3(1.0, 0.0, 0.0),
57+
isCursor: false,
58+
pressure: 1.0,
59+
pointerValues: false,
4560
};
4661

4762
/**
@@ -72,22 +87,51 @@ export const useBrush = ({
7287

7388
updateParams && setParams(updateParams);
7489

75-
setUniform(material, "uTexture", params.texture!);
90+
if (params.texture!) {
91+
setUniform(material, "uIsTexture", true);
92+
setUniform(material, "uTexture", params.texture!);
93+
} else {
94+
setUniform(material, "uIsTexture", false);
95+
}
96+
97+
if (params.map!) {
98+
setUniform(material, "uIsMap", true);
99+
setUniform(material, "uMap", params.map!);
100+
setUniform(material, "uMapIntensity", params.mapIntensity!);
101+
} else {
102+
setUniform(material, "uIsMap", false);
103+
}
104+
76105
setUniform(material, "uRadius", params.radius!);
77106
setUniform(material, "uSmudge", params.smudge!);
78107
setUniform(material, "uDissipation", params.dissipation!);
79108
setUniform(material, "uMotionBlur", params.motionBlur!);
80109
setUniform(material, "uMotionSample", params.motionSample!);
81-
setUniform(material, "uColor", params.color!);
82110

83-
const { currentPointer, prevPointer, velocity } =
84-
updatePointer(pointer);
85-
setUniform(material, "uMouse", currentPointer);
86-
setUniform(material, "uPrevMouse", prevPointer);
87-
setUniform(material, "uVelocity", velocity);
111+
let pointerValues: PointerValues;
112+
if (params.pointerValues!) {
113+
pointerValues = params.pointerValues;
114+
} else {
115+
pointerValues = updatePointer(pointer);
116+
}
117+
118+
if (pointerValues.isVelocityUpdate) {
119+
setUniform(material, "uMouse", pointerValues.currentPointer);
120+
setUniform(material, "uPrevMouse", pointerValues.prevPointer);
121+
}
122+
setUniform(material, "uVelocity", pointerValues.velocity);
123+
124+
const color: THREE.Vector3 =
125+
typeof params.color === "function"
126+
? params.color(pointerValues.velocity)
127+
: params.color!;
128+
setUniform(material, "uColor", color);
129+
130+
setUniform(material, "uIsCursor", params.isCursor!);
131+
setUniform(material, "uPressure", params.pressure!);
88132

89133
return updateRenderTarget(gl, ({ read }) => {
90-
setUniform(material, "uMap", read);
134+
setUniform(material, "uBuffer", read);
91135
});
92136
},
93137
[material, updatePointer, updateRenderTarget, params, setParams]

0 commit comments

Comments
 (0)