
This section contains a list of the current viewer demos.

## Basic usage

[https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/basicExample.html](https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/basicExample.html)

A basic example of loading a .babylon model with the default configuration.

[Live demo](https://viewer.babylonjs.com/basicExample.html)

## DOM configuration

[https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/domExample.html](https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/domExample.html)

An example of how to use the DOM to configure the viewer.

[Live demo](https://viewer.babylonjs.com/domExample.html)

## Events example

[https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/eventsExample.html](https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/eventsExample.html)

An example of how to load the viewer and use its observers with promises, observables, and callbacks.

[Live demo](https://viewer.babylonjs.com/eventsExample.html)

## Animations example

[https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/ufoExample.html](https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/viewer/public/ufoExample.html)

An example of the animation system of the default viewer.

[Live demo](https://viewer.babylonjs.com/ufoExample.html)



## What Is It?

The Babylon.js Inspector is a visual debugging tool created to help pinpoint issues you may have with a scene.

For a video overview of the inspector, check out [Introduction to the inspector - video series](/legacy/inspector/inspectorVideoOverview).

The Inspector offers multiple tools, such as:

- A hierarchical view of your scene
- Multiple property grids to let you dynamically change object properties
- Specific helpers like the skeleton viewer, etc.

Its interface uses two panes:

- The scene explorer pane
- The inspector pane

It can be opened in two ways:

1. Without [ES Modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)

```javascript
scene.debugLayer.show();
```

2. Using ES Modules (Avoid using the first approach if you're already using modules):

```javascript
import { Inspector } from '@babylonjs/inspector';

// ... YOUR SCENE CREATION
Inspector.Show(scene, {});
```

![debug layer overview](/img/features/debuglayer/debuglayer.webp)

### Embedded Mode

The two panes can also be opened in an [embedded mode](/typedoc/interfaces/babylon.iinspectoroptions):

```javascript
scene.debugLayer.show({
  embedMode: true,
});
```

or:

```javascript
Inspector.Show(scene, {
  embedMode: true
});
```

![embed mode](/img/features/debuglayer/embedmode.webp)

To hide the inspector:

```javascript
scene.debugLayer.hide();
```

or:

```javascript
Inspector.Hide(); // You don't need to pass the scene
```

## Scene explorer pane

![scene explorer](/img/features/debuglayer/sceneExplorer.webp)

The scene explorer displays a hierarchical view of your scene. You can filter by name in the filter bar if you want to find a specific entry.

Clicking a line selects it, and the Inspector automatically updates to reflect the properties of the selected item.

Some entities offer shortcuts to contextual actions.

## Scene actions

![scene actions](/img/features/debuglayer/sceneactions.webp)

The scene shortcuts are as follows:

- The first 3 actions turn on a specific gizmo mode ([translation](/typedoc/classes/babylon.transformnode#translate), rotation, scaling). After you click one of them, you can click a node in the Scene Explorer or directly in your scene, and then control it with a gizmo:

![gizmo](/img/features/debuglayer/gizmo.webp)

- The fourth action is a picker. Just pick a mesh in your scene, and it will be selected in your Scene Explorer.
- The last one forces the Scene Explorer to update. For performance reasons, the Scene Explorer does not listen to all changes that can happen in the scene, so you may need to refresh it manually.

## Mesh actions

![mesh actions](/img/features/debuglayer/meshactions.webp)

The mesh shortcuts are as follows:

- The first action will enable the bounding box gizmo:

![bounding box gizmo](/img/features/debuglayer/boundingboxgizmo.webp)

- The second action will show/hide the mesh.

## Light actions

![light actions](/img/features/debuglayer/lightactions.webp)

You can use the light action to turn a light on and off.

## Camera actions

![camera actions](/img/features/debuglayer/cameraactions.webp)

You can use the camera action to switch the active camera when there are multiple cameras in a scene.

## GUI control actions

![gui control actions](/img/features/debuglayer/controlactions.webp)

You can use the GUI control actions to:

- Display outline of a control
- Show / hide a specific control

## Rendering pipeline actions

![Rendering pipeline actions](/img/features/debuglayer/renderpipelineactions.webp)

When your scene does not contain a default rendering pipeline, you can right-click on the rendering pipelines node to get a context menu letting you create a new default rendering pipeline.

## Inspector pane

The Inspector pane contains 4 tabs:

![inspector](/img/features/debuglayer/inspector.webp)

- The property grid, which displays configurable controls for the currently selected entity:

![property grid](/img/features/debuglayer/property.webp)

- The debug pane lets you turn features on and off. It also lets you display a grid and turn viewers (bones or physics) on and off:

![debug pane](/img/features/debuglayer/debugpane.webp)

- The statistics pane gives information about all metrics captured by the engine:

![stats pane](/img/features/debuglayer/statspane.webp)

- The tools pane lets you access utilities such as screen capture, recording, and several tools related to glTF:

![tools](/img/features/debuglayer/tools.webp)

## Popup mode

There are occasions when opening the Inspector in a child window is preferable. The canvas may be too small to use the Inspector effectively, or the Inspector may cover too much of the canvas, making the scene hard to debug. There are a few ways to pop the Inspector into a child window that is still connected to the scene. The first is to click the icon on the right side of the pane header bar adjacent to the close button. 

![popup](/img/features/debuglayer/popup.webp)

This pops out the selected pane - either Scene Explorer or Inspector - into a child window. If the panes have been opened in [embedded mode](/legacy/inspector#embedded-mode), the embedded Inspector opens in a single child window. Additionally, the Inspector can be opened as a popup by default. The individual Scene Explorer and Inspector panes can be opened as popups with the following code:

``` javascript
var debugLayer = await scene.debugLayer.show();

debugLayer.popupSceneExplorer();
debugLayer.popupInspector();
```
<Playground id="#KN5JBQ#3" title="Popup mode for Inspector panes" description="An example of opening inspector panes in popup mode" image="/img/playgroundsAndNMEs/inspectorPopup.webp" />

### Embedded Popup Mode
Additionally, the embedded mode inspector can be opened as a popup by default:

``` javascript
var debugLayer = await scene.debugLayer.show({
    embedMode: true
});

debugLayer.popupEmbed()
```
<Playground id="#KN5JBQ#5" title="Embedded popup mode for Inspector panes" description="An example of opening embedded inspector in popup mode" image="/img/playgroundsAndNMEs/inspectorEmbedPopup.webp" />

## Specific debug tools

Specific debug tools can be found throughout the Inspector:

## Render grid

This tool (available in the Debug pane) will render a grid on the (0,0,0) plane:

![grid](/img/features/debuglayer/grid.webp)

## Bones viewer

This tool (available in the skeleton property grid) will render your skeletons:

![bones](/img/features/debuglayer/BonesView.webp)

## Skeleton Map Shader

This tool (available in the mesh property grid when the mesh has an attached skeleton) will render a unique color on the mesh, for each bone, showing their total contribution:

![bones](/img/features/debuglayer/BonesMap.webp)

## Bone Weight Shader

This tool (available in the mesh property grid when the mesh has an attached skeleton) will render a heat map showing the selected bones' contribution:

![bones](/img/features/debuglayer/BonesWeight.webp)

## Physics viewer

This tool (available in the Debug pane) will render your physics impostors:

![physics](/img/features/debuglayer/physics.webp)

## Normal painter

This tool (available in the property pane when you select a mesh) will paint the normals on your active mesh:

![paint normal](/img/features/debuglayer/paintnormal.webp)

## Vertex normal viewer

This tool (available in the property pane when you select a mesh) will render the vertex normals of a mesh:

![vertex normal](/img/features/debuglayer/vertexnormal.webp)

## Texture painter

This tool (available in the property pane when you select a material that contains textures) will render the texture directly as an emissive one:

![texture painter](/img/features/debuglayer/texturepainter.webp)

## Extensibility

The Inspector can be easily extended to allow manipulation of custom node properties. Simply define your custom properties in the node's `inspectableCustomProperties` array, and they will be available under the CUSTOM heading after selecting the node in the Inspector.

<Playground id="#LQF5QR#2" title="Inspector custom properties for a node" description="An example of inspector custom properties for a node" image="/img/playgroundsAndNMEs/inspectorCustomProperties.webp" />

```javascript
myNode.inspectableCustomProperties = [
  {
    label: "My boolean field",
    propertyName: "myBooleanField",
    type: BABYLON.InspectableType.Checkbox,
  },
  {
    label: "My color field",
    propertyName: "myColor3Field",
    type: BABYLON.InspectableType.Color3,
  },
  {
    label: "My quaternion field",
    propertyName: "myQuaternionField",
    type: BABYLON.InspectableType.Quaternion,
  },
  {
    label: "My numeric range field",
    propertyName: "myRangeField",
    type: BABYLON.InspectableType.Slider,
    min: 0.5,
    max: 5.0,
    step: 0.1,
  },
  {
    label: "My string field",
    propertyName: "myStringField",
    type: BABYLON.InspectableType.String,
  },
  {
    label: "My vector field",
    propertyName: "myVector3Field",
    type: BABYLON.InspectableType.Vector3,
  },
  {
    label: "My tab field",
    type: BABYLON.InspectableType.Tab,
  },
  {
      label: "My options field",
      propertyName: "myOptionsField",
      options: [
          { label: "options1", value: 1 },
          { label: "options2", value: 2 }
      ],
      callback: (option)=>{
      
      },
      type: BABYLON.InspectableType.Options,

  },
  {
      label: "My button field",
      propertyName: "myButtonField",
      callback: ()=>{
      
      },
      type: BABYLON.InspectableType.Button,

  }
];
```

The Inspector can also be extended to allow manipulation of custom material properties.
<Playground id="#LQF5QR#52" title="Inspector custom properties for a material" description="An example of inspector custom properties for a material"/>



## Forcing the type of loader on a model

Babylon's mesh importer uses the file extension of the model you provided to determine which loader to use. Sometimes, it is not possible to provide a file extension, especially if your server does not allow it. If that is the case, you can force a specific loader for a model.

To do that, use the `model.loader` configuration variable:

```html
<babylon extends="minimal" model.url="https://example.com/Rabbit" model.loader=".gltf"></babylon>
```

This will load [https://example.com/Rabbit](https://example.com/Rabbit) using the glTF loader.

## Retrieving the viewer instance

The viewer has a viewer manager that registers each viewer currently on the page. The viewer manager is event-based and triggers a callback every time a new viewer is added. To register the callback, you can use the following:

```javascript
// using basic callback
BabylonViewer.viewerManager.onViewerAdded = function (viewer) {
  console.log(viewer);
};

// user observers

BabylonViewer.viewerManager.onViewerAddedObservable.add(function (viewer) {
  console.log(viewer);
});
```

Another way to get the viewer is to use the promise-based API:

```javascript
// you will need to set an id attribute to the viewer element and use it here:
BabylonViewer.viewerManager.getViewerPromiseById("viewer-id").then(function (viewer) {
  console.log(viewer.getBaseId());
});
```

The Promise-based API will either wait until the viewer is created or return the viewer itself if it is already initialized. It is therefore the safest way to get the viewer instance.

If you know the viewer was already initialized, there are two simple ways of getting it:

```javascript
// using the id
let viewer = BabylonViewer.viewerManager.getViewerById("viewer-id");
// using the viewer HTML element
let element = document.querySelector("babylon");
let viewer2 = BabylonViewer.viewerManager.getViewerByHTMLElement(element);
```

## Initializing a different HTML tag other than `<babylon>`

Babylon Viewer automatically initializes `babylon` HTML tags and renders a viewer on top of them. If you want to use a different HTML tag, you can. To do that, you need to disable the default initialization and then initialize your own tags. Add the following script at the bottom of your page, after including the viewer JS file:

```javascript
// a simple way of disabling auto init
BabylonViewer.disableInit = true;
// Initializing the viewer on specific HTML tags.
BabylonViewer.InitTags("the-other-tag-name");
```

## Finding the Babylon Engine, Scene, and Camera

The viewer instance exposes the Engine, Scene, and Camera objects it uses.
To access them, get the viewer in any of the ways discussed above, then access the public member you need:

```javascript
let viewer = getMeMyViewer();
viewer.sceneManager.scene instanceOf BABYLON.Scene; // true
viewer.engine instanceOf BABYLON.Engine; // true
viewer.sceneManager.camera instanceOf BABYLON.ArcRotateCamera; // true
```

## Event-based development

Besides the scene, engine, and camera, the viewer exposes observables that are triggered when certain events occur. At the moment, 3 observables are available:

```javascript
public onSceneInitObservable: PromiseObservable<Scene>; // Executed when a scene object was initialized
public onEngineInitObservable: PromiseObservable<Engine>; // Executed after the engine was created
public onModelLoadedObservable: PromiseObservable<AbstractMesh[]>; // Executed after a model was loaded.
```

You will notice that these are Promise-based observables. The difference is that you can return a promise instead of a value, and the viewer will wait for it to resolve.

Let's take a look at a not-very-helpful example: we will delay the entire execution after a scene is created by using `setTimeout()` and a Promise object:

```javascript
// taken from here - https://blog.raananweber.com/2015/12/01/writing-a-promise-delayer/
function DelayPromise(delay) {
  //return a function that accepts a single variable
  return function (data) {
    //this function returns a promise.
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        //a promise that is resolved after "delay" milliseconds with the data provided
        console.log("done!");
        resolve(data);
      }, delay);
    });
  };
}

// force a 500 ms delay after the scene was created.
viewer.onSceneInitObservable.add(DelayPromise(500));
```

This will print 'done' and then continue loading the model.

If we simply used `setTimeout()` and returned, it would execute asynchronously, and "done" would be logged 500 ms after the model started loading.

The registered function does not have to return a promise. If you register a simple function, it will still work and execute correctly:

```javascript
viewer.onSceneInitObservable.add(function (scene) {
  scene.clearColor = BABYLON.Color4.Blue();
  // returning the scene object. a common practice, not a must
  return scene;
});
```

## Enabling the Inspector

To enable the Inspector, add scene.debug="true" to your HTML tag:

```html
<babylon extends="minimal" scene.debug="true" model="https://playground.babylonjs.com/scenes/Rabbit.babylon"></babylon>
```

## Loading a model async

In certain cases, you may want to load your model using JavaScript after the viewer is initialized. This is useful if, for example, a user clicks a button to load a model or drags and drops a model to be viewed. In this case, your HTML should contain only the configuration for the scene (engine, scene, camera, and lights), without defining anything related to the model itself:

```html
<babylon id="babylon-viewer" camera.behaviors.auto-rotate="0"></babylon>
```

To do so, the viewer exposes the "loadModel" function. Loading a model requires you to wait for the engine to initialize. To make this work correctly, you need to wait for the onEngineInit observable to notify you:

```javascript
BabylonViewer.viewerManager.getViewerPromiseById("babylon-viewer").then(function (viewer) {
  // this will resolve only after the viewer with this specific ID is initialized

  viewer.onEngineInitObservable.add(function (scene) {
    viewer.loadModel({
      title: "Helmet",
      subtitle: "BabylonJS",
      thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
      url: "https://www.babylonjs.com/assets/DamagedHelmet/glTF/DamagedHelmet.gltf",
    });

    // load another model after 20 seconds. Just to show it is possible
    setTimeout(() => {
      viewer.loadModel({
        title: "Rabbit",
        subtitle: "BabylonJS",
        thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
        url: "https://playground.babylonjs.com/scenes/Rabbit.babylon",
      });
    }, 20000);
  });
});
```

The `loadModel` function returns a `Promise<ViewerModel>` that resolves when the model is fully loaded. This is helpful when you want to tell the user that the model loaded successfully:

```javascript
viewer
  .loadModel({
    title: "Helmet",
    subtitle: "BabylonJS",
    thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
    url: "https://www.babylonjs.com/assets/DamagedHelmet/glTF/DamagedHelmet.gltf",
  })
  .then((model) => {
    console.log("model loaded!");
  })
  .catch((error) => {
    console.log("error loading the model!", error);
  });
```


Babylon.js Viewer Examples

Basic usage

DOM configuration

Events example

Animations example

Further reading

Babylon.js Viewer (V1)

The viewer is the simplest way to display 3D content on a web page.

Configuring the Babylon.js Viewer

How to configure the Babylon.js viewer.

Babylon.js Viewer Templating System

Using and extending the viewer's simple integrated templating system.

Modify the Babylon.js Viewer

Modifying the Babylon.js viewer using HTML.

Babylon.js Viewer - Advanced usage

Advanced uses of the viewer.