# The BabylonJS Scene Explorer and Inspector in realtime in 3D with two way event binding
**URL:** https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857
**Category:** Demos and projects
**Created:** [September 15, 2021, 2:28pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857 "2021-09-15T14:28:34Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 2:28pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/1 "2021-09-15T14:28:34Z")
Hi! 🖖
I am into debugging nowadays and had an idea. Can we render the Scene Explorer and the Inspector into a texture and use it in 3D and can we establish a two way event binding?
It seems we can! Please watch this 1 minute long introductory video 😃
Green cursor - my windows desktop cursor
Gray cursor - virtual cursor (when you hover over a 3d panel)
Glows - every element selected on the scene in the 3d panel have it’s bro in the HTML version and it gets highlited
You can see it chaning how I move between the HTML part and the scene just right over a panel.
And you can see my tiny debugger in the right upper corner doing it’s job very well 😊
[![](https://img.youtube.com/vi/m23EKAUCEH0/maxresdefault.jpg "BabylonJS Scene Explorer and Inspector in 3D with "two way event binding"") ](https://www.youtube.com/watch?v=m23EKAUCEH0)
Guys, is this something cool or was I just wasting my time again? I’ve learned new stuff though. Is/was someone trying to render and two way bind HTML into the scene? I usually found out that someone did the stuff I try to do 5 years ago… 😃 😃 😃
Thanks for watching! Ideas are welcome!
R.
EDIT: added links in a post below
---
### Author:  [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [September 15, 2021, 3:08pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/2 "2021-09-15T15:08:31Z")
@roland it looks like black magic to me !!!
I wonder if we could leverage this in XR @RaananW ?
---
### Author:  [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)
#### Post date: [September 15, 2021, 4:36pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/3 "2021-09-15T16:36:45Z")
@roland
Totally unrelated btw.
You use vue right? I noticed this
[GitHub - troisjs/trois: ✨ ThreeJS + VueJS 3 + ViteJS ⚡](https://github.com/troisjs/trois) . I have only played around with vue, but could we port that logic over to babylon? The trois scenes hot update like with react-babylon and r3f and code is way way simpler
Edit:
I did some sleuthing, i was wrong about createApp being the reconciler equivalent, its actually createRenderer , and the hot updates in trois come from defining an hmr key here:
.[trois/Scene.ts at master · troisjs/trois · GitHub](https://github.com/troisjs/trois/blob/master/src/core/Scene.ts)
An example implementation of the createRenderer api that i was confusing for createApp can be seen here [vue-next/index.ts at master · vuejs/vue-next · GitHub](https://github.com/vuejs/vue-next/blob/master/packages/runtime-dom/src/index.ts) , which is vue’s dom implementation.
This is actually even simpler than i thought. It might actually be better than r3f / react-babylon in a portability sense.
edit again:
Ok i didnt make things up originally, there is actually a reconciler using createRenderer.
.[trois-renderer/index.ts at main · troisjs/trois-renderer · GitHub](https://github.com/troisjs/trois-renderer/blob/main/src/renderer/index.ts)
Also thinking… maybe just implement hmr in babylon instead.
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 5:03pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/4 "2021-09-15T17:03:57Z")
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/#/](https://demos.babylonjs.xyz/scene-explorer-3d/#/)
Click Share and enjoy! 🖖
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! 🤣
Repo: [GitHub - RolandCsibrei/babylonjs-3d-scene-explorer-and-inspector](https://github.com/RolandCsibrei/babylonjs-3d-scene-explorer-and-inspector.git)
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.
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 5:11pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/5 "2021-09-15T17:11:18Z")
Hey @jeremy-coleman !
I am using Quasar to build my prototypes and it comes with Vue so that’s why but yeah I am a Vue fanboy! 😃
Yes, Troi seems to be portable Two cool ideas here, Troi itself and to port it 🙂
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 5:12pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/6 "2021-09-15T17:12:51Z")
Only to find all the @types was black magic but I’m still missing one so I did something unforgivable, I put `/src` into `.eslintignore`… Game over! 😃
However it can be compiled.
---
### Author:  [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [September 15, 2021, 5:21pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/7 "2021-09-15T17:21:10Z")
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 5:23pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/8 "2021-09-15T17:23:14Z")
This is me when it ran correctly for the first time
---
### Author:  [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [September 15, 2021, 5:54pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/9 "2021-09-15T17:54:59Z")
> [@roland](#):
>
> The textures in BabylonJS are grabbed from the media source and stored as `RawTextures`
I wonder if you could rely on VideoTexture instead ?
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 5:56pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/10 "2021-09-15T17:56:19Z")
I wonder too because I didn’t get to that page in the Documentation yet 😃 😃 😃
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 5:59pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/11 "2021-09-15T17:59:50Z")
Ok, I’ve checked it. The question here is whether we can connect this to it:
> **[MediaStreamTrack - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack)**
>
> The MediaStreamTrack interface represents a single media track within a stream; typically, these are audio or video tracks, but other track types may exist as well.
---
### Author:  [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [September 15, 2021, 6:00pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/12 "2021-09-15T18:00:40Z")
Yup through a videoElement in the page. basically create a videoElement set its source to the stream and use the element for your texture 🙂
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 15, 2021, 6:03pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/13 "2021-09-15T18:03:04Z")
I knew, you have guys things for everything already! 😃
Thank you! I will try it!
EDIT: This way I could get rid of the missing ImageCapture type definition error! 🖖
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 16, 2021, 12:18am UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/14 "2021-09-16T00:18:00Z")
@sebavan, thanks for the tip with the VideoTexture, it is working! Actually all the frame grabbing code was trashed by this change 😃 But I can’t get rid of this ☹
This is the with the original frame capturing code:
Any idea? Changing the sampling mode doesn’t help.
Thanks!
R.
---
### Author:  [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [September 16, 2021, 12:20am UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/15 "2021-09-16T00:20:01Z")
try changing the wrap mode of the texture to clamp 🙂
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 16, 2021, 12:26am UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/16 "2021-09-16T00:26:22Z")
Thank you! 😺
---
### Author:  [@roland](https://forum.babylonjs.com/u/roland)
#### Post date: [September 17, 2021, 12:52pm UTC](https://forum.babylonjs.com/t/the-babylonjs-scene-explorer-and-inspector-in-realtime-in-3d-with-two-way-event-binding/23857/17 "2021-09-17T12:52:02Z")
I think I will give it a try next month 🖖 !