Skip to content

Commit 76cc374

Browse files
takuma-hmng8takuma-hmng8
authored
Merge pull request #33 from takuma-hmng8/dev
update Noise
2 parents c33a3e4 + 9473c1b commit 76cc374

File tree

35 files changed

+1027
-573
lines changed

35 files changed

+1027
-573
lines changed

‎.storybook/stories/UseFogProjection.tsx‎ renamed to ‎.storybook/stories/UseBlending.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,37 @@ import { CONSTANT } from "../constant";
66
import GUI from "lil-gui";
77
import { useGUI } from "../../utils/useGUI";
88
import {
9-
useFogProjection,
9+
useBlending,
1010
useFxTexture,
1111
useNoise,
1212
} from "../../packages/use-shader-fx/src";
1313
import {
14-
FogProjectionParams,
15-
FOGPROJECTION_PARAMS,
16-
} from "../../packages/use-shader-fx/src/hooks/useFogProjection";
14+
BlendingParams,
15+
BLENDING_PARAMS,
16+
} from "../../packages/use-shader-fx/src/hooks/useBlending";
1717

1818
extend({ FxMaterial });
1919

20-
const CONFIG: FogProjectionParams = structuredClone(FOGPROJECTION_PARAMS);
20+
const CONFIG: BlendingParams = structuredClone(BLENDING_PARAMS);
2121
const setGUI = (gui: GUI) => {
2222
gui.add(CONFIG, "distortionStrength", 0, 1, 0.01);
23-
gui.add(CONFIG, "fogEdge0", 0, 1, 0.01);
24-
gui.add(CONFIG, "fogEdge1", 0, 1, 0.01);
25-
gui.addColor(CONFIG, "fogColor");
23+
gui.add(CONFIG, "edge0", 0, 1, 0.01);
24+
gui.add(CONFIG, "edge1", 0, 1, 0.01);
25+
gui.addColor(CONFIG, "color");
2626
};
2727
const setConfig = () => {
2828
return {
2929
distortionStrength: CONFIG.distortionStrength,
30-
fogEdge0: CONFIG.fogEdge0,
31-
fogEdge1: CONFIG.fogEdge1,
32-
fogColor: CONFIG.fogColor,
33-
} as FogProjectionParams;
30+
edge0: CONFIG.edge0,
31+
edge1: CONFIG.edge1,
32+
color: CONFIG.color,
33+
} as BlendingParams;
3434
};
3535

