Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 068819e

Browse files
Merge pull request #28 from takuma-hmng8/dev
add useDomSyncer , useWave , useFxTexture
2 parents b72cc93 + f4d53a9 commit 068819e

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)

AltStyle によって変換されたページ (->オリジナル) /