
## 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. 

Intrdouced in Babaylon.js 5.0, the Asset Librarian is an incredibly simply tool allowing you to access this full library of content directly in the playground with simple lines of code.

Using the "Assets" namespace, you can easily add any asset into your scene.

For example adding the Pirate Fort mesh into your scene is as simple as this:

```javascript
BABYLON.SceneLoader.ImportMesh("", Assets.meshes.pirateFort.rootUrl, Assets.meshes.pirateFort.filename, scene)
```
<Playground id="#ABDDD6#1" 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

A range of libraries for textures, models and more to load into the playground. These can help you to illustrate issues you may have without having to find a CORs acceptable server to load your own assets into the playground. Also a range of programmable textures and material built using a variety of shaders.


<img src="/img/tools/guiEditor/overview.jpg" 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 has to be constructed using 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 will walk you through the editor and its capabilities and should help you quickly start creating your own GUIs. If you're not familiar with the GUI system in Babylon.js and would like to learn more, you can read all 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 different parts of the editor.

### Header Bar

<img src="/img/tools/guiEditor/commandBar.jpg" 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.jpg" title="GUI Editor Hamburger Menu"/>

The hamburger menu provies some basic 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.jpg" 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.jpg" 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.jpg" 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.jpg" 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.jpg" 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.jpg" 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 specific resolution for your canvas in pixels, or you can 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.jpg" title="GUI Editor Responsive Resolution"/>

####

### Hierarchy Panel

<img src="/img/tools/guiEditor/layersPanel.jpg" 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.jpg" title="GUI Editor Parenting"/>

The order of controls listed in the Layers Panel reflects the z-order of the scene with the elments at the top of the list having a z-order that will render them on top of elements towards 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.jpg" title="GUI Editor Show Hide"/>

### Controls Bar

<img src="/img/tools/guiEditor/toolsBar.jpg" title="GUI Editor Tools Bar"/>

The Controls Bar allows you to create GUI controls, such as a text box, rectangle, grid, etc. Each icon in this bar can be clicked on 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 it 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.jpg" title="GUI Editor Canvas"/>

The Canvas is the main play area of the tool. The canvas contains the artboard where you can add controls, select controls, and click and drag controls to move them around. This panel represents a WYSIWYG (what you see is what you get) experience to how GUIs will show up in Babylon Scenes.

The checkerboard area reflects the content that will actually be visible in your scene when you load the GUI in. Note that controls can be moved outside of 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.jpg" title="GUI Editor Properties Panel"/>

The Properties Panel will change based on which controls are selected 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.jpg" 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 the Babylon.js scene code. So you have full control over all of the GUI Control properties at creation time as well as runtime!

### Special Properties for Grid Control

Grids are a powerful tool for building complex UI layouts. Grids 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 the sizes using either pixels or percent.

<img src="/img/tools/guiEditor/grid.jpg" title="GUI Editor Grid Properties"/>

You can then add them 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.jpg" title="GUI Editor Changing Control's Grid Cell"/>

Note: the zOrder of each control is determined by it's position in the hierarchy tree, and 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. This can then be either loaded back into the editor later for future use, or can be hosted somewhere of your choosing and then 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.jpg" title="GUI Editor Save Local 1"/>

#### Saving To The Snippet Server

Just like all Babylon tools, you have the option of saving your GUI creation directly to the Babylon.js snippet server. Saving in this manner saves the .json object to a Babylon.js server and provides a simple URL hash back for you to reference in the future. You can then load your GUI back into the editor by using this unique hash, or you can 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.jpg" 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.jpg" title="GUI Editor Load Local 1"/>

#### Loading From The Snippet Server

