
An overview of the accessibility features in Babylon.js



## The Asset Librarian

Babylon.js provides a large asset library of free models, environments, textures, materials, particles, sounds, etc. These assets are free for you to use under the [Creative Commons 0](https://creativecommons.org/share-your-work/public-domain/cc0/) license.

Introduced in Babylon.js 5.0, the Asset Librarian is an incredibly simple tool that lets you access this full content library directly in the Playground with just a few lines of code.

Using the "Assets" namespace, you can easily add any asset to your scene.

For example, adding the Pirate Fort mesh to your scene is as simple as this:

```javascript
BABYLON.ImportMeshAsync(Assets.meshes.pirateFort.rootUrl + Assets.meshes.pirateFort.filename, scene);
```

<Playground id="#ABDDD6#122" title="Load a Mesh Using the Asset Librarian" description="Simple example of how to use the Asset Librarian to load mesh into the scene." isMain={true} category="Import"/>

## Adding to the Asset Library

The raw files for the assets available through the Asset Librarian can be found in the [Babylon.js Assets GitHub Repository](https://github.com/BabylonJS/Assets).

This library of assets is free, open-source, and available for anyone to use under the [Creative Commons 0](https://creativecommons.org/share-your-work/public-domain/cc0/) license.

If you would like to contribute your own assets to the asset repository, you are ABSOLUTELY encouraged to do so. This is the spirit of Open Source Software.

We will gladly accept assets that:

1. Are family-friendly, safe, and welcoming to everyone.
2. Can be useful to anyone (no custom airplane turbine mounting bracket CAD files please)

Please be aware that the Babylon Development Team reserves the right to accept, decline, or remove ANY asset being contributed to this library for any reason, including: overusing hosting resources, content that is not family-friendly, safe, or welcoming of everyone, content that does not benefit the greater community.

Also please understand that by contributing your assets to the asset repository, you are offering your assets freely under the [Creative Commons 0](https://creativecommons.org/share-your-work/public-domain/cc0/) license. Only assets that are given freely to the public domain will be accepted.




# Asset Libraries

This section includes a range of libraries for textures, models, and more that you can load into the Playground. These resources can help you illustrate issues without having to find a CORS-acceptable server to load your own assets into the Playground. It also includes a range of programmable textures and materials built using a variety of shaders.


## Build Interactive Scenes Without Writing Flow Graph Code

The Flow Graph Editor is a visual authoring tool for Babylon.js flow graphs. It lets you create interactions, logic, and event-driven behavior by connecting blocks in a node graph instead of writing the graph by hand in code.

This makes the editor a practical companion to the core [Flow Graph documentation](/features/featuresDeepDive/flowGraph):

- Use the feature deep-dive pages to understand the runtime concepts and APIs.
- Use the Flow Graph Editor to assemble, test, and debug those graphs visually.

The editor is designed for rapid iteration. You can load a scene, wire logic together, run it immediately, inspect values, pause on breakpoints, and save the graph for later use.

You can try the hosted build here: [Flow Graph Editor](https://flowgraph.babylonjs.com)

![Babylon.js Flow Graph Editor overview](/img/tools/flowGraphEditor/overview.png)

## What The Editor Covers Today

The current editor focuses on the full authoring loop:

- Creating graphs with execution and data blocks
- Managing multiple graphs in one editor session
- Loading a test scene from a Playground snippet or local scene file
- Saving and restoring graphs from files or the Babylon.js snippet server
- Running, pausing, stopping, and resetting graph execution
- Managing multiple execution contexts for the same graph definition
- Visual debugging with execution highlights, flow animation, and breakpoints
- Validating graphs while you edit
- Organizing complex graphs with groups, sticky notes, and search
- Editing block configuration and scene-aware references in a property panel

The feature set is growing quickly, so this section is intentionally structured as a living set of pages rather than a single static article.

## Start Here

- [Getting Started With The Flow Graph Editor](/toolsAndResources/flowGraphEditor/gettingStarted)
- [Example - Your First Runnable Graph](/toolsAndResources/flowGraphEditor/firstGraphExample)
- [Example - Click A Mesh And Log It](/toolsAndResources/flowGraphEditor/meshPickExample)
- [Example - Babylon Bros Platformer](/toolsAndResources/flowGraphEditor/babylonBrosExample)
- [Tutorial - Build Babylon Bros](/toolsAndResources/flowGraphEditor/babylonBrosTutorial)
- [Multiple Graphs In One Editor](/toolsAndResources/flowGraphEditor/multipleGraphs)
- [Execution Contexts](/toolsAndResources/flowGraphEditor/executionContexts)
- [Authoring, Validation, and Debugging](/toolsAndResources/flowGraphEditor/authoringAndDebugging)
- [Editor Operations and Shortcuts](/toolsAndResources/flowGraphEditor/editorOperations)
- [Validation and Property Editing](/toolsAndResources/flowGraphEditor/validationAndProperties)
- [Supported Block Families](/toolsAndResources/flowGraphEditor/supportedBlockFamilies)
- [Block Reference](/toolsAndResources/flowGraphEditor/blockReference)
- [Event Blocks](/toolsAndResources/flowGraphEditor/eventBlocks)
- [Animation Blocks](/toolsAndResources/flowGraphEditor/animationBlocks)
- [Physics Blocks](/toolsAndResources/flowGraphEditor/physicsBlocks)
- [Audio Blocks](/toolsAndResources/flowGraphEditor/audioBlocks)
- [Control Flow Blocks](/toolsAndResources/flowGraphEditor/controlFlowBlocks)
- [Data Access Blocks](/toolsAndResources/flowGraphEditor/dataAccessBlocks)
- [Utility Blocks](/toolsAndResources/flowGraphEditor/utilityBlocks)

## Relationship To The Flow Graph System

The editor does not replace the Flow Graph runtime. It is a visual front end for building and inspecting graphs that still run on Babylon.js Flow Graph primitives.

If you are new to flow graphs, read [Flow Graph Basic Concepts](/features/featuresDeepDive/flowGraph/flowGraphBasicConcepts) first. If you already understand the runtime model and want a faster workflow for building interactive logic, continue with the editor pages in this section.

## A Living Documentation Set

New editor features land regularly. This documentation section is organized so it can grow in place as the tool evolves. Expect additional pages over time for topics such as block catalogs, scene integration workflows, graph reuse patterns, and new debugging capabilities.



<img src="/img/tools/guiEditor/overview.webp" title="Babylon.js GUI Editor"/>

## Creating GUIs With Ease

Introduced in Babylon.js 5.0, the GUI Editor is a visual editor for building complex and beautiful graphical user interfaces. Traditionally, Babylon GUIs had to be built in code, which could be a tedious and confusing process. The GUI Editor lets you see the interface as you're assembling it and makes it easy to manipulate all the parameters of each control.

You can access the GUI Editor here: https://gui.babylonjs.com/. The GUI Editor can also be opened in a pop-up window from the Inspector, allowing you to edit a GUI inside a scene and see your changes propagate back instantly!

This document walks you through the editor and its capabilities and should help you start creating your own GUIs quickly. If you're not familiar with the GUI system in Babylon.js and would like to learn more, you can read about it here: [Babylon GUI Documentation](/features/featuresDeepDive/gui/gui)

<Youtube id="9VXgZ_af-nE"/>

## Getting Familiar With The Layout

Let's start by familiarizing ourselves with the different parts of the editor.

### Header Bar

<img src="/img/tools/guiEditor/commandBar.webp" title="GUI Editor Command Bar"/>

The Header Bar provides several handy items to help you navigate and manage your GUI creations.

#### Hamburger Menu

<img src="/img/tools/guiEditor/hamburgerMenu.webp" title="GUI Editor Hamburger Menu"/>

The hamburger menu provides some helpful scene-management options, including saving and loading your progress locally, saving and loading your progress to the snippet server, and a quick 'help' link to access the Babylon.js GUI documentation.

#### Select (S)

<img src="/img/tools/guiEditor/select.webp" title="GUI Editor Select"/>

The select button allows you to select different GUI controls within your scene.

#### Pan (P)

<img src="/img/tools/guiEditor/pan.webp" title="GUI Editor Move"/>

The move button allows you to pan around the GUI by clicking and dragging. You can also use the middle mouse button, or hold space and drag, to pan around your GUI.

#### Zoom (Z)

<img src="/img/tools/guiEditor/zoom.webp" title="GUI Editor Zoom"/>

The zoom button allows you to click on the canvas and drag to zoom in. You can also hold ALT+click to zoom out.

#### Fit To Window (F)

<img src="/img/tools/guiEditor/fitToWindow.webp" title="GUI Editor Fit To Window"/>

When pressed, the Fit To Window button will snap the zoom and panning back to the starting position, where the entire canvas can be seen. If you have any controls selected, Fit To Window will crop the viewport around those controls.

#### Toggle Guides

<img src="/img/tools/guiEditor/toggleGuides.webp" title="GUI Editor Toggle Guides"/>

The Toggle Guides button will display boundary lines for all of the GUI elements in your scene.

<img src="/img/tools/guiEditor/toggleGuidesVisual.webp" title="GUI Editor Toggle Guides Example"/>

#### Artboard Color

Allows you to change the background color in the region outside of the canvas.

#### Responsiveness and Resolution

You can either specify a resolution for your canvas in pixels or turn on responsive mode, which lets you easily swap between common resolutions such as mobile and desktop. Responsiveness is an editor-only concept; it does not affect the exported GUI.

<img src="/img/tools/guiEditor/resolutionResponsive.webp" title="GUI Editor Responsive Resolution"/>

### Hierarchy Panel

<img src="/img/tools/guiEditor/layersPanel.webp" title="GUI Editor Layers Panel"/>

The Hierarchy Panel is an organized list of all of the GUI controls that you've added to the canvas. You can select controls from this list as well as click and drag to parent and unparent them.

<img src="/img/tools/guiEditor/parenting.webp" title="GUI Editor Parenting"/>

The order of controls listed in the Layers Panel reflects the z-order of the scene, with the elements at the top of the list rendering above elements toward the bottom of the list.

If a control is placed behind another control in the scene, and it has a lower z-order, the only way to select it is from the hierarchy.

The 'eye' icon will show/hide controls on the canvas.

<img src="/img/tools/guiEditor/showHide.webp" title="GUI Editor Show Hide"/>

### Controls Bar

<img src="/img/tools/guiEditor/toolsBar.webp" title="GUI Editor Tools Bar"/>

The Controls Bar allows you to create GUI controls, such as a text box, rectangle, or grid. Each icon in this bar can be clicked to add a specific GUI control to your canvas. You can also drag and drop these icons into either the canvas or the hierarchy tree to add them to the scene.

If you'd like to see a full list of supported GUI controls in the editor, [click here.](#supported-controls)

### Canvas

<img src="/img/tools/guiEditor/canvas.webp" title="GUI Editor Canvas"/>

The Canvas is the main work area of the tool. It contains the artboard where you can add controls, select controls, and click and drag controls to move them around. This panel provides a WYSIWYG (what you see is what you get) view of how GUIs will appear in Babylon.js scenes.

The checkerboard area reflects the content that will actually be visible in your scene when you load the GUI. Note that controls can be moved outside that region, which may be helpful if, for example, your UI has components that animate on and off screen.

### Handy Keyboard Shortcuts

There are several handy keyboard shortcuts that you can utilize in the GUI Editor.

#### General Navigation:

- S = Select Mode
- P = Pan Mode
- Z = Zoom Mode
- F = Fit to Window
- G = Toggle Outlines
- CTRL+A = Select All

#### With a GUI Control Selected:

- CTRL+C = Copy
- CTRL+V = Paste
- CTRL+X = Cut
- Delete/Backspace = Delete

### Control Properties Panel

<img src="/img/tools/guiEditor/propertiesPanel.webp" title="GUI Editor Properties Panel"/>

The Properties Panel will change based on which controls are selected to reflect the properties specific to those controls. This is where you'll find all of the properties and can fully customize each individual element of your overall GUI.

For example, here is how to change the name of a GUI.

<img src="/img/tools/guiEditor/changeName.webp" title="GUI Editor Change Name"/>

For properties which can be expressed in either pixels or percentage values, you can click on the unit button next to the input to toggle between unit types. The existing value will be converted into the equivalent value in the other unit.

<img src="/img/tools/guiEditor/changeUnits.jpg" title="GUI Editor Change Units"/>

Note: While using the GUI Editor to create a GUI and modify its properties, these properties can later be changed in your Babylon.js scene code. This gives you full control over all GUI control properties at creation time as well as at runtime.

### Special Properties for Grid Control

Grids are a powerful tool for building complex UI layouts. They are helpful for setting up the foundation of your design. Just like in code, in the GUI Editor you can define your grid's row and column definitions.
You can add and remove rows and columns, as well as modify their sizes using either pixels or percentages.

<img src="/img/tools/guiEditor/grid.webp" title="GUI Editor Grid Properties"/>

You can then add controls to the grid through parenting in the Layers Panel. Once parented, you can modify a control's grid cell by selecting the control and editing the newly added property at the bottom of the Properties Panel.

<img src="/img/tools/guiEditor/cell.webp" title="GUI Editor Changing Control's Grid Cell"/>

Note: The zOrder of each control is determined by its position in the hierarchy tree, and it can be reordered with normal dragging regardless of which grid cell it belongs to.

### Saving GUIs Out of the Editor

You can save your GUI creations from the Editor in two different ways: locally or on the Babylon.js Snippet Server.

#### Saving Locally

Saving locally will download a .JSON object of your GUI to your local machine. It can later be loaded back into the editor for future use, or hosted wherever you choose and loaded directly into your Babylon scene. [See Loading GUIs Into The Playground](#loading-locally)

You can save locally by selecting the 'Save' button in the hamburger menu:
<img src="/img/tools/guiEditor/saveLocal1.webp" title="GUI Editor Save Local 1"/>

#### Saving To The Snippet Server

Like all Babylon tools, the GUI Editor lets you save your GUI creation directly to the Babylon.js snippet server. This saves the .json object to a Babylon.js server and returns a simple URL hash that you can reference later. You can then load your GUI back into the editor by using this unique hash, or use the hash to load your GUI directly into the Babylon scene. [See Loading GUIs Into The Playground](#load-from-snippet-server). Saving to the snippet server will also update the browser's URL to point to that snippet (e.g., gui.babylonjs.com/#aaaaaa)

You can save to the snippet server by selecting the 'Save To Snippet' button in the hamburger menu:
<img src="/img/tools/guiEditor/saveSnippet1.webp" title="GUI Editor Save Snippet 1"/>

### Loading GUIs Into the Editor

You can load your GUI creations into the Editor in two different ways, locally or from the Babylon.js Snippet Server.

#### Loading locally

Loading locally will prompt you to upload a .JSON object of your GUI into the Editor.

You can load locally by selecting the 'Load' button in the hamburger menu:
<img src="/img/tools/guiEditor/loadLocal1.webp" title="GUI Editor Load Local 1"/>

#### Loading From The Snippet Server

Loading from the snippet server uses the unique hash of a previously saved GUI and loads it into the Editor.

You can load from the snippet server by selecting the 'Load From Snippet Server' button in the hamburger menu:
<img src="/img/tools/guiEditor/loadSnippet1.webp" title="GUI Editor Load Snippet 1"/>

### Using GUIs From The Editor In Your Scene

It is very easy to load your saved GUIs into your Babylon.js scene and modify them. Here are a few handy examples:

#### Load From .JSON Object

You can load a GUI into your Babylon scene from a saved .JSON file hosted somewhere on the web, like this:

```javascript
let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromURLAsync("https://doc.babylonjs.com/examples/ColorPickerGui.json");
```

<Playground id="#SWI883" title="Load a GUI from a .json Object" description="Simple example that shows how to load a GUI into your scene from a .json object."/>

#### Load From Snippet Server

You can also load a GUI into your Babylon scene from the Snippet Server like this:

```javascript
let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#MMWSUI");
```

<Playground id="#4RTUCB#1" title="Load a GUI From The Snippet Server" description="Simple example that shows how to load a GUI into your scene from the snippet server."/>

#### Load in Fullscreen Mode

You can load your saved GUI as a fullscreen GUI that's overlaid on top of your entire scene like this:

```javascript
let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#MMWSUI");
```

<Playground id="#4RTUCB#1" title="Load a GUI Into Fullscreen Mode" description="Simple example that shows how to load a GUI into fullscreen mode."/>

Further Information about fullscreen GUIs can be found here: [Fullscreen GUIs](/features/featuresDeepDive/gui/gui#fullscreen-mode)

#### Load in Texture Mode

You can also load a saved GUI as a texture that can be used like any other texture in your scene. Here's an example of using a loaded GUI as a texture for the material of a mesh:

```javascript
let screenUI = BABYLON.GUI.AdvancedDynamicTexture.CreateForMeshTexture(device.screen, 2048, 2048, true, false);
screenUI.parseFromSnippetAsync("#WFL50L");
```

<Playground id="#H896c7#145" title="Load a GUI Into Texture Mode" description="Simple example that shows how to load a GUI into texture mode and project it onto a mesh."/>

Further information about GUIs as in-scene textures can be found here: [GUIs as a Texture](/features/featuresDeepDive/gui/gui#texture-mode)

#### Changing GUI Control Properties In Your Scene

After loading a saved GUI into your scene, you can easily access the properties of your GUI controls.

You can access an individual control by name like this:

```javascript
let backgroundBox = advancedTexture.getControlByName("BackgroundBox");
backgroundBox.background = "blue";
```

<Playground id="#JSF3QM" title="Load a GUI And Modify GUI Control Properties" description="Simple example that shows how to load a GUI and modify GUI controls."/>

A more sophisticated example can be found here:

<Playground id="#0CRLP8#13" title="Game Menu Demo" description="A game menu built using the GUI editor which demonstrates how tab navigation can be implemented." />

#### Playground Templates

You can also find quick access to the common lines of code needed to load GUIs into your scene, through the [playground templates.](/toolsAndResources/thePlayground/pgTemplates)

### Supported Controls

Here is a list of supported GUI controls available in the GUI Editor:

| Icon                                                             | Control Name     | Further Information                                                                              |
| ---------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------ |
| ![rectangle](/img/tools/guiEditor/rectangleIcon.webp)             | Rectangle        | [Rectangle Documentation](/features/featuresDeepDive/gui/gui#rectangle)              |
| ![ellipse](/img/tools/guiEditor/ellipseIcon.webp)                 | Ellipse          | [Ellipse Documentation](/features/featuresDeepDive/gui/gui#ellipse)                  |
| ![stackpanel](/img/tools/guiEditor/stackPanelIcon.webp)           | Stack Panel      | [Stack Panel Documentation](/features/featuresDeepDive/gui/gui#stackpanel)           |
| ![grid](/img/tools/guiEditor/gridIcon.webp)                       | Grid             | [Grid Documentation](/features/featuresDeepDive/gui/gui#grid)                        |
| ![scrollviewer](/img/tools/guiEditor/scrollViewerIcon.webp)       | Scroll Viewer    | [Scroll Viewer Documentation](/features/featuresDeepDive/gui/gui#scrollviewer)       |
| ![line](/img/tools/guiEditor/lineIcon.webp)                       | Line             | [Line Documentation](/features/featuresDeepDive/gui/gui#line)                        |
| ![textblock](/img/tools/guiEditor/textIcon.webp)                  | Text Block       | [Text Block Documentation](/features/featuresDeepDive/gui/gui#textblock)             |
| ![inputText](/img/tools/guiEditor/inputTextIcon.webp)             | Input Text       | [Input Text Documentation](/features/featuresDeepDive/gui/gui#inputtext)             |
| ![inputPassword](/img/tools/guiEditor/inputPasswordIcon.webp)     | Input Password   | [Input Password Documentation](/features/featuresDeepDive/gui/gui#inputpassword)     |
| ![image](/img/tools/guiEditor/imageIcon.webp)                     | Image            | [Image Documentation](/features/featuresDeepDive/gui/gui#image)                      |
| ![displayGrid](/img/tools/guiEditor/displayGridIcon.webp)         | Display Grid     | [Display Grid Documentation](/features/featuresDeepDive/gui/gui#displaygrid)         |
| ![textButton](/img/tools/guiEditor/textButtonIcon.webp)           | Text Button      | [A Button with a Text Block as a Child](/features/featuresDeepDive/gui/gui#button)  |
| ![checkbox](/img/tools/guiEditor/checkBoxIcon.webp)               | Checkbox         | [Checkbox Documentation](/features/featuresDeepDive/gui/gui#checkbox)                |
| ![radioButton](/img/tools/guiEditor/radioIcon.webp)               | Radio Button     | [Radio Button Documentation](/features/featuresDeepDive/gui/gui#radiobutton)         |
| ![slider](/img/tools/guiEditor/sliderIcon.webp)                   | Slider           | [Slider Documentation](/features/featuresDeepDive/gui/gui#slider)                    |
| ![virtualkeyboard](/img/tools/guiEditor/virtualKeyboardIcon.webp) | Virtual Keyboard | [Virtual Keyboard Documentation](/features/featuresDeepDive/gui/gui#virtualkeyboard) |
| ![colorpicker](/img/tools/guiEditor/colorPickerIcon.webp)         | Color Picker     | [Color Picker](/features/featuresDeepDive/gui/gui#colorpicker)                       |

### Demos

Check out additional demos here:
<Playground id="#5JEP1H" title="Full Color Picker Demo" description="A more advanced example that shows how to load a GUI and modify GUI controls."/>



The Babylon.js Inspector is a diagnostic tool that makes it possible to inspect and manipulate a scene in real time. This fundamentally includes a hierarchical view of the scene and the properties of individual entities within it (such as nodes, meshes, and materials), as well as many additional features detailed later in this documentation.

The Inspector is included in Babylon.js tools such as [Playground](/toolsAndResources/thePlayground) and [Sandbox](/toolsAndResources/sandbox), and can be toggled on or off with buttons in their toolbars.

The Inspector is also available as an API for use in your own projects.

If you are using the Babylon ESM packages (e.g. `@babylonjs/core`), then use the [@babylonjs/inspector](https://www.npmjs.com/package/@babylonjs/inspector) ESM package (version 8.49.0+ is Inspector V2).

If you are using the Babylon UMD packages (e.g. `babylonjs`), then use the [babylonjs-inspector](https://www.npmjs.com/package/babylonjs-inspector) UMD package (version 8.49.0+ is Inspector V2).

<Alert severity="warning">
Inspector extensibility is limited when using the UMD package. This is because the UMD bundle is intended to work directly in the browser, which means it bundles all its dependencies (React, Fluent, etc.) and does not currently re-export them. This makes it hard to create an extension that is a React component, for example.
</Alert>

The following is a basic example showing how to attach the Inspector to a Babylon scene.

<CodeSandbox id="msdvk8" title="Inspector V2 - Intro" height="600px" />

## Extensibility

Inspector V2 is highly extensible. When using the API, you can easily add new features that are unique to your Babylon project. Additionally, the Inspector supports dynamically installed extensions that are scenario-specific. This helps keep the core Inspector small and prevents the UI from becoming overwhelming. You can think of this like Visual Studio Code, where you install only the extensions that add optional features for the scenarios that matter to you. You can learn more in the [Extensibility API](/toolsAndResources/inspectorv2/extensibilityAPI) and [Examples](/toolsAndResources/inspectorv2/examples) sections.

## Backward Compatibility

Inspector V2 aims to be backward compatible with Inspector V1 and to have feature parity with Inspector V1, except in a few cases where APIs or features are mostly unused in Inspector V1. This also means that much of the [Inspector V1 documentation](/legacy/inspector) is still valid and useful, though for screenshots and videos you may need to map older UX to newer UX.

### Migrating from V1 to V2

The V1 APIs (`Inspector.Show`, `scene.debugLayer.show`, etc.) continue to work in V2 through a built-in compatibility layer that automatically converts V1 options to their V2 equivalents. This means existing code should work without changes. Internally, this is done via the `ConvertOptions` function, which can also be called directly if you want to incrementally migrate from V1 to V2 options.

The following V1 options are automatically mapped:

| V1 Option                        | V2 Equivalent                                                               |
| -------------------------------- | --------------------------------------------------------------------------- |
| `overlay`                        | `layoutMode: "overlay"` (when `true`) or `"inline"` (when `false`)          |
| `handleResize`                   | `autoResizeEngine`                                                          |
| `globalRoot`                     | `containerElement`                                                          |
| `initialTab`                     | A service definition that selects the corresponding pane                    |
| `showExplorer` / `showInspector` | A `sidePaneRemapper` that filters out the corresponding pane                |
| `embedMode`                      | A `sidePaneRemapper` that adjusts pane positions                            |
| `gizmoCamera`                    | A service definition that registers the camera with the gizmo utility layer |
| `additionalNodes`                | A service definition that adds sections to Scene Explorer                   |
| `explorerExtensibility`          | A service definition that adds entity commands to Scene Explorer            |
| `contextMenu`                    | A service definition that adds section commands to Scene Explorer           |

For new code, use the V2 API (`ShowInspector`) directly, which returns an `InspectorToken` for controlling Inspector visibility. See the [Extensibility API](/toolsAndResources/inspectorv2/extensibilityAPI) for details.

## Inspector in Playground

As mentioned, the Inspector is already included as a feature of [Playground](/toolsAndResources/thePlayground). However, you can also use the Inspector V2 API directly in the Playground if you want programmatic control of the Inspector, want to experiment with the Inspector API, or want to extend the Inspector's functionality for one specific Playground.

Here is a simple example showing how to use Inspector programmatically in a Playground:

<Playground id="#6RBWKC" title="Inspector V2" description="Example of calling the API for showing Inspector V2"/>



## Overview

Babylon.js MCP servers let MCP-compatible AI clients work with Babylon.js authoring tools. They can create, edit, validate, import, export, and live-sync editor graphs through the [Model Context Protocol](https://modelcontextprotocol.io/).

The servers are distributed in the `@babylonjs/mcp-servers` npm package. Dedicated extensions and plugins for specific environments are being worked on, but today you can use the package directly from any MCP client that can start a local command.

## Included Servers

| Editor | Dispatcher name | Direct binary | Editor URL |
| --- | --- | --- | --- |
| Node Material Editor | `nme` | `babylonjs-nme-mcp-server` | [nme.babylonjs.com](https://nme.babylonjs.com) |
| Node Geometry Editor | `nge` | `babylonjs-nge-mcp-server` | [nge.babylonjs.com](https://nge.babylonjs.com) |
| Node Render Graph Editor | `nrge` | `babylonjs-nrge-mcp-server` | [nrge.babylonjs.com](https://nrge.babylonjs.com) |
| Node Particle Editor | `npe` | `babylonjs-npe-mcp-server` | [npe.babylonjs.com](https://npe.babylonjs.com) |
| GUI Editor | `gui` | `babylonjs-gui-mcp-server` | [gui.babylonjs.com](https://gui.babylonjs.com) |
| Flow Graph Editor | `flow-graph` | `babylonjs-flow-graph-mcp-server` | [flowgraph.babylonjs.com](https://flowgraph.babylonjs.com) |
| Smart Filters Editor | `smart-filters` | `babylonjs-smart-filters-mcp-server` | [sfe.babylonjs.com](https://sfe.babylonjs.com) |

Use the dispatcher command when your client supports command arguments:

```sh
npx -y @babylonjs/mcp-servers nme
```

Use the direct binary form when your client expects the server executable name:

```sh
npx -y -p @babylonjs/mcp-servers babylonjs-nme-mcp-server
```

Replace `nme` or `babylonjs-nme-mcp-server` with the server you want to use.

## VS Code

VS Code uses an `mcp.json` file. For a workspace configuration, create or edit `.vscode/mcp.json` and add the server under the `servers` object:

```json
{
    "servers": {
        "babylonjs-node-material": {
            "type": "stdio",
            "command": "npx",
            "args": ["-y", "@babylonjs/mcp-servers", "nme"]
        }
    }
}
```

To add multiple Babylon.js editor servers, add one entry per server:

```json
{
    "servers": {
        "babylonjs-node-material": {
            "type": "stdio",
            "command": "npx",
            "args": ["-y", "@babylonjs/mcp-servers", "nme"]
        },
        "babylonjs-gui": {
            "type": "stdio",
            "command": "npx",
            "args": ["-y", "@babylonjs/mcp-servers", "gui"]
        },
        "babylonjs-flow-graph": {
            "type": "stdio",
            "command": "npx",
            "args": ["-y", "@babylonjs/mcp-servers", "flow-graph"]
        }
    }
}
```

After saving the file, reload or restart the MCP servers from VS Code's MCP controls if the client does not pick up the change automatically.

## Claude Desktop

Claude Desktop uses a `claude_desktop_config.json` file with an `mcpServers` object:

```json
{
    "mcpServers": {
        "babylonjs-node-material": {
            "command": "npx",
            "args": ["-y", "@babylonjs/mcp-servers", "nme"]
        }
    }
}
```

Restart Claude Desktop after changing the configuration.

## Cursor

Cursor can use an MCP configuration with the same `mcpServers` shape:

```json
{
    "mcpServers": {
        "babylonjs-node-geometry": {
            "command": "npx",
            "args": ["-y", "@babylonjs/mcp-servers", "nge"]
        }
    }
}
```

Restart or refresh MCP servers in Cursor after saving the file.

## Other MCP Clients

Most MCP clients need the same two values: a command and an argument list. Use the dispatcher form when possible:

```json
{
    "command": "npx",
    "args": ["-y", "@babylonjs/mcp-servers", "smart-filters"]
}
```

If the client requires an executable server name, use the direct binary form:

```json
{
    "command": "npx",
    "args": ["-y", "-p", "@babylonjs/mcp-servers", "babylonjs-smart-filters-mcp-server"]
}
```

Microsoft and other agent environments that support local stdio MCP servers can use the same command and arguments. If an environment only supports remote hosted tools, use an MCP-compatible local client until a dedicated integration is available.

## Connect a Server Session to an Editor

The Babylon.js MCP servers can create a local editor session that links the MCP server to the matching Babylon.js editor.

1. Start the MCP server in your AI client.
2. Ask the client to get or start an editor session for the current graph.
3. Copy the session URL returned by the MCP server.
4. Open the matching Babylon.js editor URL.
5. Paste the session URL in the editor's MCP session section.

![The MCP Session section in the Node Material Editor right panel](/img/tools/nme/mcpSessionSection.webp)

The local session is served from `127.0.0.1` or `localhost` by default. It stops when the MCP process exits, when the MCP session server is stopped, or after a period without MCP/editor activity.

### Connect And Push

Use **Connect and push** when you want the editor to connect to the MCP session and immediately send the editor's current graph to the MCP server. This is useful when you already have work open in the editor and want the MCP server to use that graph as its current state. Make sure to notify your agent that you pushed a change so it can react to the pushed graph.

### Push To MCP Server

Use **Push to MCP server** after the editor is already connected. It sends the current editor graph to the connected MCP server without starting a new connection. Make sure to notify your agent that you pushed a change so it can react to the updated graph.

## Troubleshooting

### The MCP Client Cannot Find npx Or node

Many MCP clients are launched as desktop apps and do not inherit the same shell environment as your terminal. This is common when Node.js is installed with `nvm`.

First, find the full paths from a terminal where Node.js works:

```sh
which node
which npx
```

Then use the full path in the MCP configuration:

```json
{
    "servers": {
        "babylonjs-nme": {
            "type": "stdio",
            "command": "/Users/you/.nvm/versions/node/v22.12.0/bin/npx",
            "args": ["-y", "@babylonjs/mcp-servers", "nme"]
        }
    }
}
```

Replace the path with the value returned by `which npx` on your machine.

### Load nvm Before Running npx

If you prefer to keep using `npx` through `nvm`, run the server through a login shell that loads `nvm` first:

```json
{
    "servers": {
        "babylonjs-nme": {
            "type": "stdio",
            "command": "/bin/zsh",
            "args": ["-lc", "source $HOME/.nvm/nvm.sh && npx -y @babylonjs/mcp-servers nme"]
        }
    }
}
```

Use the direct absolute path option if your MCP client has trouble with shell commands.

### Use npm exec Instead of npx

Some environments can resolve `npm` more reliably than `npx`. In that case, use `npm exec` and run the dispatcher command from the package:

```json
{
    "servers": {
        "babylonjs-node-material": {
            "type": "stdio",
            "command": "npm",
            "args": ["exec", "--yes", "--package", "@babylonjs/mcp-servers", "--", "babylonjs-mcp-servers", "nme"]
        }
    }
}
```

Replace the final `nme` argument with the dispatcher name for the editor you want to use.

### Windows npx Path

On Windows, point the command to `npx.cmd` if the client cannot resolve `npx` by name:

```json
{
    "mcpServers": {
        "babylonjs-nme": {
            "command": "C:\\Program Files\\nodejs\\npx.cmd",
            "args": ["-y", "@babylonjs/mcp-servers", "nme"]
        }
    }
}
```

If Node.js is installed somewhere else, run this in PowerShell to find it:

```powershell
Get-Command npx
```

### Pin a Package Version

The examples above use the latest published package. To make a configuration repeatable, pin a version:

```json
{
    "command": "npx",
    "args": ["-y", "@babylonjs/mcp-servers@9.11.0", "nme"]
}
```

### A Session URL Does Not Connect

Make sure the MCP server process is still running, the editor matches the server type, and the session URL was copied exactly. For example, a Node Material Editor session belongs in the Node Material Editor, not the GUI Editor.

If you restarted the MCP server, ask the client for a new session URL and paste the new URL into the editor.



## Creating Shaders The Easy Way

Creating shaders can be a dense and complicated process, often requiring knowledge of GLSL and a strong understanding of how shaders work. Starting with Babylon.js 4.1, the Node Material Editor was introduced. This visual editor lets you connect blocks together to make shaders. It's really that simple.

<img src="/img/how_to/Materials/nme1.webp" title="Babylon.js Node Material Editor"/>

You can jump in and play around with it here: <NME id="" title="Node Material Editor" description="The starting basic template for creating Node Materials."/>

For an introductory look at the Node Material Editor, check out where it all started with this video:

<Youtube id="34uIGJH0ySU"/>

When you're ready to learn more, head on over to the [Node Material Documentation](/features/featuresDeepDive/materials/node_material/nodeMaterial) for more info.

You can also dive into the API that powers it all here: [API documentation.](/typedoc/classes/babylon.nodematerial)

One handy tip in the Node Material Editor preview window is that you can CTRL+hover to see the RGB values.

<img src="/img/how_to/Materials/nmeRGBTrick.webp" title="Babylon.js Node Material Editor"/>


## Overview

The Babylon.js Sandbox is a powerful, web-based 3D asset viewer and debugging tool for developers and designers working with Babylon.js. It allows users to load and inspect 3D models, textures, animations, and materials with an intuitive interface. The Sandbox is an essential utility for testing and fine-tuning assets before integrating them into a Babylon.js project.

## Features

- **Model Preview**: View and interact with 3D models in real-time.
- **Supported File Formats**: `.gltf`, `.glb`, `.obj`, `.stl`, `.babylon`, `.bvh`, `.ply`, `.sog`, `.splat`, `.spz`
- **Animation Playback**: Play, pause, and scrub through animations.
- **Environment Map Support**: Select built-in or load custom environment textures for realistic lighting.
- **Inspector Integration**: Explore detailed object properties like meshes, lights, cameras, and more.

## Accessing the Sandbox
1. Open a web browser.
2. Visit the Sandbox at [sandbox.babylonjs.com](https://sandbox.babylonjs.com).

## Installing as a Desktop App
The Sandbox can be installed as a Progressive Web App (PWA) for a native desktop experience. Once installed, the Sandbox also registers itself as a file handler for supported file formats, allowing you to open 3D assets directly from your file system. The PWA also supports offline mode, so you can view and inspect your 3D assets without an internet connection.

### Installation
1. Visit [sandbox.babylonjs.com](https://sandbox.babylonjs.com) in a supported browser (e.g., Chrome, Edge).
2. Click the install icon in the browser's address bar or use the browser menu to install the app.
3. The Sandbox will be available as a standalone application on your desktop.

### File Handler
After installation, the Sandbox registers as a handler for supported file formats (`.gltf`, `.glb`, `.obj`, `.stl`, `.babylon`, etc.). This enables:
- **Double-click to open**: Double-click a supported 3D file to open it directly in the Sandbox.
- **Open with**: Right-click a file and select the Sandbox from the "Open with" menu.

This integration provides a seamless workflow for quickly previewing 3D assets without needing to manually drag and drop files into a browser window.

## Loading Assets
Load assets into the Sandbox using one of the following methods:
- **Drag and Drop**: Drag supported files directly onto the Sandbox interface.
- **File Selection**: Use the open button on the toolbar to browse the file system and load assets.

Note that all required assets, including files referenced from the main asset file, must be dropped or
selected so that the browser knows about them. For example, if the asset is a glTF, the `.bin` file and
all image files must be dropped or selected for the asset to load properly.

## User Interface

### Toolbar
The toolbar at the bottom provides quick access to common tasks:
- **Animation Controls**: Play, pause, and scrub animations when animations are available.
- **Display inspector**: Opens the Inspector for detailed analysis.
- **Select environment**: Change environment lighting.
- **Open your scene**: Opens files from the local file system.

### Special Keys
- `R` - Reloads the current asset
- `Space` - Toggles the toolbar

## Advanced

### Custom Environment
Drag and drop an HDR environment map to test lighting and reflections on the loaded asset.

### URL Parameters
The sandbox URL accepts a query string to load a specific asset or configure settings. This is particularly useful when sharing an asset with a link so that the asset is presented with a specific configuration. Below are the available parameters.

_Parameter names and values are case-insensitive if possible._

- `asset` - The asset URL to load automatically.
- `autoRotate` - Set to `true` to turn on auto rotation of the active camera. Auto rotation is off by default.
- `camera` - The active camera index to use from the loaded scene.
- `cameraPosition` - The comma-separated `x,y,z` position of the active camera.
- `clearColor` - The clear color for the loaded scene in hex form (e.g., `FFFFFF` for pure white).
- `environment` - The environment URL to load for glTF assets. This parameter is ignored for other asset formats.
- `kiosk` - Set to `true` to hide the toolbar. The toolbar is visible by default.
- `skybox` - Set to `false` to not create a skybox for glTF assets. Skyboxes are created by default for glTF assets. This parameter is ignored for other asset formats.
- `toneMapping` - The tone mapping (`Standard`, `ACES`, `KHR_PBR_Neutral`) to use for the loaded scene.

#### Examples
- Load a specific URL  
  https://sandbox.babylonjs.com/?asset=https://assets.babylonjs.com/meshes/boombox.glb
- Hide the toolbar and auto rotate the camera  
  https://sandbox.babylonjs.com/?asset=https://assets.babylonjs.com/meshes/boombox.glb&kiosk=true&autorotate=true
- Use a specific environment  
  https://sandbox.babylonjs.com/?asset=https://assets.babylonjs.com/meshes/boombox.glb&environment=https://assets.babylonjs.com/environments/studio.env
- Use the Khronos PBR Neutral tone mapping and set the camera to a specific position  
  https://sandbox.babylonjs.com/?asset=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/DragonDispersion/glTF/DragonDispersion.gltf&toneMapping=khr_pbr_neutral&cameraPosition=-0.13,1.64,3.4



## What Is Smart Filter Editor?

The Smart Filter Editor (SFE) is a visual tool, much like the Node Material Editor, designed to make it easy to rapidly build and preview Smart Filters.

It is available at https://sfe.babylonjs.com, and you can run it locally if you clone the [BabylonJS/Babylon.js](https://github.com/BabylonJS/Babylon.js) repo, then:

- Run `npm install`
- Choose one of these approaches to build the Smart Filter Editor:
  - Select `Smart Filter Editor development (Edge)` or `Smart Filter Editor development (Chrome)` in Visual Studio Code's `Run and Debug` menu then hit F5
  - Run `npm run watch:assets:smart-filters` in a terminal, then `npm run watch:source:smart-filters` in another terminal, and finally `npm run serve -w @tools/smart-filters-editor` in a third terminal

It includes the blocks from the @babylonjs/smart-filters-blocks package (also in the [BabylonJS/Babylon.js](https://github.com/BabylonJS/Babylon.js)) repo, and can also use custom blocks you upload as JSON or GLSL files. These custom blocks are persisted in local storage, so you can load your own blocks once, then make use of them each time you return to SFE.

You can save the Smart Filters you create with SFE as local JSON files or as custom URLs you can share with others.

<Alert severity="Info">
Note that if you share a Smart Filter that uses custom assets or blocks, the person you are sharing it with will need to load those custom assets and blocks before loading your Smart Filter.
</Alert>

## Navigating SFE

![LAYOUT](/img/how_to/smart-filters/sfe-layout.webp)

1. The Block Library is on the left
   - Click "Add..." in "Custom Blocks" to add a custom block to the library (see _Custom Blocks_ below for details)
   - Drag a block you'd like to use onto the canvas in the middle to create an instance of it
2. The canvas is in the middle of the tool, and shows your current Smart Filter visually
   - Drag from one connection point to another to form connections
   - You can zoom in/out with the mouse scroll wheel
   - Click on the background of the canvas to see Smart Filter level properties and actions in the right pane
3. The right pane contains properties and actions relevant to the selected block (or the whole Smart Filter if nothing is selected), as well as a real-time preview of the Smart Filter output
   - When no block is selected, you can choose to Load a Smart Filter from a local JSON file, Save to a local JSON file, or save to a unique URL
     - If you save to a unique URL, the URL in your address bar will update to that new unique URL which you can use in the future to load this Smart Filter from any browser
4. The console at the bottom shows timestamped status messages, including helpful details if an error occurs (such as a required connection isn't made)

## Custom Blocks

By default, SFE populates the block library with the blocks found in the @babylonjs/smart-filters-blocks package. You can add your own custom blocks to SFE without building it yourself by clicking the "Add..." button in the "Custom Blocks" section.

Custom blocks are saved in local storage, so you don't have to add them each time you visit SFE, but you will need to add them again if you need to open a Smart Filter that uses them in another browser or another computer.

There are 3 types of custom blocks that SFE supports adding:

1. Annotated GLSL block definitions
1. JSON block definitions
1. JSON aggregate block definitions (saved Smart Filters themselves)

### Annotated GLSL block definitions

These are fragment shaders defined in GLSL files with certain annotations in them to be loaded as Smart Filter blocks.

For example:

```annotated-GLSL
// { "smartFilterBlockType": "AnnotatedGlslTintBlock" }

uniform sampler2D input;
// { "default": { "r": 1, "g": 0, "b": 0 } }
uniform vec3 tint;
// { "default": 0.25 }
uniform float amount;

vec4 mainImage(vec2 vUV) { // main
    vec4 color = texture2D(input, vUV);
    vec3 tinted = mix(color.rgb, tint, amount);
    return vec4(tinted, color.a);
}
```

See [Creating New Blocks](/features/featuresDeepDive/smartFilters/creatingNewBlocks) for details of the annotation format.

### JSON block definitions

Block definitions can be serialized `SerializedShaderBlockDefinition` objects, such as this example:

```JSON
{
    "format": "shaderBlockDefinition",
    "formatVersion": 1,
    "blockType": "JSONTintBlock",
    "namespace": "Babylon.Demo.Effects",
    "shaderProgram": {
        "fragment": {
            "uniform": "
               uniform sampler2D _input_;
               uniform vec3 _tint_;
               uniform float _amount_;",
            "mainFunctionName": "_mainImage_",
            "functions": [
                {
                    "name": "_mainImage_",
                    "code": "
                        vec4 _mainImage_(vec2 vUV) {
                            vec4 color = texture2D(_input_, vUV);
                            vec3 tinted = mix(color.rgb, _tint_, _amount_);
                            return vec4(tinted, color.a);
                        }"
                }
            ]
        }
    },
    "inputConnectionPoints": [
        {
            "name": "input",
            "type": 2
        },
        {
            "name": "tint",
            "type": 3,
            "defaultValue": {
                "r": 1,
                "g": 0,
                "b": 0
            }
        },
        {
            "name": "amount",
            "type": 1,
            "defaultValue": 0.25
        }
    ],
    "disableOptimization": false
}
```

### JSON aggregate block definitions

Entire Smart Filters themselves can be imported into other Smart Filters as custom aggregate blocks! Try saving a Smart Filter to a local JSON file, then add it as a custom block to SFE.

Notes:

1. The input blocks in the imported Smart Filter will become input connection points on the custom aggregate block
1. The name and namespace of the Smart Filter (see the top right of SFE when no block is selected) becomes the block name and namespace of the custom aggregate block

## Special Input Blocks

SFE contains some special input blocks for testing your Smart Filters:

1. WebCamBlock
   - This is really a texture InputBlock which SFE automatically connects to your webcam as an easy way to preview live video in your Smart Filter
   - Note that when integrating a Smart Filter that uses a WebCamBlock into an application, that application will need to supply a texture for that InputBlock, which could come from a webcam or any other source
1. TimeBlock
   - This is really a float InputBlock which SFE automatically increments as a simple animation
   - Like with the WebCamBlock, when integrated into an application, this will behave as a regular InputBlock (this one of type float) whose value could be animated by the hosting application

## Assets

SFE contains some built-in assets for testing your Smart Filters, which you will see in the properties panel on the right when a texture InputBlock is selected.

You can use those built-in assets, or:

1. Upload your own image asset, which will be base64 encoded and saved in the Smart Filter for SFE to use later
1. Enter a URL to an image or video asset you'd like to use



## The Playground

The place to try out coding with Babylon.js. [Playground](https://playground.babylonjs.com/)

Experimenting and changing any code in the playground and clicking on the **Run** button will not affect any original code in the playground you are currently using.
Original code can be restored by refreshing the browser.

You can write the code in JavaScript or TypeScript. The Playground compiles the code to JavaScript in the background before rendering.

### Scene creation functions

Usually you'll want to place your scene creation code in the already defined `createScene` function. But sometimes, you might want to substitute it for the `delayCreateScene` function, which allows you to return a scene without a camera (because for instance you plan to create the camera after an asynchronous mesh load, like: <Playground id="TVHK90#113" title="delayCreateScene example" description="An example of a Playground scene defined using the delayCreateScene function" image="/img/playgroundsAndNMEs/delayCreateSceneExample.webp"/>).

You can also override the engine creation by defining the `createEngine` function. This can be useful if you want to test a scene without antialiasing, for example: <Playground id="#NCWBUU#1" title="createEngine example" description="How to use createEngine on the playground to customize engine creation" image="/img/playgroundsAndNMEs/createEnginePG.webp"/>

## Overview

![Playground Overview](/img/how_to/Introduction/playground.webp)

The Playground consists of four areas:

- A menu bar at the top.
- A links bar at the bottom.
- A coding editor on the left
- A rendering area on the right.

The space for the coding editor and rendering area can be adjusted by dragging the vertical bar between them.

## The Menu

![Playground Menu](/img/how_to/Introduction/pgmenu.webp)

In Typescript mode the menu has an orange color theme:

![Playground Typescript Menu](/img/how_to/Introduction/pgmenu_ts.webp)

### Large Screen

- **Title and Version**: As stated.
- **Language**: TypeScript/JavaScript switch.
- **Run**: Commands the playground to try to render your scene.
- **Save**: Causes your scene to be permanently stored in the playground's database and it will issue a unique URL for each save. On save you will be asked to complete the metadata so that it can be searched for. Once saved it is a good idea to bookmark the page so you can return to it later. You could then share the URL with others, for example, if it is not working as you expect you can ask a question in the forum along with the link to your playground.
- **Download**: Allows you to download a zip file named _sample.zip_. Once downloaded and unzipped, you will see a file named `index.html`
  which contains everything necessary to run the code in your browser, including links to external _Babylon.js_ and other files.
- **New**: Places a basic `createScene()` function into the editor along with code to initialize the scene variable and provide a camera.
- **Clear**: Empties all the code out of the playground editor. You could then paste in any createScene function you are working on locally.
- **Settings**: The Settings button has a submenu with extra options
  - _Theme_: Choose the theme for the playground
  - _Font size_: Set the font size in the editor.
  - _Safe Mode_: When the checkbox is ticked the playground issues a "leaving the page?" confirmation warning when you try to unload/reload a freshly-edited, un-saved scene.
  - _Editor_: The checkbox hides or un-hides the editor portion of the playground.
  - _Full Screen_: Makes the render area full screen.
  - _Editor Full Screen_: Makes the editor area full screen.
  - _Format Code_: Pretty prints the code.
  - _Minimap_: Display the minimap of the code editor.
  - _Metadata_: This is where you describe your playground, allowing yourself and others to search the playground database for examples of use.
- **Version**: Allows and shows your choice of the Babylon.js framework, either the current stable one or the latest preview version.
- **Examples**: A drop-down menu that gives examples of playgrounds with a search filter.

### Small Screens

![Playground Typescript Menu](/img/how_to/Introduction/smallScreensPG.webp)

- **Menu**: Contains Run, New, Clear, Save and Zip as submenus.
- **Code/Scene**: Bottom Left Corner - switch between Code and Scene views.

## Playground URL formats and templates

After editing, any saves of the playground are numbered incrementally from one. For example:

- https://playground.babylonjs.com/#6F0LKI#1
- https://playground.babylonjs.com/#6F0LKI#2
- etc...

Some useful HTML templates are also available:

| Template                                                           | Description                                                                                          |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| [full.html](https://playground.babylonjs.com/full.html#6F0LKI#2)   | Shows the render area in full screen                                                                 |
| [frame.html](https://playground.babylonjs.com/frame.html#6F0LKI#2) | Shows the render area in full screen, but with a bottom toolbar showing FPS, reload and edit buttons |
| [debug.html](https://playground.babylonjs.com/debug.html#6F0LKI#2) | Uses a debug version of Babylon.js                                                                   |

## Forum sharing

Of course, the Playground is extremely useful for getting help from the community. In the forum, simply paste the link to your playground.

You can also embed your playground directly in your message using an iframe. But use this sparingly, because it will slow down the loading of your topic.

```html
<iframe src="https://playground.babylonjs.com/frame.html#6F0LKI#2" width="400px" height="250px"></iframe>
```

![playground forum sharing ways](/img/features/pgsupport/pg-forum-sharing-ways.webp)

## Compilation Errors

![compilation error popup](/img/features/pgsupport/pg-compilation-error.webp)

Any errors in your playground are flagged with a red pop-up box containing limited information. After making an adjustment to your code, you need not close the compilation error pop-up. It should close automatically at the next Run, if all errors have been corrected.

## Focus

Whenever a scene in the Playground requires the use of keys to move an object, such as a mesh or camera, the rendering area needs to have focus. After running the Playground, ensure that the render area has focus by clicking inside it before using the keys.



# Utilities

These are JavaScript functions that can be added to your Babylon.js project if they are useful. Each is given a brief explanation and a Playground example of its use.

## Overview

The [Viewer Configurator](https://viewerconfig.babylonjs.com) is a tool that simplifies configuring the [Babylon Viewer](/features/featuresDeepDive/babylonViewer). Rather than relying on documentation and setting the HTML attributes of the `<babylon-viewer>` directly in your code editor, the Viewer Configurator gives you an interactive visual interface for configuring every aspect of the Viewer. The output is a block of [HTML](#output-format) that you can copy and paste into your web app, or [JSON](#output-format) that you can use as the `ViewerOptions`.

## Accessing the Viewer Configurator

1. Open a web browser.
2. Visit the Viewer Configurator at [viewerconfig.babylonjs.com](https://viewerconfig.babylonjs.com).

## Loading Assets

Load a model into the Viewer Configurator using one of the following methods:

1. **URL**: Enter the URL for a supported model type in the "Model" text input and click the confirm button to the right of the text input.
2. **File Selection**: Use the open file button to the right of the "Model" text input and browse the file system.
3. **Drag and Drop**: Drag supported files directly onto the Viewer Configurator interface.

<Alert severity="info">
Note that when using a local file, the output HTML simply includes the name of the file. You will need to set the `source` attribute to a valid model URL when using the HTML snippet in your web app.
</Alert>

<Alert severity="info">
Note that all required assets, including files referenced from the main asset file, must be dropped or selected so that the browser knows about them. For example, if the asset is a glTF, the .gltf file, the .bin file, and all image files must be dropped or selected for the asset to load properly.
</Alert>

## Configuration

Ideally, the Viewer Configurator is self-explanatory, but there are some complexities that are covered in more detail below.

### Revert and Reset

In various places in the Viewer Configurator, you will see Revert and Reset buttons.

Revert means syncing the live Viewer state with what you see in the HTML output (e.g. the current Viewer configuration). For example, if an initial camera pose has been configured but you then change the camera pose in the Viewer, reverting it will set the camera pose back to the configured pose shown in the HTML output.

Reset means removing the configuration entirely and returning to the default state. For example, if an initial camera pose has been configured, resetting the camera pose will remove that configuration *and* revert the camera pose to its default.

### Snapshotting Viewer State

Generally, all Viewer configuration happens in the side pane of the Configurator. Usually, this is done by manipulating UI elements such as toggles and sliders directly in the side pane. However, some state is established directly in the Viewer. For example, to set the initial camera pose, you can position the camera as you like in the Viewer and then click the "Use Current Pose" button. This "snapshots" the current camera pose and adds it to the HTML snippet.

Similar behavior exists for other Viewer features, such as animation and material variants.

### Hot Spots

Creating and configuring [hot spots](/features/featuresDeepDive/babylonViewer/hotspots) is a multi-step process.

1. Required: Click the `+` button to add a new hot spot.
1. Optional: Update the hot spot name (make sure it is unique relative to other hot spots).
1. Required: Click the target button to the right of the hot spot name text input. You are now in picking mode.
1. Required: Click a point on the surface of the model. This establishes the position of the hot spot.
1. Optional: Rotate the camera around the hot spot to a desired camera pose and then click the camera button to the right of the hot spot name text input. This establishes a custom camera pose relative to the hot spot position.

When hot spots are added, they will immediately show up in the Viewer toolbar. Hot spots can be re-ordered by clicking and dragging the handle to the left of the hot spot name text input.

## Output Format

By default, the Viewer Configurator outputs HTML that can be copied and pasted into a web page. The output format can also be changed to JSON. In this case, the JSON can be parsed and used directly as `ViewerOptions` in any of the Viewer layers:

```ts
const configuration: string = "the copied and pasted output of the Viewer Configurator goes here";
const options: ViewerOptions = JSON.parse(configuration);
```

### `ConfigureCustomViewerElement`

The `ConfigureCustomViewerElement` function creates a configured `HTML3DElement` (`<babylon-viewer>`). For example, if you know you want the same skybox for multiple instances of the Babylon Viewer, this could be configured in the Configurator and the parsed `ViewerOptions` (as described above) could be used like this:

```ts
ConfigureCustomViewerElement("my-babylon-viewer", options);
```

```html

<my-babylon-viewer source="model1.glb"></my-babylon-viewer>
<my-babylon-viewer source="model2.glb"></my-babylon-viewer>
<my-babylon-viewer source="model3.glb"></my-babylon-viewer>
```

### `HTML3DElement` Constructor

If the Viewer element is being constructed in code, the same options can be passed to the constructor:

```ts
const viewerElement = new HTML3DElement(options);
document.body.appendChild(viewerElement);
```

### `CreateViewerForCanvas`

If a `Viewer` is being created from a `Canvas` without the HTML layer, the options can be passed to the factory function:

```ts
const viewer = await CreateViewerForCanvas(canvas, options);
```

### `Viewer` Constructor

If a `Viewer` is being instantiated directly, the options can be passed to the constructor:

```ts
const viewer = new Viewer(engine, options);
```

## Saving & Loading

After the Viewer has been configured, you can also save the current state of the Viewer Configurator and restore it later. This works the same way as in other Babylon tools: clicking the save button will save a "snippet" and encode the snippet ID into the URL. If you reload this URL later, it will restore the currently configured state.

<Alert severity="info">
Note that if you have loaded a local model, that model is not saved with the snippet. You will have to reload the same local model after reloading the URL.
</Alert>

## Testing

What you see in the Viewer Configurator should be exactly what you see when you use the HTML snippet in your own web app. An easy way to test this further is to copy the HTML output from the Viewer Configurator and paste it into this CodePen:

<CodePen pen="ByaZQEp" tab="html,result" title="Viewer Configurator Test" />


# Tools and Resources

This section contains all sorts of helpful information for developing with Babylon.js. From tools that make development easier to free asset libraries you can use in your scenes, it is designed to help you create beautiful experiences as quickly and efficiently as possible.



## Debugging and Profiling with PIX

[PIX](https://devblogs.microsoft.com/pix/) is a performance tuning and debugging tool from Microsoft for DirectX-based applications on Windows. It allows you to capture and analyze GPU workloads, inspect draw calls, profile frame timing, and debug shaders. When used with Babylon.js running on a WebGPU-enabled browser such as Chrome, PIX provides deep visibility into the rendering pipeline, helping you identify performance bottlenecks, verify that GPU resources are being used efficiently, and diagnose visual artifacts at the API level.

![Babylon.js PIX 0](/img/pix/pix-ui-0.webp)

![Babylon.js PIX 1](/img/pix/pix-ui-1.webp)

## Prerequisites

<Alert severity="info" title="Version Note" description="These instructions were tested with PIX 2601.15 and Chrome 145. Steps and appearance may vary slightly with different versions of PIX or Chrome."/>

Install PIX 2601.15:  
https://devblogs.microsoft.com/pix/download/

Download the WinPixEventRuntime NuGet package, unzip `winpixeventruntime.*.nupkg`, and copy the `bin\x64\*.dll` files into your `<Chrome Installation Directory>` (usually `C:\Program Files\Google\Chrome\Application\`):  
https://www.nuget.org/packages/WinPixEventRuntime

<Alert severity="warning" title="Modifying Chrome Installation" description="This step requires administrator permissions. The DLLs must be recopied after each Chrome update, as updates replace the installation directory contents. Remove them when PIX is no longer needed."/>

## Setting Up the Environment

Enable developer settings in the NVIDIA Control Panel:

![NVIDIA Control Panel](/img/pix/pix-nvcp-0.webp)

Allow access to GPU counters:

![NVIDIA Control Panel](/img/pix/pix-nvcp-1.webp)

Enable Developer Mode in Windows Settings:

![Windows Settings](/img/pix/pix-win-settings.webp)

## Launching the Process

Launch PIX with **administrator privileges** (right-click and select "Run as administrator"). This is required for PIX to access GPU hardware counters and inject into the Chrome GPU process.

![PIX As Administrator](/img/pix/pix-as-admin.webp)

In PIX, select **Launch Process** from the home screen and configure it with the following settings:

![PIX Launch Process](/img/pix/pix-launch-process.webp)

**Executable Path:** `<Chrome Installation Directory>/chrome.exe`

**Working Directory:** `<Chrome Installation Directory>`

**Command Line Args:** `--incognito --disable-gpu-sandbox --disable-gpu-watchdog --disable-direct-composition --enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming https://playground.babylonjs.com/?inspectorv2=true&engine=webgpu#DR9MT2#35`

<Alert severity="warning" title="Security and Stability Warning" description="This Chrome command line disables the GPU sandbox and GPU watchdog, which weakens browser security and can impact stability. Use these flags only with trusted content."/>

<Alert severity="info" title="WebGPU Engine" description="The URL includes the query parameter engine=webgpu, which forces the Babylon.js Playground to use the WebGPU engine instead of the default WebGL. This is required for PIX to capture DirectX-level GPU activity."/>

<Alert severity="info" title="WebGL Engine" description="If you need to debug the WebGL engine instead, enable the Force D3D11On12 option in PIX's launch settings to route DirectX 11 calls through DirectX 12, making them visible to PIX."/>

| Chrome option used to launch | Description |
| --- | --- |
| `--incognito` | Launches Chrome in incognito mode so that extensions and cached state do not interfere with the capture. |
| `--disable-gpu-sandbox` | Disables the GPU process sandbox, allowing PIX to inject into and communicate with the GPU process. |
| `--disable-gpu-watchdog` | Prevents Chrome from killing the GPU process when a frame takes too long, which is common while PIX is capturing or single-stepping through draw calls. |
| `--disable-direct-composition` | Disables Windows DirectComposition, forcing Chrome to use a swap chain that PIX can intercept for frame capture. |
| `--enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming` | Enables Dawn (Chrome's WebGPU implementation) features: **emit_hlsl_debug_symbols** includes debug information in the generated HLSL shaders, and **disable_symbol_renaming** preserves original variable and function names so they are readable in PIX's shader debugger. |

## GPU Capture

A GPU capture records a single frame of rendering activity, letting you inspect every draw call, resource binding, and pipeline state in detail. After launching Chrome through PIX, click the **GPU Capture** button (camera icon) on the PIX toolbar to capture the current frame. Once the capture completes, PIX opens an analysis view where you can step through each API call, examine textures and buffers at any point in the frame, and debug shaders directly.

![PIX GPU Capture](/img/pix/pix-gpu-capture.webp)

## Timing Capture

A timing capture profiles GPU and CPU activity over a span of multiple frames, giving you a timeline view of how work is distributed. Unlike a GPU capture, a timing capture requires you to manually attach to the correct Chrome process. Launch the process as described above, then use **Attach to Process**:

![PIX Timing Capture Configuration Windows](/img/pix/pix-timing-capture.webp)

Select the Chrome process whose command line contains `--type=gpu-process`.

![PIX Attach To Process Dialog](/img/pix/pix-attach.webp)

Once attached, click the **Timing Capture** button (stopwatch icon) on the PIX toolbar to begin recording, let the scene run for the desired duration, then click the button again to stop. The resulting timeline shows GPU queue utilization, command list execution, and hardware counter data, making it straightforward to identify bottlenecks such as GPU-bound passes, excessive state changes, or pipeline stalls.

![PIX Toolbar With Timing Capture](/img/pix/pix-start-capture.webp)

## Additional Resources

This article covers how to set up PIX for use with Babylon.js and WebGPU. For a deeper understanding of PIX itself — including how to navigate captures, interpret timeline data, and debug shaders — the following Microsoft resources are great starting points.

Analyzing frames with GPU captures  
https://learn.microsoft.com/en-us/windows/win32/direct3dtools/pix/articles/gpu-captures/pix-gpu-captures

Timing Captures - The Timeline layout  
https://learn.microsoft.com/en-us/windows/win32/direct3dtools/pix/articles/timing-captures/layouts/pix-timing-captures-timeline-layout

Videos showing how to use the PIX on Windows tool for performance tuning and debugging DirectX 12 games  
https://www.youtube.com/playlist?list=PLeHvwXyqearWuPPxh6T03iwX-McPG5LkB


Tools And Resources

Coming next

Accessibility

An overview of the accessibility features in Babylon.js

Babylon.js MCP Servers

Learn how to configure Babylon.js Model Context Protocol servers in MCP-compatible AI clients and connect them to Babylon.js editors.

Flow Graph Editor

Build Babylon.js flow graphs visually with a UI-first editor for interactive scenes.

The Node Material Editor

Learn all about the powerful Node Material Editor in Babylon.js.

Viewer Configurator

Learn about the Viewer Configurator, a tool to simplify configuring the Babylon Viewer.

Playground

Learn about the incredibly powerful playground, the online Babylon.js IDE.

Sandbox

Learn about the incredibly powerful sandbox, an asset viewer and debugging tool for Babylon.js.

Inspector V2

Learn all about the incredibly powerful debug layer called "The Inspector" in Babylon.js.

The GUI Editor

Learn all about the simple and easy GUI Editor in Babylon.js.

Node Geometry Editor

Learn how use the Node Geometry Editor

Node Particle Editor

Learn how to use the Node Particle Editor

The Asset Librarian

Learn how to easily add free open source assets to your Babylon.js scene.

Asset Libraries

Learn all about the Babylon.js asset libraries.

Utilities

Learn about some handy JavaScript functions that you can add to any project, called Utilities.

Smart Filter Editor

Learn how to use the Smart Filter Editor