[Performance viewer] add a standalone performance viewer UI

[RaananW]

The current implementation of the performance viewer is embedded in the inspector and allows viewing a full-sized graph of the data delivered by the performance viewer core. In addition to that we should have a simpler UI that can attach to any HTML element (the canvas would be the perfect candidate) to allow viewing the current performance data when viewing the scene, outside of the inspector context.

[carolhmj]

About the concept of simpler UI, would the usage be something like this?

var perfViewer = scene.getStandalonePerfViewer();
document.body.appendChild(perfViewer)

This perfViewer object would be some kind of HTML Element (probably a canvas, I was thinking that we could use the same amazing CanvasGraphService Sahil implemented to provide us with this standalone canvas, with a few modifications) that the user could place wherever they wanted. Is this the idea?

[RaananW]

This should be a function in the framework itself (something along the lines of scene.addPerfViewer(someHTMLElement, optionalOptions))

I was thinking that we could use the same amazing CanvasGraphService Sahil implemented to provide us with this standalone canvas

If it is possible to separate it from the react context and make it configurable and standalone, of course! It should be a very minimal version of the full perf viewer.

[deltakosh]

You can look at what I did for debugLayer (scene.debugLayer)

[carolhmj]

@deltakosh what is the purpose of having the debugLayer added to the scene in a separate file? Is it to reduce the code size when the user doesn't need the debug anymore? I noticed the performance viewer is already kind of following this idea with a separate performanceViewerSceneExtension file.

[deltakosh]

yes exactly the idea is that we have low to no impact on the size of the bundle if the user is not using the debug layer (or the perf monitor)