---
id: wiki-2026-0508-가변적-lod-level-of-detail-시스템
title: 가변적 LOD(Level of Detail) 시스템
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [LOD, Level of Detail, dynamic LOD, mesh simplification]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [graphics, gamedev, rendering, lod, optimization]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: Three.js / Bevy / Unreal Nanite
---

# 가변적 LOD(Level of Detail) 시스템

## 매 한 줄
> **"매 LOD = 매 distance/screen-size 에 따라 매 mesh detail 을 매 동적 교체"**. 매 close 매 high-poly, 매 far 매 low-poly. 매 fixed-bucket LOD (LOD0/1/2/3) 매 classic, 매 continuous/clustered LOD (Unreal Nanite, Bevy meshlet) 매 2026 SOTA — 매 hierarchical cluster + GPU culling 으로 매 sub-pixel triangles 까지 매 streaming.

## 매 핵심

### 매 motivation
- 매 GPU 매 triangle/pixel budget 유한.
- 매 멀리 있는 mesh 의 매 millions of triangles 매 1픽셀에 매 수십 — 매 waste + aliasing.
- 매 적절한 detail 매 close → 매 가까이 모이는 비용 ↓, 매 visual quality ↑.

### 매 LOD 종류
1. **Discrete LOD**: 매 N개의 pre-built mesh, 매 distance threshold 에서 swap. 매 popping 가능.
2. **Continuous LOD (CLOD)**: edge-collapse 매 progressive mesh, 매 smooth transition. 매 CPU heavy.
3. **Hierarchical LOD (HLOD)**: 매 region-level 매 single mesh 병합 (먼 city block → 1 mesh).
4. **Cluster/Meshlet LOD** (Nanite, Bevy 0.13+): 매 mesh를 매 ~128-tri cluster 로 분해 + 매 BVH, 매 GPU 가 매 cluster 단위로 매 select.
5. **Imposter / Billboard**: 매 texture 1장으로 매 멀리서 fake.
6. **Tessellation LOD**: 매 GPU tess shader 가 매 dynamic subdivide.

### 매 selection criteria
- **Distance**: euclidean distance 매 가장 단순.
- **Screen-space size**: bounding sphere → projected pixel size — 매 정확.
- **Velocity / motion**: 매 빠른 object 매 lower LOD 가용.
- **Importance**: 매 player focus / center → high LOD.

### 매 응용
1. **Open-world game**: terrain, vegetation, building.
2. **Voxel world**: chunk LOD by distance.
3. **Crowd rendering**: 매 distant NPC 매 imposter.
4. **Vegetation**: tree → bush → billboard.
5. **CAD 시각화**: 매 model assembly 매 distant simplify.

## 💻 패턴

### Pattern 1: Three.js LOD basic
```typescript
import * as THREE from "three";

const lod = new THREE.LOD();
lod.addLevel(highMesh, 0);    // 0–50
lod.addLevel(midMesh, 50);    // 50–200
lod.addLevel(lowMesh, 200);   // 200–500
lod.addLevel(billboard, 500); // 500+

scene.add(lod);
// renderer 가 매 frame 마다 camera.position 으로 자동 select
```

### Pattern 2: screen-space size 기반
```typescript
function selectLOD(obj: THREE.Object3D, camera: THREE.Camera) {
  const sphere = new THREE.Sphere();
  obj.traverse((c) => {
    if (c instanceof THREE.Mesh) c.geometry.computeBoundingSphere();
  });
  const dist = camera.position.distanceTo(obj.position);
  const fov = (camera as THREE.PerspectiveCamera).fov * Math.PI / 180;
  const screenH = window.innerHeight;
  const projected = (sphere.radius / dist) / Math.tan(fov / 2) * screenH;

  if (projected > 200) return 0;      // high
  if (projected > 50) return 1;       // mid
  if (projected > 10) return 2;       // low
  return 3;                            // billboard
}
```

### Pattern 3: voxel chunk LOD
```typescript
// each chunk has 4 mesh resolutions
type Chunk = { x: number; z: number; meshes: [Mesh, Mesh, Mesh, Mesh] };

function chunkLOD(c: Chunk, camera: Camera): number {
  const dx = c.x * CHUNK_SIZE - camera.x;
  const dz = c.z * CHUNK_SIZE - camera.z;
  const d = Math.sqrt(dx * dx + dz * dz);
  if (d < 100) return 0;
  if (d < 300) return 1;
  if (d < 700) return 2;
  return 3;
}
```

