Babylon.js icon indicating copy to clipboard operation
Babylon.js copied to clipboard

Inspector v2: Stub out stats pane

Open ryantrem opened this issue 6 months ago • 6 comments

In this PR, I'm stubbing out a new stats pane, which includes:

  1. Factoring out an AccordionPane react component from the PropertiesPane component. The idea is that we will have several panes that will have the same basic accordion UI, and each can support the same type of extensibility as properties.
  2. PropertiesPane/PropertiesService are slightly more complicated that the other panes in that the "context" of the pane can have different types (e.g. a Mesh or a Light). Given this, I kept the predicate stuff specific to Properties. Other panes like Stats can have a single type that is always the same (like Scene) and be a little simpler.
  3. Added a new StatsPane/StatsService that otherwise follow the same model as properties.

One other difference that I am trying with StatsService is to not bother having separate service definitions for the default/built-in content of the status pane. Instead it is defined directly in the StatsService, but new service definitions could be defined to extend the default content of the stats pane. This was based off a suggestion @deltakosh had in the original inspector v2 PR.

image

ryantrem avatar Jun 14 '25 00:06 ryantrem

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). To prevent this PR from going to the changelog marked it with the "skip changelog" label.

bjsplat avatar Jun 14 '25 00:06 bjsplat

Snapshot stored with reference name: refs/pull/16755/merge

Test environment: https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16755/merge/index.html

To test a playground add it to the URL, for example:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16755/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/16755/merge https://sandbox.babylonjs.com/?snapshot=refs/pull/16755/merge https://gui.babylonjs.com/?snapshot=refs/pull/16755/merge https://nme.babylonjs.com/?snapshot=refs/pull/16755/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/16755/merge#BCU1XR#0

bjsplat avatar Jun 14 '25 00:06 bjsplat

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16755/merge/testResults/webgpuplaywright/index.html

bjsplat avatar Jun 14 '25 01:06 bjsplat

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16755/merge/testResults/webgl2playwright/index.html

bjsplat avatar Jun 14 '25 01:06 bjsplat

Visualization tests for WebGPU

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16755/merge/testResults/webgpuplaywright/index.html

bjsplat avatar Jun 15 '25 00:06 bjsplat

WebGL2 visualization test reporter:

https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/16755/merge/testResults/webgl2playwright/index.html

bjsplat avatar Jun 15 '25 00:06 bjsplat