The BabylonJS Scene Explorer and Inspector in realtime in 3D with two way event binding

Maximize your browser. It is even better to go full screen. You can switch to full screen anytime later. When asked choose the screen with your browser:

https://demos.babylonjs.xyz/scene-explorer-3d/#/

Click Share and enjoy! :vulcan_salute:

Being a prototype only the click events are propagated to the HTML page. The screen offsets are hardcoded so they expect the exact setup you can see on the screen (no embeded mode) and should be run on a FULL HD screen. It runs on 4k as well but the texures are set to 1080px height so they will be cropped.

The textures in BabylonJS are grabbed from the media source and stored as RawTextures so cool stuff can be made. This way we can easily dispaly even the Developer tool windows and watch the console.log in realtime. Or you can transfer your Visual Studio code window and debug with your VR headset put on! Theoretically! :rofl:

Repo: GitHub - RolandCsibrei/babylonjs-3d-scene-explorer-and-inspector

IR BABOON!

EDIT:
The Baboon forgot to tell you that he had to put the whole /src folder into .eslintignore because of one missing type and he refused to find a better solution.

EDIT2: I tried to do the same using html2canvas so no permissions are required because it doesnโ€™t capture the thing but it renders and it worked very good but it would need a PWA with aggressive caching because it downloads all the Scene Explorer and Inspector assets at every render.

1 Like