Skip to content

Commit f4d53a9

Browse files
author
takuma-hmng8
committed
add useDomSyncer , useWave , useFxTexture
1 parent b72cc93 commit f4d53a9

File tree

81 files changed

+3888
-218
lines changed

Some content is hidden

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

81 files changed

+3888
-218
lines changed

‎.storybook/stories/UseBrush.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
55
import GUI from "lil-gui";
66
import { useGUI } from "../../utils/useGUI";
77
import { CONSTANT } from "../constant";
8-
import { useBrush, useTransitionBg } from "../../packages/use-shader-fx/src";
8+
import { useBrush, useFxTexture } from "../../packages/use-shader-fx/src";
99
import {
1010
BrushParams,
1111
BRUSH_PARAMS,
@@ -59,11 +59,11 @@ export const UseBrushWithTexture = (args: BrushParams) => {
5959
const fxRef = React.useRef<FxMaterialProps>();
6060
const size = useThree((state) => state.size);
6161
const dpr = useThree((state) => state.viewport.dpr);
62-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
62+
const [updateFxTexture] = useFxTexture({ size, dpr });
6363
const [updateBrush] = useBrush({ size, dpr });
6464

6565
useFrame((props) => {
66-
const bgTexture = updateTransitionBg(props, {
66+
const bgTexture = updateFxTexture(props, {
6767
textureResolution: CONSTANT.textureResolution,
6868
texture0: bg,
6969
});

‎.storybook/stories/UseDuoTone.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as THREE from "three";
33
import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
55
import { CONSTANT } from "../constant";
6-
import { useDuoTone, useTransitionBg } from "../../packages/use-shader-fx/src";
6+
import { useDuoTone, useFxTexture } from "../../packages/use-shader-fx/src";
77
import {
88
DuoToneParams,
99
DUOTONE_PARAMS,
@@ -31,11 +31,11 @@ export const UseDuoTone = (args: DuoToneParams) => {
3131
const fxRef = React.useRef<FxMaterialProps>();
3232
const size = useThree((state) => state.size);
3333
const dpr = useThree((state) => state.viewport.dpr);
34-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
34+
const [updateFxTexture] = useFxTexture({ size, dpr });
3535
const [updateDuoTone] = useDuoTone({ size, dpr });
3636

3737
useFrame((props) => {
38-
const bgTexture = updateTransitionBg(props, {
38+
const bgTexture = updateFxTexture(props, {
3939
textureResolution: CONSTANT.textureResolution,
4040
texture0: bg,
4141
});

‎.storybook/stories/UseFluid.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import * as React from "react";
22
import * as THREE from "three";
33
import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
4-
import {
5-
FxTextureMaterial,
6-
FxTextureMaterialProps,
7-
} from "../../utils/fxTextureMaterial";
84
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
95
import { CONSTANT } from "../constant";
106
import GUI from "lil-gui";
117
import { useGUI } from "../../utils/useGUI";
12-
import { useFluid, useTransitionBg } from "../../packages/use-shader-fx/src";
8+
import { useFluid, useFxTexture } from "../../packages/use-shader-fx/src";
139
import {
1410
FLUID_PARAMS,
1511
FluidParams,
1612
} from "../../packages/use-shader-fx/src/hooks/useFluid";
1713

18-
extend({ FxMaterial, FxTextureMaterial });
14+
extend({ FxMaterial });
1915

2016
const CONFIG: FluidParams = structuredClone(FLUID_PARAMS);
2117
const setGUI = (gui: GUI) => {
@@ -63,31 +59,35 @@ export const UseFluid = (args: FluidParams) => {
6359

6460
export const UseFluidWithTexture = (args: FluidParams) => {
6561
const updateGUI = useGUI(setGUI);
66-
const fxRef = React.useRef<FxTextureMaterialProps>();
62+
const fxRef = React.useRef<FxMaterialProps>();
6763
const size = useThree((state) => state.size);
6864
const dpr = useThree((state) => state.viewport.dpr);
6965
const [updateFluid] = useFluid({ size, dpr });
7066

7167
const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
72-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
68+
const [updateFxTexture] = useFxTexture({ size, dpr });
7369

7470
useFrame((props) => {
75-
const bgTexture = updateTransitionBg(props, {
71+
const fx = updateFluid(props, setConfig());
72+
73+
const bgTexture = updateFxTexture(props, {
74+
map: fx,
75+
padding: 0.1,
76+
mapIntensity: 0.3,
77+
edgeIntensity: 0.3,
7678
textureResolution: CONSTANT.textureResolution,
7779
texture0: bg,
7880
});
7981

80-
const fx = updateFluid(props, setConfig());
81-
82-
fxRef.current!.u_postFx = bgTexture;
83-
fxRef.current!.u_fx = fx;
82+
fxRef.current!.u_fx = bgTexture;
83+
fxRef.current!.u_alpha = 0.0;
8484
updateGUI();
8585
});
8686

8787
return (
8888
<mesh>
8989
<planeGeometry args={[2, 2]} />
90-
<fxTextureMaterial key={FxTextureMaterial.key} ref={fxRef} />
90+
<fxMaterial key={FxMaterial.key} ref={fxRef} />
9191
</mesh>
9292
);
9393
};

‎.storybook/stories/UseFogProjection.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import GUI from "lil-gui";
77
import { useGUI } from "../../utils/useGUI";
88
import {
99
useFogProjection,
10-
useTransitionBg,
10+
useFxTexture,
1111
useNoise,
1212
} from "../../packages/use-shader-fx/src";
1313
import {
@@ -42,12 +42,12 @@ export const UseFogProjection = (args: FogProjectionParams) => {
4242
const fxRef = React.useRef<FxMaterialProps>();
4343
const size = useThree((state) => state.size);
4444
const dpr = useThree((state) => state.viewport.dpr);
45-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
45+
const [updateFxTexture] = useFxTexture({ size, dpr });
4646
const [updateNoise] = useNoise({ size, dpr });
4747
const [updateFogProjection] = useFogProjection({ size, dpr });
4848

4949
useFrame((props) => {
50-
const bgTexture = updateTransitionBg(props, {
50+
const bgTexture = updateFxTexture(props, {
5151
textureResolution: CONSTANT.textureResolution,
5252
texture0: bg,
5353
});

‎.storybook/stories/UseTransitionBg.tsx‎ renamed to ‎.storybook/stories/UseFxTexture.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,34 @@ import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
55
import { CONSTANT } from "../constant";
66
import GUI from "lil-gui";
77
import { useGUI } from "../../utils/useGUI";
8-
import { useTransitionBg, useNoise } from "../../packages/use-shader-fx/src";
8+
import { useFxTexture, useNoise } from "../../packages/use-shader-fx/src";
99
import {
10-
TransitionBgParams,
11-
TRANSITIONBG_PARAMS,
12-
} from "../../packages/use-shader-fx/src/hooks/useTransitionBg";
10+
FxTextureParams,
11+
FXTEXTURE_PARAMS,
12+
} from "../../packages/use-shader-fx/src/hooks/useFxTexture";
1313

1414
extend({ FxMaterial });
1515

16-
const CONFIG: TransitionBgParams = structuredClone(TRANSITIONBG_PARAMS);
16+
const CONFIG: FxTextureParams = structuredClone(FXTEXTURE_PARAMS);
1717
const DIR = new THREE.Vector2(0, 0);
1818
const setGUI = (gui: GUI) => {
19-
gui.add(CONFIG, "noiseStrength", 0, 1, 0.01);
19+
gui.add(CONFIG, "mapIntensity", 0, 1, 0.01);
2020
gui.add(CONFIG, "progress", 0, 1, 0.01);
2121
gui.add(DIR, "x", -1, 1, 0.01);
2222
gui.add(DIR, "y", -1, 1, 0.01);
2323
};
2424
const setConfig = () => {
2525
return {
26-
noiseStrength: CONFIG.noiseStrength,
26+
mapIntensity: CONFIG.mapIntensity,
2727
progress: CONFIG.progress,
2828
dir: DIR,
29-
} as TransitionBgParams;
29+
} as FxTextureParams;
3030
};
3131

3232
/**
33-
* Transition the two background textures using the progress value. Noise can also be added
33+
* Textures can be affected by a map; it is also possible to transition between two textures.
3434
*/
35-
export const UseTransitionBg = (args: TransitionBgParams) => {
35+
export const UseFxTexture = (args: FxTextureParams) => {
3636
const updateGUI = useGUI(setGUI);
3737
const [bg, momo] = useLoader(THREE.TextureLoader, [
3838
"thumbnail.jpg",
@@ -41,13 +41,13 @@ export const UseTransitionBg = (args: TransitionBgParams) => {
4141
const fxRef = React.useRef<FxMaterialProps>();
4242
const size = useThree((state) => state.size);
4343
const dpr = useThree((state) => state.viewport.dpr);
44-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
44+
const [updateFxTexture] = useFxTexture({ size, dpr });
4545
const [updateNoise] = useNoise({ size, dpr });
4646

4747
useFrame((props) => {
4848
const noise = updateNoise(props);
49-
const fx = updateTransitionBg(props, {
50-
noiseMap: noise,
49+
const fx = updateFxTexture(props, {
50+
map: noise,
5151
textureResolution: CONSTANT.textureResolution,
5252
texture0: bg,
5353
texture1: momo,

‎.storybook/stories/UseNoise.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from "react";
22
import { useFrame, extend, useThree } from "@react-three/fiber";
3-
import { FxTextureMaterial } from "../../utils/fxTextureMaterial";
43
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
54
import GUI from "lil-gui";
65
import { useGUI } from "../../utils/useGUI";
@@ -10,7 +9,7 @@ import {
109
NOISE_PARAMS,
1110
} from "../../packages/use-shader-fx/src/hooks/useNoise";
1211

13-
extend({ FxMaterial, FxTextureMaterial });
12+
extend({ FxMaterial });
1413

1514
const CONFIG: NoiseParams = structuredClone(NOISE_PARAMS);
1615
const setGUI = (gui: GUI) => {

‎.storybook/stories/UseRipple.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,16 @@ 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 {
6-
FxTextureMaterial,
7-
FxTextureMaterialProps,
8-
} from "../../utils/fxTextureMaterial";
95
import GUI from "lil-gui";
106
import { useGUI } from "../../utils/useGUI";
117
import { CONSTANT } from "../constant";
12-
import { useRipple, useTransitionBg } from "../../packages/use-shader-fx/src";
8+
import { useRipple, useFxTexture } from "../../packages/use-shader-fx/src";
139
import {
1410
RippleParams,
1511
RIPPLE_PARAMS,
1612
} from "../../packages/use-shader-fx/src/hooks/useRipple";
1713

18-
extend({ FxMaterial, FxTextureMaterial });
14+
extend({ FxMaterial });
1915

2016
const CONFIG: RippleParams = structuredClone(RIPPLE_PARAMS);
2117
const setGUI = (gui: GUI) => {
@@ -61,27 +57,30 @@ export const UseRippleWithTexture = (args: RippleParams) => {
6157
"smoke.png",
6258
]);
6359
const updateGUI = useGUI(setGUI);
64-
const fxRef = React.useRef<FxTextureMaterialProps>();
60+
const fxRef = React.useRef<FxMaterialProps>();
6561
const size = useThree((state) => state.size);
6662
const dpr = useThree((state) => state.viewport.dpr);
67-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
63+
const [updateFxTexture] = useFxTexture({ size, dpr });
6864
const [updateRipple] = useRipple({ size, texture: ripple });
6965

7066
useFrame((props) => {
71-
const bgTexture = updateTransitionBg(props, {
67+
const fx = updateRipple(props, setConfig());
68+
69+
const bgTexture = updateFxTexture(props, {
7270
textureResolution: CONSTANT.textureResolution,
7371
texture0: bg,
72+
map: fx,
73+
mapIntensity: 1.3,
7474
});
75-
const fx = updateRipple(props, setConfig());
76-
fxRef.current!.u_postFx = bgTexture;
77-
fxRef.current!.u_fx = fx;
75+
76+
fxRef.current!.u_fx = bgTexture;
7877
updateGUI();
7978
});
8079

8180
return (
8281
<mesh>
8382
<planeGeometry args={[2, 2]} />
84-
<fxTextureMaterial key={FxTextureMaterial.key} ref={fxRef} />
83+
<fxMaterial key={FxMaterial.key} ref={fxRef} />
8584
</mesh>
8685
);
8786
};

‎.storybook/stories/UseSimpleBlur.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
import * as React from "react";
22
import * as THREE from "three";
3-
import { useFrame, extend, useThree, useLoader} from "@react-three/fiber";
4-
import { FxTextureMaterial } from "../../utils/fxTextureMaterial";
3+
import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
54
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
65
import GUI from "lil-gui";
76
import { useGUI } from "../../utils/useGUI";
87
import { CONSTANT } from "../constant";
9-
import { useSimpleBlur,useTransitionBg} from "../../packages/use-shader-fx/src";
8+
import { useSimpleBlur, useFxTexture } from "../../packages/use-shader-fx/src";
109
import {
1110
SimpleBlurParams,
1211
SIMPLEBLUR_PARAMS,
1312
} from "../../packages/use-shader-fx/src/hooks/useSimpleBlur";
1413

15-
16-
extend({ FxMaterial, FxTextureMaterial });
14+
extend({ FxMaterial });
1715

1816
const CONFIG: SimpleBlurParams = structuredClone(SIMPLEBLUR_PARAMS);
1917
const setGUI = (gui: GUI) => {
@@ -34,17 +32,17 @@ export const UseSimpleBlur = (args: SimpleBlurParams) => {
3432
const fxRef = React.useRef<FxMaterialProps>();
3533
const size = useThree((state) => state.size);
3634
const dpr = useThree((state) => state.viewport.dpr);
37-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
35+
const [updateFxTexture] = useFxTexture({ size, dpr });
3836
const [updateSimpleBlur] = useSimpleBlur({ size, dpr });
3937

4038
useFrame((props) => {
41-
const bgTexture = updateTransitionBg(props, {
42-
imageResolution: CONSTANT.imageResolution,
39+
const bgTexture = updateFxTexture(props, {
40+
textureResolution: CONSTANT.textureResolution,
4341
texture0: bg,
44-
});
42+
});
4543
const fx = updateSimpleBlur(props, {
4644
...setConfig(),
47-
texture: bgTexture
45+
texture: bgTexture,
4846
});
4947
fxRef.current!.u_fx = fx;
5048
updateGUI();

0 commit comments

Comments
 (0)