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:

Babylon.js inspector v1.0

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.

Sneak peak

Here is a quick video of the current state of the Inspector v2.0:

Sneak peek video

The tech

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 panes

The new inspector now has two panes by default:

Inspector v2.0 in two panes mode

But it can also be used as a merged pane (like it will be in the playground for instance):

Inspector v2.0 in embed mode inside the Playground

Also each pane can be undocked and can then fly with their own windows:

Inspector v2.0 in undock mode

The Scene explorer

The scene explorer pane presents a hierarchical view of the scene:

Scene explorer

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:
Texture property tab
Mesh property tab
  • The debug tab lets you turn on and off various engine features like texture channels, animations etc.
Debug tab
  • 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.

Debugging tools

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):

The display normals mode

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):

Texture only mode

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):

Texture explorer

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):

Bones helper (with render grid enabled)

At any time you can also use the picking mechanism to select an object directly from your scene:

Mesh picker in action

Extensibility

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:

User defined extensions for the Scene explorer

You will be able to add a new function to the meshes in the Scene explorer:

Additional menu added to all meshes

We plan to add that same level of extensibility to the tabs as well.

What’s next?

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