Dev log: Creating the new inspector
Babylon.js v4.0 will be available by end of April. It will be a large release with new features like WebXR (you can already try it here) or WebGPU support. Along with these new features we also wanted to improve our developer experience.
One of the developer tools we provide is the inspector:
The main problem faced when using the current inspector was the lack of representation of the scene hierarchy. Instead of a regular treeview, we used several tabs which were not really adequate for this usage (think about it on a mobile website or on a small screen).
This is why we decided to revamp the inspector in order to align more with its inner goal: helping developers and artists debug Babylon.js scene in real-time.
Here is a quick video of the current state of the Inspector v2.0:
We decided to go with React to build the new inspector. Main reason was because React helps creating streamlined UI that can easily evolve over time. Furthermore the React community is really active and support within TypeScript is excellent.
The new inspector now has two panes by default:
But it can also be used as a merged pane (like it will be in the playground for instance):
Also each pane can be undocked and can then fly with their own windows:
The Scene explorer
The scene explorer pane presents a hierarchical view of the scene:
Depending on the type of an entity, you could see different tools on the right hand side (like the gizmo manipulator for meshes for instance)
Selecting an element on this treeview will update the property tab in the Inspector
The inspector pane
The inspector pane contains several tabs:
- The property tab which will display categorized properties for the current selected entity:
- The debug tab lets you turn on and off various engine features like texture channels, animations etc.
- The statistics tab displays metrics about the current scene and general system info
- The tools tab contains several tools like the glTF tools or the screen capture buttons.
The new inspector has a lot of features that will help you pinpoint the issues you may face.
For example, you can turn on a specific material that will display your normals (which is helpful for artists to see how the dynamic lighting behaves):
Or you can ask the system to render only a specific texture out of a complex material (for instance to make sure a texture is correctly placed when using a Physically Based Rendering (PBR) material which involves several textures that are all merged to produce the final pixel):
You can also use the integrated texture viewer to dig into your texture channels (for instance when using a PBR material where some textures contain multiple information like metallic value in one channel and roughness in another one):
The system can help visualizing complex features like bones with the bones helper that let you visualize the bones (and then see if they are correctly positioned and animated):
At any time you can also use the picking mechanism to select an object directly from your scene:
We know that it would be impossible to provide a tool that will target every single need that a Babylon.js may have. This is why the new inspector supports an extensibility API.
For instance, if you run this code:
You will be able to add a new function to the meshes in the Scene explorer:
We plan to add that same level of extensibility to the tabs as well.
We plan to add more tools and features before the release of Babylon.js v4.0. In no particular order:
- Physics debugger (Helps visualizing the physic impostors)
- GUI support (We will display the control hierarchy in the Scene explorer alongside tools to highlight specific controls)
- Image processing support
- Debug cameras (cameras created for debugging purpose only)
- And more…
A public preview should be soon available in our preview channel. As always, if you want to help, feel free to contribute and help us create the best debugging tool for Babylon.js!
David Catuhe — Babylon.js developer lead