Three Best Practices
Apply prioritized Three.js rules so WebGL scenes stay fast, leak-free, and shippable without guessing dispose and draw-call tradeoffs.
Overview
Three Best Practices is an agent skill most often used in Build (also Ship perf) that applies prioritized Three.js rules for setup, disposal, rendering, and asset compression.
Install
npx skills add https://github.com/emalorenzo/three-agent-skills --skill three-best-practicesWhat is this skill?
- Seven priority tiers from modern import/setup (P0) through asset compression (P6+)
- Memory management: dispose geometry, materials, textures, render targets, recursive cleanup, and renderer teardown
- Render loop: single RAF, delta time, conditional updates, frustum culling, manual matrix updates, pixel ratio
- Draw-call reduction via instanced mesh, batched mesh, and merged static geometry
- Material and texture discipline: reuse, power-of-two sizes, KTX2/Draco assets, atlases, transparency avoidance
- Rule sections span Priority 0 (setup) through Priority 6+ (asset compression) with named rule IDs per area
- Covers 8+ memory-dispose rules and 9+ render-loop optimization rules in the catalog excerpt
Adoption & trust: 571 installs on skills.sh; 26 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You shipped a Three.js scene that stutters, leaks GPU memory, or explodes draw calls and you lack a systematic checklist to fix it.
Who is it for?
Solo builders shipping interactive 3D on the web who already use Three.js and need enforceable performance and memory habits.
Skip if: Teams that only need conceptual 3D design briefs without code, or projects using a non-Three 3D engine exclusively.
When should I use this skill?
You are writing or reviewing Three.js scenes and need prioritized guidance on setup, disposal, render loops, draw calls, geometry, materials, and compressed assets.
What do I get? / Deliverables
Your agent applies tiered Three.js rules so scenes dispose resources correctly, minimize draw calls, and use compressed assets ready for production profiling.
- Code changes aligned to named Three.js best-practice rules
- Review notes mapped to priority tiers (memory, render, draw calls, assets)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
3D UI and immersive pages are implemented in the build phase on the frontend stack. Rules target renderer setup, geometry, materials, and render loops in browser Three.js code.
Where it fits
Scaffold a product viewer with import maps, renderer choice, and a single RAF loop before adding lights.
Refactor materials to reuse instances and power-of-two textures when duplicating mesh variants.
Profile stutter and apply frustum culling, LOD, and draw-call batching rules before shipping the landing page.
Audit dispose-on-unmount after users report WebGL context loss on long sessions.
How it compares
Use as a procedural rule checker instead of ad-hoc Stack Overflow snippets for every optimization pass.
Common Questions / FAQ
Who is three-best-practices for?
Frontend-focused solo and indie developers building Three.js experiences in SaaS sites, portfolios, or browser games who want agent-guided optimization.
When should I use three-best-practices?
During build when scaffolding scenes and materials, and again in ship when tuning frame time, memory after route changes, or asset weight before launch.
Is three-best-practices safe to install?
It is documentation-style procedural knowledge; review the Security Audits panel on this Prism page before trusting any third-party skill source.
SKILL.md
READMESKILL.md - Three Best Practices
# Rule Sections ## Priority 0: Modern Setup & Imports (FUNDAMENTAL) - setup-use-import-maps - setup-choose-renderer - setup-animation-loop - setup-basic-scene-template ## Priority 1: Memory Management & Dispose (CRITICAL) - memory-dispose-geometry - memory-dispose-material - memory-dispose-textures - memory-dispose-render-targets - memory-dispose-recursive - memory-dispose-on-unmount - memory-renderer-dispose - memory-reuse-objects ## Priority 2: Render Loop Optimization (CRITICAL) - render-single-raf - render-conditional - render-delta-time - render-avoid-allocations - render-cache-computations - render-frustum-culling - render-update-matrix-manual - render-pixel-ratio - render-antialias-wisely ## Priority 3: Draw Call Optimization (CRITICAL) - draw-call-optimization - geometry-instanced-mesh - geometry-batched-mesh - geometry-merge-static ## Priority 4: Geometry & Buffer Management (HIGH) - geometry-buffer-geometry - geometry-merge-static - geometry-instanced-mesh - geometry-lod - geometry-index-buffer - geometry-vertex-count - geometry-attributes-typed - geometry-interleaved ## Priority 5: Material & Texture Optimization (HIGH) - material-reuse - material-simplest-sufficient - material-texture-size-power-of-two - material-texture-compression - material-texture-mipmaps - material-texture-anisotropy - material-texture-atlas - material-avoid-transparency - material-onbeforecompile ## Priority 6: Asset Compression (HIGH) - asset-compression - asset-draco - asset-ktx2 - asset-meshopt - asset-lod ## Priority 7: Lighting & Shadows (MEDIUM-HIGH) - lighting-limit-lights - lighting-shadows-advanced - lighting-bake-static - lighting-shadow-camera-tight - lighting-shadow-map-size - lighting-shadow-selective - lighting-shadow-cascade - lighting-shadow-auto-update - lighting-probe - lighting-environment - lighting-fake-shadows ## Priority 8: Scene Graph Organization (MEDIUM) - scene-group-objects - scene-layers - scene-visible-toggle - scene-flatten-static - scene-name-objects - object-pooling ## Priority 9: Shader Best Practices GLSL (MEDIUM) - shader-precision - shader-mobile - shader-avoid-branching - shader-precompute-cpu - shader-avoid-discard - shader-texture-lod - shader-uniform-arrays - shader-varying-interpolation - shader-pack-data - shader-chunk-injection ## Priority 10: TSL - Three.js Shading Language (MEDIUM) - tsl-why-use - tsl-setup-webgpu - tsl-complete-reference - tsl-material-slots - tsl-node-materials - tsl-basic-operations - tsl-material-nodes - tsl-functions - tsl-conditionals - tsl-textures - tsl-noise - tsl-post-processing - tsl-compute-shaders - tsl-glsl-to-tsl ## Priority 11: WebGPU Renderer (MEDIUM) - webgpu-renderer - webgpu-render-async - webgpu-feature-detection - webgpu-instanced-array - webgpu-storage-textures - webgpu-workgroup-memory - webgpu-indirect-draws ## Priority 12: Loading & Assets (MEDIUM) - loading-draco-compression - loading-gltf-preferred - gltf-loading-optimization - loading-progress-feedback - loading-async-await - loading-lazy - loading-cache-assets - loading-dispose-unused ## Priority 13: Core Web Vitals (MEDIUM-HIGH) - core-web-vitals - vitals-lazy-load - vitals-code-split - vitals-preload - vitals-progressive-loading - vitals-placeholders - vitals-web-workers - vitals-streaming ## Priority 14: Camera & Controls (LOW-MEDIUM) - camera-near-far - camera-fov - camera-controls-damping - camera-resize-handler - camera-orbit-limits ## Priority 15: Animation System (MEDIUM) - animation-system ## Priority 16: Physics Integration (MEDIUM) - physics-integration - physics-compute-shaders ## Priority 17: WebXR / VR / AR (MEDIUM) - webxr-setup ## Priority 18: Audio (LOW-MEDIUM) - audio-spatial ## Priority 19: Post-Processing (MEDIUM) - postprocessing-optimization - postpro-renderer-config - postpro-merge-effects - postpro-selective-bloom - postpro-resolution-scaling - postpro-webgpu-native ## Priority 20: Mobile Optimization (HIGH) - mobile-optimization - raycasting-optimization