📌 Three.js에서 성능 최적화 & 로딩 속도 개선하기

📌 Three.js에서 성능 최적화 & 로딩 속도 개선하기

지금까지 우리는 3D 모델을 불러오고, 애니메이션과 조명을 적용하여 현실적인 3D 씬을 구축해보았습니다.
하지만 실제 서비스에 적용하려면 성능 최적화가 반드시 필요합니다.
이번 글에서는 Three.js 프로젝트의 성능을 향상시키고 로딩 속도를 개선하는 핵심 전략들을 소개합니다.

---

🚀 1. 왜 성능 최적화가 중요한가?

3D는 브라우저에서 많은 GPU 리소스를 사용하기 때문에,
최적화를 하지 않으면 다음과 같은 문제가 발생합니다:

문제 원인

❌ 느린 초기 로딩	GLB/GLTF 파일이 너무 큼
❌ 프레임 드랍	다각형 수(poly count)가 너무 많음
❌ 조작 지연	그림자, 조명, 애니메이션 과부하
❌ 모바일 환경에서 작동 불가	하드웨어 사양 미지원

---

🧠 2. 성능 최적화를 위한 핵심 전략 7가지

---

✅ 1) GLB 모델 압축 (Draco Compression)

• GLB/GLTF 모델의 용량을 최대 90%까지 줄일 수 있는 압축 방식
• @react-three/drei에서 useGLTF는 자동으로 Draco를 지원합니다.

📌 압축 모델 사용 예시

const { scene } = useGLTF('/models/robot_draco.glb', true);  // draco: true

📌 Draco 압축은 Blender에서 가능하며, glTF-Pipeline CLI로도 적용할 수 있습니다.

---

✅ 2) Lazy Loading (Suspense + dynamic import)

반응형

• 초기 화면에 필요하지 않은 리소스는 나중에 로드하는 방식
• React.lazy와 Suspense를 사용

📌 예시 코드

import { Suspense, lazy } from 'react';

const HeavyModel = lazy(() => import('./HeavyModel'));

function Scene() {
  return (
    <Suspense fallback={<span>Loading...</span>}>
      <HeavyModel />
    </Suspense>
  );
}

---

✅ 3) 조명 & 그림자 최적화

• 그림자를 사용할 경우 성능이 급격히 떨어질 수 있음
• 필요한 경우에만 castShadow, receiveShadow 적용
• mapSize 줄이고 distance 제한하기

📌 그림자 mapSize 줄이기

<directionalLight
  castShadow
  shadow-mapSize-width={1024}
  shadow-mapSize-height={1024}
/>

---

✅ 4) 모델 단순화 (Low-Poly 사용)

• High-poly 모델은 수천 개의 삼각형 → GPU 부하
• Blender, Sketchfab 등에서 Low-Poly 모델 사용 권장

---

✅ 5) Postprocessing 최소화 또는 조건부 적용

• Bloom, SSR, Outline 등은 매우 리소스를 많이 사용
• UI에서 On/Off 토글을 두어 조건부 사용

---

✅ 6) Renderer 옵션 조절

• physicallyCorrectLights, toneMapping, antialias 등은 꺼두거나 조절 가능

📌 Canvas 설정 최적화 예시

<Canvas
  shadows
  dpr={window.devicePixelRatio}
  gl={{ antialias: false, physicallyCorrectLights: false }}
  camera={{ position: [0, 3, 5], fov: 50 }}
>

---

✅ 7) FPS & 성능 모니터링 도구 활용

• @react-three/drei의 <Stats /> 컴포넌트를 활용하여 FPS 및 메모리 사용량 확인

📌 예시

import { Stats } from '@react-three/drei';

function Scene() {
  return (
    <>
      <Canvas>{/* ... */}</Canvas>
      <Stats />
    </>
  );
}

---

🛠 3. 실전 적용 예시: 최적화 적용한 Viewer

import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF, Stats } from '@react-three/drei';
import { Suspense } from 'react';

function OptimizedModel() {
  const { scene } = useGLTF('/models/robot_draco.glb', true);
  return <primitive object={scene} scale={1.5} />;
}

export default function OptimizedViewer() {
  return (
    <>
      <Canvas
        shadows
        dpr={1.5}
        gl={{ antialias: false }}
        camera={{ position: [0, 2, 5], fov: 50 }}
      >
        <ambientLight intensity={0.3} />
        <directionalLight castShadow position={[5, 5, 5]} intensity={1} />
        <Suspense fallback={<span>모델 로딩 중...</span>}>
          <OptimizedModel />
        </Suspense>
        <OrbitControls />
      </Canvas>
      <Stats />
    </>
  );
}

---

✅ 4. 최적화 후 기대 효과

항목 최적화 전 최적화 후

모델 로딩 속도	5초 이상	1~2초
FPS	15~30	50~60
모바일 대응	제한적	원활함
초기 화면 렌더링	버벅임	부드러움

---

🎯 5. 다음 글 예고: 완성된 사이트 배포 & 활용

이제 우리가 만든 3D 뷰어 사이트는 최적화까지 마친 상태입니다.
다음 글에서는 이 사이트를 Netlify / Vercel에 배포하고 실제로 활용하는 방법을 소개합니다.
또한, 실제 포트폴리오/쇼핑몰/게임 아이템 뷰어로 확장하는 아이디어도 함께 다룹니다.

✅ 다음 편 예고:
"Three.js 3D 뷰어 사이트를 실제로 배포하고 활용하는 방법" 🚀

---