Babylon Scene Debugging Tool

labris · November 19, 2021, 12:16am

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

github.com

BabylonJS/Babylon.js/blob/74a1b99ff4671490f662b5f3d7c91f87219ccf9c/src/Particles/subEmitter.ts#L54

    
      
           */

          constructor(

              /**

               * the particle system to be used by the sub emitter

               */

              public particleSystem: ParticleSystem

          ) {

              // Create mesh as emitter to support rotation

              if (!particleSystem.emitter || !(<AbstractMesh>particleSystem.emitter).dispose) {

                  const internalClass = GetClass("BABYLON.AbstractMesh");

                  particleSystem.emitter = new internalClass("SubemitterSystemEmitter", particleSystem.getScene());

              }

          }

          /**

           * Clones the sub emitter

           * @returns the cloned sub emitter

           */

          public clone(): SubEmitter {

              // Clone particle system

              var emitter = this.particleSystem.emitter;

              if (!emitter) {

Deltakosh · November 19, 2021, 4:27pm

cc @sebavan

Deltakosh · November 19, 2021, 4:30pm

I’ll fix it!!!

Deltakosh · November 19, 2021, 4:37pm

Fixed thanks for the heads up

sebavan · November 19, 2021, 5:12pm

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

douglasg14b · November 19, 2021, 6:14pm

The scene doesn’t actually run for me:

Uncaught TypeError: performance.memory is undefined

Edit: Looks like it’s because firefox.

douglasg14b · November 19, 2021, 6:16pm

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

labris · November 19, 2021, 6:47pm

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

douglasg14b · November 19, 2021, 6:54pm

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.

labris · November 19, 2021, 6:56pm

Would be nice to see TS example

douglasg14b · November 19, 2021, 6:58pm

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.

gryff · November 19, 2021, 7:16pm

@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

douglasg14b · November 19, 2021, 7:18pm

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?

Blake · November 19, 2021, 7:22pm

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

gryff · November 19, 2021, 7:26pm

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

Stay Safe, gryff

Deltakosh · November 19, 2021, 7:29pm

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

labris · November 20, 2021, 5:28am

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

douglasg14b · November 27, 2021, 4:46am

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()}`;

labris · November 27, 2021, 11:02pm

More than totally agree
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
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

labris · December 10, 2021, 1:03am

It is also possible to use some external js bookmarklet in any file to show some minimal information.

javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()

https://playground.babylonjs.com/#RB5ZS4

Topic		Replies	Views
Way to go back and forth through the scene data history for debugging? Questions debug	3	18	November 13, 2024
How to use Babylon.js Particle Editor with ES6 Questions	3	571	June 1, 2020
Console3 - logging to the rendering canvas Demos and projects	8	987	December 9, 2021
Babylon Playground strange behavior Questions playground	8	699	February 22, 2022
Popout windows - debug layer Bugs	3	292	September 23, 2023

Babylon Scene Debugging Tool

Related topics