Inspector v2

[deltakosh]

Pre-release:

• [x] Redesign
• [x] Dual or embedded modes
• [x] Properties curation
• [x] Turn on gizmos on meshes
• [x] Textures
• [x] StandardMaterial
• [x] PBRMaterial
• [x] TransformNodes
• [x] Meshes
• [x] Cameras
• [x] Lights
• [x] texture viewer
• [x] Normal painter
• [x] Mesh picker
• [x] Gizmos

P1:

• [x] glTF validation
• [x] Filename picker for gltf exporter
• [x] Update documentations
• [x] GUI in scene treeview + controls highligther
• [x] Coordinate modes picker for textures
• [x] Blend mode dropdown + touching the alpha switch it (for PBR)
• [x] Add axis viewer
• [x] Rework glTF validation
• [x] Expand all / collapse all at root nodes level
• [x] Upload new texture
• [x] Add levels as independant group to StdMaterial
• [x] Add link from GUI doc to inspector doc
• [x] Mention inspector in optimize doc and instrumentation doc
• [x] Mention inspector in bones and physics doc
• [x] Add a per adt render time

P2:

• [x] Physics helper
• [x] Image processing control tools
• [x] Animations
• [x] Normal vectors viewer
• [x] Ability to rotate env textures (including skyboxes and reflection)
• [x] Scene mutation support
• [x] Better control for number input (something like up/down that we can manipulate with mouse)

P3:

• [x] Copy color values as RGB or hex into clipboard
• [x] Color values as independent component:

[Nodragem]

Some ideas:

• to change a value: click on the property row and drag left or right to decrease/increase value
• as we can change the position, rotation and scale from the properties of the mesh, maybe just display a gizmo on the mesh; that will make moving them simpler :)
• when selecting an object: unfold the parent tree if it is a child, so we see the selected object in the object list
• when selecting an object: automatically turn on the display of the bounding box for the selected object, so that the user can be sure they selected the right object. Maybe display gizmo, as suggested above.
• maybe make a scene graph where you can see everything (lights, cameras, meshes, materials, textures, animations, etc) and their relation as in Blender. For now, having everything in their own tabs make it hard to know which material is attached to which mesh etc... Here an example from Blender (but check out the new Blender 2.8 for more inspiration maybe):
• maybe make a debug camera, hence even if the game has a fixed camera, when you enter the inspector, you can explore your scene
• maybe display the Cameras, Lights in the 3D view, as in Blender

[deltakosh]

You will like the new inspector. The scene view (ala Blender) is already in;) The gizmos will be there as well!

And more.

Let's keep this discussion going when I will be able to share the first alpha

[PatrickRyanMS]

I agree, @Nodragem, that you must have been sending your inspiration into our feature brainstorm because I think you will be very excited in the near future.

[Vinc3r]

Stop teasing us! :-p

[deltakosh]

Work in progress :)

[Vinc3r]

looks nice!

[deltakosh]

It would be far better after the design phase by @PatrickRyanMS

[Nodragem]

I like the look of the interface already :) Can we see to which mesh(es) are the materials/textures attached?

[deltakosh]

We will :)

[deltakosh]

I plan to ship a first release next week (Would like to finish adding the GUI debugger first)

[Nodragem]

Speaking of the GUI. One big annoying thing when using a code-based game engine (i.e. without editor) is to position GUI elements and changing their color. The inspector will probably allow us to move and change the colour of the GUI elements, right? Would there be a way to save these changes somehow?

I guess we would get closer to a GUI editor then ^^ might as well make the inspector able to add/remove containers/controls/meshes then...

A similar idea can be developed for particle systems: it would be useful if we can save the tweaks we make to the particle system.

In fact, even if that may sound extreme, this new inspector may be the opportunity to make a new BabylonJS editor, that would be based on the same code base. You would divide the code base into modules that you would combine together to make the inspector, or the GUI editor, or the particle editor, or the full BabylonJS editor.

[deltakosh]

I do not want to create an editor (editor.babylonjs.com is already here and actively supported by Luaacro and the community) The inspector is designed to help debugging. You could still use it for more if you want of course but there will be a clear line between it and an editor

[Nodragem]

yep sure, I just had this thought that both projects could use the same code base but that was just a random idea. Good luck with the inspector :)

[deltakosh]

You should be able to test it this Monday or Tuesday

[bghgary]

It would be nice if the gizmos axes had some shading and fade out like Unity.

[Nodragem]

From memory the gizmo in Babylonjs do not have the corner planes (see the image posted by @bghgary ) that allows the users to move the objects on the XY, YZ, XZ planes. That would be a great addition.

Same idea for scaling.

