three-best-practices
starsforks
How to install three-best-practices?
emalorenzo/three-agent-skills/three-best-practices
$npx -y skills add emalorenzo/three-agent-skills --skill three-best-practicesThree.js performance optimization and best practices guidelines. Use when writing, reviewing, or optimizing Three.js code. Triggers on tasks involving 3D scenes, WebGL/WebGPU rendering, geometries, materials, textures, lighting, shaders, or TSL.
SKILL.md
| 1 | # Three.js Best Practices |
| 2 | |
| 3 | Comprehensive performance optimization guide for Three.js applications. Contains 120+ rules across 18 categories, prioritized by impact. |
| 4 | |
| 5 | ## Sources & Credits |
| 6 | |
| 7 | > This skill compiles best practices from multiple authoritative sources: |
| 8 | > - Official guidelines from Three.js `llms` branch maintained by [mrdoob](https://github.com/mrdoob) |
| 9 | > - [100 Three.js Tips](https://www.utsubo.com/blog/threejs-best-practices-100-tips) by [Utsubo](https://www.utsubo.com) - Excellent comprehensive guide covering WebGPU, asset optimization, and performance tips |
| 10 | |
| 11 | ## When to Apply |
| 12 | |
| 13 | Reference these guidelines when: |
| 14 | - Setting up a new Three.js project |
| 15 | - Writing or reviewing Three.js code |
| 16 | - Optimizing performance or fixing memory leaks |
| 17 | - Working with custom shaders (GLSL or TSL) |
| 18 | - Implementing WebGPU features |
| 19 | - Building VR/AR experiences with WebXR |
| 20 | - Integrating physics engines |
| 21 | - Optimizing for mobile devices |
| 22 | |
| 23 | ## Rule Categories by Priority |
| 24 | |
| 25 | | Priority | Category | Impact | Prefix | |
| 26 | |----------|----------|--------|--------| |
| 27 | | 0 | Modern Setup & Imports | FUNDAMENTAL | `setup-` | |
| 28 | | 1 | Memory Management & Dispose | CRITICAL | `memory-` | |
| 29 | | 2 | Render Loop Optimization | CRITICAL | `render-` | |
| 30 | | 3 | Draw Call Optimization | CRITICAL | `drawcall-` | |
| 31 | | 4 | Geometry & Buffer Management | HIGH | `geometry-` | |
| 32 | | 5 | Material & Texture Optimization | HIGH | `material-` | |
| 33 | | 6 | Asset Compression | HIGH | `asset-` | |
| 34 | | 7 | Lighting & Shadows | MEDIUM-HIGH | `lighting-` | |
| 35 | | 8 | Scene Graph Organization | MEDIUM | `scene-` | |
| 36 | | 9 | Shader Best Practices (GLSL) | MEDIUM | `shader-` | |
| 37 | | 10 | TSL (Three.js Shading Language) | MEDIUM | `tsl-` | |
| 38 | | 11 | WebGPU Renderer | MEDIUM | `webgpu-` | |
| 39 | | 12 | Loading & Assets | MEDIUM | `loading-` | |
| 40 | | 13 | Core Web Vitals | MEDIUM-HIGH | `vitals-` | |
| 41 | | 14 | Camera & Controls | LOW-MEDIUM | `camera-` | |
| 42 | | 15 | Animation System | MEDIUM | `animation-` | |
| 43 | | 16 | Physics Integration | MEDIUM | `physics-` | |
| 44 | | 17 | WebXR / VR / AR | MEDIUM | `webxr-` | |
| 45 | | 18 | Audio | LOW-MEDIUM | `audio-` | |
| 46 | | 19 | Post-Processing | MEDIUM | `postpro-` | |
| 47 | | 20 | Mobile Optimization | HIGH | `mobile-` | |
| 48 | | 21 | Production | HIGH | `error-`, `migration-` | |
| 49 | | 22 | Debug & DevTools | LOW | `debug-` | |
| 50 | |
| 51 | ## Quick Reference |
| 52 | |
| 53 | ### 0. Modern Setup (FUNDAMENTAL) |
| 54 | |
| 55 | - `setup-use-import-maps` - Use Import Maps, not old CDN scripts |
| 56 | - `setup-choose-renderer` - WebGLRenderer (default) vs WebGPURenderer (TSL/compute) |
| 57 | - `setup-animation-loop` - Use `renderer.setAnimationLoop()` not manual RAF |
| 58 | - `setup-basic-scene-template` - Complete modern scene template |
| 59 | |
| 60 | ### 1. Memory Management (CRITICAL) |
| 61 | |
| 62 | - `memory-dispose-geometry` - Always dispose geometries |
| 63 | - `memory-dispose-material` - Always dispose materials and textures |
| 64 | - `memory-dispose-textures` - Dispose dynamically created textures |
| 65 | - `memory-dispose-render-targets` - Always dispose WebGLRenderTarget |
| 66 | - `memory-dispose-recursive` - Use recursive disposal for hierarchies |
| 67 | - `memory-dispose-on-unmount` - Dispose in React cleanup/unmount |
| 68 | - `memory-renderer-dispose` - Dispose renderer when destroying view |
| 69 | - `memory-reuse-objects` - Reuse geometries and materials |
| 70 | |
| 71 | ### 2. Render Loop (CRITICAL) |
| 72 | |
| 73 | - `render-single-raf` - Single requestAnimationFrame loop |
| 74 | - `render-conditional` - Render on demand for static scenes |
| 75 | - `render-delta-time` - Use delta time for animations |
| 76 | - `render-avoid-allocations` - Never allocate in render loop |
| 77 | - `render-cache-computations` - Cache expensive computations |
| 78 | - `render-frustum-culling` - Enable frustum culling |
| 79 | - `render-update-matrix-manual` - Disable auto matrix updates for static objects |
| 80 | - `render-pixel-ratio` - Limit pixel ratio to 2 |
| 81 | - `render-antialias-wisely` - Use antialiasing judiciously |
| 82 | |
| 83 | ### 3. Draw Call Optimization (CRITICAL) |
| 84 | |
| 85 | - `draw-call-optimization` - Target under 100 draw calls per frame |
| 86 | - `geometry-instanced-mesh` - Use InstancedMesh for identical objects |
| 87 | - `geometry-batched-mesh` - Use BatchedMesh for varied geometries (same material) |
| 88 | - `geometry-merge-static` - Merge static geometries with BufferGeometryUtils |
| 89 | |
| 90 | ### 4. Geometry (HIGH) |
| 91 | |
| 92 | - `geometry-buffer-geometry` - Always use BufferGeometry |
| 93 | - `geometry-merge-static` - Merge static geometries |
| 94 | - `geometry-instanced-mesh` - Use InstancedMesh for identical objects |
| 95 | - `geometry-lod` - Use Level of Detail for complex models |
| 96 | - `geometry-index-buffer` - Use indexed geometry |
| 97 | - `geometry-vertex-count` - Minimize vertex count |
| 98 | - `geometry-attributes-typed` - Use appropriate typed arrays |
| 99 | - `geometry-interleaved` - Consider interleaved buffers |
| 100 | |
| 101 | ### 5. Materials & Textures (HIGH) |
| 102 | |
| 103 | - `material-reuse` - Reuse materials across meshes |
| 104 | - ` |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
