Introducing the Performance Profiler!

Fix initial canvas size for Perf Profiler on Firefox by carolhmj · Pull Request #11847 · BabylonJS/Babylon.js · GitHub fix is UP! :smiley:

The only metric Firefox doesn’t support right now is the CPU utilization (which uses the Compute Pressure API Observing compute pressure), so everything should work! If not, please tell me so I can get to fixing it :rofl:


Thank you for cleaning it up a lot (Especially the side bar it looks a lot better), and improving the UX!! :smile:


You did a good job man! so the foundation was robust!


^^^^^^ What David said! @SahilTara did an INCREDIBLE job laying the groundwork!


@SahilTara long time no see !!! I can only concur

1 Like

This has looks cool and very practical. Thanks for this profiler.


oh, this is really nice! I will start testing it soon!

1 Like

Looks promising. Am not in a position to use right now (almost everything is currently broken). My use case is headless / XR, which I see is supported, but not described beyond its existence.

Was thinking:

  • Have a GUI button (I have my own UI) to click to start recording.
  • Let some time pass, then click a stop button.
  • Somehow generate a mesh of the graph data, which I display.


  • Is that workflow possible? Maybe with some kind of .csv intermediary.
  • What .js file(s) are required to be added?

It could be done on a desktop, but that kind of makes me nervous as all kinds of things are different like hands / controller meshes.

Oh, thanks for your input! I have to say I’m less knowledgeable with the XR scenario, so let me ask: in this case there’s no window object? We have a method exportDataToCsv that exports the current data in the scene’s performance collector to CSV, but that uses the Blob and window objects. I could add an extra method named something like exportDataToCsvString that just returns the string instead of trying to download it, would that work for you?

I think the question is moot, as on Occulus, I have successfully called:

const blob = new Blob ( [ report ], { type : 'text/strings;' } );
const objectUrl = window.URL.createObjectURL(blob);

Window is there for sure.

I do not want to actually download it though. Just hoping there was a way (in code) to start - stop - export, and also there was an import via function where a dynamicTexture thing is returned. I could then put it up on a side of a mesh plane. The .csv is just an intermediary to hook up 2 different parts of the API.

Also, if there is a more direct way, that is fine too.

I do not have a ready workflow to put this in, but have started to track down stuff to begin a PG, Babylon.js Playground.

I really am not familiar Canvas2D. Is there some way the graph could be drawn on the context of the dynamic texture, or refactor the actual call that does this to take a context as an argument?

Oh, if window works then you can do scene.getPerfCollector() to retrieve the performance collector of the scene, collector.addCollectionStrategies(<list of strategies>) to add strategies, then call start, stop and exportDataToCsv all through code.

We actually have plans to make a “standalone” version of the profiler that doesn’t open in a separate window, but we still have to work on the design.

I really am not familiar Canvas2D. Is there some way the graph could be drawn on the context of the dynamic texture, or refactor the actual call that does this to take a context as an argument?

Currently, the CanvasGraphService class that does the graphing is taking an HTMLCanvasElement because it attaches some listeners to it (mousedown, wheel, etc…), but maybe we could refactor in a way that can accept either a context (and doesn’t attach anything) or a canvas (and then attaches the listeners)…


I moved to my own topic, so your announcement is not all clogged with this.


@carolhmj Is there a way to display the performance profiler directly from code? I’ve tried to trace through the code to see how it is being done from the PG, but I am having trouble tracing instantiation of the component through the various abstraction layers.

We had plans for a “standalone” version of the Performance Profiler that could be displayed directly on the scene without the need for a Inspector, but unfortunately, we don’t have resources for that right now.


Can you summarize what would need to be done to make this happen? I might be willing to take it on.

1 Like

Sure! Most of the components used in the performance profiler are here as part of the inspector package: Babylon.js/packages/dev/inspector/src/components/actionTabs/tabs/performanceViewer at master · BabylonJS/Babylon.js ( and Babylon.js/packages/dev/inspector/src/components/graph at master · BabylonJS/Babylon.js ( @RaananW do you think they should be moved to their own package, so the user wouldn’t need to import the entire inspector package just to render the profiler?

Anyways, no matter the package, you would then need to create some function to either open a Popup window with the profiler (similar to what Inspector.CreatePopup is doing), or instantiate a new canvas and draw the graph there. We discussed a bit about this in this issue [Performance viewer] add a standalone performance viewer UI · Issue #11127 · BabylonJS/Babylon.js (, and there’s a closed PR with a draft implementation I started there.


Awesome, thanks. Exactly what I needed.

1 Like

Sure. We need to put some thought behind how to render it externally, but I don’t see why it can’t be an external package. Want to create an issue for me?

Move performance profiler code to a separate package · Issue #13135 · BabylonJS/Babylon.js (