Introducing Inspector v2

Announcements
1

Hey everyone - for Babylon 9 we are completely rebuilding Inspector, and today we are officially announcing the preview of Inspector v2! Try it out using the instructions below and share feedback in this thread!

Playground and Sandbox

You can try the Inspector v2 preview in Playground and Sandbox by clicking the Try the new Inspector buttons. This will toggle between Inspector v1 and Inspector v2 without reloading the page.

NPM Package

You can try the Inspector v2 preview in your own projects by installing the @babylonjs/inspector@preview package and calling ShowInspector. See the npm page for a bit more detail. For example: https://www.npmjs.com/package/@babylonjs/inspector/v/8.31.2-preview

You can find basic API documentation here: Babylon.js docs

image
image1376Ă—790 116 KB

What and Why?

We had a number of motivations for rebuilding Inspector from the ground up:

  1. Extensibility - Inspector is the main diagnostic tool for Babylon, and while a core set of features is useful to just about everyone using Babylon, there are many scenarios or even product specific features that can greatly improve the experience but don’t necessarily make sense for everyone. Conceptually this is similar to extensibility in Visual Studio Code - extensions make it very powerful and useful for specific workflows, without making the base product overwhelmingly large and complex. Inspector v2 is fully extensible, whether you want to add new sections or commands to scene explorer, new properties to the properties pane, new toolbar items, whole new side panes, and so on. Checkout the docs and samples for more details.
  2. Performance - Inspector v2 is built to handle Babylon scenes of any size and complexity. For example, in Inspector v1 if you have a scene with 8000 nodes, it would take about 2 minutes to expand the root node of scene explorer on a decent dev box. With Inspector v2, this same scenario is effectively instantaneous. In fact, we’ve tested Inspector v2 with scenes with 100,000+ nodes and it still performs very well.
  3. Reactivity - Inspector v1 relied heavily on polling and manual refreshes to see the latest state of the scene. This can cause confusion, and can also create unnecessary runtime overhead. Inspector v2 uses a different approach, and in almost all cases, any changes in the scene are immediately reflected in Inspector.
  4. UI Modernization - for Babylon 9, we are overhauling the UI for all of our tools (@georgie will have a separate announcement on this!), and so naturally this is included as part of Inspector v2. The new UI system is more modern and fully supports theming (e.g. light/dark modes), and the new shared components use React and Typescript best practices, so they should be much easier to use when extending Inspector v2 (please mention @georgie in any feedback related to the new UI system!).
  5. ESM - Inspector v2 is esm first, meaning you can integrate it into your own projects and your bundler can fully tree shake it and code split / chunk optional features and extensions that rely on dynamic imports. Additionally, because our new UI system leverages a css-in-js solution, bundling the esm package is simple and requires no special bundler configuration to deal with separate css files, and Inspector css will never collide with the css of your app.
  6. Bug Fixes - ok we didn’t need to rebuild Inspector to fix bugs, but we have fixed a lot of old issues along the way! For example, mesh picking now works even when morph target or skeletal animation is applied to the mesh.

What does “preview” mean?

Preview means several things:

  1. There is still more feature work to do, and Inspector v2 is not at parity with Inspector v1 yet.
  2. Inspector v2 is not fully backward compatible with Inspector v1 yet.
  3. We haven’t integrated with debugLayer yet, which means currently you must explicitly call the new ShowInspector function.
  4. The UX is not final. We will continue to iterate and improve before the Babylon 9 release.
  5. The API is not final, but we’ll try to only change things at this point when we feel we really need to.
  6. We don’t have umd packages yet (e.g. babyonjs-inspector@preview). This also means it’s not yet possible to use Inspector v2 directly in a webpage (currently requires app-specific bundling).

Our ask to the Babylon Community :folded_hands:t2:

  • Try Inspector v2 in Playground and Sandbox (click the “Try the new Inspector” button) and share your feedback in this thread. We intend to replace Inspector v1 with Inspector v2 as part of the Babylon 9 release, so if you have feedback or find issues, it would be great to know well before the release.
  • Try Inspector v2 (@babylonjs/inspector@preview) in your own projects and share your feedback in this thread.
  • Share any ideas you have for new features or extensions. The samples may give you some ideas on what is possible with extensions (the sky is the limit!).
  • If you’d like to contribute to Inspector v2 by creating new extensions that are available “out-of-the-box” with Inspector v2, DM me - we’d love to have contributions!
  • We are also considering the idea of having a separate community governed extension feed. This would be outside of the Babylon monorepo, and extensions would be dynamically fetched (e.g. not part of the default Inspector v2 bundle). We would do this so that the community is not bottlenecked on the Babylon team for PR reviews, and so that arbitrary npm packages could be used for extensions (we are very careful with bringing any new dependencies into the core Babylon monorepo). If this sounds interesting to you, please let us know!

