Skip to content

Commit 4777a15

Browse files
takuma-hmng8takuma-hmng8
authored
Merge pull request #21 from takuma-hmng8/develop
demo update
2 parents caeec12 + 60bb245 commit 4777a15

File tree

6 files changed

+96
-83
lines changed

6 files changed

+96
-83
lines changed

‎app/ShaderFx.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Demo } from "./_demo";
99
// import CreateShaderFx from "@/CreateShaderFx";
1010

1111
export const ShaderFx = () => {
12-
const [dpr, setDpr] = useState(0.5);
12+
const [dpr, setDpr] = useState(1.0);
1313
return (
1414
<Canvas dpr={dpr}>
1515
<PerformanceMonitor

‎app/_demo/config.ts‎

Lines changed: 7 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,35 @@
11
import * as THREE from "three";
2-
import gsap from "gsap";
32
import GUI from "lil-gui";
43

5-
import { TRANSITIONBG_PARAMS } from "@/packages/use-shader-fx/src/hooks/useTransitionBg";
64
import { FRUID_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFruid";
75
import { FOGPROJECTION_PARAMS } from "@/packages/use-shader-fx/src/hooks/useFogProjection";
86

97
export const CONFIG = {
10-
transitionBg: {
11-
...structuredClone(TRANSITIONBG_PARAMS),
12-
dir: new THREE.Vector2(0.3, 0.4),
13-
imageResolution: new THREE.Vector2(1440, 1029),
14-
active: true,
15-
transformDir: 1,
16-
transform: () => {
17-
CONFIG.transitionBg.transformDir *= -1;
18-
const tl = gsap.timeline({
19-
defaults: { duration: 2 },
20-
});
21-
tl.to(CONFIG.transitionBg, {
22-
noiseStrength: 0.2,
23-
progress: 0.5,
24-
ease: "power2.in",
25-
});
26-
tl.to(CONFIG.transitionBg, {
27-
noiseStrength: 0.0,
28-
progress: CONFIG.transitionBg.transformDir > 0 ? 0.0 : 1.0,
29-
ease: "power2.out",
30-
});
31-
},
32-
},
338
fogProjection: {
349
...structuredClone(FOGPROJECTION_PARAMS),
35-
fogColor: new THREE.Color(0xd5cea3),
36-
active: true,
10+
fogColor: new THREE.Color(0xffffff),
11+
fogEdge0: 0.5,
12+
fogEdge1: 1.0,
13+
distortionStrength: 0.2,
3714
},
3815
fruid: {
3916
...structuredClone(FRUID_PARAMS),
4017
fruidVec: new THREE.Vector3(),
4118
fruid_color: (velocity: THREE.Vector2) => {
42-
const rCol = Math.max(0.0, velocity.x * 100);
43-
const gCol = Math.max(0.0, velocity.y * 100);
44-
const bCol = (rCol + gCol) / 2;
19+
const rCol = Math.max(0.2, velocity.x * 100);
20+
const gCol = Math.max(0.2, velocity.y * 100);
21+
const bCol = Math.max(0.4, (rCol + gCol) / 2);
4522
return CONFIG.fruid.fruidVec.set(rCol, gCol, bCol);
4623
},
4724
},
4825
};
4926

5027
export const setGUI = (gui: GUI) => {
51-
const transitionBg = gui.addFolder("transitionBg");
52-
transitionBg.add(CONFIG.transitionBg, "noiseStrength", 0, 1, 0.01);
53-
transitionBg.add(CONFIG.transitionBg, "progress", 0, 1, 0.01);
54-
if (CONFIG.transitionBg.dir) {
55-
transitionBg.add(CONFIG.transitionBg.dir, "x", 0, 1, 0.01);
56-
transitionBg.add(CONFIG.transitionBg.dir, "y", 0, 1, 0.01);
57-
}
58-
transitionBg.add(CONFIG.transitionBg, "transform");
59-
transitionBg.add(CONFIG.transitionBg, "active");
60-
6128
const fogProjection = gui.addFolder("fogProjection");
6229
fogProjection.add(CONFIG.fogProjection, "distortionStrength", 0, 10, 0.01);
6330
fogProjection.add(CONFIG.fogProjection, "fogEdge0", 0, 1, 0.01);
6431
fogProjection.add(CONFIG.fogProjection, "fogEdge1", 0, 1, 0.01);
6532
fogProjection.addColor(CONFIG.fogProjection, "fogColor");
66-
fogProjection.add(CONFIG.fogProjection, "active");
6733

6834
const fruid = gui.addFolder("fruid");
6935
fruid.add(CONFIG.fruid, "density_dissipation", 0, 1, 0.01);

‎app/_demo/index.tsx‎

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
import { useRef } from "react";
2-
import * as THREE from "three";
3-
import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
2+
import { useFrame, extend, useThree } from "@react-three/fiber";
43
import { usePerformanceMonitor } from "@react-three/drei";
54
import { CONFIG, setGUI } from "./config";
65
import { useGUI } from "@/utils/useGUI";
76
import {
8-
FxTextureMaterial,
9-
FxTextureMaterialProps,
10-
} from "@/utils/fxTextureMaterial";
7+
FxTransparentMaterial,
8+
FxTransparentMaterialProps,
9+
} from "@/utils/fxTransparentMaterial";
1110
import {
1211
useFruid,
13-
useTransitionBg,
1412
useFogProjection,
1513
useNoise,
1614
} from "@/packages/use-shader-fx/src";
1715

18-
extend({ FxTextureMaterial });
16+
extend({ FxTransparentMaterial });
1917

2018
export const Demo = () => {
21-
const [bg, bg2] = useLoader(THREE.TextureLoader, [
22-
"thumbnail.jpg",
23-
"momo.jpg",
24-
]);
2519
const updateGUI = useGUI(setGUI);
26-
const mainShaderRef = useRef<FxTextureMaterialProps>();
20+
const mainShaderRef = useRef<FxTransparentMaterialProps>();
2721

2822
const size = useThree((state) => state.size);
2923
const dpr = useThree((state) => state.viewport.dpr);
@@ -35,7 +29,6 @@ export const Demo = () => {
3529
dpr,
3630
});
3731

38-
const [updateTransitionBg] = useTransitionBg({ size, dpr });
3932
const [updateFogProjection] = useFogProjection({ size, dpr });
4033

4134
usePerformanceMonitor({
@@ -48,9 +41,7 @@ export const Demo = () => {
4841

4942
useFrame((props) => {
5043
const noise = updateNoise(props, {
51-
timeStrength: 0.3,
52-
noiseOctaves: 8,
53-
fbmOctaves: 3,
44+
timeStrength: 0.4,
5445
});
5546

5647
const fx = updateFruid(props, {
@@ -63,39 +54,29 @@ export const Demo = () => {
6354
fruid_color: CONFIG.fruid.fruid_color,
6455
});
6556

66-
let postFx = updateTransitionBg(props, {
67-
imageResolution: CONFIG.transitionBg.imageResolution,
68-
noiseStrength: CONFIG.transitionBg.noiseStrength,
69-
progress: CONFIG.transitionBg.progress,
70-
dir: CONFIG.transitionBg.dir,
71-
texture0: bg,
72-
texture1: bg2,
57+
const postFx = updateFogProjection(props, {
58+
distortionStrength: CONFIG.fogProjection.distortionStrength,
59+
fogEdge0: CONFIG.fogProjection.fogEdge0,
60+
fogEdge1: CONFIG.fogProjection.fogEdge1,
61+
fogColor: CONFIG.fogProjection.fogColor,
62+
texture: fx,
7363
noiseMap: noise,
7464
});
7565

76-
if (CONFIG.fogProjection.active) {
77-
postFx = updateFogProjection(props, {
78-
distortionStrength: CONFIG.fogProjection.distortionStrength,
79-
fogEdge0: CONFIG.fogProjection.fogEdge0,
80-
fogEdge1: CONFIG.fogProjection.fogEdge1,
81-
fogColor: CONFIG.fogProjection.fogColor,
82-
texture: postFx,
83-
noiseMap: noise,
84-
});
85-
}
86-
8766
const main = mainShaderRef.current;
8867
if (main) {
89-
main.u_fx = fx;
90-
main.u_postFx = postFx;
68+
main.u_fx = postFx;
9169
}
9270
updateGUI();
9371
});
9472

9573
return (
9674
<mesh>
9775
<planeGeometry args={[2, 2]} />
98-
<fxTextureMaterial key={FxTextureMaterial.key} ref={mainShaderRef} />
76+
<fxTransparentMaterial
77+
key={FxTransparentMaterial.key}
78+
ref={mainShaderRef}
79+
/>
9980
</mesh>
10081
);
10182
};

‎app/layout.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import "the-new-css-reset/css/reset.css";
22
import type { Metadata } from "next";
3-
import { Inter } from "next/font/google";
3+
import { Playfair_Display } from "next/font/google";
44

5-
const inter = Inter({ subsets: ["latin"] });
5+
const playfair = Playfair_Display({
6+
subsets: ["latin"],
7+
variable: "--font-playfair",
8+
});
69

710
const metadata: Metadata = {
811
title: "use-shader-fx",
@@ -17,8 +20,12 @@ export default function RootLayout({
1720
return (
1821
<html lang="en">
1922
<body
20-
className={inter.className}
21-
style={{ overflow: "hidden", height: "100svh" }}>
23+
className={playfair.className}
24+
style={{
25+
overflow: "hidden",
26+
height: "100svh",
27+
// background: "#f8f8f8",
28+
}}>
2229
{children}
2330
</body>
2431
</html>

‎app/page.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,23 @@ export default function Home() {
44
return (
55
<div style={{ width: "100%", height: "100svh" }}>
66
<ShaderFx />
7+
<h1
8+
style={{
9+
fontSize: "10vw",
10+
position: "fixed",
11+
top: "0px",
12+
zIndex: -100,
13+
fontWeight: 700,
14+
lineHeight: 1,
15+
textAlign: "center",
16+
width: "100%",
17+
height: "100%",
18+
display: "flex",
19+
justifyContent: "center",
20+
alignItems: "center",
21+
}}>
22+
use-shader-fx
23+
</h1>
724
</div>
825
);
926
}

‎utils/fxTransparentMaterial.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as THREE from "three";
2+
import { shaderMaterial } from "@react-three/drei";
3+
4+
declare global {
5+
namespace JSX {
6+
interface IntrinsicElements {
7+
fxTransparentMaterial: any;
8+
}
9+
}
10+
}
11+
12+
export type FxTransparentMaterialProps = {
13+
u_fx: THREE.Texture | null;
14+
};
15+
16+
export const FxTransparentMaterial = shaderMaterial(
17+
{
18+
u_fx: null,
19+
},
20+
`
21+
varying vec2 vUv;
22+
void main() {
23+
vUv = uv;
24+
gl_Position = vec4(position, 1.0);
25+
}
26+
`,
27+
`
28+
precision highp float;
29+
varying vec2 vUv;
30+
uniform sampler2D u_fx;
31+
32+
void main() {
33+
vec2 uv = vUv;
34+
vec3 color = texture2D(u_fx, uv).rgb;
35+
float brightness = dot(color, vec3(.2, .2, .2));
36+
float minVal = 0.0;
37+
float maxVal = 1.0;
38+
float alpha = smoothstep(minVal, maxVal, brightness);
39+
gl_FragColor = vec4(color, alpha);
40+
}
41+
`
42+
);

0 commit comments

Comments
 (0)