Skip to content

Commit c8c7cba

Browse files
takuma-hmng8takuma-hmng8
authored
Merge pull request #96 from FunTechInc/v1.1.13
fix css
2 parents d388238 + 49fbc12 commit c8c7cba

8 files changed

+219
-136
lines changed

‎app/ShaderFx.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,24 @@ export const ShaderFx = ({
2727
preserveDrawingBuffer = false,
2828
shadows = false,
2929
isDprUpdate = true,
30+
eventSource,
3031
}: {
3132
children: React.ReactNode;
3233
preserveDrawingBuffer?: boolean;
3334
shadows?: boolean;
3435
isDprUpdate?: boolean;
36+
eventSource?: HTMLElement | React.MutableRefObject<HTMLElement> | undefined;
3537
}) => {
3638
const [dpr, setDpr] = useState(1.5);
3739
return (
3840
<Suspense fallback={<Loading />}>
3941
<Canvas
42+
eventSource={eventSource}
43+
eventPrefix={eventSource ? "client" : "offset"}
4044
dpr={dpr}
4145
gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}
4246
shadows={shadows}>
4347
<PerformanceMonitor
44-
factor={1}
4548
onChange={({ factor }) => {
4649
if (preserveDrawingBuffer) {
4750
return;
@@ -50,7 +53,7 @@ export const ShaderFx = ({
5053
return;
5154
}
5255
console.log(`dpr:${dpr}`);
53-
setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
56+
setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
5457
}}>
5558
{children}
5659
{/* <Perf position={"bottom-left"} minimal={false} /> */}

‎app/_home/index.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
position: fixed;
55
top: 0;
66
left: 0;
7+
z-index: -1;
78
}
89

910
.wrapper {

‎app/_home/index.tsx

+64-54
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { ShaderFx } from "../ShaderFx";
44
import { Playground } from "./Playground";
5-
import { useState } from "react";
5+
import { useRef, useState } from "react";
66
import { EasingTypes } from "@/packages/use-shader-fx/src";
77
import Image from "next/image";
88
import s from "./index.module.scss";
@@ -25,6 +25,9 @@ const Install = () => {
2525
};
2626

2727
export default function Page() {
28+
const wrapper = useRef<HTMLDivElement>(
29+
null
30+
) as React.MutableRefObject<HTMLDivElement>;
2831
const [bpm, setBpm] = useState(120);
2932
const [easing, setEasing] = useState<EasingTypes>("easeOutQuad");
3033

@@ -64,64 +67,71 @@ export default function Page() {
6467
return (
6568
<>
6669
<div className={s.canvas}>
67-
<ShaderFx>
70+
<ShaderFx eventSource={wrapper}>
6871
<Playground bpm={bpm} easing={easing} />
6972
</ShaderFx>
7073
</div>
71-
<div className={s.wrapper}>
72-
<div className={s.content}>
73-
<h1 className={s.title}>⚡️ More FXs, Less GLSL</h1>
74-
<Install />
75-
<p className={s.link}>
76-
Oh, right, u can download the gradient from
77-
<a href="/gradation" target="_blank">
78-
here 👉
79-
</a>
80-
</p>
81-
<div className={s.input}>
82-
<p>BPM:</p>
83-
<input
84-
type="number"
85-
value={bpm}
86-
onChange={(e) => {
87-
setBpm(+e.target.value);
88-
}}
89-
/>
90-
</div>
91-
<div className={s.input}>
92-
<p>Easing:</p>
93-
<select
94-
value={easing}
95-
onChange={(e) => {
96-
setEasing(e.target.value as EasingTypes);
97-
}}>
98-
{easingTypes.map((type) => (
99-
<option key={type} value={type}>
100-
{type}
101-
</option>
102-
))}
103-
</select>
74+
<div ref={wrapper}>
75+
<div className={s.wrapper}>
76+
<div className={s.content}>
77+
<h1 className={s.title}>⚡️ More FXs, Less GLSL</h1>
78+
<Install />
79+
<p className={s.link}>
80+
Oh, right, u can download the gradient from
81+
<a href="/gradation" target="_blank">
82+
here 👉
83+
</a>
84+
</p>
85+
<div className={s.input}>
86+
<p>BPM:</p>
87+
<input
88+
type="number"
89+
value={bpm}
90+
onChange={(e) => {
91+
setBpm(+e.target.value);
92+
}}
93+
/>
94+
</div>
95+
<div className={s.input}>
96+
<p>Easing:</p>
97+
<select
98+
value={easing}
99+
onChange={(e) => {
100+
setEasing(e.target.value as EasingTypes);
101+
}}>
102+
{easingTypes.map((type) => (
103+
<option key={type} value={type}>
104+
{type}
105+
</option>
106+
))}
107+
</select>
108+
</div>
104109
</div>
110+
<ul className={s.snsLink}>
111+
<li>
112+
<a
113+
href="https://github.com/FunTechInc/use-shader-fx"
114+
target={"_blank"}>
115+
<Image
116+
src="github-logo.svg"
117+
alt="GitHub"
118+
width={28}
119+
height={28}
120+
/>
121+
</a>
122+
</li>
123+
<li>
124+
<a href="https://twitter.com/tkm_hmng8" target={"_blank"}>
125+
<Image
126+
src="x-logo.svg"
127+
alt="X"
128+
width={24}
129+
height={24}
130+
/>
131+
</a>
132+
</li>
133+
</ul>
105134
</div>
106-
<ul className={s.snsLink}>
107-
<li>
108-
<a
109-
href="https://github.com/FunTechInc/use-shader-fx"
110-
target={"_blank"}>
111-
<Image
112-
src="github-logo.svg"
113-
alt="GitHub"
114-
width={28}
115-
height={28}
116-
/>
117-
</a>
118-
</li>
119-
<li>
120-
<a href="https://twitter.com/tkm_hmng8" target={"_blank"}>
121-
<Image src="x-logo.svg" alt="X" width={24} height={24} />
122-
</a>
123-
</li>
124-
</ul>
125135
</div>
126136
</>
127137
);

‎app/playground/Playground.tsx

+18-4
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,32 @@
33
import * as THREE from "three";
44
import { useEffect, useMemo, useRef, useState } from "react";
55
import { useFrame, useThree, extend, useLoader } from "@react-three/fiber";
6-
import { useFluid } from "@/packages/use-shader-fx/src";
6+
import { useFluid, useCoverTexture } from "@/packages/use-shader-fx/src";
77
import { FxMaterial } from "./FxMaterial";
8+
import { useVideoTexture } from "@react-three/drei";
89

910
extend({ FxMaterial });
1011

1112
export const Playground = () => {
1213
const { size } = useThree();
14+
15+
const funkun = useVideoTexture("/FT_Ch02-comp.mp4", { width: 920 });
16+
const [updateCover, setCover, { output: cover }] = useCoverTexture({
17+
size,
18+
dpr: 0.1,
19+
});
20+
21+
setCover({
22+
texture: funkun,
23+
});
24+
1325
const [updateFluid, setFluid, { output: fluid }] = useFluid({
1426
size,
1527
dpr: {
1628
dpr: 0.08,
1729
effect: {
18-
fbo: false,
30+
shader: true,
31+
fbo: true,
1932
},
2033
},
2134
});
@@ -27,14 +40,15 @@ export const Playground = () => {
2740
});
2841

2942
useFrame((props) => {
30-
updateFluid(props);
43+
// updateFluid(props);
44+
updateCover(props);
3145
});
3246

3347
return (
3448
<>
3549
<mesh>
3650
<planeGeometry args={[2, 2]} />
37-
<fxMaterial u_fx={fluid} key={FxMaterial.key} />
51+
<fxMaterial u_fx={cover} key={FxMaterial.key} />
3852
</mesh>
3953
</>
4054
);

0 commit comments

Comments
 (0)