Skip to content

Commit fd8559e

Browse files
author
takuma-hmng8
committed
v1.1.1
1 parent beab1d5 commit fd8559e

File tree

95 files changed

+5625
-104
lines changed

Some content is hidden

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

95 files changed

+5625
-104
lines changed

‎.storybook/stories/UseAlphaBlending.stories.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 { UseAlphaBlending } from "./UseAlphaBlending";
7+
import {
8+
ALPHABLENDING_PARAMS,
9+
AlphaBlendingParams,
10+
} from "../../packages/use-shader-fx/src/fxs/utils/useAlphaBlending";
11+
12+
const meta = {
13+
title: "utils/useAlphaBlending",
14+
component: UseAlphaBlending,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseAlphaBlending>;
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
args: ALPHABLENDING_PARAMS,
23+
argTypes: setArgTypes<AlphaBlendingParams>(ALPHABLENDING_PARAMS),
24+
};

‎.storybook/stories/UseAlphaBlending.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from "react";
2+
import * as THREE from "three";
3+
import { useFrame, useLoader, extend, useThree } 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+
useAlphaBlending,
9+
useMarble,
10+
useBrush,
11+
} from "../../packages/use-shader-fx/src";
12+
import {
13+
ALPHABLENDING_PARAMS,
14+
AlphaBlendingParams,
15+
} from "../../packages/use-shader-fx/src/fxs/utils/useAlphaBlending";
16+
17+
extend({ FxMaterial });
18+
19+
const CONFIG: AlphaBlendingParams = structuredClone(ALPHABLENDING_PARAMS);
20+
const setGUI = (gui: GUI) => {};
21+
const setConfig = () => {
22+
return {
23+
...CONFIG,
24+
} as AlphaBlendingParams;
25+
};
26+
27+
export const UseAlphaBlending = (args: AlphaBlendingParams) => {
28+
const updateGUI = useGUI(setGUI);
29+
const fxRef = React.useRef<FxMaterialProps>();
30+
const { size, dpr } = useThree((state) => {
31+
return { size: state.size, dpr: state.viewport.dpr };
32+
});
33+
34+
const [updateBrush, setBrush, { output: brush }] = useBrush({ size, dpr });
35+
const [update, set, { output }] = useAlphaBlending({ size, dpr });
36+
const [updateMarble, setMarble, { output: marble }] = useMarble({
37+
size,
38+
dpr,
39+
});
40+
41+
set({
42+
texture: marble,
43+
map: brush,
44+
});
45+
46+
useFrame((props) => {
47+
updateBrush(props);
48+
updateMarble(props);
49+
update(props);
50+
updateGUI();
51+
});
52+
53+
return (
54+
<mesh>
55+
<planeGeometry args={[2, 2]} />
56+
<fxMaterial
57+
key={FxMaterial.key}
58+
u_fx={output}
59+
u_alpha={0.0}
60+
ref={fxRef}
61+
/>
62+
</mesh>
63+
);
64+
};

‎.storybook/stories/UseBlending.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import GUI from "lil-gui";
66
import { useGUI } from "../../utils/useGUI";
77
import {
88
useBlending,
9-
useFxTexture,
109
useNoise,
1110
useBrightnessPicker,
1211
useFluid,
@@ -42,7 +41,6 @@ export const UseBlending = (args: BlendingParams) => {
4241
return { size: state.size, dpr: state.viewport.dpr };
4342
});
4443
const [updateCover] = useCoverTexture({ size, dpr });
45-
const [updateNoise] = useNoise({ size, dpr });
4644
const [updateFluid, setFluid, { output: fluid }] = useFluid({ size, dpr });
4745
const [updateBlending, setBlending] = useBlending({ size, dpr });
4846
const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });

‎.storybook/stories/UseChromaKey.tsx

-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@ import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
55
import GUI from "lil-gui";
66
import { useGUI } from "../../utils/useGUI";
77
import {
8-
useBlending,
9-
useFxTexture,
10-
useNoise,
11-
useBrightnessPicker,
12-
useFluid,
138
useChromaKey,
149
useCoverTexture,
1510
} from "../../packages/use-shader-fx/src";

