threejs-perf

Replace Mesh instances with InstancedMesh patterns to reduce draw calls in Three.js.

307|37|Updated Jan 28, 2026

Search Tags:#performance #webgl #three.js #draw-calls #instancing #instancedmesh

Ready to run

npx skills add https://github.com/PlayableIntelligence/game-creator --skill threejs-perf

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-perf
Source: https://github.com/PlayableIntelligence/game-creator/tree/main/skills/threejs-perf
Command: npx skills add https://github.com/PlayableIntelligence/game-creator --skill threejs-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js projects can suffer from high draw calls and CPU overhead when rendering many identical objects or moving entities. This Skill provides patterns to reduce that overhead using InstancedMesh, batched transforms, and efficient data-driven updates.

Core Features & Use Cases

Instancing Large Static Object Sets to batch 19,600 objects into a single draw call, dramatically reducing draw calls.
Moving Entity Updates with InstancedMesh for thousands of moving entities, replacing per-object transforms with batched writes.
Guidance and template references for real-world Three.js performance tuning.

Quick Start

Run the static-world and moving-entities templates to observe performance gains on large scene counts.

Frequently Asked Questions about threejs-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce draw calls in Three.js when rendering thousands of identical objects?▼

You can reduce draw calls in Three.js by replacing individual Mesh instances with InstancedMesh to batch thousands of objects into a single draw call. This minimizes CPU overhead from per-object transforms and is ideal for scenes with 100 or more repeated objects.

What's the best way to update thousands of moving entities in Three.js without losing performance?▼

The best way to update moving entities is using InstancedMesh with batched setMatrixAt writes and Matrix4 reuse. Instead of per-object transforms, you update instanceMatrix.needsUpdate once per frame to handle thousands of moving entities efficiently without high CPU overhead.

When do I need to use InstancedMesh for Three.js performance tuning?▼

You need InstancedMesh when your Three.js scene has 100 or more repeated objects or thousands of moving entities where high draw calls and per-object transforms create CPU overhead. It batches transforms to dramatically reduce rendering bottlenecks.

Can I batch static and moving objects differently using Three.js InstancedMesh?▼

Yes, Three.js InstancedMesh supports both static and moving patterns. For static object sets, you batch up to 19,600 objects into a single draw call. For moving entities, you apply batched setMatrixAt writes and toggle instanceMatrix.needsUpdate to update transforms efficiently.

Why does my Three.js scene lag when I add hundreds of Mesh instances?▼

Your Three.js scene lags because individual Mesh instances generate high draw calls and CPU overhead from per-object transforms. Replacing them with InstancedMesh batches all objects into a single draw call, eliminating the transform bottleneck and restoring rendering performance.

Do I need to know Matrix4 to use Three.js InstancedMesh for moving entities?▼

Yes, using InstancedMesh for moving entities requires knowledge of Matrix4 reuse and batched setMatrixAt writes. You must update instanceMatrix.needsUpdate to apply transforms, making matrix operations essential for efficient data-driven updates in Three.js.