Babylon Scene Debugging Tool

UPD: See the latest version somewhere below in the thread.

Debugging, to a great extent, is like a detective story.
And in both cases one needs more evidences to catch a a bad egg :slight_smile:
This small utility makes some things more evident (actually, some functions are the same as in the Inspector tool) and helped me a lot with finding memory leakages and optimizing scenes.
(If your app runs in real time for several hours even 1 texture/minute leak may result to crashes).
FInally I adopted it to PG. There are a lot of possibilities how to develop it further, including some logging capabilities and visual data presentation.
Here is the simplest version - https://playground.babylonjs.com/#938RNX#8
It is possible to use in almost any Playground example, just copy and paste the relevant part!

Here are some examples how to use it to debug with examples from Documentation:
(screenshots are made on old laptop)
TUNING

If you zoom out, there will be almost the same parameters

Even if meshes are not visible, they still continue to render.
To correct this me may just set camera.maxZ = 50 - https://playground.babylonjs.com/#KA93U#672


and get much better parameters when meshes are invisible.

LEAKAGE
Another example - explosion particle system at https://playground.babylonjs.com/#X37LS1#86

While it is extremely funny to press Space to make explosions, one may notice that the number of meshes is increasing with every explosion.
Seems that the problem is that there are conditions when emitter is created but not disposed later.

7 Likes

cc @sebavan

I’ll fix it!!!

Fixed :wink: thanks for the heads up

2 Likes


Ten minutes from reading it to the fix, I was way too slow from the ping lol

1 Like

The scene doesn’t actually run for me:

Uncaught TypeError: performance.memory is undefined

Edit: Looks like it’s because firefox.

Also looks like this doesn’t compile in typescript.

Property ‘memory’ does not exist on type ‘Performance’.

For:

        heapSize.text = "Heap Used: " + ((performance.memory.usedJSHeapSize / 1024) / 1024).toFixed() + " Mb";
        heapTotal.text = "Heap Total: " + ((performance.memory.totalJSHeapSize / 1024) / 1024).toFixed() + " Mb";
        heapLimit.text = "Heap Limit: " + ((performance.memory.jsHeapSizeLimit / 1024) / 1024).toFixed() + " Mb";

This is JS, for JS Playground :slight_smile:
As for memory support -

This is JS, for JS Playground

Well yes, it is JS for the JS playground. However, TS is a superset of JS, all JS is valid TS.

I’m pointing out that the TypeScript definitions may be missing something, to maintainers in the thread, perhaps there is a reason for that (ie. browser support?).

Casting performance to any and it compiles and runs perfectly fine, as expected.


That aside though this is a nice debugging tool for monitoring scene performance.

Would be nice to see TS example :slight_smile:

Here ya go!

https://playground.babylonjs.com/#938RNX#10

It really is just a straight copy/paste. The only change needed is casting performance to any so the compiler stops complaining about the lack of memory on the type.

2 Likes

@labris : interesting tool, but does not work on Firefox. I get the text - but no data,

@douglasg14b - your PG just produces a white screen - again with Firefox.

Stay Safe All, gryff :slight_smile:

1 Like

This is because firefox does not have memory support (@labris pasted a compatibility matrix above).

The copy/paste could use some try/catches around it though to check for support, and then disable the memory hook?

1 Like

Here’s a quick fix to display “unavailable” when performance.memory isn’t defined. :slightly_smiling_face:
https://playground.babylonjs.com/#938RNX#12

3 Likes

@Blake TY :slight_smile: That works well in Firefox! Data all there.

Stay Safe, gryff :slight_smile:

2 Likes

Quick PSA: @carolhmjis is currently working on what we call the Performance Viewer which will be an extension of what is discussed here

You can track it here:
[Performance viewer] add a standalone performance viewer UI · Issue #11127 · BabylonJS/Babylon.js (github.com)
[Performance viewer] improve UI based on guidelines · Issue #11126 · BabylonJS/Babylon.js (github.com)

Code is here for you to look at it (clearly not done yet): Babylon.js/inspector/src/components/actionTabs/tabs/performanceViewer at master · BabylonJS/Babylon.js (github.com)

Final design:

The performance viewer will be inside the inspector but also available directly from the scene

5 Likes

Just in one day my small utility was better adopted to Firefox, ported to Typescript and one bug removed from Babylon source code. Really fascinating speed, community powered!
I added also the possibility to copy camera position to clipboard (this is very useful for quick tuning and better orientation) and lights counter - here is the latest version: https://playground.babylonjs.com/#938RNX#17
Shows camera position x, y, z or arcRotate camera alpha, beta, radius - click the button to copy to clipboard.

Performance Viewer will be a great tool. Actually most parameters from my utility could be seen at Inspector itself, but it is not always convenient.
I found that GUI suits here the best since it doesn’t block the pointer and you always have real time information about the scene.
There are a lot of parameters which could be used for optimization and reporting. For this utility it means additional tabs and functions, which I would gladly discuss :slight_smile:
While it is good for PG, it is possible to develop TS/JS standalone extension which could be easily used in almost any Babylon environment.

2 Likes

The length of the function can be significantly reduced by not repeating the same text setup for each counter, and instead calling a function for that.


function addInstrumentationTextBlock(panel: BABYLON.GUI.StackPanel, text: string) {
    const textBlock = new BABYLON.GUI.TextBlock();
    textBlock.text = text;
    textBlock.height = '20px';
    textBlock.width = '200px';
    textBlock.color = 'white';
    textBlock.fontSize = 14;
    textBlock.textHorizontalAlignment = 0;
    panel.addControl(textBlock);

    return textBlock;
}

Called like:

const meshesLength = addInstrumentationTextBlock(panel, 'Meshes: ');

A couple more handy metrics that I added to my version (Not very clean, but I just slapped it in):

    const activeVertices = addInstrumentationTextBlock(panel, 'Active Vertice Count: ');
    const activeIndices = addInstrumentationTextBlock(panel, 'Active Indices: ');

...
    // Inside registerAfterRender
    activeVertices.text = `Total Vertices: ${scene.totalVerticesPerfCounter.current.toLocaleString()}`;
    activeIndices.text = `Active Indices: ${scene.totalActiveIndicesPerfCounter.current.toLocaleString()}`;
2 Likes

More than totally agree :slight_smile:
I also added the possibility to toggle GUI with ‘g’ button.
Here is the latest JS version - https://playground.babylonjs.com/#938RNX#29
Seems that the left column is completely full now - we need more tabs :slight_smile:
Mesh tracking label from @roland is really great helper for animations - https://playground.babylonjs.com/#39CH06#4
Probably the ability to change the Inspector CSS for semitransparent overlay also could help to get more canvas area when debugging.
Here is unfinished demo where I added some GUI buttons at the right side.
(By the way, for all GLBs there is only 1 material and 1 texture 8x8 px) - https://playground.babylonjs.com/#ZRM05R#79
image

2 Likes