mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
lain speaking issue and other minor bugfixes
This commit is contained in:
parent
7f993dbac3
commit
f9c5a7ce69
7 changed files with 35 additions and 27 deletions
|
@ -1,9 +1,9 @@
|
||||||
import React from "react";
|
import React, { memo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import mainCylinder from "../../static/sprites/end/end_cylinder_1.png";
|
import mainCylinder from "../../static/sprites/end/end_cylinder_1.png";
|
||||||
|
|
||||||
const EndCylinder = () => {
|
const EndCylinder = memo(() => {
|
||||||
const mainCylinderTex = useLoader(THREE.TextureLoader, mainCylinder);
|
const mainCylinderTex = useLoader(THREE.TextureLoader, mainCylinder);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -54,6 +54,6 @@ const EndCylinder = () => {
|
||||||
</mesh>
|
</mesh>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default EndCylinder;
|
export default EndCylinder;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useRef } from "react";
|
import React, { useRef, memo } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import secondCylinder from "../../static/sprites/end/end_cylinder_2.png";
|
import secondCylinder from "../../static/sprites/end/end_cylinder_2.png";
|
||||||
|
@ -8,7 +8,7 @@ type EndSphereProps = {
|
||||||
outroAnim: boolean;
|
outroAnim: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const EndSphere = (props: EndSphereProps) => {
|
const EndSphere = memo((props: EndSphereProps) => {
|
||||||
const secondCylinderTex = useLoader(THREE.TextureLoader, secondCylinder);
|
const secondCylinderTex = useLoader(THREE.TextureLoader, secondCylinder);
|
||||||
|
|
||||||
const meshRef = useRef<THREE.Object3D>();
|
const meshRef = useRef<THREE.Object3D>();
|
||||||
|
@ -46,6 +46,6 @@ const EndSphere = (props: EndSphereProps) => {
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
};
|
});
|
||||||
|
|
||||||
export default EndSphere;
|
export default EndSphere;
|
||||||
|
|
|
@ -44,14 +44,22 @@ const LainSpeak = (props: LainTaKProps) => {
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (audioAnalyser) {
|
if (audioAnalyser) {
|
||||||
const freq = audioAnalyser.getAverageFrequency() * 1.2;
|
const buffer = new Uint8Array(audioAnalyser.analyser.fftSize / 2);
|
||||||
|
audioAnalyser.analyser.getByteTimeDomainData(buffer);
|
||||||
|
|
||||||
|
let rms = 0;
|
||||||
|
for (let i = 0; i < buffer.length; i++) {
|
||||||
|
rms += buffer[i] * buffer[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
rms = Math.sqrt(rms / buffer.length);
|
||||||
|
|
||||||
if (mouthRef.current) {
|
if (mouthRef.current) {
|
||||||
if (freq >= 50) {
|
if (rms >= 130) {
|
||||||
mouthRef.current.map = mouth4Tex;
|
mouthRef.current.map = mouth4Tex;
|
||||||
} else if (freq >= 40 && freq <= 50) {
|
} else if (rms >= 129 && rms <= 130) {
|
||||||
mouthRef.current.map = mouth3Tex;
|
mouthRef.current.map = mouth3Tex;
|
||||||
} else if (freq >= 30 && freq <= 40) {
|
} else if (rms > 128 && rms <= 129) {
|
||||||
mouthRef.current.map = mouth2Tex;
|
mouthRef.current.map = mouth2Tex;
|
||||||
} else {
|
} else {
|
||||||
mouthRef.current.map = mouth1Tex;
|
mouthRef.current.map = mouth1Tex;
|
||||||
|
|
|
@ -67,7 +67,7 @@ const MediaPlayer = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<video id="media" ref={videoRef}>
|
<video id="media" ref={videoRef} disablePictureInPicture>
|
||||||
<track id={"track"} ref={trackRef} kind="metadata" default />
|
<track id={"track"} ref={trackRef} kind="metadata" default />
|
||||||
</video>
|
</video>
|
||||||
<div id={"subtitle-container"}>
|
<div id={"subtitle-container"}>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
||||||
import { useStore } from "../../../store";
|
import { useStore } from "../../../store";
|
||||||
|
|
||||||
const AudioVisualizer = memo(() => {
|
const AudioVisualizer = memo(() => {
|
||||||
const audioAnalyser = useStore(state=> state.audioAnalyser)
|
const audioAnalyser = useStore((state) => state.audioAnalyser);
|
||||||
const columnRefs = useMemo(
|
const columnRefs = useMemo(
|
||||||
() =>
|
() =>
|
||||||
Array.from({ length: 15 }, () => [
|
Array.from({ length: 15 }, () => [
|
||||||
|
@ -27,9 +27,7 @@ const AudioVisualizer = memo(() => {
|
||||||
const ref3 = refArray[2];
|
const ref3 = refArray[2];
|
||||||
const ref4 = refArray[3];
|
const ref4 = refArray[3];
|
||||||
|
|
||||||
// we up it by 1.2 just so it becomes a bit more noticable, otherwise
|
const currentFrequency = frequencyData[16 * idx];
|
||||||
// the visualizer is a bit too "calm"
|
|
||||||
const currentFrequency = frequencyData[16 * idx] * 1.2;
|
|
||||||
|
|
||||||
switch (true) {
|
switch (true) {
|
||||||
case currentFrequency >= 255:
|
case currentFrequency >= 255:
|
||||||
|
|
|
@ -1,7 +1,4 @@
|
||||||
import {
|
import { findNodeFromWord } from "../../helpers/media-helpers";
|
||||||
findNodeFromWord,
|
|
||||||
playMediaElement,
|
|
||||||
} from "../../helpers/media-helpers";
|
|
||||||
import {
|
import {
|
||||||
changeLeftMediaComponent,
|
changeLeftMediaComponent,
|
||||||
changeMediaSide,
|
changeMediaSide,
|
||||||
|
|
|
@ -49,17 +49,22 @@ const Notes = () => {
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<p>Browser settings</p>
|
<p>Browser Settings</p>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<p>
|
<p>
|
||||||
This part might be updated from time to time as more issues pop
|
<span className="text-center">Firefox</span>
|
||||||
up. <br />
|
<div className="browser-notes">
|
||||||
|
privacy.resistFingerprinting should be set to false (it should
|
||||||
|
be by default). Otherwise, it limits the maximum WebGL texture
|
||||||
|
size to 2048, resulting in poor sprite quality.
|
||||||
<br />
|
<br />
|
||||||
Firefox: <br />
|
<br />
|
||||||
privacy.resistFingerprinting needs to be set to false (it should
|
Picture-In-Picture functionality should not be used (you most
|
||||||
be by default). Otherwise, it limits the maximum WebGL texture size to
|
likely have it disabled already). Just having it enabled won't
|
||||||
2048, resulting in poor sprite quality.
|
break anything, but actually using it might lead to some funny
|
||||||
|
visual bugs with media files.
|
||||||
|
</div>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
Loading…
Reference in a new issue