--- name: dev-performance-lod-systems description: Level of Detail (LOD) techniques for R3F. Use when complex models cause FPS drops. category: performance --- # Level of Detail (LOD) Reduce polygon count based on distance from camera. ## When to Use Use when: - FPS drops on zoom out - Complex models in large scenes - Mobile devices struggling ## Quick Start ```tsx import { Detailed } from '@react-three/drei'; function LODTree({ position }) { return ( {/* Closest - high detail */} {/* Medium distance */} {/* Far - low detail */} {/* Very far - billboard */} ); } ``` ## Distance Guidelines | Distance | Detail Level | Polygons | Use Case | |----------|-------------|----------|----------| | 0-10m | High | 10,000+ | Close inspection | | 10-30m | Medium | 1,000-5,000 | Normal gameplay | | 30-60m | Low | 100-500 | Background | | 60m+ | Billboard | 2 triangles | Distant objects | ## LOD Component Models ```tsx // High detail - close inspection only function HighDetailTree() { return ( {/* Full trunk with bark texture */} {/* Dense foliage */} ); } // Medium detail - gameplay distance function MediumDetailTree() { return ( {/* Simplified trunk */} {/* Simplified foliage */} ); } // Low detail - background function LowDetailTree() { return ( {/* Single merged geometry */} ); } // Billboard - very distant function BillboardTree() { return ( ); } ``` ## Automatic LOD Generation ```tsx import { useGLTF } from '@react-three/drei'; function AutoLOD({ modelPath }) { const { scene: highDetail } = useGLTF(`${modelPath}_high.glb`); const { scene: mediumDetail } = useGLTF(`${modelPath}_medium.glb`); const { scene: lowDetail } = useGLTF(`${modelPath}_low.glb`); return ( ); } ``` ## LOD with Skeletal Animation ```tsx // Animated characters need special handling function LODCharacter() { // High detail: full rig, many bones // Low detail: simplified rig, fewer bones // LODs must share animation structure const highDetail = useGLTF('/character_high.glb'); const lowDetail = useGLTF('/character_low.glb'); // Clone animations to both models const animations = highDetail.animations; return ( ); } ``` ## Billboard Optimization ```tsx // Use billboards for very distant objects function BillboardSprite({ texture, position }) { const mesh = useRef(null); useFrame(({ camera }) => { if (mesh.current) { // Always face camera mesh.current.quaternion.copy(camera.quaternion); } }); return ( ); } ``` ## Common Mistakes | ❌ Wrong | ✅ Right | |----------|----------| | Too many LOD levels (>4) | 3-4 levels is sufficient | | Abrupt distance transitions | Smooth distances (overlap) | | No billboard for distant objects | Use 2-triangle billboards | | Creating LODs manually | Use tools like SimplyGLTF | ## LOD Creation Tools - **SimplyGLTF** - Online LOD generator - **Blender** - Manual decimation modifier - **meshoptimizer** - Command-line tool ## Reference - [performance-basics.md](./performance-basics.md) - Core optimization - [instancing.md](./instancing.md) - Instanced rendering

dev-performance-lod-systems

Install this skill

Comments