Recommended Posts

As you surely noticed it, the old debug layer has been reworked in something bigger... called the "inspector".

This tool has the goal to become the 'F12 tool' of our beloved engine, without replacing the official editor. It's dedicated to HELP the developer by providing some debug features. You will find almost every feature from the debug layer, and much more: display shaders code, display textures used on materials, check stats, enable lights...

All properties are refreshed almost in real time (actually every 200ms for performances reasons). AND you can update any value (among strings, numbers and booleans) by clicking on it and pressing 'enter'.

Sure, there is still work to do and bugs to fix. But in the current state, we decided that it is already more useful than the debug layer was.
I'm still working hard on it, don't worry ! You can also help me a lot by reporting every kind of bugs in this thread and even contribute to its development.

In the next days, I'll first fix all the annoying display and integration bugs. Then, I'll work on :
- Restore clickables labels from the old debug layer (for Dad72 and DK )
- Update the documentation (of course)
- How to contribute (add a new tab, add a new tool, change panel color theme...)
- Add new features ! (Cameras, particles, textures, audio, animations...)
- <insert your suggestion here>

I'm having a lot of fun to work on this, and I really hope you will find it as useful as I do !

Share this post

Link to post

Share on other sites

Restore clickables labels from the old debug layer (for Dad72 and DK )

Not only for them !

I also find the clickable labels very usefull.

Well... to be honest, I barely click on the labels

But the names displayed into the 3D scene for every object are really really helpfull for debugging (particularly when dealing with many objects, with some of them not visible and/or positionned in the wild...)

Share this post

Link to post

Share on other sites

@Temechon The Sandbox continues to improve - the debug panel now shows up on the right side of the screen instead of a big white space.

However, on clicking the litte "X" button to close that panel, the whole purple panel with the 3 buttons -load, debug, fullscreen - disappears too. This means I have to refresh the whole page to load another .babylon file.

Just obeying orders " You can also help me a lot by reporting every kind of bugs in this thread "

Share this post

Link to post

Share on other sites

Hello there ! Some updates on what I've been working on these days (mostly bug fixes):

- FPS are now updated at every frame
- Popup has been disabled on Edge (for security reasons, the DOM cannot be created)
- New tool : Clickable label (not clickable anymore though), done by nockawa with Canvas2d
- Various bug fixes for canvas width/height/resizing once the inspector is disposed
- Mesh are not sorted by hierarchy
- New properties are displayed for scene and meshes

I will now work on the documentation and new features (yeahh). If you have any ideas, feel free to suggest !

Share on other sites

There seems to be a small bug with the labels of the camera when you move this camera. The label blinks and this ballad all over the canvas.

All the labels placed at the point 0, 0, 0 are one behind the other, they should be shifted one above the other for all the sees.

When the inspector is closed with the cross, he can not be reopened. The isVisible value must not be updated.

When open inspector in a popop we can not attach it (cancel popop).

Suggest :

The properties of the extension material are not visible (for water, fire, fur, lava, terrain...) Might be a suggestion to add it.

Be able to choose a clear or dark theme (black or white). There is a dark theme black here. Eventually we could create our own theme better. (This black theme, although pretty, fits very badly on my editor with a clear or blue theme.)

That's all. I find it really cool this inspector. Thanks very much

Share this post

Link to post

Share on other sites

The label issue will be fixed soon (I think @Nockawa is taking care of it).
I'm aware of the issue when closing the inspector. I'm working on it.
I don't plan on working on a tool that cancel the popup and reattach it to the canvas, but I can add it to the list

The color theme is a good idea, but right now it can only be chosen when building the inspector (all color are set in css). I'll think about it

Share this post

Link to post

Share on other sites

@Temechon Nice job! I really like the new inspector.
... but i also found some issues

1. http://www.babylonjs-playground.com/#JPDWT#0
In this PG there are 4 boxes but only box1 is a root mesh, all others are parented. I would expect to see only box1 at top level in the mesh list but box2 and box3 are also listed (but not box4 ???)
This is very confusing. I would like to have a strict hierarchical view on the meshes. Maybe optionally you could add a flat list for the meshes.

2. http://www.babylonjs-playground.com/#JPDWT#1
There is a confilct between mesh.isVisible and mesh.setEnabled(). In the PG box1 has isVisible = false but it is enabled. If you click on the visibility icon it gets disabled (isVisible is still false).
If you click again the box gets enabled and isVisible will be changed to true. How can i go back to my inital state now? Changing isVisible manually in the property list doesn't work.
I think the visibility icon should only change/check the enabled state. isVisible should be changed in the property list. ... or even better there should be two icons, one for isVisible and one for setEnabled

3. http://www.babylonjs-playground.com/#JPDWT#2
The current yellow highlight effect for the meshes doesn't work nicely if the meshes are scaled. In the PG you will get a huge yellow highlight for sphere2.
In my real project i can't identify some meshes correclty because everything is just yellow :-)
Maybe mesh.renderOverlay could be used here instead of the outline ... or the new HighlightLayer