Three.js Performance Optimization Checklist
Use this checklist to identify rendering bottlenecks and apply high-impact optimizations for desktop and mobile WebGL deployments.
Core Concepts
Most Three.js performance issues come from draw-call count, expensive shaders, texture memory pressure, and per-frame garbage generation. Start with measurement, then optimize the largest bottleneck first.
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
const mesh = new THREE.InstancedMesh(geometry, material, count)
// Avoid allocations in animate(): reuse vectors and arrays.Best Practices
- Keep scene setup, update loop, and cleanup code isolated for maintainability.
- Prefer deterministic data flow and avoid hidden side effects in frame updates.
- Profile changes on mobile-class hardware before shipping.
- Document control schemes and provide readable non-canvas text context for SEO.