Good bye Debug Layer, Hello Inspector !

[Temechon]

Hello everybody, 

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 ! 

Cheers

 

[Dad72]

Good job on this inspector / debugLayer.

[jerome]

sa race velue !!! 

[gryff]

3 hours ago, Temechon said:

Sure, there is still work to do and bugs to fix.

@Temechon : I'm sure there are, and I assume with the Sandbox too.

But I know you for being determined and hardworking - so I can be patient

cheers, gryff

[Pryme8]

whoa

[davrous]

Awesome job @Temechon !!! Thank you so much for this so cool contribution!

[GameMonetize]

You rock my friend. SO proud to have you in our community!

[Vousk-prod.]

Waow, comme ça claque !!

[Temechon]

Thank you guys

[jerome]

Thank you, to YOU !

[Vousk-prod.]

When I use the inspector on more complex scene than the examples in the PG, I got a TypeError: invalid 'instanceof' operand BABYLON.PrimitiveAlignment

EDIT : there is no Canvas2D use in the concerned scenes

 

[Temechon]

Yes, this is a known bug... I'm working on this

Temporary workaround : include babylon.canvas2d.js in your project

[Vousk-prod.]

Ok, cool.

Can we set some starting options somewhere when calling the inspector ? (for instance, starting the inspector as detached window)

I also noticed that in detach window mode, in FF, if I try to change the height of the bottom panel by mouse clicking and dragging the panel upper edge, the drag is never released.

[Temechon]

Yes, it's also a known bug  Good idea for constructor parameters, I'll add it to my task list ! 

[Vousk-prod.]

On 11/12/2016 at 3:23 PM, Temechon said:

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

[Temechon]

You can also look for their name in the 'Mesh' tab, click on it and check the position attribute... Just sayin

[Vousk-prod.]

Yup, I saw that. In some cases it's more visual and convenient when all meshes names visible at once, but it's already very usefull like this

I also love the ability to change lights and materials dynamically. Great job !

[gryff]

@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 "

Keep up the good work

cheers, gryff

[Temechon]

Thank you gryff  I'm working on it!

[Temechon]

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 !

[Dad72]

Super this inspector. 

I have thoroughly tested, I have found some small bugs:

• 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

 

[Temechon]

Thanks !

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

 

[Nockawa]

Concerning the label issue I need @Deltakosh to update the canvas2d.js hosted on http://www.babylonjs.com/babylon.canvas2d.js with the latest preview one, the bug is fixed but not updated on this url.

[Kesshi]

@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

[Wingnut]

Yeah, this new debug layer rocks!  Assorted weirdness, but still rocks.  I think right click should close text input boxes (in the properties list of the mesh inspector)

Speaking of mesh property lists... I wonder how this list of properties.... was chosen as the default list.  hmm.

Anyway, I would love to see an object/mesh inspector... with insane amounts of power. 

Show properties, show methods, show statics, which properties/methods were defined on-mesh?  Which were inherited, and from what? 

You know... click to inspect AbstractMesh, click to inspect Node... inspect JS Window object, document object, canvas element, whiffle bearings, granistan joints, ahem.

Okay, okay, that would be out-of-control.  But, more power to the mesh inspector... would be cool.  At least... "Show ALL properties and methods" -option... nice.

Object inspectors really help people learn what knobs and switches are available... to do demented experiments.    Party on!