3d-perflisted
Install: claude install-skill Nioris/project-forge
# 3D Performance — Optimize Three.js
## Targets
- **< 100 draw calls** — single biggest perf lever
- **60 fps** desktop, **30+ fps** mobile minimum
- **Memory stable** — no leaks over time
- **Fast load** — geometry/textures optimized
Requires existing Three.js scene ($three-setup).
## Step 1 — Measure first
Don't optimize blind. Add `renderer.info` logging:
```javascript
// In animate loop, every 60 frames:
if (frameCount % 60 === 0) {
console.log('Draw calls:', renderer.info.render.calls);
console.log('Triangles:', renderer.info.render.triangles);
console.log('Geometries:', renderer.info.memory.geometries);
console.log('Textures:', renderer.info.memory.textures);
}
```
Diagnosis:
- Draw calls > 100 → instancing/merging needed
- Triangles > 500k → reduce geometry detail или LOD
- Geometries climbing over time → memory leak (not disposing)
- Textures climbing → texture leak
## Step 2 — Instancing (biggest win)
If you have many copies of same geometry (trees, coins, enemies, voxels) — InstancedMesh renders ALL in **1 draw call**.
```javascript
import * as THREE from 'three';
const count = 1000; // 1000 trees
const geo = new THREE.ConeGeometry(0.5, 2, 6);
const mat = new THREE.MeshStandardMaterial({ color: 0x2d5a2d, flatShading: true });
const instanced = new THREE.InstancedMesh(geo, mat, count);
const dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {
dummy.position.set(
(Math.random() - 0.5) * 100,
0,
(Math.random() - 0.5) * 1