Skip to content

Commit ddb3406

Browse files
author
takuma-hmng8
committed
add useColorStrata
1 parent 9473c1b commit ddb3406

36 files changed

+1304
-812
lines changed

‎.storybook/stories/UseBlending.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,14 @@ extend({ FxMaterial });
1919

2020
const CONFIG: BlendingParams = structuredClone(BLENDING_PARAMS);
2121
const setGUI = (gui: GUI) => {
22-
gui.add(CONFIG, "distortionStrength", 0, 1, 0.01);
23-
gui.add(CONFIG, "edge0", 0, 1, 0.01);
24-
gui.add(CONFIG, "edge1", 0, 1, 0.01);
22+
gui.add(CONFIG, "mapIntensity", 0, 1, 0.01);
23+
gui.add(CONFIG, "min", 0, 1, 0.01);
24+
gui.add(CONFIG, "max", 0, 1, 0.01);
2525
gui.addColor(CONFIG, "color");
2626
};
2727
const setConfig = () => {
2828
return {
29-
distortionStrength: CONFIG.distortionStrength,
30-
edge0: CONFIG.edge0,
31-
edge1: CONFIG.edge1,
32-
color: CONFIG.color,
29+
...CONFIG,
3330
} as BlendingParams;
3431
};
3532

‎.storybook/stories/UseBrightnessPicker.tsx

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,17 @@ import {
1515

1616
extend({ FxMaterial });
1717

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);
18+
const CONFIG: BrightnessPickerParams = structuredClone(BRIGHTNESSPICKER_PARAMS);
2519
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);
20+
gui.add(CONFIG.brightness!, "x", 0, 1, 0.01);
21+
gui.add(CONFIG.brightness!, "y", 0, 1, 0.01);
22+
gui.add(CONFIG.brightness!, "z", 0, 1, 0.01);
2923
gui.add(CONFIG, "min", 0, 1, 0.01);
3024
gui.add(CONFIG, "max", 0, 1, 0.01);
3125
};
3226
const setConfig = () => {
3327
return {
34-
brightness: brightness.set(CONFIG.r, CONFIG.g, CONFIG.b),
35-
min: CONFIG.min,
36-
max: CONFIG.max,
28+
...CONFIG,
3729
} as BrightnessPickerParams;
3830
};
3931

