Skip to content

Commit 50b2d2d

Browse files
author
takuma-hmng8
committed
v1.1.4
1 parent 9ea5d11 commit 50b2d2d

File tree

106 files changed

+4184
-1624
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+4184
-1624
lines changed

‎.storybook/stories/UseMorphParticles.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as React from "react";
2+
import * as THREE from "three";
3+
import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
4+
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
5+
import GUI from "lil-gui";
6+
import { useGUI } from "../../utils/useGUI";
7+
import { useCreateMorphParticles } from "../../packages/use-shader-fx/src";
8+
import {
9+
MORPHPARTICLES_PARAMS,
10+
MorphParticlesParams,
11+
} from "../../packages/use-shader-fx/src/fxs/3D/useMorphParticles";
12+
import { Environment, OrbitControls } from "@react-three/drei";
13+
14+
extend({ FxMaterial });
15+
16+
const CONFIG: MorphParticlesParams = structuredClone(MORPHPARTICLES_PARAMS);
17+
const setGUI = (gui: GUI) => {
18+
gui.add(CONFIG, "blurAlpha", 0, 1, 0.01);
19+
gui.add(CONFIG, "blurRadius", 0, 2, 0.01);
20+
gui.add(CONFIG, "pointSize", 0.01, 2, 0.01);
21+
gui.addColor(CONFIG, "color0");
22+
gui.addColor(CONFIG, "color1");
23+
gui.addColor(CONFIG, "color2");
24+
gui.addColor(CONFIG, "color3");
25+
gui.add(CONFIG, "wobbleStrength", 0, 10, 0.01);
26+
gui.add(CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
27+
gui.add(CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
28+
gui.add(CONFIG, "warpStrength", 0, 10, 0.01);
29+
gui.add(CONFIG, "warpPositionFrequency", 0, 10, 0.01);
30+
gui.add(CONFIG, "warpTimeFrequency", 0, 10, 0.01);
31+
gui.add(CONFIG, "displacementIntensity", 0, 10, 0.01);
32+
gui.add(CONFIG, "displacementColorIntensity", 0, 40, 0.01);
33+
gui.add(CONFIG, "morphProgress", 0, 1, 0.01);
34+
};
35+
const setConfig = () => {
36+
return {
37+
...CONFIG,
38+
} as MorphParticlesParams;
39+
};
40+
41+
const morphList = [
42+
new THREE.PlaneGeometry(5, 5, 100, 100).attributes.position
43+
.array as Float32Array,
44+
new THREE.TorusGeometry(2.5, 1, 50, 30).attributes.position
45+
.array as Float32Array,
46+
];
47+
const uvList = [
48+
new THREE.PlaneGeometry(5, 5, 100, 100).attributes.uv.array as Float32Array,
49+
new THREE.TorusGeometry(2.5, 1, 50, 30).attributes.uv.array as Float32Array,
50+
];
51+
52+
export const UseMorphParticles = (args: MorphParticlesParams) => {
53+
const updateGUI = useGUI(setGUI);
54+
55+
const { viewport, size } = useThree();
56+
57+
const [updateMorph, morph] = useCreateMorphParticles({
58+
scene: false,
59+
size,
60+
dpr: viewport.dpr,
61+
geometry: React.useMemo(() => new THREE.IcosahedronGeometry(2.5, 50), []),
62+
positions: morphList,
63+
uvs: uvList,
64+
});
65+
66+
useFrame((props) => {
67+
updateMorph(props, {
68+
...setConfig(),
69+
});
70+
updateGUI();
71+
});
72+
return (
73+
<mesh>
74+
<OrbitControls />
75+
<primitive object={morph.points} />
76+
</mesh>
77+
);
78+
};

‎.storybook/stories/UseWobble3D.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import * as React from "react";
2+
import * as THREE from "three";
3+
import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
4+
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
5+
import GUI from "lil-gui";
6+
import { useGUI } from "../../utils/useGUI";
7+
import {
8+
useWobble3D,
9+
useCreateWobble3D,
10+
} from "../../packages/use-shader-fx/src";
11+
import {
12+
WOBBLE3D_PARAMS,
13+
Wobble3DParams,
14+
} from "../../packages/use-shader-fx/src/fxs/3D/useWobble3D";
15+
import { Environment, OrbitControls } from "@react-three/drei";
16+
17+
extend({ FxMaterial });
18+
19+
const CONFIG: Wobble3DParams = structuredClone(WOBBLE3D_PARAMS);
20+
const setGUI = (gui: GUI) => {
21+
gui.addColor(CONFIG, "color0");
22+
gui.addColor(CONFIG, "color1");
23+
gui.addColor(CONFIG, "color2");
24+
gui.addColor(CONFIG, "color3");
25+
gui.add(CONFIG, "wobbleStrength", 0, 10, 0.01);
26+
gui.add(CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
27+
gui.add(CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
28+
gui.add(CONFIG, "warpStrength", 0, 10, 0.01);
29+
gui.add(CONFIG, "warpPositionFrequency", 0, 10, 0.01);
30+
gui.add(CONFIG, "warpTimeFrequency", 0, 10, 0.01);
31+
gui.add(CONFIG, "wobbleShine", 0, 5, 0.01);
32+
gui.add(CONFIG, "samples", 0, 10, 1);
33+
gui.add(CONFIG, "colorMix", 0, 1, 0.01);
34+
gui.add(CONFIG, "chromaticAberration", 0, 10, 0.01);
35+
gui.add(CONFIG, "anisotropicBlur", 0, 10, 0.01);
36+
gui.add(CONFIG, "distortion", 0, 10, 0.01);
37+
gui.add(CONFIG, "distortionScale", 0, 10, 0.01);
38+
gui.add(CONFIG, "temporalDistortion", 0, 10, 0.01);
39+
};
40+
const setConfig = () => {
41+
return {
42+
...CONFIG,
43+
} as Wobble3DParams;
44+
};
45+
46+
export const UseWobble3D = (args: Wobble3DParams) => {
47+
const updateGUI = useGUI(setGUI);
48+
49+
const [updateWobble, wobble] = useCreateWobble3D({
50+
baseMaterial: THREE.MeshPhysicalMaterial,
51+
materialParameters: {
52+
iridescence: 1,
53+
metalness: 0.0,
54+
roughness: 0.0,
55+
transmission: 2,
56+
thickness: 1,
57+
transparent: true,
58+
},
59+
});
60+
61+
useFrame((props) => {
62+
updateWobble(props, {
63+
...setConfig(),
64+
});
65+
updateGUI();
66+
});
67+
return (
68+
<mesh>
69+
<Environment preset="warehouse" background />
70+
<OrbitControls />
71+
<primitive object={wobble.mesh} />
72+
</mesh>
73+
);
74+
};

‎.storybook/stories/useMorphParticles.stories.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import type { StoryObj } from "@storybook/react";
3+
import { setArgTypes } from "../utils/setArgTypes";
4+
import { Setup } from "../utils/Setup";
5+
import type { Meta } from "@storybook/react";
6+
import {
7+
MORPHPARTICLES_PARAMS,
8+
MorphParticlesParams,
9+
} from "../../packages/use-shader-fx/src/fxs/3D/useMorphParticles";
10+
import { UseMorphParticles } from "./UseMorphParticles";
11+
12+
const meta = {
13+
title: "3D/useMorphParticles",
14+
component: UseMorphParticles,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseMorphParticles>;
18+
19+
export default meta;
20+
type Story = StoryObj<typeof meta>;
21+
22+
const storySetting = {
23+
args: MORPHPARTICLES_PARAMS,
24+
argTypes: setArgTypes<MorphParticlesParams>(MORPHPARTICLES_PARAMS),
25+
};
26+
export const MorphParticles: Story = {
27+
render: (args) => <UseMorphParticles {...args} />,
28+
...storySetting,
29+
};

‎.storybook/stories/useWobble3D.stories.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from "react";
2+
import type { StoryObj } from "@storybook/react";
3+
import { setArgTypes } from "../utils/setArgTypes";
4+
import { Setup } from "../utils/Setup";
5+
import type { Meta } from "@storybook/react";
6+
import {
7+
WOBBLE3D_PARAMS,
8+
Wobble3DParams,
9+
} from "../../packages/use-shader-fx/src/fxs/3D/useWobble3D";
10+
import { UseWobble3D } from "./UseWobble3D";
11+
12+
const meta = {
13+
title: "3D/useWobble3D",
14+
component: UseWobble3D,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseWobble3D>;
18+
19+
export default meta;
20+
type Story = StoryObj<typeof meta>;
21+
22+
const storySetting = {
23+
args: WOBBLE3D_PARAMS,
24+
argTypes: setArgTypes<Wobble3DParams>(WOBBLE3D_PARAMS),
25+
};
26+
export const Wobble3D: Story = {
27+
render: (args) => <UseWobble3D {...args} />,
28+
...storySetting,
29+
};

‎README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ npm install @funtech-inc/use-shader-fx
3939
<td><a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-usealphablending--docs">useAlphaBlending</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-useblending--docs">useBlending</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-usebrightnesspicker--docs">useBrightnessPicker</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-usecovertexture--docs">useCoverTexture</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-useduotone--docs">useDuoTone</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-usefxblending--docs">useFxBlending</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-usefxtexture--docs">useFxTexture</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/utils-usehsv--docs">useHSV</a></td>
4040
</tr>
4141

42+
<tr>
43+
<th><strong><a href="#3D">3D</a></strong></th>
44+
<td><a href="https://use-shader-fx-stories.vercel.app/?path=/docs/3d-usemorphparticles--docs">useMorphParticles</a>, <a href="https://use-shader-fx-stories.vercel.app/?path=/docs/3d-usewobble3d--docs">useWobble3D</a></td>
45+
</tr>
46+
4247
</table>
4348
※ The hook with `~~Texutre` calculates the texture resolution and canvas resolution and covers the texture.
4449

@@ -450,3 +455,28 @@ Generate an FBO array to copy the texture.
450455
const [renderTargets, copyTexture] = useCopyTexture(UseFboProps, length);
451456
copyTexture(gl, index); // return texture
452457
```
458+
459+
# 3D
460+
461+
The `3D` series has a set of exported hooks, each with `Create`, like `useCreateWobble3D`, which can be used as a texture, but also to add `object3D` as a `primitive` to an r3f scene. It is also possible to add `object3D` as a `primitive` to an r3f scene.
462+
463+
```tsx
464+
const [updateWobble, wobble] = useCreateWobble3D({
465+
baseMaterial: THREE.MeshPhysicalMaterial,
466+
materialParameters: {
467+
roughness: 0.0,
468+
transmission: 1,
469+
thickness: 1,
470+
},
471+
});
472+
useFrame((props) => updateWobble(props));
473+
return (
474+
<mesh>
475+
<Environment preset="warehouse" background />
476+
<primitive object={wobble.mesh} />
477+
</mesh>
478+
);
479+
```
480+
481+
👉 [wobble3D demo](https://use-shader-fx.vercel.app/useWobble3D) 👈
482+
👉 [morphParticles demo](https://use-shader-fx.vercel.app/useMorphParticles) 👈

‎app/ShaderFx.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const ShaderFx = ({
2525
return;
2626
}
2727
console.log(`dpr:${dpr}`);
28-
// setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
28+
setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
2929
}}>
3030
<Suspense fallback={null}>{children}</Suspense>
3131
{/* <Perf position={"bottom-left"} minimal={false} /> */}

‎app/useMorphParticles/Playground.tsx‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
Size,
1111
} from "@react-three/fiber";
1212
import {
13+
useMorphParticles,
1314
useCreateMorphParticles,
1415
MORPHPARTICLES_PARAMS,
1516
MorphParticlesParams,
@@ -29,10 +30,10 @@ const setGUI = (gui: GUI) => {
2930
gui.add(CONFIG, "blurAlpha", 0, 1, 0.01);
3031
gui.add(CONFIG, "blurRadius", 0, 2, 0.01);
3132
gui.add(CONFIG, "pointSize", 0.01, 2, 0.01);
32-
gui.addColor(CONFIG, "color0");
33-
gui.addColor(CONFIG, "color1");
34-
gui.addColor(CONFIG, "color2");
35-
gui.addColor(CONFIG, "color3");
33+
// gui.addColor(CONFIG, "color0");
34+
// gui.addColor(CONFIG, "color1");
35+
// gui.addColor(CONFIG, "color2");
36+
// gui.addColor(CONFIG, "color3");
3637
gui.add(CONFIG, "wobbleStrength", 0, 10, 0.01);
3738
gui.add(CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
3839
gui.add(CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
@@ -85,7 +86,7 @@ export const Playground = () => {
8586
scene: false,
8687
size,
8788
dpr: viewport.dpr,
88-
geometry: new THREE.IcosahedronGeometry(2.5, 50),
89+
geometry: useMemo(() => new THREE.IcosahedronGeometry(2.5, 50), []),
8990
positions: morphList,
9091
uvs: uvList,
9192
// geometry: new THREE.PlaneGeometry(5, 5, 100, 100),
@@ -106,7 +107,6 @@ export const Playground = () => {
106107
updateFluid(props, {
107108
pointerValues: updatePointer(refPointer.current),
108109
});
109-
// updateFluid(props);
110110
updatePoints(props, {
111111
...setConfig(),
112112
displacement: fluid,
@@ -115,7 +115,7 @@ export const Playground = () => {
115115
// map: funkun,
116116
// alphaMap: funkunAlpha,
117117
beat: b.beat,
118-
// morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
118+
morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
119119
// morphProgress: 0.5,
120120
});
121121
updateGUI();
@@ -132,3 +132,49 @@ export const Playground = () => {
132132
</mesh>
133133
);
134134
};
135+
136+
/*===============================================
137+
you can also use useMorphParticles (FBO)
138+
===============================================*/
139+
// export const Playground = () => {
140+
// const { size, viewport, scene, camera } = useThree();
141+
142+
// const [updatePoints, setPoints, { output }] = useMorphParticles({
143+
// camera,
144+
// size,
145+
// dpr: viewport.dpr,
146+
// geometry: new THREE.IcosahedronGeometry(2.5, 50),
147+
// positions: morphList,
148+
// uvs: uvList,
149+
// // geometry: new THREE.PlaneGeometry(5, 5, 100, 100),
150+
// });
151+
152+
// const beat = useBeat(140, "easeOutCubic");
153+
// const updatePointer = usePointer();
154+
// const refPointer = useRef(new THREE.Vector2(0, 0));
155+
// const handlePointerMove = (e: any) => {
156+
// if (!e?.pointer) {
157+
// return;
158+
// }
159+
// refPointer.current = e.pointer;
160+
// };
161+
162+
// useFrame((props) => {
163+
// const b = beat(props.clock);
164+
// updatePoints(props, {
165+
// ...setConfig(),
166+
// // map: funkun,
167+
// // alphaMap: funkunAlpha,
168+
// beat: b.beat,
169+
// morphProgress: Math.max(Math.sin(props.clock.getElapsedTime() / 2), 0),
170+
// // morphProgress: 0.5,
171+
// });
172+
// });
173+
174+
// return (
175+
// <mesh>
176+
// <planeGeometry args={[2, 2]} />
177+
// <fxMaterial key={FxMaterial.key} u_fx={output} />
178+
// </mesh>
179+
// );
180+
// };

0 commit comments

Comments
 (0)