See Inspector v2 bugs and feedback · Issue #17293 · BabylonJS/Babylon.js for specific bugs and requests being tracked.

@cx20, @roland :wink:

41 Likes
Babylon.js Inspector v2 Custom Extensions Collection
2

Very pretty, this new inspector. It’s more modern indeed.
And the plugin system to add functionality to it, I think it’s a great idea.
And it works better in V2, for example my graphics card is detected what was not the case in V1. (ANGLE (NVIDIA, NVIDIA GeForce RTX 3050 (0x00002507) Direct3D11 vs_5_0 ps_5_0, D3D11))

Thank you

5 Likes
3

@ryantrem I couldn’t wait for the new version of the Inspector to finally arrive and it’s here! Thank you! :smiling_cat_with_heart_eyes:

I’m trying to add it to my project (a monorepo) that uses React 19, but I can’t get it to install properly due to a mismatched react-dom version.

I tried installing it with npm i @babylonjs/inspector@8.31.1-preview --legacy-peer-deps to bypass the version conflict, and while it installs, I get a bunch of Could not resolve package... errors when starting my app, even from the core package.

image
image956Ă—682 176 KB

Currently working on getting it spun up :grinning_face_with_smiling_eyes:

4

Thanks for testing it out and reporting these issues, looking now!

5

@roland I have a fix that relaxes the version constraint on the React peer dependency that should fix the first issue you hit.

The bad import for @babylonjs/core/Meshes.js unfortunately slipped in recently and I missed it, but I have a fix for it now as well.

For the last one in the screenshot, I’m not sure why you sould get an error about the @fluentui-contrib/react-resize-handle import. The peer dependency looks correct in the package.json, and I could not repro locally. Maybe something with one of the other issues or the legacy peer deps is somehow resulting in this last issue??

I will update this thread when the new package is available (in an hour or so), and would love it if you could re-test with your project!

6

we are eager to try this out. nice work everyone!

2 Likes
7

@roland new package is published! @babylonjs/inspector - npm

2 Likes
8

That’s really impressive. I was amazed by the modern design the moment I turned it on in Playground.

I hope the Node graph editor gets improved like this too!

2 Likes
9

Great, when I first came in, I saw a white UI and I was a bit uncomfortable with it. However, this change is very meaningful

10

Is this light/dark modes configurable by user on the UI? Where to find it?

11

It has helped, I didn’t get any errors when installing the package. However I had to instruct vite to use react 19 with the new inspector package:

image
image810Ă—314 51.3 KB

to get rid of this error which prevented to start the App:

image
image960Ă—308 88.3 KB

Now it works! I’m going to explore the cool new stuff!

Thanks again! :flexed_biceps:

1 Like
12

Yes! By default, light/dark mode will match your system, but it can be overridden.

In Sandbox, you can override it with the button in the upper right corner of Inspector:

image
image380Ă—127 4.99 KB

In Playground, light/dark mode is driven by the top level Playground toolbar (this controls the light/dark theme of both the code editor and Inspector so they are in sync):

image
image822Ă—189 8.75 KB

When using the Inspector API in your own project, you can manually select light/dark mode and/or show/hide the light/dark mode theme button.

3 Likes
13

Hmm I wouldn’t have expected that since the Inspector package allows for a range now. I will do more testing tomorrow with a Vite app using React 19 and see if I can repro.

I also would not have expected this warning to prevent the app from starting. This is a false positive of a hook check, which from the sound of it is fixed in React 19, but it should only be a warning that can be ignored. But let me see when I do more testing with React 19 tomorrow.

1 Like
14

image
image380Ă—199 5.39 KB

Is it possible that click on here to toggle open/close of the sub-tree?
Also, any plan to have the “right click to add node/material” like the old one?

2 Likes
15

hopefully it doesnt fight my page css like the old one!

1 Like
16

The Extension mechanism is a excellent idea.
However, there still seems to be much work to be done on Inspector v2, as Inspector v1 is currently so effortlessly convenient to use.

1 Like
17

The screenshot I included in the post is in light mode because I prefer it in my bright office, but if your system is in dark mode then Inspector will be dark mode by default. Otherwise you can always override the light/dark mode with your preference!

18

You mean click on the text to expand/collapse? It might be, I can look into it!

This is one of the things that is not done yet for Inspector v2, in part because we wanted to separate the core “diagnostic” functionality of Inspector from asset creation. We’re still exploring some more holistic ideas around asset creation, but the aim is to have something in place for this as part of the Babylon 9 release.

1 Like
19

Inspector v2 will not fight your page css like v1. The new UI system uses a css-in-js solution and generates unique class names at runtime, and we only apply styles through explicit class references.

3 Likes
20

To avoid css confliction, another solution is shadow root, but this might require a modern browser