Three.js debug profiler: blank canvases, runtime bugs and measured bottlenecks
Trier les jeux Three.js navigateur — reproduire d'abord, trouver le module responsable de la panne, fixer la cause racine, retester le chemin cassé ; profiler draw calls, triangles, textures, mémoire, shaders et bundle
- Quoi
- Trier les jeux Three.js navigateur — reproduire d'abord, trouver le module responsable de la panne, fixer la cause racine, retester le chemin cassé ; profiler draw calls, triangles, textures, mémoire, shaders et bundle
- Coût
- Gratuit
- Prérequis
- un projet de jeu Three.js navigateur à déboguer ou profiler — le skill est un workflow guidé, pas un logiciel à installer
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill de debug et profiling Three.js de @majidmanzarpour pour les jeux navigateur : un workflow cadré par un « lead ». Debug : reproduire d'abord avec la même commande et URL que l'utilisateur, lire les erreurs console/page/réseau, trouver le module responsable de la panne (renderer, boucle, caméra, scène, assets, audio, input, physique, UI, base path), fixer la cause racine là, et retester le chemin exact cassé — avec un playbook de triage ordonné (canvas vide, chargement assets et audio, boucle/animation/physique, input et mobile) couvrant les causes communes comme les boucles actives dupliquées, la taille d'affichage du canvas désalignée du buffer de dessin, et les mauvaises unités de delta. Profiling : baseliner un scénario de production fixe, classifier le goulot (CPU, draw GPU, fragment, vertex, mémoire ou réseau), changer une chose, re-mesurer le même scénario, confirmer que visuels et jouabilité tiennent — sur draw calls, triangles, textures, mémoire, coût shader et post-processing, et taille de bundle. Rapport : cause racine ou goulot mesuré d'abord, puis fichiers changés, métriques avant/après, commandes, screenshots, chemin cassé retesté, et risques résiduels. Bémols honnêtes : méthodologie plus un playbook de debug détaillé — se lit dans une structure de projet pilotée par agent (un « lead » consolide la vérification) ; la forme diagnostique du playbook de référence est spécifique à cette famille de skills. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet de jeu Three.js navigateur à déboguer ou profiler — le skill est un workflow guidé, pas un logiciel à installer Installe-moi « Debug profiler Three.js : canvas vides, bugs runtime et goulots mesurés ». Il enseigne à mon agent le workflow de debug et profiling de @majidmanzarpour : reproduire d'abord avec la commande et l'URL exactes de l'utilisateur, trier le module responsable (renderer, boucle, caméra, scène, assets, audio, input, physique, UI), fixer la cause racine et retester le chemin cassé, puis profiler un scénario fixe — classifier le goulot (CPU, draw GPU, fragment, vertex, mémoire, réseau), changer une chose, re-mesurer, confirmer que la jouabilité tient — et rapporter cause racine, métriques et risques résiduels. Licence MIT. Dépôt : https://github.com/majidmanzarpour/threejs-game-skills/blob/main/skills/threejs-debug-profiler/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « threejs-debug-profiler ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. pointer l'agent vers le projet de jeu et le chemin/scénario cassé à reproduire ; rien d'autre — c'est une méthodologie). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.