---
id: P-REINFORCE-AUTO-8E841B
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 간의 통신 오버헤드, 즉 드로우 콜(Draw Call)과 메모리 병목 현상을 극복하는 일련의 기술적 아키텍처입니다 [1, 2]. 주로 InstancedMesh와 BatchedMesh를 통한 드로우 콜 최소화, Draco 및 KTX2 등을 이용한 에셋 압축, 절두체 컬링(Frustum Culling) 및 LOD 시스템을 활용하여 그래픽 자원의 낭비를 줄입니다 [3-6]. 최근에는 WebGPU와 컴퓨트 셰이더(Compute Shader)가 도입되어 렌더링 제어 및 가시성 판단 연산을 GPU로 대거 이관함으로써, 더욱 막대한 규모의 씬을 유연하게 처리할 수 있는 차세대 파이프라인으로 진화하고 있습니다 [7-9].

## 📖 구조화된 지식 (Synthesized Content)
- **드로우 콜(Draw Call) 최소화 전략:** 실시간 렌더링 성능을 저하시키는 가장 결정적인 요인은 CPU가 렌더링 상태를 변경하고 GPU에 명령을 내리는 드로우 콜의 오버헤드입니다 [2, 10]. 원활한 60fps를 유지하려면 프레임당 드로우 콜을 100회 미만으로 타겟팅해야 합니다 [4, 11]. 이를 위해 동일한 기하학적 구조와 재질을 공유하는 객체는 `InstancedMesh`를 활용하여 수천 개를 단일 드로우 콜로 처리하며 [4, 5, 12], 재질은 같으나 지오메트리가 다양한 객체들은 `BatchedMesh`를 통해 최적화합니다 [13-15]. 정적인 배경이나 환경 모델은 `BufferGeometryUtils`를 사용해 하나의 지오메트리로 병합(Merging)하는 방법이 사용됩니다 [13, 16].
- **가시성 판단(Culling) 및 정렬 한계 극복:** `InstancedMesh`는 엔진 내부에서 단일 객체로 취급되기 때문에, 기본 절두체 컬링이 개별 인스턴스에는 작동하지 않는 '전부 아니면 전무' 방식의 한계를 가집니다 [17]. 이로 인해 화면 밖의 객체까지 정점 연산이 강제되고, 거리 기반 자동 정렬의 부재로 인해 막대한 오버드로우(Overdraw) 현상을 일으킬 수 있습니다 [18, 19]. 이에 대응하기 위해 BVH(Bounding Volume Hierarchy)를 결합하여 인스턴스 단위의 개별 컬링과 정렬을 지원하는 확장 라이브러리(예: `InstancedMesh2`)를 사용하거나 [20-22], 거리에 따라 모델 해상도를 낮추는 LOD(Level of Detail) 기법을 함께 적용하여 연산량을 제한합니다 [6, 11, 23].
- **메모리 대역폭 및 에셋 최적화:** 대형 어셈블리 모델이나 포인트 클라우드의 VRAM 고갈과 대역폭 한계를 막는 것은 파이프라인의 핵심입니다. Draco 압축을 통해 지오메트리 파일 크기를 최대 95%까지 축소시키고 [3, 24], KTX2나 Basis Universal 포맷을 적용하여 텍스처가 압축된 상태로 GPU 메모리에 상주하도록 만들어 메모리 소비를 약 10배 절감합니다 [3, 25]. 또한 다양한 재질의 텍스처를 하나의 텍스처 아틀라스(Texture Atlas)나 배열 텍스처(Data Array Textures)로 결합하면 텍스처 바인딩으로 인한 상태 변경 비용을 크게 줄일 수 있습니다 [26-29].
- **WebGPU 기반 차세대 렌더링 파이프라인:** 2026년 기준, Three.js(r171 이상)의 `WebGPURenderer` 및 TSL(Three Shader Language) 도입으로 대규모 렌더링 구조가 혁신적으로 변화했습니다 [7, 30]. 일반적인 CPU 한계를 초과하던 100만 개 이상의 파티클 연산, 물리 시뮬레이션, 복잡한 군중 애니메이션 등을 컴퓨트 셰이더(Compute Shader)를 통한 GPU-driven Rendering으로 병렬 처리할 수 있게 되었습니다 [31-34]. Native WebGPU 수준에서는 `GPURenderBundles` 및 Indirect Drawing 기술을 통해 500MB 이상의 초대형 건설/BIM 데이터셋에서도 강력한 성능 향상을 이끌어냅니다 [35, 36].

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

## 🔗 지식 연결 (Graph)
- **Related Topics:** `[[InstancedMesh|InstancedMesh]]`, `[[BatchedMesh|BatchedMesh]]`, `[[WebGPU|WebGPU]]`, `Draw Call (드로우 콜)`, `Frustum Culling (절두체 컬링)`, `[[가변적 LOD(Level of Detail) 시스템|LOD (Level of Detail)]]`, `Overdraw (오버드로우)`, `Compute Shader (컴퓨트 셰이더)`
- **Projects/Contexts:** `InstancedMesh2 (agargaro)`, `Three.js r171 WebGPURenderer`, `[[Segments.ai|Segments.ai]]`, `Fragment (IFC.js)`
- **Contradictions/Notes:** 
  - `InstancedMesh`는 드로우 콜을 줄여 성능을 크게 향상시키도록 설계되었으나, 불투명도 및 복잡한 셰이더 환경에서는 인스턴스 정렬 부재로 인한 심각한 오버드로우(Overdraw)를 유발해 일반 개별 Mesh(Shared attributes)를 사용할 때보다 프레임 레이트(FPS)가 오히려 낮아지는 역설적인 사례가 보고되고 있습니다 [18, 19].
  - `BatchedMesh` 역시 다수의 기하학적 구조를 통합하는 유용한 기술이지만, 약 20만 개 수준의 대량 지오메트리에 적용할 시 버퍼 데이터 업로드 등의 이유로 CPU 사용량이 30~50% 급증하며 병합된 기하학(Merged Geometry)보다 현저히 성능이 하락하는 구조적 병목이 제기되고 있습니다 [37-39].

---
*Last updated: 2026-04-19*
- Raw Source: 00_Raw/2026-04-20/Three.js 대규모 렌더링 최적화 파이프라인.md
---