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
llmsbranch maintained by mrdoob- 100 Three.js Tips by Utsubo - Excellent comprehensive guide covering WebGPU, asset optimization, and performance tips
When to Apply
Related skills