Skip to content

Commit beab1d5

Browse files
author
takuma-hmng8
committed
2.26
1 parent 9fe6adf commit beab1d5

Some content is hidden

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

49 files changed

+552
-162
lines changed

‎.storybook/constant.ts

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎.storybook/public/app-head.jpg

689 KB
Loading

‎.storybook/public/favicon.ico

116 KB
Binary file not shown.

‎.storybook/public/logo.svg

Lines changed: 49 additions & 16 deletions
Loading

‎.storybook/public/thumbnail.jpg

561 KB
Loading

‎.storybook/stories/UseBlending.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from "react";
22
import * as THREE from "three";
33
import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
5-
import { CONSTANT } from "../constant";
65
import GUI from "lil-gui";
76
import { useGUI } from "../../utils/useGUI";
87
import {
@@ -11,11 +10,12 @@ import {
1110
useNoise,
1211
useBrightnessPicker,
1312
useFluid,
13+
useCoverTexture,
1414
} from "../../packages/use-shader-fx/src";
1515
import {
1616
BlendingParams,
1717
BLENDING_PARAMS,
18-
} from "../../packages/use-shader-fx/src/hooks/useBlending";
18+
} from "../../packages/use-shader-fx/src/fxs/utils/useBlending";
1919

2020
extend({ FxMaterial });
2121

