mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

memory leak and other fixes

Browse source
This commit is contained in:
ad044 2021-03-16 18:00:02 +04:00
parent 6003e80e73
commit 7f993dbac3
9 changed files with 127 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/MainScene/MiddleRing/MiddleRing.tsx
View file

@ -12,10 +12,6 @@ import sleep from "../../../utils/sleep";
const MiddleRing = () => {
const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture);
const middleRingMaterialRef = useRef<THREE.ShaderMaterial>();
const middleRingRef = useRef<THREE.Object3D>();
const middleRingPartRef = useRef<THREE.Object3D>();
const vertexShader = `
varying vec2 vUv;
uniform float uTime;
@ -168,6 +164,9 @@ const MiddleRing = () => {
const noiseAmpRef = useRef(0.03);
const wobbleAmpRef = useRef(0);
const middleRingMaterialRef = useRef<THREE.ShaderMaterial>();
const middleRingRef = useRef<THREE.Object3D>();
const middleRingPartRef = useRef<THREE.Object3D>();
useFrame(() => {
if (middleRingMaterialRef.current) {
@ -227,7 +226,7 @@ const MiddleRing = () => {
setRot({ rotZ: rotValues[1] });
isAnimatingRef.current = false;
await sleep(1000);
setRot({ rotZ: 0 });
};

54
src/components/MainScene/Site/Node.tsx
View file

@ -132,32 +132,34 @@ const Node = memo((props: NodeContructorProps) => {
config: { duration: 800 },
}));
useEffect(() => {
useStore.subscribe(set, (state) => ({
activeNodePosX: state.activeNodeAttributes.interactedWith
? state.activeNodePos[0]
: props.position[0],
activeNodePosY: state.activeNodeAttributes.interactedWith
? state.activeNodePos[1]
: props.position[1],
activeNodePosZ: state.activeNodeAttributes.interactedWith
? state.activeNodePos[2]
: props.position[2],
activeNodeRotZ: state.activeNodeAttributes.interactedWith
? state.activeNodeRot[2]
: 0,
activeNodeScale: state.activeNodeAttributes.shrinking ? 0 : 1,
activeNodeVisible: state.activeNodeAttributes.visible,
}));
}, [
props.level,
activeNodePosX,
activeNodePosZ,
activeNodeRotZ,
props.position,
set,
props.rotation,
]);
useEffect(
() =>
useStore.subscribe(set, (state) => ({
activeNodePosX: state.activeNodeAttributes.interactedWith
? state.activeNodePos[0]
: props.position[0],
activeNodePosY: state.activeNodeAttributes.interactedWith
? state.activeNodePos[1]
: props.position[1],
activeNodePosZ: state.activeNodeAttributes.interactedWith
? state.activeNodePos[2]
: props.position[2],
activeNodeRotZ: state.activeNodeAttributes.interactedWith
? state.activeNodeRot[2]
: 0,
activeNodeScale: state.activeNodeAttributes.shrinking ? 0 : 1,
activeNodeVisible: state.activeNodeAttributes.visible,
})),
[
props.level,
activeNodePosX,
activeNodePosZ,
activeNodeRotZ,
props.position,
set,
props.rotation,
]
);
useFrame(() => {
if (materialRef.current) {

22
src/components/MainScene/Site/PurpleRing.tsx
View file

@ -18,8 +18,10 @@ const PurpleRing = memo((props: PurpleRingProps) => {
const purpleRingRef = useRef<THREE.Object3D>();
const dispatchSiteLevelTextureOffset = (level: string) => {
const siteTextures = {
const levelTextureOffsets = useMemo(() => {
const formattedLevel = props.level.padStart(2, "0");
const offsets: { [key: string]: number } = {
"9": 0.035,
"8": 0.039,
"7": 0.001,
@ -31,25 +33,27 @@ const PurpleRing = memo((props: PurpleRingProps) => {
"1": 0.026,
"0": 0.031,
};
return siteTextures[level as keyof typeof siteTextures];
};
return [
offsets[formattedLevel.charAt(0)],
offsets[formattedLevel.charAt(1)],
];
}, [props.level]);
const uniforms = useMemo(() => {
const uniform = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
const formattedLevel = props.level.padStart(2, "0");
uniform.tex = { type: "t", value: null };
uniform.siteLevels = { type: "t", value: siteLevels };
uniform.siteLevelFirstCharacterOffset = {
value: dispatchSiteLevelTextureOffset(formattedLevel.charAt(0)),
value: levelTextureOffsets[0],
};
uniform.siteLevelSecondCharacterOffset = {
value: dispatchSiteLevelTextureOffset(formattedLevel.charAt(1)),
value: levelTextureOffsets[1],
};
return uniform;
}, [props.level, siteLevels]);
}, [siteLevels, levelTextureOffsets]);
const vertexShader = `
varying vec2 vUv;