3636
/**
37-
* Adds noise to the received texture and returns the texture. It's like projecting an image onto fog!
37+
* Blending the texture passed as map
3838
*/
39-
export const UseFogProjection = (args: FogProjectionParams) => {
39+
export const UseBlending = (args: BlendingParams) => {
4040
const updateGUI = useGUI(setGUI);
4141
const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
4242
const fxRef = React.useRef<FxMaterialProps>();
@@ -45,17 +45,17 @@ export const UseFogProjection = (args: FogProjectionParams) => {
4545
});
4646
const [updateFxTexture] = useFxTexture({ size, dpr });
4747
const [updateNoise] = useNoise({ size, dpr });
48-
const [updateFogProjection] = useFogProjection({ size, dpr });
48+
const [updateBlending] = useBlending({ size, dpr });
4949

5050
useFrame((props) => {
5151
const bgTexture = updateFxTexture(props, {
5252
textureResolution: CONSTANT.textureResolution,
5353
texture0: bg,
5454
});
5555
const noise = updateNoise(props);
56-
const fx = updateFogProjection(props, {
56+
const fx = updateBlending(props, {
5757
texture: bgTexture,
58-
noiseMap: noise,
58+
map: noise,
5959
...setConfig(),
6060
});
6161
fxRef.current!.u_fx = fx;

‎.storybook/stories/UseBrightnessPicker.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import * as React from "react";
2+
import * as THREE from "three";
3+
import { useFrame, 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+
useNoise,
9+
useBrightnessPicker,
10+
} from "../../packages/use-shader-fx/src";
11+
import {
12+
BrightnessPickerParams,
13+
BRIGHTNESSPICKER_PARAMS,
14+
} from "../../packages/use-shader-fx/src/hooks/useBrightnessPicker";
15+
16+
extend({ FxMaterial });
17+
18+
const CONFIG = {
19+
...structuredClone(BRIGHTNESSPICKER_PARAMS),
20+
r: 0.5,
21+
g: 0.5,
22+
b: 0.5,
23+
};
24+
const brightness = new THREE.Vector3(CONFIG.r, CONFIG.g, CONFIG.b);
25+
const setGUI = (gui: GUI) => {
26+
gui.add(CONFIG, "r", 0, 1, 0.01);
27+
gui.add(CONFIG, "g", 0, 1, 0.01);
28+
gui.add(CONFIG, "b", 0, 1, 0.01);
29+
gui.add(CONFIG, "min", 0, 1, 0.01);
30+
gui.add(CONFIG, "max", 0, 1, 0.01);
31+
};
32+
const setConfig = () => {
33+
return {
34+
brightness: brightness.set(CONFIG.r, CONFIG.g, CONFIG.b),
35+
min: CONFIG.min,
36+
max: CONFIG.max,
37+
} as BrightnessPickerParams;
38+
};
39+
40+
/**
41+
* Blending the texture passed as map
42+
*/
43+
export const UseBrightnessPicker = (args: BrightnessPickerParams) => {
44+
const updateGUI = useGUI(setGUI);
45+
const fxRef = React.useRef<FxMaterialProps>();
46+
const { size, dpr } = useThree((state) => {
47+
return { size: state.size, dpr: state.viewport.dpr };
48+
});
49+
50+
const [updateNoise] = useNoise({ size, dpr });
51+
const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
52+
53+
useFrame((props) => {
54+
const noise = updateNoise(props);
55+
const fx = updateBrightnessPicker(props, {
56+
texture: noise,
57+
...setConfig(),
58+
});
59+
fxRef.current!.u_fx = fx;
60+
fxRef.current!.u_alpha = 0.0;
61+
updateGUI();
62+
});
63+
64+
return (
65+
<mesh>
66+
<planeGeometry args={[2, 2]} />
67+
<fxMaterial key={FxMaterial.key} ref={fxRef} />
68+
</mesh>
69+
);
70+
};

‎.storybook/stories/UseFxTexture.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ extend({ FxMaterial });
1616
const CONFIG: FxTextureParams = structuredClone(FXTEXTURE_PARAMS);
1717
const DIR = new THREE.Vector2(0, 0);
1818
const setGUI = (gui: GUI) => {
19-
gui.add(CONFIG, "mapIntensity", 0, 1, 0.01);
19+
gui.add(CONFIG, "mapIntensity", 0, 10, 0.1);
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);

‎.storybook/stories/useFogProjection.stories.tsx‎ renamed to ‎.storybook/stories/useBlending.stories.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import type { StoryObj } from "@storybook/react";
33
import { setArgTypes } from "../utils/setArgTypes";
44
import { Setup } from "../utils/Setup";
55
import type { Meta } from "@storybook/react";
6-
import { UseFogProjection } from "./UseFogProjection";
6+
import { UseBlending } from "./UseBlending";
77
import {
8-
FogProjectionParams,
9-
FOGPROJECTION_PARAMS,
10-
} from "../../packages/use-shader-fx/src/hooks/useFogProjection";
8+
BlendingParams,
9+
BLENDING_PARAMS,
10+
} from "../../packages/use-shader-fx/src/hooks/useBlending";
1111

1212
const meta = {
13-
title: "useFogProjection",
14-
component: UseFogProjection,
13+
title: "useBlending",
14+
component: UseBlending,
1515
tags: ["autodocs"],
1616
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17-
} satisfies Meta<typeof UseFogProjection>;
17+
} satisfies Meta<typeof UseBlending>;
1818
export default meta;
1919
type Story = StoryObj<typeof meta>;
2020

2121
export const Default: Story = {
22-
args: FOGPROJECTION_PARAMS,
23-
argTypes: setArgTypes<FogProjectionParams>(FOGPROJECTION_PARAMS),
22+
args: BLENDING_PARAMS,
23+
argTypes: setArgTypes<BlendingParams>(BLENDING_PARAMS),
2424
};

‎.storybook/stories/useBrightnessPicker.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 { UseBrightnessPicker } from "./UseBrightnessPicker";
7+
import {
8+
BrightnessPickerParams,
9+
BRIGHTNESSPICKER_PARAMS,
10+
} from "../../packages/use-shader-fx/src/hooks/useBrightnessPicker";
11+
12+
const meta = {
13+
title: "useBrightnessPicker",
14+
component: UseBrightnessPicker,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseBrightnessPicker>;
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
args: BRIGHTNESSPICKER_PARAMS,
23+
argTypes: setArgTypes<BrightnessPickerParams>(BRIGHTNESSPICKER_PARAMS),
24+
};

‎app/_home/config.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import * as THREE from "three";
22
import GUI from "lil-gui";
33

44
import { FLUID_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFluid";
5-
import { FOGPROJECTION_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFogProjection";
5+
import { BLENDING_PARAMS } from "@/packages/use-shader-fx/src/hooks/useBlending";
66

77
export const CONFIG = {
88
fogProjection: {
9-
...structuredClone(FOGPROJECTION_PARAMS),
10-
fogColor: new THREE.Color(0xffffff),
11-
fogEdge0: 0.5,
12-
fogEdge1: 1.0,
13-
distortionStrength: 0.2,
9+
...structuredClone(BLENDING_PARAMS),
10+
fogColor: new THREE.Color(0x000000),
11+
fogEdge0: 0.0,
12+
fogEdge1: 0.9,
13+
distortionStrength: 3.0,
1414
},
1515
fluid: {
1616
...structuredClone(FLUID_PARAMS),

‎app/_home/index.tsx‎

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,19 @@ import { useFrame, extend, useThree } from "@react-three/fiber";
33
import { usePerformanceMonitor } from "@react-three/drei";
44
import { CONFIG, setGUI } from "./config";
55
import { useGUI } from "@/utils/useGUI";
6-
import {
7-
FxTransparentMaterial,
8-
FxTransparentMaterialProps,
9-
} from "@/utils/fxTransparentMaterial";
6+
import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
107
import {
118
useFluid,
12-
useFogProjection,
9+
useBlending,
1310
useNoise,
11+
useBrightnessPicker,
1412
} from "@/packages/use-shader-fx/src";
1513

16-
extend({ FxTransparentMaterial });
14+
extend({ FxMaterial });
1715

1816
export const Home = () => {
1917
const updateGUI = useGUI(setGUI);
20-
const mainShaderRef = useRef<FxTransparentMaterialProps>();
18+
const mainShaderRef = useRef<FxMaterialProps>();
2119

2220
const { size, dpr } = useThree((state) => {
2321
return { size: state.size, dpr: state.viewport.dpr };
@@ -30,7 +28,9 @@ export const Home = () => {
3028
dpr,
3129
});
3230

33-
const [updateFogProjection] = useFogProjection({ size, dpr });
31+
const [updateBlending] = useBlending({ size, dpr });
32+
33+
const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
3434

3535
usePerformanceMonitor({
3636
onChange({ factor }) {
@@ -42,7 +42,9 @@ export const Home = () => {
4242

4343
useFrame((props) => {
4444
const noise = updateNoise(props, {
45-
timeStrength: 0.4,
45+
scale: 0.002,
46+
timeStrength: 0.2,
47+
warpStrength: 2.0,
4648
});
4749

4850
const fx = updateFluid(props, {
@@ -55,49 +57,57 @@ export const Home = () => {
5557
fluid_color: CONFIG.fluid.fluid_color,
5658
});
5759

58-
const postFx = updateFogProjection(props, {
60+
const postFx = updateBlending(props, {
5961
distortionStrength: CONFIG.fogProjection.distortionStrength,
60-
fogEdge0: CONFIG.fogProjection.fogEdge0,
61-
fogEdge1: CONFIG.fogProjection.fogEdge1,
62-
fogColor: CONFIG.fogProjection.fogColor,
62+
edge0: CONFIG.fogProjection.fogEdge0,
63+
edge1: CONFIG.fogProjection.fogEdge1,
64+
color: CONFIG.fogProjection.fogColor,
6365
texture: fx,
64-
noiseMap: noise,
66+
map: noise,
67+
});
68+
69+
const final = updateBrightnessPicker(props, {
70+
texture: postFx,
6571
});
6672

6773
const main = mainShaderRef.current;
6874
if (main) {
69-
main.u_fx = postFx;
75+
main.u_fx = final;
76+
main.u_alpha = 0.0;
7077
}
7178
updateGUI();
7279
});
7380

7481
return (
7582
<mesh>
7683
<planeGeometry args={[2, 2]} />
77-
<fxTransparentMaterial
78-
key={FxTransparentMaterial.key}
79-
ref={mainShaderRef}
80-
/>
84+
<fxMaterial ref={mainShaderRef} />
8185
</mesh>
8286
);
8387
};
8488

8589
/*===============================================
86-
the simplest demo
90+
playground
8791
===============================================*/
8892

8993
// import * as THREE from "three";
9094
// import { useRef } from "react";
9195
// import { useFrame, useThree } from "@react-three/fiber";
92-
// import { useFluid } from "@hmng8/use-shader-fx";
96+
// import { useNoise } from "@/packages/use-shader-fx/src";
9397

9498
// export const Home = () => {
9599
// const ref = useRef<THREE.ShaderMaterial>(null);
96100
// const size = useThree((state) => state.size);
97101
// const dpr = useThree((state) => state.viewport.dpr);
98-
// const [updateFluid] = useFluid({ size, dpr });
102+
// const [updateNoise] = useNoise({ size, dpr });
103+
99104
// useFrame((props) => {
100-
// ref.current!.uniforms.u_fx.value = updateFluid(props);
105+
// ref.current!.uniforms.u_fx.value = updateNoise(props, {
106+
// scale: 0.002,
107+
// warpOctaves: 2,
108+
// timeStrength: 0.2,
109+
// warpStrength: 20.0,
110+
// });
101111
// });
102112

103113
// return (
@@ -116,10 +126,22 @@ the simplest demo
116126
// precision highp float;
117127
// varying vec2 vUv;
118128
// uniform sampler2D u_fx;
119-
129+
// float sq(float x) {
130+
// return x*x*7.0;
131+
// }
120132
// void main() {
121133
// vec2 uv = vUv;
122-
// gl_FragColor = texture2D(u_fx, uv);
134+
// vec3 noise = texture2D(u_fx, uv).rgb;
135+
// vec3 col;
136+
// vec2 p = noise.rg * .4;
137+
// for(float j = 0.0; j < 3.0; j++){
138+
// for(float i = 1.0; i < 8.0; i++){
139+
// p.x += 0.01 / (i + j) * cos(i * 10.0 * p.y + sin(i + j));
140+
// p.y += 0.01 / (i + j)* cos(i * 10.0 * p.x + sin(i + j));
141+
// }
142+
// col[int(j)] = sin(.5 * 7.0*sq(p.x)) + sin(7.0*sq(p.y));
143+
// }
144+
// gl_FragColor = vec4(col, 1.0);
123145
// }
124146
// `}
125147
// uniforms={{

‎app/domSyncer/DomSyncer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as THREE from "three";
2-
import { useEffect, useLayoutEffect, useRef } from "react";
2+
import { useLayoutEffect, useRef } from "react";
33
import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
55
import {

0 commit comments

Comments
 (0)