@@ -36,14 +36,14 @@ const setConfig = () => {
3636
*/
3737
export const UseBlending = (args: BlendingParams) => {
3838
const updateGUI = useGUI(setGUI);
39-
const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
39+
const [bg] = useLoader(THREE.TextureLoader, ["momo.jpg"]);
4040
const fxRef = React.useRef<FxMaterialProps>();
4141
const { size, dpr } = useThree((state) => {
4242
return { size: state.size, dpr: state.viewport.dpr };
4343
});
44-
const [updateFxTexture] = useFxTexture({ size, dpr });
44+
const [updateCover] = useCoverTexture({ size, dpr });
4545
const [updateNoise] = useNoise({ size, dpr });
46-
const [updateFluid, setFluid] = useFluid({ size, dpr });
46+
const [updateFluid, setFluid, { output: fluid }] = useFluid({ size, dpr });
4747
const [updateBlending, setBlending] = useBlending({ size, dpr });
4848
const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
4949

@@ -65,9 +65,8 @@ export const UseBlending = (args: BlendingParams) => {
6565
});
6666

6767
useFrame((props) => {
68-
const bgTexture = updateFxTexture(props, {
69-
textureResolution: CONSTANT.textureResolution,
70-
texture0: bg,
68+
const bgTexture = updateCover(props, {
69+
texture: bg,
7170
});
7271
const fluid = updateFluid(props);
7372
const picked = updateBrightnessPicker(props, { texture: fluid });

‎.storybook/stories/UseBrightnessPicker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import {
1212
BrightnessPickerParams,
1313
BRIGHTNESSPICKER_PARAMS,
14-
} from "../../packages/use-shader-fx/src/hooks/useBrightnessPicker";
14+
} from "../../packages/use-shader-fx/src/fxs/utils/useBrightnessPicker";
1515

1616
extend({ FxMaterial });
1717

‎.storybook/stories/UseBrush.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
55
import GUI from "lil-gui";
66
import { useGUI } from "../../utils/useGUI";
7-
import { CONSTANT } from "../constant";
87
import { useBrush, useFxTexture } from "../../packages/use-shader-fx/src";
98
import {
109
BrushParams,
1110
BRUSH_PARAMS,
12-
} from "../../packages/use-shader-fx/src/hooks/useBrush";
11+
} from "../../packages/use-shader-fx/src/fxs/interactions/useBrush";
1312

1413
extend({ FxMaterial });
1514

@@ -57,16 +56,15 @@ export const UseBrushWithTexture = (args: BrushParams) => {
5756
return { size: state.size, dpr: state.viewport.dpr };
5857
});
5958
const [updateFxTexture] = useFxTexture({ size, dpr });
60-
const [updateBrush] = useBrush({ size, dpr });
59+
const [updateBrush, setBrush] = useBrush({ size, dpr });
6160

6261
useFrame((props) => {
6362
const bgTexture = updateFxTexture(props, {
64-
textureResolution: CONSTANT.textureResolution,
6563
texture0: bg,
6664
});
6765
const fx = updateBrush(props, {
68-
texture: bgTexture,
6966
...setConfig(),
67+
texture: bgTexture,
7068
});
7169
fxRef.current!.u_fx = fx;
7270
updateGUI();

‎.storybook/stories/UseChromaKey.stories.tsx

Lines changed: 24 additions & 0 deletions
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 { UseChromaKey } from "./UseChromaKey";
7+
import {
8+
CHROMAKEY_PARAMS,
9+
ChromaKeyParams,
10+
} from "../../packages/use-shader-fx/src/fxs/misc/useChromaKey";
11+
12+
const meta = {
13+
title: "misc/useChromaKey",
14+
component: UseChromaKey,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseChromaKey>;
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
args: CHROMAKEY_PARAMS,
23+
argTypes: setArgTypes<ChromaKeyParams>(CHROMAKEY_PARAMS),
24+
};

‎.storybook/stories/UseChromaKey.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
useBlending,
9+
useFxTexture,
10+
useNoise,
11+
useBrightnessPicker,
12+
useFluid,
13+
useChromaKey,
14+
useCoverTexture,
15+
} from "../../packages/use-shader-fx/src";
16+
import {
17+
CHROMAKEY_PARAMS,
18+
ChromaKeyParams,
19+
} from "../../packages/use-shader-fx/src/fxs/misc/useChromaKey";
20+
21+
extend({ FxMaterial });
22+
23+
const CONFIG: ChromaKeyParams = structuredClone(CHROMAKEY_PARAMS);
24+
const setGUI = (gui: GUI) => {
25+
gui.addColor(CONFIG, "keyColor");
26+
gui.add(CONFIG, "similarity", 0, 1, 0.01);
27+
gui.add(CONFIG, "smoothness", 0, 1, 0.01);
28+
gui.add(CONFIG, "spill", 0, 1, 0.01);
29+
gui.addColor(CONFIG, "color");
30+
gui.add(CONFIG, "contrast", 0, 2, 0.01);
31+
gui.add(CONFIG, "brightness", 0, 2, 0.01);
32+
gui.add(CONFIG, "gamma", 0, 2, 0.01);
33+
};
34+
const setConfig = () => {
35+
return {
36+
...CONFIG,
37+
} as ChromaKeyParams;
38+
};
39+
40+
export const UseChromaKey = (args: ChromaKeyParams) => {
41+
const updateGUI = useGUI(setGUI);
42+
const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
43+
const fxRef = React.useRef<FxMaterialProps>();
44+
const { size, dpr } = useThree((state) => {
45+
return { size: state.size, dpr: state.viewport.dpr };
46+
});
47+
48+
const [update, set, { output }] = useChromaKey({ size, dpr });
49+
50+
const [updateCover, setCover, { output: cover }] = useCoverTexture({
51+
size,
52+
dpr,
53+
});
54+
55+
setCover({
56+
texture: bg,
57+
});
58+
59+
useFrame((props) => {
60+
updateCover(props);
61+
update(props, {
62+
...setConfig(),
63+
texture: cover,
64+
});
65+
updateGUI();
66+
});
67+
68+
return (
69+
<mesh>
70+
<planeGeometry args={[2, 2]} />
71+
<fxMaterial
72+
key={FxMaterial.key}
73+
u_fx={output}
74+
u_alpha={0.0}
75+
ref={fxRef}
76+
/>
77+
</mesh>
78+
);
79+
};

‎.storybook/stories/UseColorStrata.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useColorStrata, useNoise } from "../../packages/use-shader-fx/src";
88
import {
99
COLORSTRATA_PARAMS,
1010
ColorStrataParams,
11-
} from "../../packages/use-shader-fx/src/hooks/useColorStrata";
11+
} from "../../packages/use-shader-fx/src/fxs/noises/useColorStrata";
1212

1313
extend({ FxMaterial });
1414

‎.storybook/stories/UseDuoTone.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import * as React from "react";
22
import * as THREE from "three";
33
import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
5-
import { CONSTANT } from "../constant";
65
import { useDuoTone, useFxTexture } from "../../packages/use-shader-fx/src";
76
import {
87
DuoToneParams,
98
DUOTONE_PARAMS,
10-
} from "../../packages/use-shader-fx/src/hooks/useDuoTone";
9+
} from "../../packages/use-shader-fx/src/fxs/utils/useDuoTone";
1110
import GUI from "lil-gui";
1211
import { useGUI } from "../../utils/useGUI";
1312