38
src/components/MainScene/Site/Site.tsx
View file

@ -43,19 +43,31 @@ const Site = (props: SiteProps) => {
config: { duration: 1200 },
}));
useEffect(() => {
useStore.subscribe(setRotY, (state) => ({
y: state.siteRot[1],
delay: 1100,
}));
useStore.subscribe(setRotX, (state) => ({
x: state.siteRot[0],
}));
useStore.subscribe(setPos, (state) => ({
y: -level_y_values[state.activeLevel as keyof typeof level_y_values],
delay: 1300,
}));
}, [setPos, setRotX, setRotY]);
useEffect(
() =>
useStore.subscribe(setRotY, (state) => ({
y: state.siteRot[1],
delay: 1100,
})),
[setRotY]
);
useEffect(
() =>
useStore.subscribe(setRotX, (state) => ({
x: state.siteRot[0],
})),
[setRotX]
);
useEffect(
() =>
useStore.subscribe(setPos, (state) => ({
y: -level_y_values[state.activeLevel as keyof typeof level_y_values],
delay: 1300,
})),
[setPos]
);
const activeSite = useStore((state) => state.activeSite);
const gameProgress = useStore((state) => state.gameProgress);

2
src/components/MediaScene/Selectables/LeftSide.tsx
View file

@ -60,7 +60,7 @@ const LeftSide = memo(() => {
<Cube position={[-2.7, -1.6, 0.6]} active={cubesActive} />
<TriangularPrism
position={[-3.5, -1.6, 0.6]}
active={!trianglesActive}
active={trianglesActive}
/>
</a.group>
<a.group

18
src/core/eventTemplates.ts
View file

@ -459,8 +459,26 @@ export const changeMediaSide = (calculatedState: {
],
});
export const playMediaMovie = {
state: [
{
mutation: {
activeMediaComponent: "exit",
inputCooldown: 1200,
},
},
],
audio: [{ sfx: [audio.sound28] }],
effects: [
() => {
setTimeout(() => playMediaElement(), 1200);
},
],
};
export const playMedia = {
state: [{ mutation: { mediaPercentageElapsed: 0, inputCooldown: 500 } }],
audio: [{ sfx: [audio.sound28] }],
effects: [playMediaElement],
};

11
src/core/input-handlers/handleMediaSceneInput.ts
View file

@ -1,4 +1,7 @@
import { findNodeFromWord } from "../../helpers/media-helpers";
import {
findNodeFromWord,
playMediaElement,
} from "../../helpers/media-helpers";
import {
changeLeftMediaComponent,
changeMediaSide,
@ -8,6 +11,7 @@ import {
resetInputCooldown,
selectWord,
wordNotFound,
playMediaMovie,
} from "../eventTemplates";
import { isNodeVisible } from "../../helpers/node-helpers";
import {
@ -58,7 +62,10 @@ const handleMediaSceneInput = (
"media"
) as HTMLMediaElement;
if (!mediaElement.paused) return;
if (!mediaElement.paused) return resetInputCooldown;
if (!activeNode.media_file.includes("XA")) return playMediaMovie;
return playMedia;
case "exit":
return exitMedia;

19
src/scenes/EndScene.tsx
View file

@ -17,6 +17,7 @@ const EndScene = () => {
(state) => state.setEndSceneSelectionVisible
);
const setAudioAnalyser = useStore((state) => state.setAudioAnalyser);
const audioAnalyser = useStore((state) => state.audioAnalyser);
useFrame(() => {
if (mainCylinderRef.current) {
@ -44,14 +45,18 @@ const EndScene = () => {
const setInputCooldown = useStore((state) => state.setInputCooldown);
useEffect(() => {
if (!audioAnalyser) setAudioAnalyser(createAudioAnalyser());
}, [audioAnalyser, setAudioAnalyser]);
useEffect(() => {
const mediaElement = document.getElementById("media") as HTMLMediaElement;
if (mediaElement) {
const playMedia = async (idx: number) => {
switch (idx) {
// intro speech
case 0:
setAudioAnalyser(createAudioAnalyser());
setObjectsVisible(true);
setIsIntro(true);
@ -62,6 +67,7 @@ const EndScene = () => {
mediaElement.play();
setIsIntro(false);
break;
// name pronounciation syllable by syllable
default:
import("../static/voice/" + playerNameVoices[idx - 1] + ".mp4")
.then((media) => {
@ -71,6 +77,7 @@ const EndScene = () => {
})
.catch((e) => console.log(e));
break;
// outro laugh
case playerNameVoices.length + 1:
mediaElement.src = outroSpeech;
mediaElement.load();
@ -92,10 +99,16 @@ const EndScene = () => {
playMedia(0);
mediaElement.addEventListener("ended", () => {
playedMediaCountRef.current++;
playMedia(playedMediaCountRef.current);
if (playedMediaCountRef.current <= playerNameVoices.length + 1)
playMedia(playedMediaCountRef.current);
});
}
}, [playerNameVoices, setAudioAnalyser, setInputCooldown, setSelectionVisible]);
}, [
playerNameVoices,
setAudioAnalyser,
setInputCooldown,
setSelectionVisible,
]);
return (
<>

25
src/scenes/MediaScene.tsx
View file

@ -30,23 +30,27 @@ const MediaScene = () => {
const setNodeViewed = useStore.getState().setNodeViewed;
const isAudioOnly = useMemo(() => activeNode.media_file.includes("XA"), [
activeNode,
]);
useEffect(() => {
if (percentageElapsed === 100) {
const mediaElement = document.getElementById("media") as HTMLMediaElement;
const trackElement = document.getElementById("track") as HTMLTrackElement;
if (!isAudioOnly && mediaElement) {
mediaElement.currentTime = 0;
mediaElement.pause();
}
setNodeViewed(activeNode.node_name);
if (endrollPlayingRef.current) setScene("end");
else if (!endrollPlayingRef.current && activeNode.triggers_final_video) {
if (mediaSceneGroupRef.current)
mediaSceneGroupRef.current.visible = false;
const mediaElement = document.getElementById(
"media"
) as HTMLMediaElement;
const trackElement = document.getElementById(
"track"
) as HTMLTrackElement;
if (mediaElement) {
mediaElement.currentTime = 0;
@ -64,15 +68,12 @@ const MediaScene = () => {
activeNode.node_name,
activeNode.triggers_final_video,
incrementFinalVideoViewCount,
isAudioOnly,
percentageElapsed,
setNodeViewed,
setScene,
]);
const isAudioOnly = useMemo(() => activeNode.media_file.includes("XA"), [
activeNode,
]);
useEffect(() => {
const mediaElement = document.getElementById("media") as HTMLMediaElement;
const trackElement = document.getElementById("track") as HTMLTrackElement;