‎.storybook/stories/UseCoverTexture.stories.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 { UseCoverTexture } from "./UseCoverTexture";
7+
import {
8+
COVERTEXTURE_PARAMS,
9+
CoverTextureParams,
10+
} from "../../packages/use-shader-fx/src/fxs/utils/useCoverTexture";
11+
12+
const meta = {
13+
title: "utils/useCoverTexture",
14+
component: UseCoverTexture,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseCoverTexture>;
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
args: COVERTEXTURE_PARAMS,
23+
argTypes: setArgTypes<CoverTextureParams>(COVERTEXTURE_PARAMS),
24+
};

‎.storybook/stories/UseCoverTexture.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import * as React from "react";
2+
import * as THREE from "three";
3+
import { useFrame, useLoader, extend, useThree } 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 { useCoverTexture } from "../../packages/use-shader-fx/src";
8+
import {
9+
COVERTEXTURE_PARAMS,
10+
CoverTextureParams,
11+
} from "../../packages/use-shader-fx/src/fxs/utils/useCoverTexture";
12+
13+
extend({ FxMaterial });
14+
15+
const CONFIG: CoverTextureParams = structuredClone(COVERTEXTURE_PARAMS);
16+
const setGUI = (gui: GUI) => {};
17+
const setConfig = () => {
18+
return {
19+
...CONFIG,
20+
} as CoverTextureParams;
21+
};
22+
23+
/** The hook with `~~Texutre` calculates the texture resolution and canvas resolution and covers the texture. */
24+
export const UseCoverTexture = (args: CoverTextureParams) => {
25+
const [bg] = useLoader(THREE.TextureLoader, ["/momo.jpg"]);
26+
const updateGUI = useGUI(setGUI);
27+
const fxRef = React.useRef<FxMaterialProps>();
28+
const { size, dpr } = useThree((state) => {
29+
return { size: state.size, dpr: state.viewport.dpr };
30+
});
31+
32+
const [update, set, { output }] = useCoverTexture({ size, dpr });
33+
34+
set({
35+
texture: bg,
36+
});
37+
38+
useFrame((props) => {
39+
update(props);
40+
updateGUI();
41+
});
42+
43+
return (
44+
<mesh>
45+
<planeGeometry args={[2, 2]} />
46+
<fxMaterial
47+
key={FxMaterial.key}
48+
u_fx={output}
49+
u_alpha={0.0}
50+
ref={fxRef}
51+
/>
52+
</mesh>
53+
);
54+
};

‎.storybook/stories/UseFxTexture.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,9 @@ const setConfig = () => {
3333
};
3434

