How To

Display and Use the Inspector


How to Display and use The Inspector

Invocation

You can display the Inspector by calling:

scene.debugLayer.show();

Loading

Provided your project is running on a server the Inspector is automatically loaded from the BabylonJS server when it is called as above.

By default, this url is : https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js

You can update this URL by setting the variable:

BABYLON.DebugLayer.InspectorURL = 'http://myurl/babylon.inspector.bundle.js';

To use the Inspector when your project is stored and run locally with an internet connection then you need to load the Inspector directly

<script src=https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js></script>

To use the Inspector locally with no internet connection you will need to obtain a copy of the file from

https://github.com/BabylonJS/Babylon.js/blob/master/dist/inspector/babylon.inspector.bundle.js

Control

A config object can be given to the show method in order to control the following parameters of the Inspector :

  • overlay: boolean - Should the Inspector opens by default in overlay mode? False by default
  • enablePopup: boolean - Should the Inspector allows the panes to popup? True by default
  • globalRoot: HTMLElement - The HTML element where the Inspector should be created - null by default (will be created alongside the canvas)
  • showExplorer: boolean - Should the Inspector opens the scene explorer pane? True by default
  • showInspector: boolean - Should the Inspector opens the inspector pane? True by default
  • embedMode: boolean - Should the Inspector opens in embedded mode (only one pane)? False by default
  • handleResize: boolean - Should the Inspector resize the Babylon.js engine associated with the scene when the canvas is resized due to user moving the panes? False by default
  • explorerExtensibility: See below

Example:

scene.debugLayer.show({
    overlay:false, 
    globalRoot:document.getElementById('#mydiv')
});

Observable

It is possible to attach an Observer to an Observable called when a property is modified in the Inspector. You can call it like this :

scene.debugLayer.onPropertyChangedObservable.add((result) => {});

The result object contains :

  • object : BABYLON.Node - The object modified. It can be a scene, a mesh, a light or any other element that can be modified in the Inspector
  • property : string - The modified property name.
  • value : any - The new value.
  • initialValue : any - The old value, before the modification.

You can also register an Observer when the selection changes with

scene.debugLayer.onSelectionChangedObservable.add((result) => {});

The result object will be the new selected object.

Extensibility

We know that it would be impossible to provide a tool that will target every single need that a Babylon.js may have. This is why the new inspector supports an extensibility API.

You can use the explorerExtensibility property of the config object to define an array of predicates that will add new options to scene explorer actions.:

BABYLON.Inspector.Show(scene, {
    explorerExtensibility: [
        {
            predicate: entity => entity.getClassName && entity.getClassName().indexOf("Material") !== -1,
            entries: [
                {
                    label: "Say hello",
                    action: (entity) => alert("hello " + entity.name)
                },
                {
                    label: "Do something fun with materials",
                    action: (entity) => alert("hello " + entity.name)
                }]
        },
        {
            predicate: entity => entity.getClassName && entity.getClassName().indexOf("Texture") !== -1,
            entries: [
                {
                    label: "Say hello textures!",
                    action: (entity) => alert("hello " + entity.name)
                }]
        },
        {
            predicate: entity => entity.getClassName && entity.getClassName().indexOf("Mesh") !== -1,
            entries: [
                {
                    label: "Say hello",
                    action: (entity) => alert("hello " + entity.name)
                }]
        }
    ]
});

Each predicate will be evaluated with all entites displayed in the scene explorer. If the predicate returns true, then the entries will be added to the entity's actions:

explorer extensibility

Further Reading

The Inspector Features
How To Customize the Inspector