scene.debugLayer : Copy last command to Clipboard

Hello all,

When it comes to debuging a scene, using;

Is very helpfull, for sure.

But something which would be nice would be a button on each param, which would copy the last command to the clipboard. For example :
Let’s say I just tweeked Environment param, in the Levels panel of a Material.
The arborescence in the debugLayer : Material --> Levels --> Environment
Is in fact quite different from the actual attribute path : material.environmentIntensity;

Something great would be to edit the way the UI is built by adding some copy buttons. And when you hit the copy button :

It would be sooooo great, when you are tunning stuffs, (particles settings, colors, levels, etc, etc…)

Who is in ? :smiley:



I love the idea! This makes total sense when developping on the playrgound and less when tweaking a scene in the sandbox. So, make it optional if you want to start a PR :slight_smile:


+1 !

Was also missing this recently! Naming is not always consistent with code, so this would be super beneficial!

1 Like

cc @Deltakosh :slight_smile:

Love it!! who wants to try to do a PR??

1 Like

Can I give it a shot?

edit: I think shift chaining would be beaut as well

1 Like

of course!

1 Like

ty, I’ll work on it : )

Please consider responsiveness, for the narrow-sized UI :slight_smile:

Plus what would be good is zero-ing (or defaulting) the value with a right-click on the control.

Hello guys !

Glad you love the idea ! :slight_smile:
I would very interested in starting my contribution to Babylon.JS with this idea, but maybe it’s a bit too early considering my knowledge of the repo which is quite new.

Ah ! Did you already started ? Yesterday night I gave it a try. I would be interested in knowing from you guys, how far am I to being validated a PR. If you already worked on it no worries, I’ll consider my work as a training :slight_smile:

Here is what I did so far :

  • I forked + cloned
  • I edited some files in order to achieve the new features
  • Running npm run build:dev gives no error
  • Running npm run serve -w @tools/babylon-server Allows me to try and it works great :slight_smile:
  • I pushed back to my branch tricotou-feature on my Babylon.js fork.

Here is a screenshot of the new inspector :

And here is a live screencast of the result :

About my work, here is what I did :
I edited some files such as
dev/sharedUiComponents/src/lines/sliderLineComponent.tsx to add the copy button :

<div className="copy hoverIcon" onClick={() => this.onCopyClick()} title="Copy to clipboard">
    <img src={copyIcon} alt="Copy" />

I have done it for Sliders, Checkboxes, Color3&4, Vector3, List … (5 files edited)
As well I had to edit some CSS in :
In order to include the structure change.

I inspired from the copy button which was already available for color pickers. (And that I modified by adding the command to the hex code retreived)

Now, what I would like to understand :

  • Why is there no comments in the source file I’ve cloned ? :thinking:
  • Should I add some comments and push again ?
  • What are exactly the next steps ? (From going to “it works on my machine” to having my code being released ? :slight_smile: )

See you
++ Tricotou


Oh that’s awesome! I was planning to do it this weekend but it’s already looking so beaut, would be better if you went all the way : )

tysm for this amazing feature! : D

1 Like

Thanks :smiling_face_with_three_hearts:

@Deltakosh did you have a look at the video ? What do you think ? :slight_smile:

Also, maybe I did not understand well the point about comments.
Having a look at the docs about contribution comments it seems that I need to comment indeed. I’m just surprised that the files I’ve worked on (example here) are absolutely free of any comments. Is it because there is some kind of CI/CD which gets rids of the comments at master merge, or something ? Should I comment my stuffs before doing a PR ?


1 Like

Man! This is HUGE!! Let me ping @PatrickRyan just for the UI aspect but man! I love it

Regarding comments: we are enforcing them on the main core library but tools (for now) are in a grace period where we do not yet enforce it. THAT BEING SAID, for new PR we expect comments :wink:

1 Like

Thanks !
Ok for the comments, got it. I’ll comment, for sure :wink:

1 Like

@Tricotou may I be so bold and kindly ask for a feature request to the feature request :crazy_face:

Copy last node to Console

Like you do in DevTools of Chrome (Firefox too?):

That would be cool in the Inspector.

@Joe_Kerr I’m not sure I understand what you mean by “copy last node” :grin: Can you develop the idea or eventually edit a screenshot of the inspector to show the concept ?

Sure thing :slight_smile:

Like so?

Ah yes, I see, nice idea !
I don’t know exactly the rules about global scope variables in BJS, so for now I extended the existing window interface, by adding a debugNode property :

declare global {
    interface Window {debugNode: any;}

And I’m overriding it in the onSelect of the treeItemComponents

Result is cool :heart_eyes: :

What do you think ? :grin:


1 Like

No way :exploding_head: You did and already?

Voting for making today the “Tricotou-Inspector-Magic” day :grin:

1 Like

Yes, it works like a charm :smiling_face_with_three_hearts:

If you want to give it a try easily, I build it (and already used it, by the way :grin: )
You can get the inspector bundle HERE

By the way, about adding the debugNode triggered by click in the Scene Viewer… The commit is 10 lines ! :joy: I have seen much worse commits in my life, to be honest, ahah. The ratio Usefull / Lines of Codes is good, I’m happy :sweat_smile:

Ahah, sure :grin:


1 Like