Skip to content

Commit 1df3dba

Browse files
author
takuma-hmng8
committed
useWobble3D dev
1 parent 099d8ea commit 1df3dba

File tree

24 files changed

+4695
-1117
lines changed

24 files changed

+4695
-1117
lines changed

‎app/useMorphParticles/Playground.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const setGUI = (gui: GUI) => {
3939
gui.add(CONFIG, "warpStrength", 0, 10, 0.01);
4040
gui.add(CONFIG, "warpPositionFrequency", 0, 10, 0.01);
4141
gui.add(CONFIG, "warpTimeFrequency", 0, 10, 0.01);
42+
gui.add(CONFIG, "displacementIntensity", 0, 10, 0.01);
4243
gui.add(CONFIG, "displacementColorIntensity", 0, 40, 0.01);
4344
};
4445
const setConfig = () => {
@@ -114,7 +115,7 @@ export const Playground = () => {
114115
// map: funkun,
115116
// alphaMap: funkunAlpha,
116117
beat: b.beat,
117-
morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
118+
// morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
118119
// morphProgress: 0.5,
119120
});
120121
updateGUI();

‎app/useWobble3D/Playground.tsx‎

Lines changed: 214 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -9,129 +9,256 @@ import {
99
useLoader,
1010
Size,
1111
} from "@react-three/fiber";
12-
import { useBeat, useFluid, usePointer } from "@/packages/use-shader-fx/src";
12+
import {
13+
useBeat,
14+
useFluid,
15+
usePointer,
16+
useCreateWobble3D,
17+
Wobble3DParams,
18+
WOBBLE3D_PARAMS,
19+
} from "@/packages/use-shader-fx/src";
1320
import { FxMaterial, FxMaterialProps } from "./FxMaterial";
1421
import GUI from "lil-gui";
1522
import { useGUI } from "@/utils/useGUI";
1623
import { CONFIG as HomeConfig } from "../_home/Playground";
17-
import { OrbitControls, useGLTF } from "@react-three/drei";
24+
import {
25+
OrbitControls,
26+
useGLTF,
27+
Environment,
28+
MeshTransmissionMaterial,
29+
} from "@react-three/drei";
1830
import CustomShaderMaterial from "three-custom-shader-material/vanilla";
1931
import wobbleVertexShader from "./vert.glsl";
2032
import wobbleFragmentShader from "./frag.glsl";
2133
import { mergeVertices } from "three-stdlib";
2234

2335
extend({ FxMaterial });
2436

