Antigravity Agent
4.5 KiB
4.5 KiB
id, category, confidence_score, tags, last_reinforced, github_commit
| id | category | confidence_score | tags | last_reinforced | github_commit | |
|---|---|---|---|---|---|---|
| P-REINFORCE-AUTO-13670A | 10_Wiki/💡 Topics/Graphics & Performance | 0.90 |
|
2026-04-20 | [P-Reinforce] Continuous Worker - 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, InstancedMesh, BatchedMesh, WebGPU, Level of Detail (LOD), Texture Compression
- Projects/Contexts: Utsubo, Segments.ai, 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