Skip to content

Commit f99827d

Browse files
author
takuma-hmng8
committed
12.9
1 parent 5d3bbaa commit f99827d

File tree

19 files changed

+240
-95
lines changed

19 files changed

+240
-95
lines changed

‎.storybook/constant.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as THREE from "three";
22

33
export const CONSTANT = {
4-
imageResolution: new THREE.Vector2(1440, 1029),
4+
textureResolution: new THREE.Vector2(1440, 1029),
55
};

‎.storybook/stories/UseBrush.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const UseBrushWithTexture = (args: BrushParams) => {
6464

6565
useFrame((props) => {
6666
const bgTexture = updateTransitionBg(props, {
67-
imageResolution: CONSTANT.imageResolution,
67+
textureResolution: CONSTANT.textureResolution,
6868
texture0: bg,
6969
});
7070
const fx = updateBrush(props, {

‎.storybook/stories/UseDuoTone.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const UseDuoTone = (args: DuoToneParams) => {
3636

3737
useFrame((props) => {
3838
const bgTexture = updateTransitionBg(props, {
39-
imageResolution: CONSTANT.imageResolution,
39+
textureResolution: CONSTANT.textureResolution,
4040
texture0: bg,
4141
});
4242
const fx = updateDuoTone(props, {

‎.storybook/stories/UseFluid.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const UseFluidWithTexture = (args: FluidParams) => {
7373

7474
useFrame((props) => {
7575
const bgTexture = updateTransitionBg(props, {
76-
imageResolution: CONSTANT.imageResolution,
76+
textureResolution: CONSTANT.textureResolution,
7777
texture0: bg,
7878
});
7979

‎.storybook/stories/UseFogProjection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const UseFogProjection = (args: FogProjectionParams) => {
4848

4949
useFrame((props) => {
5050
const bgTexture = updateTransitionBg(props, {
51-
imageResolution: CONSTANT.imageResolution,
51+
textureResolution: CONSTANT.textureResolution,
5252
texture0: bg,
5353
});
5454
const noise = updateNoise(props);

‎.storybook/stories/UseRipple.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const UseRippleWithTexture = (args: RippleParams) => {
6969

7070
useFrame((props) => {
7171
const bgTexture = updateTransitionBg(props, {
72-
imageResolution: CONSTANT.imageResolution,
72+
textureResolution: CONSTANT.textureResolution,
7373
texture0: bg,
7474
});
7575
const fx = updateRipple(props, setConfig());

‎.storybook/stories/UseTransitionBg.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const UseTransitionBg = (args: TransitionBgParams) => {
4848
const noise = updateNoise(props);
4949
const fx = updateTransitionBg(props, {
5050
noiseMap: noise,
51-
imageResolution: CONSTANT.imageResolution,
51+
textureResolution: CONSTANT.textureResolution,
5252
texture0: bg,
5353
texture1: momo,
5454
...setConfig(),

‎app/domSyncer/DomSyncer.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
import * as THREE from "three";
2-
import { useEffect, useLayoutEffect, useRef } from "react";
2+
import { useEffect, useRef } from "react";
33
import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
44
import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
5-
import { useDomSyncer, useNoise } from "@/packages/use-shader-fx/src";
5+
import {
6+
useDomSyncer,
7+
useNoise,
8+
useTransitionBg,
9+
} from "@/packages/use-shader-fx/src";
610

711
extend({ FxMaterial });
812

913
/*===============================================
1014
TODO*
1115
- 角丸
12-
- リサイズ
13-
- resolutionの調整
1416
===============================================*/
1517

18+
const CONSTANT = {
19+
textureResolution: new THREE.Vector2(1440, 1029),
20+
};
21+
1622
export const DomSyncer = ({ state }: { state: number }) => {
1723
const mainShaderRef = useRef<FxMaterialProps>();
1824

@@ -22,8 +28,7 @@ export const DomSyncer = ({ state }: { state: number }) => {
2228
const dpr = useThree((state) => state.viewport.dpr);
2329

2430
const [updateNoise] = useNoise({ size, dpr });
25-
26-
// TODO* dependencyを2引数に渡すようにする
31+
const [updateTransitionBg] = useTransitionBg({ size, dpr });
2732
const [updateDomSyncer] = useDomSyncer({ size, dpr }, [state]);
2833

2934
const domArr = useRef<(HTMLElement | Element)[]>([]);
@@ -37,14 +42,26 @@ export const DomSyncer = ({ state }: { state: number }) => {
3742

3843
useFrame((props) => {
3944
const noise = updateNoise(props);
40-
// TODO*ここにtextureとDOMをセットにした配列を渡す[texture, dom][]
41-
const tex = updateDomSyncer(props, {
45+
const fx = updateTransitionBg(props, {
46+
noiseMap: noise,
47+
textureResolution: CONSTANT.textureResolution,
48+
texture0: momo,
49+
texture1: momo,
50+
noiseStrength: 0.0,
51+
});
52+
53+
const syncedTexture = updateDomSyncer(props, {
4254
dom: domArr.current,
43-
texture: [...Array(domArr.current.length)].map((_, i) => noise),
55+
texture: [...Array(domArr.current.length)].map(() => fx),
56+
resolution: [...Array(domArr.current.length)].map(
57+
() => CONSTANT.textureResolution
58+
),
4459
});
60+
4561
const main = mainShaderRef.current;
4662
if (main) {
47-
main.u_fx = tex;
63+
main.u_fx = syncedTexture;
64+
main.u_alpha = 0.0;
4865
}
4966
});
5067

‎app/domSyncer/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function Page() {
4949
key={i}
5050
style={{
5151
width: "calc(50% - 40px)",
52-
height: "80vh",
52+
height: "120vh",
5353
}}></div>
5454
))}
5555
</>
@@ -61,7 +61,7 @@ export default function Page() {
6161
key={i}
6262
style={{
6363
width: "100%",
64-
height: "50vh",
64+
height: "120vh",
6565
}}></div>
6666
))}
6767
</>

‎packages/use-shader-fx/src/hooks/useDomSyncer/index.ts‎

Lines changed: 40 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import { useCallback, useEffect, useMemo, useState } from "react";
21
import * as THREE from "three";
2+
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
33
import { useCamera } from "../../utils/useCamera";
44
import { RootState, Size } from "@react-three/fiber";
55
import { useSingleFBO } from "../../utils/useSingleFBO";
6-
import { setUniform } from "../../utils/setUniforms";
76
import { HooksReturn } from "../types";
87
import { useParams } from "../../utils/useParams";
9-
10-
import vertexShader from "./shader/main.vert";
11-
import fragmentShader from "./shader/main.frag";
8+
import { errorHandling } from "./utils/errorHandling";
9+
import { createMesh } from "./utils/createMesh";
10+
import { intersectionHandler } from "./utils/intersectionHandler";
11+
import { updateRect } from "./utils/updateRect";
1212

1313
export type DomSyncerParams = {
1414
texture: THREE.Texture[];
1515
dom: (HTMLElement | Element | null)[];
16+
resolution?: THREE.Vector2[];
1617
};
1718

1819
export type DomSyncerObject = {
@@ -24,6 +25,7 @@ export type DomSyncerObject = {
2425
export const DOMSYNCER_PARAMS: DomSyncerParams = {
2526
texture: [],
2627
dom: [],
28+
resolution: [],
2729
};
2830

2931
/**
@@ -47,24 +49,19 @@ export const useDomSyncer = (
4749
size,
4850
dpr,
4951
});
52+
const [params, setParams] = useParams<DomSyncerParams>(DOMSYNCER_PARAMS);
5053

54+
// dependenciesをtriggerして、meshと
5155
const [refreshTrigger, setRefreshTrigger] = useState(true);
5256
useEffect(() => {
5357
setRefreshTrigger(true);
54-
return () => {
55-
for (let i = 0; i < scene.children.length; i++) {
56-
const child = scene.children[i];
57-
if (child instanceof THREE.Mesh) {
58-
child.geometry.dispose();
59-
child.material.dispose();
60-
}
61-
}
62-
scene.remove(...scene.children);
63-
};
6458
// eslint-disable-next-line react-hooks/exhaustive-deps
6559
}, dependencies);
6660

67-
const [params, setParams] = useParams<DomSyncerParams>(DOMSYNCER_PARAMS);
61+
const resolutionRef = useRef<THREE.Vector2>(new THREE.Vector2(0, 0));
62+
const intersectionObserverRef = useRef<IntersectionObserver[]>([]);
63+
const intersectionDomRef = useRef<(HTMLElement | Element | null)[]>([]);
64+
const isIntersectingRef = useRef<boolean[]>([]);
6865

6966
const updateFx = useCallback(
7067
(props: RootState, updateParams?: DomSyncerParams) => {
@@ -73,66 +70,45 @@ export const useDomSyncer = (
7370
updateParams && setParams(updateParams);
7471

7572
/*===============================================
76-
エラー
73+
エラーハンドリング
7774
===============================================*/
78-
if (params.dom.length !== params.texture.length) {
79-
throw new Error("domとテクスチャーの数は一致しません！");
80-
}
81-
if (params.dom.length === 0 || params.texture.length === 0) {
82-
throw new Error("配列が空ですよ！");
83-
}
75+
errorHandling(params);
8476

8577
/*===============================================
86-
// 最初の1回だけ、materialを生成して、sceneに渡す
78+
最初の1回だけ、materialを生成して、sceneに渡す
8779
===============================================*/
8880
if (refreshTrigger) {
89-
for (let i = 0; i < params.dom.length; i++) {
90-
const object = new THREE.Mesh(
91-
new THREE.PlaneGeometry(1, 1),
92-
new THREE.ShaderMaterial({
93-
vertexShader: vertexShader,
94-
fragmentShader: fragmentShader,
95-
transparent: true,
96-
uniforms: {
97-
u_texture: { value: params.texture[i] },
98-
},
99-
})
100-
);
101-
scene.add(object);
102-
}
81+
createMesh({
82+
params,
83+
size,
84+
resolutionRef,
85+
scene,
86+
});
87+
88+
intersectionHandler({
89+
intersectionObserverRef,
90+
intersectionDomRef,
91+
isIntersectingRef,
92+
params,
93+
});
94+
10395
setRefreshTrigger(false);
10496
}
10597

10698
/*===============================================
107-
rectを計算する
108-
//TODO*　intersection してる時だけ計算するようにしたい
99+
rectを更新する
109100
===============================================*/
110-
for (let i = 0; i < scene.children.length; i++) {
111-
const domElement = params.dom[i];
112-
if (!domElement) {
113-
throw new Error("domが取得できてないっぽい！");
114-
}
115-
const rect = domElement.getBoundingClientRect();
116-
const object = scene.children[i];
117-
object.scale.set(rect.width, rect.height, 1.0);
118-
object.position.set(
119-
rect.left + rect.width * 0.5 - size.width * 0.5,
120-
-rect.top - rect.height * 0.5 + size.height * 0.5,
121-
0.0
122-
);
123-
}
101+
updateRect({
102+
params,
103+
size,
104+
resolutionRef,
105+
scene,
106+
isIntersectingRef,
107+
});
124108

125-
const bufferTexture = updateRenderTarget(gl);
126-
return bufferTexture;
109+
return updateRenderTarget(gl);
127110
},
128-
[
129-
updateRenderTarget,
130-
setParams,
131-
refreshTrigger,
132-
scene,
133-
params.dom,
134-
params.texture,
135-
]
111+
[updateRenderTarget, setParams, refreshTrigger, scene, params]
136112
);
137113

138114
return [

0 commit comments

Comments
 (0)