three-best-practices

Installation
Summary

120+ performance rules across 18 categories for optimizing Three.js applications.

  • Organized by priority from fundamental setup (Import Maps, modern renderers) through critical concerns (memory disposal, render loops, draw calls) to specialized topics (WebGPU, TSL shaders, WebXR)
  • Covers both WebGLRenderer and WebGPURenderer with guidance on choosing between them and leveraging TSL (Three.js Shading Language) for shader development
  • Includes practical rules for geometry batching, material reuse, texture compression (Draco, KTX2), lighting optimization, and mobile-specific constraints like pixel ratio limits and shader precision
  • Each rule references detailed documentation with BAD/GOOD code examples, targeting performance goals like sub-100 draw calls per frame and proper resource cleanup to prevent memory leaks
SKILL.md

Three.js Best Practices

Comprehensive performance optimization guide for Three.js applications. Contains 120+ rules across 18 categories, prioritized by impact.

Sources & Credits

This skill compiles best practices from multiple authoritative sources:

  • Official guidelines from Three.js llms branch maintained by mrdoob
  • 100 Three.js Tips by Utsubo - Excellent comprehensive guide covering WebGPU, asset optimization, and performance tips

When to Apply

Related skills
Installs
468
GitHub Stars
23
First Seen
Jan 19, 2026