r3f-performance

R3F Performance

Optimize render performance through draw call reduction, geometry optimization, smart loading, and profiling.

Quick Start

// Performance-optimized Canvas
<Canvas
  dpr={[1, 2]}                    // Limit pixel ratio
  performance={{ min: 0.5 }}      // Adaptive performance
  frameloop="demand"              // Only render on change
  gl={{ 
    powerPreference: 'high-performance',
    antialias: false              // Disable for mobile
  }}
>
  <Suspense fallback={null}>
    <Scene />
  </Suspense>
</Canvas>

Frame Budget

Target 60fps = 16.67ms per frame. Budget breakdown:

Phase	Target	Notes
JavaScript	< 4ms	useFrame logic, state updates
GPU Render	< 10ms	Draw calls, shaders
Compositing	< 2ms	Post-processing, overlays
Buffer	~1ms	Safety margin

Draw Call Optimization

The Golden Rule

Fewer draw calls > fewer triangles

A scene with 100 meshes of 1000 triangles each is slower than 1 mesh of 100,000 triangles.

Reduction Techniques

Technique	Draw Calls	When to Use
Instancing	1 per unique mesh	100+ identical objects
Merged geometry	1 per merged batch	Static scene parts
Texture atlases	Fewer materials	Many similar textures
LOD	Reduces complexity	Large/distant objects

Instancing (Best for Identical Meshes)

// 10,000 cubes = 1 draw call
<instancedMesh args={[undefined, undefined, 10000]}>
  <boxGeometry />
  <meshStandardMaterial />
</instancedMesh>

Geometry Merging (Static Scenes)

import { useMemo } from 'react';
import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils';
import * as THREE from 'three';

function MergedScene() {
  const mergedGeometry = useMemo(() => {
    const geometries: THREE.BufferGeometry[] = [];
    
    // Create many positioned geometries
    for (let i = 0; i < 100; i++) {
      const geo = new THREE.BoxGeometry(1, 1, 1);
      geo.translate(
        (Math.random() - 0.5) * 20,
        (Math.random() - 0.5) * 20,
        (Math.random() - 0.5) * 20
      );
      geometries.push(geo);
    }
    
    return mergeGeometries(geometries);
  }, []);
  
  return (
    <mesh geometry={mergedGeometry}>
      <meshStandardMaterial />
    </mesh>
  );
}