dev-performance-lod-systems
À propos
Cette compétence fournit des techniques de Niveau de Détail (LOD) pour React Three Fiber (R3F) afin d'optimiser les performances en réduisant la complexité des modèles en fonction de la distance de la caméra. Elle est utilisée lorsque des modèles 3D complexes provoquent des chutes de FPS, particulièrement dans les scènes étendues ou sur les appareils mobiles. L'implémentation utilise le composant `Detailed` de `@react-three/drei` pour alterner entre les versions haute, moyenne, basse et en affiche plane d'un modèle à des seuils de distance définis.
Installation rapide
Claude Code
Recommandénpx skills add majiayu000/claude-skill-registry -a claude-code/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/dev-performance-lod-systemsCopiez et collez cette commande dans Claude Code pour installer cette compétence
Dépôt GitHub
Compétences associées
when-profiling-performance-use-performance-profiler
AutreCette compétence offre un profilage complet des performances pour mesurer, analyser et optimiser les performances des applications à travers les dimensions CPU, mémoire, E/S et réseau. Elle aide les développeurs à identifier les goulots d'étranglement, à réaliser des analyses de cause racine et à mettre en œuvre des optimisations en utilisant des outils tels que perf, Instruments et clinic.js. Utilisez-la lorsque vous avez besoin d'une amélioration systématique des performances à travers les phases de mesure de référence, de détection et d'optimisation.
when-analyzing-performance-use-performance-analysis
AutreCette compétence Claude offre une analyse complète des performances et une détection des goulots d'étranglement pour les essaims Claude Flow. Elle identifie les opportunités d'optimisation via le profilage et le benchmarking, en fournissant des recommandations exploitables. Utilisez-la lorsque vous avez besoin d'analyser et d'améliorer les performances de vos workflows actifs.
dev-performance-performance-basics
AutreCette compétence fournit les principes fondamentaux d'optimisation des performances R3F/Three.js pour les développeurs lorsque les FPS tombent en dessous de 60. Elle explique le budget critique de 16 ms pour 60 FPS et propose des stratégies concrètes comme la configuration du canvas et la réduction des appels de dessin. Utilisez-la pour diagnostiquer les problèmes de performance et mettre en œuvre des optimisations de rendu essentielles.
dev-performance-mobile-optimization
AutreCette compétence fournit des directives d'optimisation spécifiques aux appareils mobiles pour les applications R3F/Three.js, incluant des objectifs de performance et des ajustements de configuration. Elle aide les développeurs à optimiser pour les mobiles en réduisant les ratios de pixels, en désactivant les ombres/l'anti-crénelage, et en limitant les appels de rendu/les polygones. Utilisez-la lors du ciblage d'appareils mobiles ou en cas de problèmes de performance sur les téléphones.
