threejs-performance

Use InstancedMesh for many identical geometries like trees, BatchedMesh for different geometries sharing a material, and mergeGeometries for static objects. Keep draw calls under 100 per frame and monitor them with renderer.info.render.calls.

Three.js does not automatically release GPU resources, so you must call geometry.dispose(), dispose every texture attached to each material, and call material.dispose() when removing objects. For GLTF ImageBitmap textures, also call texture.source.data.close().

Draco achieves higher compression ratios but decodes slower, while Meshopt decodes faster and pairs well with gzip for CDN delivery. Use gltf-transform optimize with KTX2 texture compression for a complete pipeline.

Calling setState inside useFrame triggers a React re-render on every frame, destroying performance. Mutate refs directly inside useFrame and reserve state updates for interaction events only.

Migrate when draw-call-heavy scenes drop frames, when you need compute shaders for particle physics beyond roughly 50,000 CPU particles, or when complex post-processing chains stall. WebGPURenderer requires await renderer.init() and falls back to WebGL automatically.

It does not cover general React performance issues like memoization or bundle size, Three.js beginner tutorials, or 3D art asset creation. Optimization without measurement is discouraged; install monitoring like stats-gl before changing code.