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 448fc04

Browse files
Merge pull request #34 from takuma-hmng8/dev
add useColorStrata
2 parents 76cc374 + ddb3406 commit 448fc04

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

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-
constDIR=newTHREE.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

0 commit comments

Comments
(0)

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