r3f-performance-optimization

Files (1)

• SKILL.md

SKILL.md (first lines)

# R3F Performance Optimization Skill

## When This Skill Applies

Use this skill when:
- Frame rates drop below 60fps in R3F scenes
- Draw call count exceeds 500-1000
- Implementing new 3D features that may impact performance
- Scene contains many similar objects (>50 meshes)
- Static scenes render continuously
- Performance varies significantly across devices
- Memory usage grows during scene interaction

## Performance Optimization Checklist

When optimizing R3F performance, complete each step systematically:

### ☐ 1. Measure Current Performance

**Required before any optimization:**

```jsx
import { Stats } from '@react-three/drei'
// or
import { Perf } from 'r3f-perf'

<Canvas>
  <Stats />  {/* Basic FPS/memory */}
  <Perf position="top-left" />  {/* Advanced: calls, triangles, textures */}
  <Scene />
</Canvas>
```

**Record baseline metrics:**
- Current FPS (target: 60fps)
- Draw call count (target: <500, max: 1000)
- Triangle/vertex count
- Memory usage patterns

### ☐ 2. Enable On-Demand Rendering

**For static or mostly-static scenes:**

```jsx
<Canvas frameloop="demand">
  {/* Only renders when props change or invalidate() called */}
</Canvas>
```

**With manual control:**

```jsx
const { invalidate } = useThree()

// Before animation starts
invalidate()
requestAnimationFrame(() => {
  // Synchronous animation
})
```

**Impact**: Can reduce CPU/GPU usage by 90%+ for static scenes.

### ☐ 3. Apply Instancing for Repeated Objects

**When drawing >50 similar objects:**

Replace individual meshes:
```jsx
// BEFORE: 1000 draw calls
{objects.map(obj => <mesh key={obj.id} geometry={...} material={...} />)}
```

With InstancedMesh:
```jsx
// AFTER: 1 draw call
<instancedMesh args={[geometry, material, 1000]}>
  {/* Manage transforms programmatically */}
</instancedMesh>
```

**Impact**: 100-1000x draw call reduction.

### ☐ 4. Implement Level of Detail (LOD)

**For objects at varying distances:**

```jsx
import { Detailed } from '@react-three/drei'

<Detailed distances={[0, 10, 20]}>
  <HighPolyMesh />   {/* 0-10 units from camera */}
  <MediumPolyMesh /> {/* 10-20 units */}
  <LowPolyMesh />    {/* 20+ units */}
</Detailed>
```

**Impact**: Reduces vertex processing for distant objects without visible quality loss.

### ☐ 5. Reuse Geometries and Materials

**Create once, reference many times:**

```jsx
// WRONG: Creates new geometry/material per mesh
function Cubes() {
  return cubes.map(cube => (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial />
    </mesh>
  ))
}

// CORRECT: Shared resources
const sharedGeometry = new THREE.BoxGeometry()
const sharedMaterial = new THREE.MeshStandardMaterial()

function Cubes() {

From nocksock/superpowers, MIT.

More from nocksock/superpowers