@@ -36,7 +35,6 @@ export const UseDuoTone = (args: DuoToneParams) => {
3635

3736
useFrame((props) => {
3837
const bgTexture = updateFxTexture(props, {
39-
textureResolution: CONSTANT.textureResolution,
4038
texture0: bg,
4139
});
4240
const fx = updateDuoTone(props, {

‎.storybook/stories/UseFluid.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@ import * as React from "react";
22
import * as THREE from "three";
33
import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
5-
import { CONSTANT } from "../constant";
65
import GUI from "lil-gui";
76
import { useGUI } from "../../utils/useGUI";
87
import { useFluid, useFxTexture } from "../../packages/use-shader-fx/src";
98
import {
109
FLUID_PARAMS,
1110
FluidParams,
12-
} from "../../packages/use-shader-fx/src/hooks/useFluid";
11+
} from "../../packages/use-shader-fx/src/fxs/interactions/useFluid";
1312

1413
extend({ FxMaterial });
1514

@@ -71,7 +70,6 @@ export const UseFluidWithTexture = (args: FluidParams) => {
7170
padding: 0.1,
7271
mapIntensity: 0.3,
7372
edgeIntensity: 0.3,
74-
textureResolution: CONSTANT.textureResolution,
7573
texture0: bg,
7674
});
7775

‎.storybook/stories/UseFxBlending.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from "react";
22
import * as THREE from "three";
33
import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
5-
import { CONSTANT } from "../constant";
65
import GUI from "lil-gui";
76
import { useGUI } from "../../utils/useGUI";
87
import {
@@ -13,7 +12,7 @@ import {
1312
import {
1413
FxBlendingParams,
1514
FXBLENDING_PARAMS,
16-
} from "../../packages/use-shader-fx/src/hooks/useFxBlending";
15+
} from "../../packages/use-shader-fx/src/fxs/utils/useFxBlending";
1716

1817
extend({ FxMaterial });
1918

‎.storybook/stories/UseFxTexture.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@ import * as React from "react";
22
import * as THREE from "three";
33
import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
5-
import { CONSTANT } from "../constant";
65
import GUI from "lil-gui";
76
import { useGUI } from "../../utils/useGUI";
87
import { useFxTexture, useNoise } from "../../packages/use-shader-fx/src";
98
import {
109
FxTextureParams,
1110
FXTEXTURE_PARAMS,
12-
} from "../../packages/use-shader-fx/src/hooks/useFxTexture";
11+
} from "../../packages/use-shader-fx/src/fxs/utils/useFxTexture";
1312

1413
extend({ FxMaterial });
1514

@@ -35,11 +34,12 @@ const setConfig = () => {
3534

3635
/**
3736
* 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
3838
*/
3939
export const UseFxTexture = (args: FxTextureParams) => {
4040
const updateGUI = useGUI(setGUI);
4141
const [bg, momo] = useLoader(THREE.TextureLoader, [
42-
"thumbnail.jpg",
42+
"app-head.jpg",
4343
"momo.jpg",
4444
]);
4545
const fxRef = React.useRef<FxMaterialProps>();
@@ -54,7 +54,6 @@ export const UseFxTexture = (args: FxTextureParams) => {
5454
const fx = updateFxTexture(props, {
5555
...setConfig(),
5656
map: noise,
57-
textureResolution: CONSTANT.textureResolution,
5857
texture0: bg,
5958
texture1: momo,
6059
});

‎.storybook/stories/UseNoise.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useNoise } from "../../packages/use-shader-fx/src";
77
import {
88
NoiseParams,
99
NOISE_PARAMS,
10-
} from "../../packages/use-shader-fx/src/hooks/useNoise";
10+
} from "../../packages/use-shader-fx/src/fxs/noises/useNoise";
1111

1212
extend({ FxMaterial });
1313

‎.storybook/stories/UseRipple.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
55
import GUI from "lil-gui";
66
import { useGUI } from "../../utils/useGUI";
7-
import { CONSTANT } from "../constant";
87
import { useRipple, useFxTexture } from "../../packages/use-shader-fx/src";
98
import {
109
RippleParams,
1110
RIPPLE_PARAMS,
12-
} from "../../packages/use-shader-fx/src/hooks/useRipple";
11+
} from "../../packages/use-shader-fx/src/fxs/interactions/useRipple";
1312

1413
extend({ FxMaterial });
1514

@@ -31,8 +30,12 @@ export const UseRipple = (args: RippleParams) => {
3130
const [ripple] = useLoader(THREE.TextureLoader, ["smoke.png"]);
3231
const updateGUI = useGUI(setGUI);
3332
const fxRef = React.useRef<FxMaterialProps>();
34-
const size = useThree((state) => state.size);
35-
const [updateRipple] = useRipple({ size, texture: ripple });
33+
const { size, viewport } = useThree();
34+
const [updateRipple] = useRipple({
35+
size,
36+
texture: ripple,
37+
dpr: viewport.dpr,
38+
});
3639
useFrame((props) => {
3740
const fx = updateRipple(props, setConfig());
3841
fxRef.current!.u_fx = fx;
@@ -64,7 +67,6 @@ export const UseRippleWithTexture = (args: RippleParams) => {
6467
const fx = updateRipple(props, setConfig());
6568

6669
const bgTexture = updateFxTexture(props, {
67-
textureResolution: CONSTANT.textureResolution,
6870
texture0: bg,
6971
map: fx,
7072
mapIntensity: 1.3,

0 commit comments

Comments
 (0)