3535
/**
36-
* Textures can be affected by a map; it is also possible to transition between two textures.
37-
* If the resolution of texture0 and texture1 is different, it is linearly interpolated according to the value of progress
36+
* Textures can be affected by a map; it is also possible to transition between two textures. If the resolution of texture0 and texture1 is different, it is linearly interpolated according to the value of progress
37+
*
38+
* ※ The hook with `~~Texutre` calculates the texture resolution and canvas resolution and covers the texture.
3839
*/
3940
export const UseFxTexture = (args: FxTextureParams) => {
4041
const updateGUI = useGUI(setGUI);

‎.storybook/stories/UseHSV.stories.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 { UseHSV } from "./UseHSV";
7+
import {
8+
HSV_PARAMS,
9+
HSVParams,
10+
} from "../../packages/use-shader-fx/src/fxs/utils/useHSV";
11+
12+
const meta = {
13+
title: "utils/useHSV",
14+
component: UseHSV,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseHSV>;
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
args: HSV_PARAMS,
23+
argTypes: setArgTypes<HSVParams>(HSV_PARAMS),
24+
};

‎.storybook/stories/UseHSV.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from "react";
2+
import * as THREE from "three";
3+
import { useFrame, useLoader, extend, useThree } 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 { useHSV, useCoverTexture } from "../../packages/use-shader-fx/src";
8+
import {
9+
HSV_PARAMS,
10+
HSVParams,
11+
} from "../../packages/use-shader-fx/src/fxs/utils/useHSV";
12+
13+
extend({ FxMaterial });
14+
15+
const CONFIG: HSVParams = structuredClone(HSV_PARAMS);
16+
const setGUI = (gui: GUI) => {
17+
gui.add(CONFIG, "brightness", 0, 10, 0.01);
18+
gui.add(CONFIG, "saturation", 0, 10, 0.01);
19+
};
20+
const setConfig = () => {
21+
return {
22+
...CONFIG,
23+
} as HSVParams;
24+
};
25+
26+
export const UseHSV = (args: HSVParams) => {
27+
const [bg] = useLoader(THREE.TextureLoader, ["/momo.jpg"]);
28+
const updateGUI = useGUI(setGUI);
29+
const fxRef = React.useRef<FxMaterialProps>();
30+
const { size, dpr } = useThree((state) => {
31+
return { size: state.size, dpr: state.viewport.dpr };
32+
});
33+
34+
const [updateCover, setCover, { output: cover }] = useCoverTexture({
35+
size,
36+
dpr,
37+
});
38+
const [update, set, { output }] = useHSV({ size, dpr });
39+
40+
setCover({
41+
texture: bg,
42+
});
43+
44+
useFrame((props) => {
45+
updateCover(props);
46+
update(props, {
47+
...setConfig(),
48+
texture: cover,
49+
});
50+
updateGUI();
51+
});
52+
53+
return (
54+
<mesh>
55+
<planeGeometry args={[2, 2]} />
56+
<fxMaterial
57+
key={FxMaterial.key}
58+
u_fx={output}
59+
u_alpha={0.0}
60+
ref={fxRef}
61+
/>
62+
</mesh>
63+
);
64+
};

‎.storybook/stories/UseMarble.stories.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 { UseMarble } from "./UseMarble";
7+
import {
8+
MARBLE_PARAMS,
9+
MarbleParams,
10+
} from "../../packages/use-shader-fx/src/fxs/noises/useMarble";
11+
12+
const meta = {
13+
title: "noises/useMarble",
14+
component: UseMarble,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseMarble>;
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
args: MARBLE_PARAMS,
23+
argTypes: setArgTypes<MarbleParams>(MARBLE_PARAMS),
24+
};

‎.storybook/stories/UseMarble.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from "react";
2+
import * as THREE from "three";
3+
import { useFrame, useLoader, extend, useThree } 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 { useMarble } from "../../packages/use-shader-fx/src";
8+
import {
9+
MARBLE_PARAMS,
10+
MarbleParams,
11+
} from "../../packages/use-shader-fx/src/fxs/noises/useMarble";
12+
13+
extend({ FxMaterial });
14+
15+
const CONFIG: MarbleParams = structuredClone(MARBLE_PARAMS);
16+
const setGUI = (gui: GUI) => {
17+
gui.add(CONFIG, "pattern", 0, 1000, 1);
18+
gui.add(CONFIG, "complexity", 0, 10, 0.01);
19+
gui.add(CONFIG, "complexityAttenuation", 0, 2, 0.01);
20+
gui.add(CONFIG, "iterations", 0, 10, 1);
21+
gui.add(CONFIG, "timeStrength", 0, 2, 0.01);
22+
gui.add(CONFIG, "scale", 0, 1, 0.001);
23+
};
24+
const setConfig = () => {
25+
return {
26+
...CONFIG,
27+
} as MarbleParams;
28+
};
29+
30+
export const UseMarble = (args: MarbleParams) => {
31+
const updateGUI = useGUI(setGUI);
32+
const fxRef = React.useRef<FxMaterialProps>();
33+
const { size, dpr } = useThree((state) => {
34+
return { size: state.size, dpr: state.viewport.dpr };
35+
});
36+
37+
const [update, set, { output }] = useMarble({ size, dpr });
38+
39+
useFrame((props) => {
40+
update(props, {
41+
...setConfig(),
42+
});
43+
updateGUI();
44+
});
45+
46+
return (
47+
<mesh>
48+
<planeGeometry args={[2, 2]} />
49+
<fxMaterial
50+
key={FxMaterial.key}
51+
u_fx={output}
52+
u_alpha={0.0}
53+
ref={fxRef}
54+
/>
55+
</mesh>
56+
);
57+
};

0 commit comments

Comments
 (0)