# Introducing the Performance Profiler!

**URL:** <https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075>\
**Category:** Announcements\
**Tags:** tool, performance-profiler\
**Created:** [January 25, 2022, 2:31pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075 "2022-01-25T14:31:12Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 25, 2022, 2:31pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/1 "2022-01-25T14:31:12Z")

</div>

Hello hello!

Today we are finally announcing the performance profiler alpha to our incredible community! Started by our amazing intern [Sahil](https://forum.babylonjs.com/t/babylon-performance-profiler/21826), the performance profiler got a makeover and it’s ready for its first public launch!

We also have a documentation page to go along showing the fundamentals of the profiler and even how to create your own metrics! [The Performance Profiler | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/toolsAndResources/tools/performanceProfiler)

 ![PerformanceViewerPopout](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/6/467d9425edbaf54efcfe5ec2fe5ba5e2699dc4ac.png)

**Feedback! Feedback!**

And of course, we really want to hear from our users! How do you like the experience? Any suggestions, improvements? Wanna open a PR? Feel free to share your opinion, it’s **extremely valuable** to us! This product is _for you_, so you decide what are next steps we take!

We are very thankful for your support of Babylon, and we hope you enjoy this tool!

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [January 25, 2022, 2:40pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/2 "2022-01-25T14:40:30Z")

</div>

This is really GREAT!

---

<div class="post-metadata">

**Author:** ![avonian](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/avonian/32/14375_2.png) [@avonian](https://forum.babylonjs.com/u/avonian)\
**Post date:** [January 25, 2022, 3:02pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/3 "2022-01-25T15:02:18Z")

</div>

the timing for this could not have come at a better time, just what we needed! 🙂

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [January 25, 2022, 4:46pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/4 "2022-01-25T16:46:01Z")

</div>

Yeah, looks like a very nice tool 👍

For people on Firefox, to get the correct visualization, just resize the popup to get the right view

(edit: lol actually I think we’ll have to use Chrome engine 😅 )

![fireofx](https://i.imgur.com/4K3VbLM.png)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 25, 2022, 5:51pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/5 "2022-01-25T17:51:07Z")

</div>



---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 25, 2022, 5:51pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/6 "2022-01-25T17:51:58Z")

</div>

@carolhmj : make sure to test on Firefox 😉

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 25, 2022, 6:03pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/7 "2022-01-25T18:03:32Z")

</div>

Aye aye captain, will take a look at this in a bit!

---

<div class="post-metadata">

**Author:** ![brunobg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brunobg/32/5523_2.png) [@brunobg](https://forum.babylonjs.com/u/brunobg)\
**Post date:** [January 25, 2022, 8:33pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/8 "2022-01-25T20:33:37Z")

</div>

Does Firefox support these performance measurements now? Last time I tested, around November or December, it was a Chrome-only feature.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 25, 2022, 9:28pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/9 "2022-01-25T21:28:14Z")

</div>

[Fix initial canvas size for Perf Profiler on Firefox by carolhmj · Pull Request #11847 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/11847) fix is UP! 😃

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 25, 2022, 9:31pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/10 "2022-01-25T21:31:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SahilTara](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@SahilTara](https://forum.babylonjs.com/u/SahilTara)\
**Post date:** [January 25, 2022, 9:58pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/11 "2022-01-25T21:58:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 25, 2022, 10:02pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/12 "2022-01-25T22:02:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 25, 2022, 10:04pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/13 "2022-01-25T22:04:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 25, 2022, 10:05pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/14 "2022-01-25T22:05:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [January 26, 2022, 12:30pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/15 "2022-01-26T12:30:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mise](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mise/32/37506_2.png) [@mise](https://forum.babylonjs.com/u/mise)\
**Post date:** [January 28, 2022, 4:52pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/17 "2022-01-28T16:52:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [January 28, 2022, 6:04pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/18 "2022-01-28T18:04:57Z")

</div>

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.

Questions:

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

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 28, 2022, 8:35pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/19 "2022-01-28T20:35:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [January 29, 2022, 6:49pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/20 "2022-01-29T18:49:47Z")

</div>

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

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

* * *

Edit:  
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](https://www.babylonjs-playground.com/#8PGV3G).

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?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 31, 2022, 1:20pm UTC](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075/23 "2022-01-31T13:20:52Z")

</div>

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

[Next page](https://forum.babylonjs.com/t/introducing-the-performance-profiler/27075.md?page=2)