Concerning rotation, Unity's gizmo has a yellow circle that allows to rotate on the camera axis, which can be useful some times.

[deltakosh]

The plan here is not to replicate Unity:) but good ideas anyway

[Nodragem]

I think we should always check what others are doing before to do our own thing. I could have cited the new gizmos in Blender 2.8 instead.

[Nodragem]

I added some feedback here: http://www.html5gamedevs.com/topic/41408-feature-request-feedback-on-the-new-inspector/ I did not experience any bugs, but I was mainly missing collecting / displaying stats against time.

[deltakosh]

Good feeback! Thanks a lot

• The light gizmo is definitely on my radar. (added in my todo list in the initial post).
• The curve over time is definitely a good idea..I'll flag it as p3. But not sure I will have time for 4.0. So if you want to help feel free :)
• Display observables is interesting but how? We can have a list per observable but a list of what? Observers have no name. How can we present them? same for performance analysis. We could easily get a perf counter per observer but how to present it again?
• memory profiler: I doubt we could do better than chrome :)
• I need to improve the value control for numbers. Like a upside/down or something we could use with mouse. Need help here as well ;) (added to p2 list)

[Nodragem]

possible bug: My code is working fine without the inspector, and with the inspector 3.3.0, however, with inspector 4.0.0-alpha.9, I get the error:

Uncaught (in promise) TypeError: Cannot read property 'getUniqueId' of null
    at h.e (babylon.js:1)
    at new h (babylon.js:1)
    at new LetterFactory (Letter.ts:114)
    at Game.<anonymous> (test_letter_instancing.ts:115)
    at step (test_letter_instancing.ts:32)
    at Object.next (test_letter_instancing.ts:13)
    at fulfilled (test_letter_instancing.ts:4)

The line Letter.ts:114 being:

this.root = new BABYLON.TransformNode('letter_factory');

[sebavan]

Could you create a repro and open another issue for this as it would be easier to manage ? thx

[ssaket]

@deltakosh for p2 -

Better control for number input (something like up/down that we can manipulate with mouse)

will this work ?

I have added type as number as a result, In chrome, I am changing values using mouse wheel. In Safari and Firefox this can be achieved by mouse click (wheel action is not supported currently).

[deltakosh]

Would love that!! Want to do it?

[ssaket]

yeah definitely 👍

[Vinc3r]

about color inputs, here some ideas listed by more to less convenience:

• have a nice crossplatform color picker? maybe using some library like this one?
• be able to copy color values as RGB or hex into clipboard?
• be able to see color values (using, for example, the + like the gif above)

---

Also, be able to select/copy some text value could be great. Example: if I select a node on the explorer, I'm not able to quickly copy-paste its ID, Class, Unique ID, etc

---

Another point: we have readable properties (for example Disable lighting, which is great. But for those who doesn't know well BJS and its API, it could be difficult to know that Disable lighting = disableLighting (yep this example seems obvious Im' agree :-D). Maybe something like a little popup on mouseOver could be great (like it was in the last versions of inspector v1) ?

[deltakosh]

• The colorPicker is provided by the browser. I have no control over it
• copy color values as RGB or hex into clipboard? Doable (added to the list of tasks)
• color values as independent component: added to the list of tasks
• Copy text values: yeah I need to fix that (working on it)
• Popup with API info: yep, but lot of work :)

[deltakosh]

Ok pushing an update where text values can be copy and where colors can be controlled as independent components :)

[Vinc3r]

nice, GG :)

[Vinc3r]

another point (don't hate me please :-p):

we miss the roughness range input when in PBRMaterial class (it seems we have the PBRSpecularGlossinessMaterial levels properties, but not all from PBRMetallicRoughnessMaterial)

[deltakosh]

Will fix that :)

[deltakosh]

I will add more specific property grids for both PBR specific materials

[ssaket]

meanwhile, I did some sneak-peek on -

P3- Copy color values as RGB or hex into clipboard

I thought, adding document.execcommand('copy') to the onchange can fix this easily, but I was wrong. It seems it'll work only when the event is isTrusted/user triggered and onchange doesn't fall in this category, only click events. hmmm... know I know why other sites have a button next to code with a copy icon.

Being said that, one approach would be to provide a copy icon next to expand, and onclick "copy", similarly paste. But not sure if this is a good approach, Ideally I wanted do this inside onchange.

[deltakosh]

onchange is not good either because you do not want to overwrite user clipboard :)

[deltakosh]

@Vinc3r: new version coming in a few minutes

[ssaket]

Ahh... I see. Thanks DK !

[Vinc3r]

yeah, seems to work like a charm, great job! 👍

[deltakosh]

Copy for colors:

[deltakosh]

Closing and moving remaining ideas to #5638