@@ -53,8 +45,8 @@ export const UseBrightnessPicker = (args: BrightnessPickerParams) => {
5345
useFrame((props) => {
5446
const noise = updateNoise(props);
5547
const fx = updateBrightnessPicker(props, {
56-
texture: noise,
5748
...setConfig(),
49+
texture: noise,
5850
});
5951
fxRef.current!.u_fx = fx;
6052
fxRef.current!.u_alpha = 0.0;

‎.storybook/stories/UseBrush.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,7 @@ const setGUI = (gui: GUI) => {
2424
};
2525
const setConfig = () => {
2626
return {
27-
radius: CONFIG.radius,
28-
smudge: CONFIG.smudge,
29-
dissipation: CONFIG.dissipation,
30-
motionBlur: CONFIG.motionBlur,
31-
motionSample: CONFIG.motionSample,
32-
color: CONFIG.color,
27+
...CONFIG,
3328
} as BrushParams;
3429
};
3530

‎.storybook/stories/UseColorStrata.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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 { useColorStrata, useNoise } from "../../packages/use-shader-fx/src";
8+
import {
9+
COLORSTRATA_PARAMS,
10+
ColorStrataParams,
11+
} from "../../packages/use-shader-fx/src/hooks/useColorStrata";
12+
13+
extend({ FxMaterial });
14+
15+
const CONFIG: ColorStrataParams = structuredClone(COLORSTRATA_PARAMS);
16+
const setGUI = (gui: GUI) => {
17+
gui.add(CONFIG, "laminateLayer", 0, 10, 1);
18+
const laminateInterval = gui.addFolder("laminateInterval");
19+
laminateInterval.add(CONFIG.laminateInterval!, "x", 0, 2, 0.01);
20+
laminateInterval.add(CONFIG.laminateInterval!, "y", 0, 2, 0.01);
21+
const laminateDetail = gui.addFolder("laminateDetail");
22+
laminateDetail.add(CONFIG.laminateDetail!, "x", 0, 10, 0.1);
23+
laminateDetail.add(CONFIG.laminateDetail!, "y", 0, 10, 0.1);
24+
const distortion = gui.addFolder("distortion");
25+
distortion.add(CONFIG.distortion!, "x", 0, 10, 0.01);
26+
distortion.add(CONFIG.distortion!, "y", 0, 10, 0.01);
27+
const colorFactor = gui.addFolder("colorFactor");
28+
colorFactor.add(CONFIG.colorFactor!, "x", 0, 10, 0.01);
29+
colorFactor.add(CONFIG.colorFactor!, "y", 0, 10, 0.01);
30+
colorFactor.add(CONFIG.colorFactor!, "z", 0, 10, 0.01);
31+
};
32+
const setConfig = () => {
33+
return {
34+
...CONFIG,
35+
} as ColorStrataParams;
36+
};
37+
38+
export const UseColorStrata = (args: ColorStrataParams) => {
39+
const updateGUI = useGUI(setGUI);
40+
41+
const fxRef = React.useRef<FxMaterialProps>();
42+
const { size, dpr } = useThree((state) => {
43+
return { size: state.size, dpr: state.viewport.dpr };
44+
});
45+
const [updateColorStrata] = useColorStrata({ size, dpr });
46+
47+
useFrame((props) => {
48+
const fx = updateColorStrata(props, {
49+
...setConfig(),
50+
});
51+
fxRef.current!.u_fx = fx;
52+
updateGUI();
53+
});
54+
55+
return (
56+
<mesh>
57+
<planeGeometry args={[2, 2]} />
58+
<fxMaterial key={FxMaterial.key} ref={fxRef} />
59+
</mesh>
60+
);
61+
};
62+
63+
export const UseColorStrataWithNoise = (args: ColorStrataParams) => {
64+
const updateGUI = useGUI(setGUI);
65+
const fxRef = React.useRef<FxMaterialProps>();
66+
const { size, dpr } = useThree((state) => {
67+
return { size: state.size, dpr: state.viewport.dpr };
68+
});
69+
const [updateColorStrata] = useColorStrata({ size, dpr });
70+
const [updateNoise] = useNoise({ size, dpr });
71+
72+
useFrame((props) => {
73+
const noise = updateNoise(props);
74+
75+
const fx = updateColorStrata(props, {
76+
...setConfig(),
77+
texture: noise,
78+
});
79+
80+
fxRef.current!.u_fx = fx;
81+
updateGUI();
82+
});
83+
84+
return (
85+
<mesh>
86+
<planeGeometry args={[2, 2]} />
87+
<fxMaterial key={FxMaterial.key} ref={fxRef} />
88+
</mesh>
89+
);
90+
};

‎.storybook/stories/UseDuoTone.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ const setGUI = (gui: GUI) => {
2020
};
2121
const setConfig = () => {
2222
return {
23-
color0: CONFIG.color0,
24-
color1: CONFIG.color1,
23+
...CONFIG,
2524
} as DuoToneParams;
2625
};
2726

@@ -41,8 +40,8 @@ export const UseDuoTone = (args: DuoToneParams) => {
4140
texture0: bg,
4241
});
4342
const fx = updateDuoTone(props, {
44-
texture: bgTexture,
4543
...setConfig(),
44+
texture: bgTexture,
4645
});
4746
fxRef.current!.u_fx = fx;
4847
updateGUI();

‎.storybook/stories/UseFluid.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,7 @@ const setGUI = (gui: GUI) => {
2525
};
2626
const setConfig = () => {
2727
return {
28-
density_dissipation: CONFIG.density_dissipation,
29-
velocity_dissipation: CONFIG.velocity_dissipation,
30-
velocity_acceleration: CONFIG.velocity_acceleration,
31-
pressure_dissipation: CONFIG.pressure_dissipation,
32-
pressure_iterations: CONFIG.pressure_iterations,
33-
curl_strength: CONFIG.curl_strength,
34-
splat_radius: CONFIG.splat_radius,
28+
...CONFIG,
3529
} as FluidParams;
3630
};
3731

‎.storybook/stories/UseFxTexture.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,22 @@ import {
1414
extend({ FxMaterial });
1515

1616
const CONFIG: FxTextureParams = structuredClone(FXTEXTURE_PARAMS);
17-
const DIR = new THREE.Vector2(0, 0);
17+
1818
const setGUI = (gui: GUI) => {
1919
gui.add(CONFIG, "mapIntensity", 0, 10, 0.1);
20+
gui.add(CONFIG, "edgeIntensity", 0, 10, 0.1);
21+
const epicenter = gui.addFolder("epicenter");
22+
epicenter.add(CONFIG.epicenter!, "x", -1, 1, 0.1);
23+
epicenter.add(CONFIG.epicenter!, "y", -1, 1, 0.1);
2024
gui.add(CONFIG, "progress", 0, 1, 0.01);
21-
gui.add(DIR, "x", -1, 1, 0.01);
22-
gui.add(DIR, "y", -1, 1, 0.01);
25+
const dir = gui.addFolder("dir");
26+
dir.add(CONFIG.dir!, "x", -1, 1, 0.01);
27+
dir.add(CONFIG.dir!, "y", -1, 1, 0.01);
28+
gui.add(CONFIG, "padding", 0, 0.3, 0.01);
2329
};
2430
const setConfig = () => {
2531
return {
26-
mapIntensity: CONFIG.mapIntensity,
27-
progress: CONFIG.progress,
28-
dir: DIR,
32+
...CONFIG,
2933
} as FxTextureParams;
3034
};
3135

@@ -48,11 +52,11 @@ export const UseFxTexture = (args: FxTextureParams) => {
4852
useFrame((props) => {
4953
const noise = updateNoise(props);
5054
const fx = updateFxTexture(props, {
55+
...setConfig(),
5156
map: noise,
5257
textureResolution: CONSTANT.textureResolution,
5358
texture0: bg,
5459
texture1: momo,
55-
...setConfig(),
5660
});
5761
fxRef.current!.u_fx = fx;
5862
updateGUI();

‎.storybook/stories/UseNoise.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,18 @@ extend({ FxMaterial });
1313

1414
const CONFIG: NoiseParams = structuredClone(NOISE_PARAMS);
1515
const setGUI = (gui: GUI) => {
16+
gui.add(CONFIG, "scale", 0, 10, 0.001);
1617
gui.add(CONFIG, "timeStrength", 0, 10, 0.01);
17-
gui.add(CONFIG, "noiseOctaves", 0, 10, 1);
18-
gui.add(CONFIG, "fbmOctaves", 0, 10, 1);
18+
gui.add(CONFIG, "noiseOctaves", 1, 10, 1);
19+
gui.add(CONFIG, "fbmOctaves", 1, 10, 1);
20+
gui.add(CONFIG, "warpOctaves", 1, 10, 1);
21+
gui.add(CONFIG.warpDirection!, "x", 1, 10, 0.1);
22+
gui.add(CONFIG.warpDirection!, "y", 1, 10, 0.1);
23+
gui.add(CONFIG, "warpStrength", 1, 50, 0.1);
1924
};
2025
const setConfig = () => {
2126
return {
22-
timeStrength: CONFIG.timeStrength,
23-
noiseOctaves: CONFIG.noiseOctaves,
24-
fbmOctaves: CONFIG.fbmOctaves,
27+
...CONFIG,
2528
} as NoiseParams;
2629
};
2730

‎.storybook/stories/UseRipple.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,7 @@ const setGUI = (gui: GUI) => {
2323
};
2424
const setConfig = () => {
2525
return {
26-
frequency: CONFIG.frequency,
27-
rotation: CONFIG.rotation,
28-
fadeout_speed: CONFIG.fadeout_speed,
29-
scale: CONFIG.scale,
30-
alpha: CONFIG.alpha,
26+
...CONFIG,
3127
} as RippleParams;
3228
};
3329

‎.storybook/stories/UseSimpleBlur.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,7 @@ const setGUI = (gui: GUI) => {
2020
};
2121
const setConfig = () => {
2222
return {
23-
texture: CONFIG.texture,
24-
blurSize: CONFIG.blurSize,
25-
blurPower: CONFIG.blurPower,
23+
...CONFIG,
2624
} as SimpleBlurParams;
2725
};
2826

‎.storybook/stories/UseWave.tsx

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,19 @@ import {
1313

1414
extend({ FxMaterial });
1515

16-
const CONFIG = {
17-
...structuredClone(WAVE_PARAMS),
18-
epicenter: {
19-
vec2: new THREE.Vector2(0.0, 0.0),
20-
x: 0.0,
21-
y: 0.0,
22-
},
23-
};
16+
const CONFIG: WaveParams = structuredClone(WAVE_PARAMS);
2417
const setGUI = (gui: GUI) => {
25-
gui.add(CONFIG.epicenter, "x", -1, 1, 0.1);
26-
gui.add(CONFIG.epicenter, "y", -1, 1, 0.1);
18+
const epicenter = gui.addFolder("epicenter");
19+
epicenter.add(CONFIG.epicenter!, "x", -1, 1, 0.1);
20+
epicenter.add(CONFIG.epicenter!, "y", -1, 1, 0.1);
2721
gui.add(CONFIG, "progress", 0, 1, 0.1);
2822
gui.add(CONFIG, "width", 0, 1, 0.1);
2923
gui.add(CONFIG, "strength", 0, 1, 0.1);
3024
gui.add(CONFIG, "mode", ["center", "horizontal", "vertical"]);
3125
};
3226
const setConfig = () => {
3327
return {
34-
epicenter: CONFIG.epicenter.vec2.set(
35-
CONFIG.epicenter.x,
36-
CONFIG.epicenter.y
37-
),
38-
progress: CONFIG.progress,
39-
width: CONFIG.width,
40-
strength: CONFIG.strength,
41-
mode: CONFIG.mode,
28+
...CONFIG,
4229
} as WaveParams;
4330
};
4431

‎.storybook/stories/useColorStrata.stories.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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 {
7+
COLORSTRATA_PARAMS,
8+
ColorStrataParams,
9+
} from "../../packages/use-shader-fx/src/hooks/useColorStrata";
10+
import { UseColorStrata, UseColorStrataWithNoise } from "./UseColorStrata";
11+
12+
const meta = {
13+
title: "useColorStrata",
14+
component: UseColorStrata,
15+
tags: ["autodocs"],
16+
decorators: [(storyFn: any) => <Setup>{storyFn()}</Setup>],
17+
} satisfies Meta<typeof UseColorStrata>;
18+
19+
export default meta;
20+
type Story = StoryObj<typeof meta>;
21+
22+
const storySetting = {
23+
args: COLORSTRATA_PARAMS,
24+
argTypes: setArgTypes<ColorStrataParams>(COLORSTRATA_PARAMS),
25+
};
26+
export const ColorStrata: Story = {
27+
render: (args) => <UseColorStrata {...args} />,
28+
...storySetting,
29+
};
30+
export const WithNoise: Story = {
31+
render: (args) => <UseColorStrataWithNoise {...args} />,
32+
...storySetting,
33+
};

0 commit comments

Comments
 (0)