Merge pull request #22 from WooWan/perf/stage-performance-improve

Perf/stage performance improve

Author: WooWan

src/components/Bar.tsx

@@ -1,38 +1,41 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import * as THREE from 'three';
 import { useFrame } from '@react-three/fiber';
 import { lerp } from 'three/src/math/MathUtils';
 
 type Props = {
   radius: number;
+  index: number;
   centerPos: number[];
-  mean: number;
-  musicInput: number;
   position: THREE.Vector3;
   theta: number;
   color: string;
+  meanRef: React.MutableRefObject<number>;
+  dataArrayRef: React.MutableRefObject<Uint8Array | null>;
 };
 
-export default function Bar({ radius, centerPos, mean, musicInput, position, theta, color }: Props) {
+export default function Bar({ radius, index, centerPos, position, theta, color, meanRef, dataArrayRef }: Props) {
   const barRef = useRef<THREE.Mesh>(null!);
-  const [height, setHeight] = useState(0);
-  const [angle, setAngle] = useState<any>(theta);
-
+  const heightRef = useRef(0);
+  const angleRef = useRef(theta);
   const radian = Math.PI / 180;
 
-  useFrame((_, delta) => {
-    if (musicInput > height) {
-      setHeight(musicInput);
+  useFrame((_) => {
+    if (!dataArrayRef.current) return;
+    const mean = meanRef.current - 1;
+    const frequency = dataArrayRef.current?.[index] / 128 - 1;
+    const height = heightRef.current;
+
+    if (frequency > height) {
+      heightRef.current = frequency;
     } else {
-      setHeight(height - height * 0.2);
+      heightRef.current = height - height * 0.2;
     }
-
-    const na = (angle + radian) % 360;
-    setAngle(na);
+    angleRef.current = (angleRef.current + radian) % 360;
     const power = mean < 0 ? 0 : Math.round(mean * 10000) / 10000;
-    const nx = centerPos[0] + (radius + power * 500) * Math.cos(angle);
-    const ny = centerPos[1] + height * height * 1200;
-    const nz = centerPos[2] + (radius + power * 500) * Math.sin(angle);
+    const nx = centerPos[0] + (radius + power * 500) * Math.cos(angleRef.current);
+    const ny = centerPos[1] + heightRef.current * heightRef.current * 1200;
+    const nz = centerPos[2] + (radius + power * 500) * Math.sin(angleRef.current);
 
     barRef.current.position.x = lerp(barRef.current.position.x, nx, 0.02);
     barRef.current.position.y = lerp(barRef.current.position.y, ny, 0.03);

src/components/MusicAnalyzer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
 import Bar from './Bar';
@@ -13,8 +13,10 @@ type Props = {
 
 export default function MusicAnalyzer({ music, fftSize, centerPos, radius }: Props) {
   const [analyser, setAnalyser] = useState<any>(null);
-  const [dataArray, setDataArray] = useState<any>(null);
-  const [mean, setMean] = useState(0);
+  const dataArrayRef = useRef<Uint8Array | null>(null);
+  const meanRef = useRef(0);
+  // const [dataArray, setDataArray] = useState<any>(null);
+  // const [mean, setMean] = useState(0);
   const [sourceNode, setSourceNode] = useState<MediaElementAudioSourceNode | null>(null);
   const isMusicPlay = useMusicPlayStore((state) => state.isMusicPlay);
 
@@ -46,26 +48,31 @@ export default function MusicAnalyzer({ music, fftSize, centerPos, radius }: Pro
     setAnalyser(analyser);
   }, [isMusicPlay]);
 
+  const newData = new Uint8Array(fftSize);
   useFrame(() => {
     if (analyser) {
-      const newData = new Uint8Array(fftSize);
-
       analyser.getByteTimeDomainData(newData);
 
-      setMean(newData.reduce((a, b) => a + b) / (128 * newData.length));
-      setDataArray(newData);
+      // setMean(newData.reduce((a, b) => a + b) / (128 * newData.length));
+      // setDataArray(newData);
+
+      meanRef.current = newData.reduce((a, b) => a + b) / (128 * newData.length);
+      dataArrayRef.current = newData;
     }
   });
-  if (isMusicPlay && dataArray) {
+  if (isMusicPlay) {
     return (
       <group>
         {bars.map((item, index) => (
           <Bar
             key={index}
+            index={index}
             radius={radius}
             centerPos={centerPos}
-            mean={mean - 1}
-            musicInput={dataArray[index] / 128 - 1}
+            // mean={mean - 1}
+            // musicInput={dataArray[index] / 128 - 1}
+            dataArrayRef={dataArrayRef}
+            meanRef={meanRef}
             position={item.position}
             theta={item.theta}
             color={item.color}