2nd/10_Wiki/Topic_Programming/Programming & Language/가변적 LOD(Level of Detail) 시스템.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-가변적-lod-level-of-detail-시스템	가변적 LOD(Level of Detail) 시스템	10_Wiki/Topics	verified	self	LOD Level of Detail dynamic LOD mesh simplification	none	A	0.9	applied	graphics gamedev rendering lod optimization		2026-05-10	pending	language framework TypeScript 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

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 기반

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

// 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 완화)

// 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

// 매 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)

// 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)

// 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)

// 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

// 매 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)