Loading from the snippet server will take a unique hash of a previously saved GUI and load it into the 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.jpg" 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 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 overlayed 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#13" 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.jpg) | Rectangle | [Rectangle Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#rectangle)
![ellipse](/img/tools/guiEditor/ellipseIcon.jpg) | Ellipse | [Ellipse Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#ellipse)
![stackpanel](/img/tools/guiEditor/stackPanelIcon.jpg) | Stack Panel | [Stack Panel Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#stackpanel)
![grid](/img/tools/guiEditor/gridIcon.jpg) | Grid | [Grid Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#grid)
![scrollviewer](/img/tools/guiEditor/scrollViewerIcon.jpg) | Scroll Viewer | [Scroll Viewer Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#scrollviewer)
![line](/img/tools/guiEditor/lineIcon.jpg) | Line | [Line Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#line)
![textblock](/img/tools/guiEditor/textIcon.jpg) | Text Block | [Text Block Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#textblock)
![inputText](/img/tools/guiEditor/inputTextIcon.jpg) | Input Text | [Input Text Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#inputtext)
![inputPassword](/img/tools/guiEditor/inputPasswordIcon.jpg) | Input Password | [Input Password Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#inputpassword)
![image](/img/tools/guiEditor/imageIcon.jpg) | Image | [Image Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#image)
![displayGrid](/img/tools/guiEditor/displayGridIcon.jpg) | Display Grid | [Display Grid Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#displaygrid)
![textButton](/img/tools/guiEditor/textButtonIcon.jpg) | Text Button | [A Button with a Text Block as a Child] (https://doc.babylonjs.com/divingDeeper/gui/gui#button)
![checkbox](/img/tools/guiEditor/checkBoxIcon.jpg) | Checkbox | [Checkbox Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#checkbox)
![radioButton](/img/tools/guiEditor/radioIcon.jpg) | Radio Button | [Radio Button Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#radiobutton)
![slider](/img/tools/guiEditor/sliderIcon.jpg) | Slider | [Slider Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#slider)
![virtualkeyboard](/img/tools/guiEditor/virtualKeyboardIcon.jpg) | Virtual Keyboard | [Virtual Keyboard Documentation](https://doc.babylonjs.com/divingDeeper/gui/gui#virtualkeyboard)
![colorpicker](/img/tools/guiEditor/colorPickerIcon.jpg) | Color Picker | [Color Picker](https://doc.babylonjs.com/divingDeeper/gui/gui#colorpicker)


### Demos
Check out additional demos here:
<Playground id="#5JEP1H" title="Full Color Picker Demo" description="More advance example that shows how to load a GUI and modify GUI controls."/>



## What Is It?

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](/toolsAndResources/inspector/inspectorVideoOverview).

The inspector offers multiple tools like:

- 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 called using:

```javascript
scene.debugLayer.show();
```

![debug layer overview](/img/features/debuglayer/debuglayer.jpg)

The two panes can also be opened in an [embedded mode](/typedoc/interfaces/babylon.iinspectoroptions):

```javascript
scene.debugLayer.show({
  embedMode: true,
});
```

![embed mode](/img/features/debuglayer/embedmode.jpg)

## Scene explorer pane

![scene explorer](/img/features/debuglayer/sceneExplorer.jpg)

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.

By clicking on a line you will select it and the inspector will automatically update to reflect the properties of the selected item.

Some entities offer shortcuts to contextual actions.

## Scene actions

![scene actions](/img/features/debuglayer/sceneactions.jpg)

The scene shortcuts are the following:

- The first 3 actions will turn on a specific gizmo mode (translation, rotation, scaling). When you click on one of them you can then click on a node in the Scene explorer or directly in your scene and it will be controllable with a gizmo:

![gizmo](/img/features/debuglayer/gizmo.jpg)

- 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 will force the scene explorer to update. For performance reasons, the scene explorer is not listening to all changes that can happen on the scene so you may end up needing to refresh it manually.

## Mesh actions

![mesh actions](/img/features/debuglayer/meshactions.jpg)

The mesh shortcuts are the following:

- The first action will enable the bounding box gizmo:

![bounding box gizmo](/img/features/debuglayer/boundingboxgizmo.jpg)

- The second action will show/hide the mesh.

## Light actions

![light actions](/img/features/debuglayer/lightactions.jpg)

You can use the light action to turn a light on and off.

## Camera actions

![camera actions](/img/features/debuglayer/cameraactions.jpg)

You can use the camera action to switch the active camera (when they are multiple cameras in a scene).

## GUI control actions

![gui control actions](/img/features/debuglayer/controlactions.jpg)

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.jpg)

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.jpg)

- The property grid which will display configurable controls for the current selected entity:

![property grid](/img/features/debuglayer/property.jpg)

- The debug pane will let you turn features on and off. It also let you display a grid and turn viewers (bones or physics) on and off:

![debug pane](/img/features/debuglayer/debugpane.jpg)

- The statistics pane gives information about all metrics captured by the engine:

![stats pane](/img/features/debuglayer/statspane.jpg)

- The tools pane lets you access utilities (like screen capture or recording as well as several tools related to glTF):

![tools](/img/features/debuglayer/tools.jpg)

## Popup mode

You can move any pane into a popup mode by clicking the icon right left to the close button in the pane header:

![popup](/img/features/debuglayer/popup.jpg)

## Specific debug tools

Specific debug tools can be found across 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.jpg)

## Bones viewer

This tool (available in the skeleton property grid) will render your skeletons:

![bones](/img/features/debuglayer/BonesView.png)

## 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.png)

## 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.png)

## Physics viewer

This tool (available in the Debug pane) will render your physics impostors:

![physics](/img/features/debuglayer/physics.jpg)

## 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.jpg)

## 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.jpg)

## Texture painter

This tool (available in the property pane when you select a material with textures in it) will render the texture directly as an emissive one:

![texture painter](/img/features/debuglayer/texturepainter.jpg)

## 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.

```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,

  }
];
```

<Playground id="#LQF5QR#2" title="Inspector custom properties" description="An example of inspector custom properties" image="/img/playgroundsAndNMEs/inspectorCustomProperties.jpg" />



## Creating Shaders The Easy Way

Creating shaders can be a very 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 amazing tool is a visual editor allowing you to connect blocks together to make shaders. It's really that simple. 

<img src="/img/how_to/Materials/nme1.jpg" 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)



## 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 currently using. 
Original code can be restored by refreshing the browser.

You can write the code in JavaScript or Typescript. The playground software compiles the code to JavaScript, in the background, before rendering.

## Overview

![Playground Overview](/img/how_to/Introduction/playground.jpg)

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 of 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.jpg)

In Typescript mode the menu has an orange color theme

![Playground Typescript Menu](/img/how_to/Introduction/pgmenu_ts.jpg)

### Large Screen

- **Title and Version**: As stated.
- **Language**: Typescript/JavaScript switch.
- **Run** ![run](/img/features/PGsupport/run.jpg): Commands the playground to try to render your scene.
- **Save** ![save](/img/features/PGsupport/save.jpg): 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** ![zip](/img/features/PGsupport/zip.jpg): 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** ![new](/img/features/PGsupport/new.jpg): Places a basic `createScene()` function into the editor along with code to initialise the scene variable and provide a camera.
- **Clear** ![clear](/img/features/PGsupport/clear.jpg): Empties all the code out of the playground editor.  You could then paste in any createScene function you are working on locally.
- **Settings** ![set](/img/features/PGsupport/set.jpg): The Settings button has a sub menu 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.
  - *Inspector*: The checkbox toggles the playground scene inspector which shows a multitude of variable values.
  - *Metadata*: This is where you describe your playground allowing yourself and other 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** ![examples](/img/features/PGsupport/ex.jpg): A drop down menu giving examples of playgrounds with a search filter.

### Small Screens

- **Menu** ![menu](/img/features/PGsupport/menu.jpg): Contains Run, New, Clear, Save and Zip as submenus.
- **Code** ![code](/img/features/PGsupport/code.jpg): Bottom Left Corner - switch to Code View and Editor.
- **Scene** ![scene](/img/features/PGsupport/scene.jpg): Bottom Right Corner - switch to Scene View.

## Playground URL formats

New playgrounds have this URL format

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/# | [https://www.babylonjs-playground.com/#](https://www.babylonjs-playground.com/#) |

Saved playgrounds have a hash code reference key added to the URL

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/#6F0LKI | [https://www.babylonjs-playground.com/#8M2HVF](https://www.babylonjs-playground.com/#8M2HVF) |


After editing any saves of the playground are numbered incrementally from one, for example 

| JavaScript | Typescript |
|---|---|
| https://www.babylonjs-playground.com/#6F0LKI#1 | [https://www.babylonjs-playground.com/#8M2HVF#1](https://www.babylonjs-playground.com/ts.html#8M2HVF#1) |
| https://www.babylonjs-playground.com/#6F0LKI#2 | [https://www.babylonjs-playground.com/#8M2HVF#2](https://www.babylonjs-playground.com/ts.html#8M2HVF#2) |
  
etc.

You might be interested to know that [some html templates](https://github.com/BabylonJS/Babylon.js/tree/master/Playground) are also available:

Template | Description
--- | ---
[full.html](https://www.babylonjs-playground.com/full.html#6F0LKI#2) | show the render area in full screen
[frame.html](https://www.babylonjs-playground.com/frame.html#6F0LKI#2) | show the render area in full screen, but with a bottom toolbar showing FPS, reload and edit buttons
[debug.html](https://www.babylonjs-playground.com/debug.html#6F0LKI#2) | used to run a version of the playground which uses debug version of babylon.js

## Forum sharing

Of course the playground is extremely useful to get help from the community. In the forum, simply paste the link of your playground.

You can have fun showing directly your playground imbedded into your message, using iframe. But take note that you have to be sparing with this functionality: this will slow down the loading of your topic.

```html
<iframe src="https://www.babylonjs-playground.com/frame.html#6F0LKI#2" width="400px" height="250px" ></iframe>
```

![playground forum sharing ways](/img/features/pgsupport/pg-forum-sharing-ways.jpg)
> *so many ways to share an issue*

## Compilation Errors

![compilation error popup](/img/features/pgsupport/pg-compilation-error.jpg)

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.

Please note that you can name your main function `delayCreateScene` instead of `createScene` if you want to return a scene without a camera (because for instance you plan to load a scene using `SceneLoader`).

## Focus

Whenever a scene in the playground needs the use of keys to move an object, such as a mesh or camera, around then the rendering area needs to have the focus. After running the playground ensure that the render area has the 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.


# Tools and Resources

This section contains all sorts of handy information for developing in Babylon.js. From a rich set of tools to make development easier, to several free asset libraries for you to leverage in your scenes, this section is sure to help you make the most beautiful experiences possible, as quickly and effeciently as possible!



Starting with Babylon.js v3.1, we introduced the NullEngine which is a version of the main Babylon.js engine but with no need for a webgl capable device.

The NullEngine will not produce any rendering and thus can be used in a node / server side environment.

It can be used to:
- Run tests
- Run a server side version of your application / game
- Use specific Babylon.js services (like gltf loaders for instance)

## General

To use a headless version of Babylon.js, just run:

```
var engine = new BABYLON.NullEngine();
var scene = new BABYLON.Scene(engine);
```

If you want to use it in a node.js environment, you may need to add some additional resources (like support for xhr):

```
var BABYLON = require("../../dist/preview release/babylon.max");
var LOADERS = require("../../dist/preview release/loaders/babylonjs.loaders");
global.XMLHttpRequest = require('xhr2').XMLHttpRequest;

var engine = new BABYLON.NullEngine();
var scene = new BABYLON.Scene(engine);

var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);

BABYLON.SceneLoader.ImportMesh("", "https://playground.babylonjs.com/scenes/", "skull.babylon", scene, function (newMeshes) {
    camera.target = newMeshes[0];

    console.log("Meshes loaded from babylon file: " + newMeshes.length);
    for (var index = 0; index < newMeshes.length; index++) {
        console.log(newMeshes[index].toString());
    }

    BABYLON.SceneLoader.ImportMesh("", "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function (meshes) {
        console.log("Meshes loaded from gltf file: " + meshes.length);
        for (var index = 0; index < meshes.length; index++) {
            console.log(meshes[index].toString());
        }
    });

    console.log("render started")
    engine.runRenderLoop(function() {
        scene.render();
    })
});

```

## Configuration

You can specifiy some options to the NullEngine constructor:

```
var engine = new BABYLON.NullEngine({
    renderWidth: 512,
    renderHeight: 256,
    textureSize: 512
});
```

With `renderWidth` and `renderHeight` you can define the size of the virtual canvas used to simulate the render surface.
With `textureSize`, you can define the size of all textures (which will be all black) used by the NullEngine.

## Troubleshooting

While the goal of the NullEngine is to completely replace the Engine class, some features cannot be used server side:
* camera.attachControl cannot be used as it requires a HTML eLement
* DynamicTexture cannot be used as they rely on HTML canvas

Furthermore as we already mentioned earlier, you need to provide an implementation of the XmlHttpRequest class.

Tools And Resources

Coming next

Playground

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

The Inspector

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.

The Node Material Editor

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

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.