r3f-performance_skill

Overview

This skill packages practical R3F performance patterns for three.js projects: LOD, frustum culling, instancing, geometry merging, draw call reduction, frame budgets, lazy loading, and profiling tools. It focuses on concrete tactics and quick configuration snippets to raise frame rates and lower memory use in large or complex scenes.

How this skill works

It inspects rendering hotspots and prescribes targeted changes: reduce draw calls via instancing or merged geometry, swap meshes by distance with LOD, and avoid wasted GPU work with frustum culling and adaptive DPR. It also recommends lazy loading and resource disposal, and offers profiling helpers (Perf, Stats, gl.info, frame timers) to measure improvements and iterate.

When to use it

• When your scene has many repeated or static objects and draw calls are high
• When frame time exceeds your budget (target ~16.7ms for 60fps)
• When loading large models causes stutters or memory growth
• When mobile devices struggle due to high DPR or expensive shaders
• When you need data-driven profiling to prioritize optimizations

Best practices

• Measure before changing: use Perf/Stats and gl.info to find the bottleneck
• Prefer fewer draw calls over micro-optimizing triangle counts for large batches
• Use instancing for many identical meshes and merge geometry for static batches
• Apply LOD for distant objects and keep frustum culling enabled unless animation requires otherwise
• Cap DPR and disable antialiasing on constrained devices; use adaptive performance
• Dispose geometries, materials, and textures on unmount and prefer compressed textures (KTX2/Basis)

Example use cases

• A forest scene: replace thousands of tree meshes with instanced foliage and LOD versions
• Architectural walkthrough: merge static building geometry and lazy-load interior models per room
• Product configurator: limit DPR and use cheaper materials for mobile builds while profiling on desktop
• Mass-particle demo: render many objects with an instancedMesh and measure draw call savings
• Large open world: combine view-based loading (Intersection Observer) with Detailed/Drei LOD components