Rendering Inspector/debugLayer in the canvas using GUI

Hello :slight_smile:

@Deltakosh Is there a specific reason why the Inspector (scene.debugLayer.show()) is necessary added as new HTML elements in the DOM, while BabylonJS is capable of rendering nice GUI within the canvas ?

I’m working on adding some 3D stuffs on a website for a client, and it’s not the first time that I struggle with an HTML context which is already very dense and rich, including dozens of other CSS files, etc… Problem is : CSS from the rest of the page is killing everything in the inspector, due to conflict is class naming, such as for example “slider” :


This big white square is in fact just a “slider” from the Inspector, but the original web page had some .slider classes which are killing all of them in the Inspector. And I have many other issues (for example, cannot type values in inputs, etc, etc)


I’m quite stuck since I’m just participating to a wider project (cannot rename all classes). All I can do now is recoding some sliders and inputs within the BJS GUI, for the params I need to debug… :confused:


Would be GREAT to be able to have this Inpector poping within the canvas on top of render, without touching the HTML page ! :smiley:

2 Likes

Good point: main reason is that the inspector predates the GUi

But on your current issue, if you want to update the inspector css classes I have no issue with that if we can make it more robust

1 Like