three-best-practices

SKILL.md

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

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