Skip to content

Commit ed20aff

Browse files
takuma-hmng8takuma-hmng8
authored
Merge pull request #85 from FunTechInc/v1.1.4
V1.1.4
2 parents 8517494 + 50b2d2d commit ed20aff

File tree

132 files changed

+11575
-1609
lines changed

Some content is hidden

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

132 files changed

+11575
-1609
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: 39 additions & 107 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

@@ -283,113 +288,6 @@ usePerformanceMonitor({
283288
});
284289
```
285290

286-
# How to make "custom fxHooks"
287-
288-
With some functions provided by `use-shader-fx`, creating a custom hook is straightforward (the challenging part is only the shader!). Please refer to existing `fxHooks` for details.
289-
290-
In addition, we have prepared a template in the repository below that is useful for creating custom hooks, so please clone and use it in the location where you created your custom hook.
291-
292-
```bash
293-
git clone https://github.com/takuma-hmng8/CreateShaderFx
294-
```
295-
296-
If you can create a cool FX, please contribute!
297-
👉 [CONTRIBUTING](CONTRIBUTING.md)! 👈
298-
299-
## useDoubleFBO
300-
301-
Generates FBO and returns a double-buffered buffer texture after swapping. The `useFBO` of `drei` by default performs `setSize` for `THREE.WebGLRenderTarget` upon changes in `dpr` and `size`, making it challenging to handle buffer textures during changes like dpr adjustments. Therefore, a non-reactive hook against updates of dpr and size was created. It's possible to make them reactive individually through options. If you want to `setSize` at a custom timing, the `fxObject` that the fxHook receives as the third argument also stores `renderTarget`.
302-
303-
```ts
304-
type UseFboProps = {
305-
scene: THREE.Scene;
306-
camera: THREE.Camera;
307-
size: Size;
308-
/** If dpr is set, dpr will be multiplied, default:false */
309-
dpr?: number | false;
310-
/** Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false */
311-
isSizeUpdate?: boolean;
312-
/** Defines the count of MSAA samples. Can only be used with WebGL 2. Default is 0. */
313-
samples?: number;
314-
/** Renders to the depth buffer. Unlike the three.js,　Default is false. */
315-
depthBuffer?: boolean;
316-
/** If set, the scene depth will be rendered to this texture. Default is false. */
317-
depthTexture?: boolean;
318-
};
319-
320-
const [velocityFBO, updateVelocityFBO] = useDoubleFBO(UseFboProps);
321-
```
322-
323-
When you call the update function, it returns a double-buffered texture. The second argument gets a function called before `gl.render()`, allowing for operations like swapping materials or setting uniforms.
324-
325-
```js
326-
const texture = updateVelocityFBO(gl, ({ read, write }) => {
327-
// callback before gl.render()
328-
setMeshMaterial(materials.advectionMaterial);
329-
setUniform(materials.advectionMaterial, "uVelocity", read);
330-
});
331-
```
332-
333-
## useSingleFBO
334-
335-
This is a version without double buffering.
336-
337-
```js
338-
const [renderTarget, updateRenderTarget] = useSingleFBO(UseFboProps);
339-
```
340-
341-
## useCamera
342-
343-
Generates and returns a `THREE.OrthographicCamera`.
344-
345-
```js
346-
const camera = useCamera(size);
347-
```
348-
349-
## useResolution
350-
351-
This hook returns `resolution`. If `dpr` isn't set (or set to false), dpr won't be multiplied.
352-
353-
```ts
354-
const resolution = useResolution(size: Size, dpr: number | false = false);
355-
```
356-
357-
## useAddMesh
358-
359-
Creates a mesh and adds it to scene, geometry, and material. Returns the mesh.
360-
361-
```js
362-
useAddMesh(scene, geometry, material);
363-
```
364-
365-
## setUniform
366-
367-
A function to set values in the uniforms of the shader material.
368-
369-
```js
370-
setUniform(material, "key", someValue);
371-
```
372-
373-
## useParams
374-
375-
Returns the refObject of params and its update function.
376-
377-
```ts
378-
const [params, setParams] = useParams<HooksParams>;
379-
{
380-
// HookPrams
381-
}
382-
```
383-
384-
## useCopyTexture
385-
386-
Generate an FBO array to copy the texture.
387-
388-
```tsx
389-
const [renderTargets, copyTexture] = useCopyTexture(UseFboProps, length);
390-
copyTexture(gl, index); // return texture
391-
```
392-
393291
# Misc
394292

395293
## useDomSyncer
@@ -548,3 +446,37 @@ useFrame((props) => {
548446
}
549447
});
550448
```
449+
450+
## useCopyTexture
451+
452+
Generate an FBO array to copy the texture.
453+
454+
```tsx
455+
const [renderTargets, copyTexture] = useCopyTexture(UseFboProps, length);
456+
copyTexture(gl, index); // return texture
457+
```
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: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ export const ShaderFx = ({
1414
}) => {
1515
const [dpr, setDpr] = useState(1.5);
1616
return (
17-
<Canvas dpr={dpr} gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}>
17+
<Canvas
18+
dpr={dpr}
19+
gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}
20+
shadows>
1821
<PerformanceMonitor
1922
factor={1}
2023
onChange={({ factor }) => {

0 commit comments

Comments
 (0)