25-
const uniforms = {
26-
uTime: new THREE.Uniform(0),
27-
uPositionFrequency: new THREE.Uniform(0.5),
28-
uTimeFrequency: new THREE.Uniform(0.2),
29-
uStrength: new THREE.Uniform(0.1),
30-
uWarpPositionFrequency: new THREE.Uniform(0.2),
31-
uWarpTimeFrequency: new THREE.Uniform(0.2),
32-
uWarpStrength: new THREE.Uniform(0.2),
33-
uColorA: new THREE.Uniform(new THREE.Color("white")),
34-
uColorB: new THREE.Uniform(new THREE.Color("orange")),
35-
uBaloon: new THREE.Uniform(0),
36-
uFx: new THREE.Uniform(new THREE.Texture()),
37+
const CONFIG: Wobble3DParams = structuredClone(WOBBLE3D_PARAMS);
38+
const setGUI = (gui: GUI) => {
39+
gui.addColor(CONFIG, "color0");
40+
gui.addColor(CONFIG, "color1");
41+
gui.addColor(CONFIG, "color2");
42+
gui.addColor(CONFIG, "color3");
43+
gui.add(CONFIG, "wobbleStrength", 0, 10, 0.01);
44+
gui.add(CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
45+
gui.add(CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
46+
gui.add(CONFIG, "warpStrength", 0, 10, 0.01);
47+
gui.add(CONFIG, "warpPositionFrequency", 0, 10, 0.01);
48+
gui.add(CONFIG, "warpTimeFrequency", 0, 10, 0.01);
49+
gui.add(CONFIG, "colorMix", 0, 1, 0.01);
50+
return gui;
51+
};
52+
const setConfig = () => {
53+
return {
54+
...CONFIG,
55+
} as Wobble3DParams;
3756
};
3857

3958
/*===============================================
4059
TODO :
41-
- onbeforeConopileを使って、meshPhusycalMaterialのuniforomsを更新する。
42-
- デフォルトで
43-
- 気が向いたらtoonShaderも追加する？
44-
- isPrimitiveみたいな感じで、Object3Dをsceneに追加しないパターンもつくる。
45-
- Lightとかがあるから、primitiveで使う方がユースケース的にはあるよな
46-
- まあLightもuseEffectとかで追加できるから、isPrimitiveは例外的な使い方としよう。
47-
- r3fはprimitiveをanmount時にsceneから削除するのかな？ 追加されてるobjectは自分でdisposeしないといけないのはわかる。
48-
- あと、primitiveの場合は、useFrameとかも使えないのかな？
49-
50-
- 内部的にraycaster使ってonPointerMoveも更新関数に追加するとかありかもね。
60+
- geometryはbufferでなんでも許容する
61+
- まずはMeshPhysicalMaterialで、シェーダをカスタムコンパイルする
62+
- いまの機能全部
63+
- colorは4色線形保管
64+
- displacement
65+
- これは頂点を操作する必要があるからあり
66+
- depthMaterial
67+
- たぶん陰がwobbleにならないのを、これで解決してる感じだな。hookから吐き出したい
68+
- たぶんmaterialは何でも受け付けられる。
69+
- csmと同様、ある種のmaterialの時にだけshaderを対応させればいい
70+
71+
v mapMixっていうuniformのつくろっと
72+
v デフォルトの色とカスタムしたカラーのmix率
73+
- meshTransmissionMaterialの拡張版としよう
74+
- なんか透過したときに、rgb shiftしてシャボン玉みたいにできる感じ
75+
76+
- chromatic aberation
77+
- anisotropicBlur
78+
- distortion
79+
- distortionScale
80+
- temporalDistortion
5181
===============================================*/
5282

5383
export const Playground = () => {
84+
const updateGUI = useGUI(setGUI);
5485
const { size, viewport, scene: rootScene, camera } = useThree();
55-
56-
// camera.position.set(0, 0, 2);
57-
58-
// const { scene } = useGLTF(
59-
// "https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/suzanne-high-poly/model.gltf"
60-
// );
61-
62-
const [updateFluid, setFluid, fluid] = useFluid({ size, dpr: viewport.dpr });
63-
64-
const mesh = useMemo(() => {
65-
const material = new CustomShaderMaterial({
66-
// CSM
67-
baseMaterial: THREE.MeshPhysicalMaterial,
68-
vertexShader: wobbleVertexShader,
69-
fragmentShader: wobbleFragmentShader,
70-
uniforms: uniforms,
71-
silent: true,
72-
73-
// MeshPhysicalMaterial
74-
metalness: 0.9,
75-
roughness: 0.5,
76-
color: "#ffffff",
77-
transmission: 0,
78-
ior: 1.5,
79-
thickness: 1.5,
86+
const [funkun, funkunAlpha] = useLoader(THREE.TextureLoader, [
87+
"/funkun.jpg",
88+
"/funkun-alpha.jpg",
89+
]);
90+
const [updateFluid, setFluid, { output: fluid }] = useFluid({
91+
size,
92+
dpr: viewport.dpr,
93+
});
94+
const [updateWobble, wobble] = useCreateWobble3D({
95+
scene: false,
96+
// geometry: new THREE.SphereGeometry(1, 32, 32),
97+
// baseMaterial: THREE.MeshToonMaterial,
98+
materialParameters: {
99+
// metalness: 0.4,
100+
// roughness: 0.5,
101+
// color: "#ffffff",
102+
transmission: 1.5,
103+
// ior: 1.5,
104+
thickness: 4,
80105
transparent: true,
81-
wireframe: false,
82-
});
83-
const depthMaterial = new CustomShaderMaterial({
84-
// CSM
85-
baseMaterial: THREE.MeshDepthMaterial,
86-
vertexShader: wobbleVertexShader,
87-
uniforms: uniforms,
88-
silent: true,
89-
90-
// MeshDepthMaterial
91-
depthPacking: THREE.RGBADepthPacking,
92-
});
93-
let geometry = new THREE.IcosahedronGeometry(
94-
2.5,
95-
50
96-
) as THREE.BufferGeometry;
97-
// let geometry = scene.children[0].geometry as THREE.BufferGeometry;
98-
99-
geometry = mergeVertices(geometry);
100-
geometry.computeTangents();
101-
102-
const wobble = new THREE.Mesh(geometry, material);
103-
wobble.customDepthMaterial = depthMaterial;
104-
wobble.receiveShadow = true;
105-
wobble.castShadow = true;
106-
return wobble;
107-
}, []);
108-
109-
const beat = useBeat(140);
110-
const updatePointer = usePointer();
106+
// wireframe: false,
107+
// side: THREE.DoubleSide,
108+
map: fluid,
109+
},
110+
});
111+
112+
useEffect(() => {
113+
wobble.mesh.geometry = mergeVertices(wobble.mesh.geometry);
114+
wobble.mesh.geometry.computeTangents();
115+
// wobble.mesh.customDepthMaterial = depthMaterial;
116+
wobble.mesh.receiveShadow = true;
117+
wobble.mesh.castShadow = true;
118+
}, [wobble]);
111119

120+
const updatePointer = usePointer();
112121
const refPointer = useRef(new THREE.Vector2(0, 0));
113-
const handlePointerMove = (e: any) =>
114-
(refPointer.current = e.uv.multiplyScalar(2).subScalar(1));
122+
const handlePointerMove = (e: any) => {
123+
if (!e?.pointer) {
124+
return;
125+
}
126+
refPointer.current = e.pointer;
127+
};
115128

116129
useFrame((props) => {
117-
const b = beat(props.clock);
118-
updateFluid(props);
119-
mesh.material.uniforms.uTime.value = b.beat;
120-
mesh.material.uniforms.uFx.value = updateFluid(props, {
130+
updateWobble(props, {
131+
...setConfig(),
132+
// colorMix: 0,
133+
});
134+
updateFluid(props, {
121135
pointerValues: updatePointer(refPointer.current),
122136
});
137+
updateGUI();
123138
});
124139

125140
return (
126141
<mesh>
127142
<ambientLight />
128-
<directionalLight />
143+
<directionalLight scale={[2, 2, 2]} />
129144
<OrbitControls />
145+
<Environment preset="warehouse" background={true} />
130146
<primitive
131147
onPointerMove={handlePointerMove}
132-
object={mesh}
148+
object={wobble.mesh}
133149
position={[0, 0, 0]}
134150
/>
151+
{/* <icosahedronGeometry args={[2, 50]} />
152+
<MeshTransmissionMaterial
153+
transmission={1}
154+
samples={4}
155+
backside
156+
thickness={4}
157+
// chromaticAberration={10.5}
158+
// anisotropicBlur={0}
159+
// distortion={10}
160+
distortionScale={10}
161+
temporalDistortion={10}
162+
/> */}
135163
</mesh>
136164
);
137165
};
166+
167+
// export const Playground = () => {
168+
// const { size, viewport, scene: rootScene, camera } = useThree();
169+
170+
// // camera.position.set(0, 0, 2);
171+
172+
// // const funkun = useGLTF("/funkun.glb");
173+
// // const model = useGLTF(
174+
// // "https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/suzanne-high-poly/model.gltf"
175+
// // );
176+
177+
// // console.log(model);
178+
179+
// const [updateFluid, setFluid, fluid] = useFluid({ size, dpr: viewport.dpr });
180+
181+
// const mesh = useMemo(() => {
182+
// const material = new CustomShaderMaterial({
183+
// // CSM
184+
// baseMaterial: THREE.MeshPhysicalMaterial,
185+
// vertexShader: wobbleVertexShader,
186+
// fragmentShader: wobbleFragmentShader,
187+
// uniforms: uniforms,
188+
// silent: true,
189+
190+
// // MeshPhysicalMaterial
191+
// metalness: 0,
192+
// roughness: 0,
193+
// color: "#ffffff",
194+
// transmission: 1,
195+
// ior: 1.2,
196+
// thickness: 1.5,
197+
// transparent: true,
198+
// wireframe: false,
199+
// });
200+
// const depthMaterial = new CustomShaderMaterial({
201+
// // CSM
202+
// baseMaterial: THREE.MeshDepthMaterial,
203+
// vertexShader: wobbleVertexShader,
204+
// uniforms: uniforms,
205+
// silent: true,
206+
207+
// // MeshDepthMaterial
208+
// depthPacking: THREE.RGBADepthPacking,
209+
// });
210+
// let geometry = new THREE.IcosahedronGeometry(
211+
// 2.5,
212+
// 50
213+
// ) as THREE.BufferGeometry;
214+
215+
// geometry = mergeVertices(geometry);
216+
// geometry.computeTangents();
217+
218+
// const wobble = new THREE.Mesh(geometry, material);
219+
// wobble.customDepthMaterial = depthMaterial;
220+
// wobble.receiveShadow = true;
221+
// wobble.castShadow = true;
222+
// return wobble;
223+
// }, []);
224+
225+
// const beat = useBeat(140);
226+
// const updatePointer = usePointer();
227+
228+
// const refPointer = useRef(new THREE.Vector2(0, 0));
229+
// const handlePointerMove = (e: any) =>
230+
// (refPointer.current = e.uv.multiplyScalar(2).subScalar(1));
231+
232+
// useFrame((props) => {
233+
// const b = beat(props.clock);
234+
// updateFluid(props);
235+
// mesh.material.uniforms.uTime.value = b.beat;
236+
// mesh.material.uniforms.uFx.value = updateFluid(props, {
237+
// pointerValues: updatePointer(refPointer.current),
238+
// });
239+
// });
240+
241+
// return (
242+
// <mesh>
243+
// <ambientLight />
244+
// <directionalLight />
245+
// <OrbitControls />
246+
// {/* <Environment preset="city" /> */}
247+
// {/* <Environment
248+
// preset="city"
249+
// background={true} // can be true, false or "only" (which only sets the background) (default: false)
250+
// blur={0} // blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)
251+
// // files={["px.png", "nx.png", "py.png", "ny.png", "pz.png", "nz.png"]}
252+
// // path="/"
253+
// // preset={null}
254+
// // scene={undefined} // adds the ability to pass a custom THREE.Scene, can also be a ref
255+
// // encoding={undefined} // adds the ability to pass a custom THREE.TextureEncoding (default: THREE.sRGBEncoding for an array of files and THREE.LinearEncoding for a single texture)
256+
// /> */}
257+
// <primitive
258+
// onPointerMove={handlePointerMove}
259+
// object={mesh}
260+
// position={[0, 0, 0]}
261+
// />
262+
// </mesh>
263+
// );
264+
// };

‎app/useWobble3D/frag.glsl‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ varying vec3 vFxColor;
77
void main()
88
{
99
float colorMix = smoothstep(- 1.0, 1.0, vWobble);
10-
csm_DiffuseColor.rgb = mix(vFxColor, uColorB, colorMix);
10+
csm_DiffuseColor.rgb = mix(uColorA, uColorB, colorMix);
1111

1212
// // Mirror step
13-
// csm_Metalness = step(0.25, vWobble);
14-
// csm_Roughness = 1.0 - csm_Metalness;
13+
// csm_Metalness = step(0.25, vWobble);
14+
// csm_Roughness = 1.0 - csm_Metalness;
1515

1616
// Shinny tip
1717
csm_Roughness = 1.0 - colorMix;

‎app/useWobble3D/vert.glsl‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ float getWobble(vec3 position)
128128

129129
void main()
130130
{
131+
131132
vec3 biTangent = cross(normal, tangent.xyz);
132133

133134
// Neighbours positions
@@ -141,9 +142,9 @@ void main()
141142
positionA += getWobble(positionA) * normal;
142143
positionB += getWobble(positionB) * normal;
143144

144-
// fx
145-
vec4 fx = texture(uFx, uv);
146-
vFxColor = fx.rgb;
145+
// fx
146+
// vec4 fx = texture(uFx, uv);
147+
// vFxColor = fx.rgb;
147148

148149
// Compute normal
149150
vec3 toA = normalize(positionA - csm_Position);

0 commit comments

Comments
 (0)