### Pattern 4: hysteresis (popping 완화)
```typescript
// LOD swap 시 매 threshold 에 매 hysteresis 추가
function selectLODHysteresis(dist: number, currentLOD: number): number {
  const THR = [50, 200, 500];
  const HYS = 10; // ±10
  if (currentLOD === 0 && dist > THR[0] + HYS) return 1;
  if (currentLOD === 1 && dist < THR[0] - HYS) return 0;
  if (currentLOD === 1 && dist > THR[1] + HYS) return 2;
  // ...
  return currentLOD;
}
```

### Pattern 5: GPU instancing per LOD
```typescript
// 매 LOD level 별 매 InstancedMesh, 매 entity 매 batch
const instancedHigh = new THREE.InstancedMesh(highGeo, mat, MAX);
const instancedMid = new THREE.InstancedMesh(midGeo, mat, MAX);
// per frame: 매 entity 의 LOD 결정 → 매 해당 instance 행렬 update
```

### Pattern 6: Bevy meshlet (2026)
```rust
// Bevy 0.13+ — meshlet rendering (cluster LOD)
use bevy::pbr::experimental::meshlet::*;

commands.spawn((
    MeshletMesh3d(asset_server.load("model.meshlet_mesh")),
    Transform::default(),
));
// GPU 가 매 cluster bvh + screen-space error 로 자동 select
```

### Pattern 7: imposter texture (vegetation)
```glsl
// fragment shader: 매 distance > THRESHOLD → 매 sample atlas billboard
uniform float u_distToCam;
uniform sampler2D u_imposterAtlas;

void main() {
  if (u_distToCam > 200.0) {
    vec4 imp = texture(u_imposterAtlas, vUV);
    if (imp.a < 0.5) discard;
    gl_FragColor = imp;
  } else {
    // full mesh shading
  }
}
```

### Pattern 8: progressive mesh (edge collapse offline)
```typescript
// build time: 매 mesh → edge collapse sequence
type Collapse = { v0: number; v1: number; targetVertex: number };
const collapses: Collapse[] = simplify(mesh);

// runtime: 매 LOD level k → apply collapses[0..k]
function applyLOD(mesh: Mesh, level: number) {
  for (let i = 0; i < level; i++) collapseEdge(mesh, collapses[i]);
}
```

### Pattern 9: HLOD region merge
```typescript
// 매 build time: cluster 9 buildings → 1 merged mesh per region
// runtime: distance > 1km → region mesh, < 1km → individual buildings
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 게임 props (rocks, trees) | Discrete LOD + imposter |
| Open-world terrain | Quadtree HLOD |
| Voxel/Minecraft | Chunk LOD by ring |
| Crowd (1k+ NPC) | Instancing + LOD + imposter |
| Modern AAA / engine 자체 | Nanite / Bevy meshlet |
| Scientific visualization | CLOD edge collapse |

**기본값**: discrete LOD 3-tier + imposter. 매 engine 이 cluster LOD 매 지원하면 우선.

## 🔗 Graph
- 부모: [[Rendering]] · [[Optimization]]
- 변형: [[Nanite]]
- Adjacent: [[bitECS와 SharedArrayBuffer를 결합한 멀티스레드 고성능 아키텍처]] · [[Frustum Culling]]

## 🤖 LLM 활용
**언제**: 매 large scene, 매 다양한 distance, 매 GPU/CPU bound. 매 1k+ object scene.
**언제 X**: 매 small scene (single character), 매 fixed camera distance — overhead 만 추가.

## ❌ 안티패턴
- **Anti1: hard popping**: hysteresis/dither 없이 매 instant swap — 매 시각적 jarring.
- **Anti2: 매 LOD level 별 mesh 따로 load**: 매 GPU memory 폭발. 매 progressive 또는 매 streaming.
- **Anti3: distance only metric**: 매 huge object 매 멀어도 화면 큼 — screen-size 사용.
- **Anti4: 매 tick 마다 LOD 재계산 every entity**: 매 batch / spatial hash 로 매 amortize.
- **Anti5: imposter 의 매 stale lighting**: 매 shadow / time-of-day 안 맞음 — 매 atlas 재생성 필요.

## 🧪 검증 / 중복
- Verified (Unreal Nanite paper SIGGRAPH 2021, Bevy 0.13 meshlet docs, Three.js LOD).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — LOD strategies + 2026 cluster LOD (Nanite/Meshlet) |