Needed changes to enable the inspector on the viewer

[RaananW]

Added the ability to toggle the inspector in the viewr alpha test app.

A few notes:

• Many file changes to the repository were required to get this to work. The reason is that vite requires the moduled scss files to be called ".module.scss" and we called them. ".modules.scss". In webpack it is configurable.
• as the viewer renders the canvas in a shadow dom, adding the inspector to the canvas as its parent won't work - the css rules will nto be applied there. Therefore it is needed to add it to an inspector host. it defaults to body if not provided, but the body needs to be styled correctly in order for that to work. The viewer has another div element that is stretched on the screen, which is used as the host.
• The inspector is async-loaded.
• All require keywords were removed from the source. it is fine with webpack, but not with vite nor rollup

These changes actually allow the inspector to be released as a standalone es6 module (i.e. - not bundled). As this can be considered a breaking change I did not include it in this PR. we can discuss it in the future. for now no change was made to break anything.

---

EDIT from @ryantrem:

• After trying for a bit I wasn't able to get this to work with the viewer distribution bundle, so I removed the showInspector function from the viewer element.
• However, I kept the "show inspector" button in the viewer test app, which directly invokes the inspector (so we can both test inspector with the viewer and use it in local development).
• I made some small changes to Inspector to make it work with shadow doms.

We can circle back to the inspector integration later and try to get it included as a feature, particularly if we think it is important to have it work with the viewer distribution bundle. At least now with these changes if both the viewer and the inspector are consumed by an app being build/bundled, inspector will work with the viewer.

[bjsplat]

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.

[sebavan]

good but one tiny neat, would be cool to be able to align our build tech :-)

[ryantrem]

good but one tiny neat, would be cool to be able to align our build tech :-)

Yea I was thinking about this as well. If having Vite and Rollup mixed in is potentially going to cause more future pain, maybe we need to revisit this conversation sooner than later. Main issue is I could not find any way to create an ES bundle with WebPack. I'm not sure if Vite/Rollup can/should replace all our WebPack usage either.

[bjsplat]

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

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

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

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

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/15780/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/15780/merge
https://gui.babylonjs.com/?snapshot=refs/pull/15780/merge
https://nme.babylonjs.com/?snapshot=refs/pull/15780/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/15780/merge#BCU1XR#0

[bjsplat]

WebGL2 visualization test reporter:

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

[bjsplat]

Visualization tests for WebGPU (Experimental)

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