Three.js Performance Optimization

Performance patterns for Three.js games, backed by measured before/after numbers on Three.js r183 (headless Chromium via Playwright, Apple M1 Pro, software WebGL).

Reference Files

• instancing-static.md — InstancedMesh for large static repeated objects (19,600 → 1 draw call)
• instancing-moving.md — Flat state buffer + batched InstancedMesh writes for moving entities (8,000 entities)
• templates/ — Baseline vs optimized reference implementations for each pattern

When to Use This Skill

• Scene has 100+ repeated objects sharing geometry/material
• Draw calls exceed 500 and frame time is unstable
• Thousands of moving entities need per-frame transform updates
• Profile shows scene-graph traversal as a bottleneck

When NOT to Use