Skip to content

Commit f29bcca

Browse files
author
takuma-hmng8
committed
v1.0.23
1 parent a4cac02 commit f29bcca

File tree

16 files changed

+626
-494
lines changed

16 files changed

+626
-494
lines changed

Diff for: ‎.storybook/stories/UseColorStrata.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useFrame, extend, useThree } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
55
import GUI from "lil-gui";
66
import { useGUI } from "../../utils/useGUI";
7-
import { useColorStrata, useNoise } from "../../packages/use-shader-fx/src";
7+
import { useColorStrata } from "../../packages/use-shader-fx/src";
88
import {
99
COLORSTRATA_PARAMS,
1010
ColorStrataParams,
@@ -13,8 +13,10 @@ import {
1313
extend({ FxMaterial });
1414

1515
const CONFIG: ColorStrataParams = structuredClone(COLORSTRATA_PARAMS);
16+
1617
const setGUI = (gui: GUI) => {
17-
gui.add(CONFIG, "laminateLayer", 0, 10, 1);
18+
gui.add(CONFIG, "laminateLayer", 0, 20, 1);
19+
gui.add(CONFIG, "scale", 0, 1, 0.01);
1820
const laminateInterval = gui.addFolder("laminateInterval");
1921
laminateInterval.add(CONFIG.laminateInterval!, "x", 0, 2, 0.01);
2022
laminateInterval.add(CONFIG.laminateInterval!, "y", 0, 2, 0.01);
@@ -28,6 +30,9 @@ const setGUI = (gui: GUI) => {
2830
colorFactor.add(CONFIG.colorFactor!, "x", 0, 10, 0.01);
2931
colorFactor.add(CONFIG.colorFactor!, "y", 0, 10, 0.01);
3032
colorFactor.add(CONFIG.colorFactor!, "z", 0, 10, 0.01);
33+
const timeStrength = gui.addFolder("timeStrength");
34+
timeStrength.add(CONFIG.timeStrength!, "x", 0, 2, 0.01);
35+
timeStrength.add(CONFIG.timeStrength!, "y", 0, 2, 0.01);
3136
};
3237
const setConfig = () => {
3338
return {
@@ -67,14 +72,10 @@ export const UseColorStrataWithNoise = (args: ColorStrataParams) => {
6772
return { size: state.size, dpr: state.viewport.dpr };
6873
});
6974
const [updateColorStrata] = useColorStrata({ size, dpr });
70-
const [updateNoise] = useNoise({ size, dpr });
7175

7276
useFrame((props) => {
73-
const noise = updateNoise(props);
74-
7577
const fx = updateColorStrata(props, {
7678
...setConfig(),
77-
texture: noise,
7879
});
7980

8081
fxRef.current!.u_fx = fx;

Diff for: ‎app/_home/config.ts

-41
This file was deleted.

Diff for: ‎app/_home/index.tsx

+9-107
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const Home = () => {
2525
});
2626

2727
setNoise({
28-
scale: 1.0,
28+
scale: 0.01,
2929
warpOctaves: 1,
3030
noiseOctaves: 1,
3131
fbmOctaves: 1,
@@ -42,11 +42,13 @@ export const Home = () => {
4242
});
4343

4444
setColorStrata({
45-
laminateLayer: 2,
46-
laminateInterval: new THREE.Vector2(2.0, 2.0),
47-
laminateDetail: new THREE.Vector2(1.4, 1.2),
48-
distortion: new THREE.Vector2(1.4, 1.2),
49-
colorFactor: new THREE.Vector3(1.2, 1.0, 3.2),
45+
laminateLayer: 4,
46+
laminateInterval: new THREE.Vector2(1, 1),
47+
laminateDetail: new THREE.Vector2(0.3, 0.3),
48+
distortion: new THREE.Vector2(2, 2),
49+
colorFactor: new THREE.Vector3(6.2, 4.2, 8.8),
50+
timeStrength: new THREE.Vector2(1, 1),
51+
noiseStrength: new THREE.Vector2(1, 1),
5052
});
5153

5254
useFrame((props) => {
@@ -61,6 +63,7 @@ export const Home = () => {
6163
});
6264
const colorStrata = updateColorStrata(props, {
6365
texture: picked,
66+
noise: noise,
6467
});
6568
ref.current!.uniforms.u_fx.value = colorStrata;
6669
});
@@ -94,104 +97,3 @@ export const Home = () => {
9497
</mesh>
9598
);
9699
};
97-
98-
/*===============================================
99-
playground
100-
===============================================*/
101-
102-
// import * as THREE from "three";
103-
// import { useRef } from "react";
104-
// import { useFrame, useThree } from "@react-three/fiber";
105-
// import {
106-
// useNoise,
107-
// useFluid,
108-
// useBlending,
109-
// useColorStrata,
110-
// useBrightnessPicker,
111-
// } from "@/packages/use-shader-fx/src";
112-
113-
// export const Home = () => {
114-
// const ref = useRef<THREE.ShaderMaterial>(null);
115-
// const { size, dpr } = useThree((state) => {
116-
// return { size: state.size, dpr: state.viewport.dpr };
117-
// });
118-
// const [updateNoise, setNoise] = useNoise({ size, dpr });
119-
// const [updateFluid, setFluid] = useFluid({ size, dpr });
120-
// const [updateBlending, setBlending] = useBlending({ size, dpr });
121-
// const [updateColorStrata, setColorStrata] = useColorStrata({ size, dpr });
122-
// const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
123-
124-
// setBlending({
125-
// color: new THREE.Color(0xff0000),
126-
// brightness: new THREE.Vector3(0.2, 0.2, 0.2),
127-
// mapIntensity: 0.4,
128-
// });
129-
130-
// setNoise({
131-
// scale: 1.0,
132-
// warpOctaves: 1,
133-
// noiseOctaves: 1,
134-
// fbmOctaves: 1,
135-
// timeStrength: 1.2,
136-
// warpStrength: 20.0,
137-
// });
138-
139-
// setFluid({
140-
// curl_strength: 0.0,
141-
// splat_radius: 0.002,
142-
// pressure_iterations: 2,
143-
// });
144-
145-
// setColorStrata({
146-
// laminateLayer: 2,
147-
// laminateInterval: new THREE.Vector2(2.0, 2.0),
148-
// laminateDetail: new THREE.Vector2(1.4, 1.2),
149-
// distortion: new THREE.Vector2(1.4, 1.2),
150-
// colorFactor: new THREE.Vector3(1.2, 1.0, 3.2),
151-
// });
152-
153-
// useFrame((props) => {
154-
// const noise = updateNoise(props);
155-
// const fluid = updateFluid(props);
156-
// const picked = updateBrightnessPicker(props, {
157-
// texture: fluid,
158-
// });
159-
// const blending = updateBlending(props, {
160-
// texture: picked,
161-
// map: noise,
162-
// });
163-
// const colorStrata = updateColorStrata(props, {
164-
// texture: blending,
165-
// });
166-
// ref.current!.uniforms.u_fx.value = colorStrata;
167-
// });
168-
169-
// return (
170-
// <mesh>
171-
// <planeGeometry args={[2, 2]} />
172-
// <shaderMaterial
173-
// ref={ref}
174-
// vertexShader={`
175-
// varying vec2 vUv;
176-
// void main() {
177-
// vUv = uv;
178-
// gl_Position = vec4(position, 1.0);
179-
// }
180-
// `}
181-
// fragmentShader={`
182-
// precision highp float;
183-
// varying vec2 vUv;
184-
// uniform sampler2D u_fx;
185-
186-
// void main() {
187-
// vec2 uv = vUv;
188-
// gl_FragColor = texture2D(u_fx, uv);
189-
// }
190-
// `}
191-
// uniforms={{
192-
// u_fx: { value: null },
193-
// }}
194-
// />
195-
// </mesh>
196-
// );
197-
// };

Diff for: ‎app/playground/Playground.tsx

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
"use client";
2+
3+
import * as THREE from "three";
4+
import { useRef } from "react";
5+
import { useFrame, useThree } from "@react-three/fiber";
6+
import {
7+
useNoise,
8+
useFluid,
9+
useFxBlending,
10+
useColorStrata,
11+
useBrightnessPicker,
12+
} from "@/packages/use-shader-fx/src";
13+
import {
14+
NoiseParams,
15+
NOISE_PARAMS,
16+
} from "@/packages/use-shader-fx/src/hooks/useNoise";
17+
import {
18+
ColorStrataParams,
19+
COLORSTRATA_PARAMS,
20+
} from "@/packages/use-shader-fx/src/hooks/useColorStrata";
21+
import GUI from "lil-gui";
22+
import { useGUI } from "@/utils/useGUI";
23+
24+
const CONFIG = {
25+
noise: structuredClone(NOISE_PARAMS) as NoiseParams,
26+
colorStrata: {
27+
...structuredClone(COLORSTRATA_PARAMS),
28+
laminateLayer: 20,
29+
laminateInterval: new THREE.Vector2(0.1, 0.1),
30+
laminateDetail: new THREE.Vector2(0.7, 0.7),
31+
distortion: new THREE.Vector2(10.0, 10.0),
32+
colorFactor: new THREE.Vector3(1, 1, 1),
33+
timeStrength: new THREE.Vector2(1, 1),
34+
noiseStrength: new THREE.Vector2(1, 1),
35+
} as ColorStrataParams,
36+
};
37+
38+
const setGUI = (gui: GUI) => {
39+
// noise
40+
const noise = gui.addFolder("noise");
41+
noise.add(CONFIG.noise, "scale", 0, 0.1, 0.0001);
42+
noise.add(CONFIG.noise, "timeStrength", 0, 10, 0.01);
43+
noise.add(CONFIG.noise, "noiseOctaves", 1, 10, 1);
44+
noise.add(CONFIG.noise, "fbmOctaves", 1, 10, 1);
45+
noise.add(CONFIG.noise, "warpOctaves", 1, 10, 1);
46+
const warpDirection = noise.addFolder("warpDirection");
47+
warpDirection.add(CONFIG.noise.warpDirection!, "x", 1, 10, 0.1);
48+
warpDirection.add(CONFIG.noise.warpDirection!, "y", 1, 10, 0.1);
49+
noise.add(CONFIG.noise, "warpStrength", 1, 50, 0.1);
50+
//color strata
51+
const colorStrata = gui.addFolder("colorStrata");
52+
colorStrata.add(CONFIG.colorStrata, "laminateLayer", 0, 20, 1);
53+
colorStrata.add(CONFIG.colorStrata, "scale", 0, 1, 0.01);
54+
const laminateInterval = colorStrata.addFolder("laminateInterval");
55+
laminateInterval.add(CONFIG.colorStrata.laminateInterval!, "x", 0, 2, 0.01);
56+
laminateInterval.add(CONFIG.colorStrata.laminateInterval!, "y", 0, 2, 0.01);
57+
const laminateDetail = colorStrata.addFolder("laminateDetail");
58+
laminateDetail.add(CONFIG.colorStrata.laminateDetail!, "x", 0, 10, 0.1);
59+
laminateDetail.add(CONFIG.colorStrata.laminateDetail!, "y", 0, 10, 0.1);
60+
const distortion = colorStrata.addFolder("distortion");
61+
distortion.add(CONFIG.colorStrata.distortion!, "x", 0, 10, 0.01);
62+
distortion.add(CONFIG.colorStrata.distortion!, "y", 0, 10, 0.01);
63+
const colorFactor = colorStrata.addFolder("colorFactor");
64+
colorFactor.add(CONFIG.colorStrata.colorFactor!, "x", 0, 10, 0.01);
65+
colorFactor.add(CONFIG.colorStrata.colorFactor!, "y", 0, 10, 0.01);
66+
colorFactor.add(CONFIG.colorStrata.colorFactor!, "z", 0, 10, 0.01);
67+
const timeStrength = colorStrata.addFolder("timeStrength");
68+
timeStrength.add(CONFIG.colorStrata.timeStrength!, "x", 0, 2, 0.01);
69+
timeStrength.add(CONFIG.colorStrata.timeStrength!, "y", 0, 2, 0.01);
70+
const noiseStrength = colorStrata.addFolder("noiseStrength");
71+
noiseStrength.add(CONFIG.colorStrata.noiseStrength!, "x", 0, 5, 0.01);
72+
noiseStrength.add(CONFIG.colorStrata.noiseStrength!, "y", 0, 5, 0.01);
73+
};
74+
75+
const setConfig = () => {
76+
return {
77+
noise: { ...CONFIG.noise },
78+
colorStrata: { ...CONFIG.colorStrata },
79+
};
80+
};
81+
82+
export const Playground = () => {
83+
const updateGUI = useGUI(setGUI);
84+
85+
const ref = useRef<THREE.ShaderMaterial>(null);
86+
const { size, dpr } = useThree((state) => {
87+
return { size: state.size, dpr: state.viewport.dpr };
88+
});
89+
const [updateNoise] = useNoise({ size, dpr });
90+
const [updateFluid] = useFluid({ size, dpr });
91+
const [updateFxBlending, setFxBlending] = useFxBlending({ size, dpr });
92+
const [updateColorStrata] = useColorStrata({ size, dpr });
93+
// const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
94+
95+
useFrame((props) => {
96+
const noise = updateNoise(props, {
97+
...setConfig().noise,
98+
});
99+
// const fluid = updateFluid(props);
100+
// const blending = updateFxBlending(props, {
101+
// texture: fluid,
102+
// map: noise,
103+
// });
104+
const colorStrata = updateColorStrata(props, {
105+
...setConfig().colorStrata,
106+
texture: false,
107+
noise: false,
108+
});
109+
ref.current!.uniforms.u_fx.value = colorStrata;
110+
updateGUI();
111+
});
112+
113+
return (
114+
<mesh>
115+
<planeGeometry args={[2, 2]} />
116+
<shaderMaterial
117+
ref={ref}
118+
vertexShader={`
119+
varying vec2 vUv;
120+
void main() {
121+
vUv = uv;
122+
gl_Position = vec4(position, 1.0);
123+
}
124+
`}
125+
fragmentShader={`
126+
precision highp float;
127+
varying vec2 vUv;
128+
uniform sampler2D u_fx;
129+
130+
void main() {
131+
vec2 uv = vUv;
132+
gl_FragColor = texture2D(u_fx, uv);
133+
}
134+
`}
135+
uniforms={{
136+
u_fx: { value: null },
137+
}}
138+
/>
139+
</mesh>
140+
);
141+
};

Diff for: ‎app/playground/page.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { ShaderFx } from "../ShaderFx";
2+
import { Playground } from "./Playground";
3+
4+
export default function Page() {
5+
return (
6+
<div style={{ width: "100%", height: "100svh", overflow: "hidden" }}>
7+
<ShaderFx>
8+
<Playground />
9+
</ShaderFx>
10+
</div>
11+
);
12+
}

0 commit comments

Comments
 (0)