---
id: P-REINFORCE-AUTO-13670A
category: "10_Wiki/💡 Topics/Graphics & Performance"
confidence_score: 0.90
tags: [auto-reinforced]
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - Threejs 렌더링 최적화"
---

# [[Threejs 렌더링 최적화|Threejs 렌더링 최적화]]

## 📌 한 줄 통찰 (The Karpathy Summary)
> Three.js 렌더링 최적화는 웹 환경에서 3D 그래픽을 부드럽고 효율적으로 구동하기 위해 CPU와 GPU 간의 병목 현상을 해소하는 일련의 기술적 과정입니다 [1-3]. 핵심 목표는 초당 프레임 수(FPS)를 안정적으로 유지하기 위해 드로우 콜(Draw Call) 횟수를 최소화하고, 메모리 대역폭을 효율적으로 관리하는 것입니다 [4-7]. 이를 위해 인스턴싱(Instancing), 배칭(Batching), 에셋 압축, 디테일 수준(LOD) 조절 및 최신 WebGPU API의 도입이 필수적으로 요구됩니다 [4, 8-10].

## 📖 구조화된 지식 (Synthesized Content)
- **드로우 콜(Draw Call)의 최소화:** 드로우 콜은 CPU가 GPU에게 렌더링을 지시하는 명령으로, 과도한 호출에 따른 오버헤드는 성능을 저하시키는 가장 큰 원인입니다 [3, 11, 12]. 원활한 60fps를 유지하기 위해서는 프레임당 드로우 콜을 100회 미만으로 유지하는 것이 권장됩니다 [5, 8, 13].
- **InstancedMesh와 BatchedMesh 활용:** 동일한 기하학적 구조와 재질을 가진 반복적인 객체(예: 나무, 군중)를 렌더링할 때는 `InstancedMesh`를 사용하여 단일 드로우 콜로 수많은 객체를 렌더링해야 합니다 [5, 14-16]. 반면, 재질은 동일하지만 지오메트리가 서로 다른 객체들을 그룹화하여 렌더링할 때는 `BatchedMesh`를 사용하는 것이 효율적입니다 [17-20].
- **에셋 및 메모리 최적화:** 지오메트리 파일 크기를 최대 95%까지 줄여주는 Draco 압축을 사용하고, VRAM 사용량을 대폭 감소시키며 GPU에서 직접 압축이 해제되는 KTX2 및 Basis Universal 텍스처 형식을 적용해야 합니다 [8, 21-23]. 또한 사용이 끝난 지오메트리, 재질, 텍스처, 렌더 타겟 등은 반드시 `.dispose()`를 호출하여 명시적으로 GPU 메모리를 해제해야 누수를 방지할 수 있습니다 [24-27].
- **LOD(Level of Detail) 및 컬링:** 카메라와의 거리에 따라 폴리곤 수가 적은 모델이나 임포스터(Impostor)로 교체하여 렌더링 연산을 줄이는 LOD 시스템을 구현해야 합니다 [13, 28-31]. 더불어 보이지 않는 객체를 렌더링에서 제외하는 절두체 컬링(Frustum Culling)이 올바르게 동작하도록 바운딩 박스를 관리해야 합니다 [32, 33].
- **WebGPU 및 TSL 전환:** Three.js r171 버전부터 정식 지원되는 `WebGPURenderer`는 대규모 데이터셋 처리와 컴퓨트 집약적인 효과(파티클, 물리 연산 등)에서 기존 대비 수 배에서 100배 이상의 성능 향상을 제공합니다 [34-37]. 새로운 TSL(Three Shader Language)을 사용하면 단일 코드로 작성된 셰이더를 WebGPU와 WebGL 모두에 호환되게 배포할 수 있습니다 [38-40].

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.

## 🔗 지식 연결 (Graph)
- **Related Topics:** [[Draw Call|Draw Call]], [[InstancedMesh|InstancedMesh]], [[BatchedMesh|BatchedMesh]], [[WebGPU|WebGPU]], [[Level of Detail (LOD)|Level of Detail (LOD)]], [[Texture Compression|Texture Compression]]
- **Projects/Contexts:** [[Utsubo|Utsubo]], [[Segments.ai|Segments.ai]], [[InstancedMesh2 library|InstancedMesh2 library]]
- **Contradictions/Notes:** `InstancedMesh`는 드로우 콜을 획기적으로 줄여주지만, 엔진 수준에서 개별 인스턴스에 대한 절두체 컬링과 깊이 정렬(Sorting)이 불가능하여 오버드로우(Overdraw)가 유발됩니다. 이로 인해 픽셀 연산이 무거운 씬에서는 오히려 일반 메쉬 방식보다 프레임 레이트가 하락할 수 있다는 한계가 지적됩니다 [41-44]. 대안으로 꼽히는 `BatchedMesh` 역시 수십만 개 단위의 복잡한 기하학적 데이터와 인스턴스를 처리할 때는 심각한 CPU 병목 현상 및 성능 저하를 야기할 수 있습니다 [20, 45-48].

---
*Last updated: 2026-04-19*
- Raw Source: 00_Raw/2026-04-20/Three.js 렌더링 최적화.md
---