Three.js Performance Checklist: 24 Essential Steps

If you're rendering 50+ copies of the same geometry (trees, particles, buildings), switch from individual Meshes to `InstancedMesh`. Each Mesh is a separate draw call; InstancedMesh renders all copies in a single call. This alone can take a scene from 10fps to 60fps.

For static objects that never move independently (terrain chunks, building interiors), merge them into a single BufferGeometry. Fewer geometries means fewer draw calls. Only merge objects with the same material — different materials require separate draw calls regardless.

Open Chrome DevTools, enable the Three.js inspector, and check `renderer.info.render.calls`. Desktop GPUs handle 500+ draw calls; mobile GPUs struggle above 100. If you're over budget, prioritize instancing, merging, and LOD before reducing visual quality.

Indexed BufferGeometry shares vertices between triangles via an index array instead of duplicating shared vertices. This reduces memory bandwidth by 30-50% for typical meshes. Most loaded models are already indexed; check custom procedural geometry.

Three.js r160+ introduces BatchedMesh for batching multiple geometries with the same material into one draw call. Unlike InstancedMesh (same geometry repeated), BatchedMesh handles different geometries. Use it for scene props like furniture, rocks, or debris that share a material atlas.

Convert PNG/JPG textures to KTX2 format using `toktx` or `gltf-transform`. KTX2 textures use GPU-native compression (BCn on desktop, ETC/ASTC on mobile), reducing VRAM usage by 4-6x compared to uncompressed textures without visible quality loss.

Resize textures to power-of-two dimensions (512, 1024, 2048). Non-power-of-two textures can't use mipmapping on some GPUs and may be internally resized, wasting VRAM. Downsize rather than upsize — a 1000px texture should become 512px, not 1024px.

4096px textures use 4x the VRAM of 2048px textures. Unless the texture covers a large surface that users view up close (a terrain, a detailed character), 2048px is the sweet spot. For distant or small objects, 512px or 1024px is sufficient.

Create one material and assign it to multiple meshes instead of creating a new material per mesh. Each unique material triggers a shader recompilation. Check for accidental material duplication after loading GLTF models — loaders sometimes create redundant instances.

Combine multiple small textures (UI elements, particle sprites, decals) into a single atlas texture with UV offsets. Each texture switch costs a state change on the GPU. A single atlas with UV math eliminates all those switches.

Use `THREE.LOD` to swap between high, medium, and low-poly versions of objects based on camera distance. A 50k polygon character at 100 meters away should be a 500 polygon version. LOD is the most effective technique for open-world and large scenes.

Frustum culling is on by default (`mesh.frustumCulled = true`), but it only works if bounding spheres are accurate. Call `geometry.computeBoundingSphere()` after modifying vertices. Check `renderer.info.render.calls` while rotating the camera — the count should drop when objects leave view.

For 60fps, each frame must complete in under 16.6ms. Use `performance.now()` around your render loop or Chrome's Performance panel to measure. Break the budget into: physics (2ms), animation (2ms), render (10ms), overhead (2ms). If you're over, you know which phase to optimize.

Only call `renderer.render()` when something changes. For static scenes with orbit controls, render on control change events rather than every frame. For animated scenes, use a dirty flag to skip render when nothing has updated. Every render call costs GPU time regardless of scene complexity.

Set `renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))` to cap at 2x DPR. A 3x Retina display renders 2.25x more pixels than 2x with barely visible difference. On mobile, consider dropping to 1x DPR and using FXAA post-processing for antialiasing.

Call `geometry.dispose()`, `material.dispose()`, and `texture.dispose()` when removing objects from the scene. Three.js uploads these to the GPU but never automatically frees them. A scene that adds and removes objects without disposal will eventually crash the tab.

Write a recursive `disposeObject(obj)` function that traverses children, disposes all geometries, materials (including map textures), and removes event listeners. Call it whenever you remove an object. Relying on developers to manually dispose every resource is error-prone at scale.

Open Chrome's Task Manager (Shift+Esc) and enable the GPU Memory column. Watch it while navigating your app. If GPU memory grows continuously without plateauing, you have a disposal leak. Use `renderer.info.memory` to track textures and geometries counts programmatically.

In React/framework integrations, call `renderer.dispose()`, `cancelAnimationFrame(frameId)`, and remove the canvas from DOM in your cleanup function. Without this, navigating away from a Three.js page leaves the WebGL context alive, consuming GPU memory for the entire browser session.

If you cache textures or materials in a Map for reuse, wrap values in WeakRef so the garbage collector can reclaim them when no mesh references them. FinalizationRegistry can trigger .dispose() automatically when the JavaScript object is GC'd, preventing GPU memory orphans in long-running apps.

Convert all 3D models to glTF (.glb) and apply Draco or Meshopt compression using `gltf-transform`. Draco reduces mesh data by 80-90%. Load compressed models with `DRACOLoader` configured to use the WASM decoder for best performance across devices.

Use `THREE.LoadingManager` to track and display loading progress. Load critical assets first (hero geometry, environment map), then load secondary assets after the initial render. Show a loading indicator with percentage progress — users abandon pages that appear frozen.

Don't load 3D models, HDR environments, or large textures upfront if they're below the fold or behind an interaction. Use dynamic `import()` or React Suspense boundaries to defer loading until the user scrolls to or activates the 3D section. This dramatically improves initial page load time.

After the initial render completes, use `requestIdleCallback` to start loading secondary 3D assets in the background. This lets the browser prioritize user interactions while quietly preparing assets. Combine with `THREE.Cache.enabled = true` to avoid redundant network requests.

GLB bundles the JSON descriptor, binary mesh data, and embedded textures into a single file — one HTTP request instead of many. This reduces waterfall loading, simplifies caching, and avoids CORS issues with separate asset files. Always prefer .glb for production deployment.