L'inspecteur de Babylon.js : déboguer des scènes 3D dans le navigateur

Publié le 17 January 2026 | Traduit de l'espagnol
Captura de pantalla del inspector de Babylon.js mostrando la jerarquía de una escena 3D y las propiedades editables de una malla seleccionada, integrado en un navegador web.

L'inspecteur de Babylon.js : déboguer des scènes 3D dans le navigateur

L'inspecteur de Babylon.js est une utilité qui fonctionne directement dans votre navigateur web. Cet outil vous permet d'inspecter et modifier en temps réel tous les composants d'une scène tridimensionnelle pendant que votre application s'exécute, offrant un flux de travail agile pour optimiser et corriger les erreurs sur le vif 🛠️.

Activer et utiliser l'outil de débogage

Pour commencer à utiliser l'inspecteur, vous devez inclure sa bibliothèque dans votre projet et ensuite exécuter la fonction `scene.debugLayer.show()`. Une alternative rapide est d'appuyer sur Ctrl+Shift+I lorsque le canvas de Babylon.js a le focus. L'interface apparaît comme un panneau latéral dans la même page, intégrée de manière native au moteur.

Flux de travail principal :
  • Activer le panneau : Par code ou raccourci clavier, l'inspecteur s'affiche dans la fenêtre du navigateur.
  • Naviguer dans la hiérarchie : Explorez une liste de nœuds représentant toute la structure de votre scène 3D.
  • Sélectionner et éditer : En cliquant sur n'importe quel objet, comme une maille ou une lumière, ses propriétés modifiables apparaissent dans des panneaux organisés.
Un développeur peut passer des heures à ajuster minutieusement la couleur d'une lumière ambiante, juste pour que quelqu'un demande si le soleil a toujours été aussi jaune.

Capacités d'inspection et de modification

Cet outil permet d'examiner et de modifier une large gamme de paramètres de la scène. Vous pouvez vérifier les transformations, les géométries et les matériaux appliqués, y compris les textures et les shaders. Les changements dans des propriétés comme l'intensité ou la couleur d'une lumière se reflètent instantanément.

Domaines clés couverts :
  • Objets et matériaux : Inspectez les mailles, ajustez les matériaux et visualisez les textures appliquées.
  • Éclairage et caméras : Modifiez les propriétés des lumières et configurez les paramètres de caméra en direct.
  • Systèmes et performances : Analysez les particules, la physique et surveillez les métriques clés comme le taux de fotogrammes ou les appels de dessin pour identifier les goulots d'étranglement.

Impact sur le développement

Utiliser l'inspecteur de Babylon.js facilite enormément le débogage de problèmes, le test de différentes configurations et l'ajustement de valeurs visuelles. En éliminant le besoin de recompiler constamment le code, les développeurs peuvent itérer plus rapidement, optimiser les performances et résoudre les erreurs visuelles de manière efficace, tout depuis le confort du navigateur 🚀.