# Azure Media Player 360 Video Plugin

The Azure Media Player 360 Video Plugin is a handy 360 video plugin for easy integration into your Babylon.js 360 Web Apps.

# Introduction 
The [Azure media player](http://amp.azure.net/libs/amp/latest/docs/index.html) 360 Video is a plugin for AMP (aka [Azure media player](http://amp.azure.net/libs/amp/latest/docs/index.html)) using Babylon.js in order to facilitate the integration of 360 videos in your Web App.

The plugin natively supports VR headsets (Windows Mixed Reality, etc.).

[Online Demo of the plugin](https://www.babylonjs.com/Demos/Amp360Video/)

## How to Run Locally
First, clone the Babylon.js extensions repository:
```
git clone https://github.com/BabylonJS/toolsAndResources.git
```

Once the repository has been cloned, open a command prompt in the Amp360Video folder.

Then, type the following commands:
```
npm install
npm start
```

The hosting web page will automatically open (using webpack-dev-server).

## How it works
The 360 video is a [videojs](https://docs.videojs.com/tutorial-plugins.html) plugin compatible with from AMP version 2.1.7 to the latest (2.2.3 at time of writing).

The plugin depends on Babylon.js in order to enable 3D functionalities in AMP.

For more information about AMP, you can access their [documentation](http://amp.azure.net/libs/amp/latest/docs/index.html).

## How use in your web site
After deploying the bundled javascript file [`dist/amp-360video.js`](https://raw.githubusercontent.com/BabylonJS/toolsAndResources/master/Amp360Video/dist/amp-360video.js) from the dist directory to your WebSite you can follow the steps below.

> Note: if you were using the plugin before, you might have needed to reference Babylon.js in your site. We have now released a bundle ensuring the smallest delivery possible so the reference to Babylon.js is not required anymore.

## External Resources
Include the following resources in you html:
```

<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>


<link href="https://amp.azure.net/libs/amp/2.2.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/2.2.3/azuremediaplayer.min.js"></script>
```

## Plugin Script
Include the link to your previously downloaded plugin script in your HTML:
```

<script src="amp-360video.js"></script>
```

## Plugin Setup
You can either embed the plugin in your HTML or initialize it by code like specified in the [AMP documentation](http://amp.azure.net/libs/amp/latest/docs/index.html#plugins).

### Html Initialization
Add the **threeSixty plugin** to your video data-setup:
```
<video playsinline crossorigin="anonymous" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls width="100%" height="100%" data-setup='{ "techOrder": ["azureHtml5JS", "html5"], "plugins": { "threeSixty": { } } }'>
    <source src="//willzhanmswest.streaming.mediaservices.windows.net/1f2dd2dd-ee99-40be-aae9-d0c2209982eb/DroneFlightOverLasVegasStripH3Pro7.ism/Manifest" type="application/vnd.ms-sstr+xml" />
    <p class="amp-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
    </p>
</video>
```

The only difference with your default AMP initialization is the presence of the 360 plugin:
```
"plugins": { "threeSixty": { } }'
```

One example can be found in the index.html file located in the [repo](https://github.com/BabylonJS/toolsAndResources/blob/master/Amp360Video/index.html).

### Code Initialization
The following code will initialize the plugin in your amp player:
```
var myPlayer = amp('videoPlayer', {
        "nativeControlsForTouch": false,
        autoplay: false,
        controls: true,
        width: "640",
        height: "480",
        poster: "",
        techOrder: ["azureHtml5JS", "html5"], 
        plugins: { 
            "threeSixty": {
                enableVR: true
            }
        }
    }, function() {
        console.log('Good to go!');
        // add an event listener
        this.addEventListener('ended', function() {
            console.log('Finished!');
        });
    });

myPlayer.src([{
    src: "//willzhanmswest.streaming.mediaservices.windows.net/1f2dd2dd-ee99-40be-aae9-d0c2209982eb/DroneFlightOverLasVegasStripH3Pro7.ism/Manifest",
    type: "application/vnd.ms-sstr+xml"
}]);
```

One example can be found in the indexCode.html file located in the [repo](https://github.com/BabylonJS/toolsAndResources/blob/master/Amp360Video/indexCode.html).

## Define the video 360 format (Monoscopic, Side By Side, Top Bottom)
Several types of 360 video exist today. The most common being Monoscopic Panoramic, Stereoscopic Side by Side panoramic and Top bottom panoramic.

The first one represents a panoramic view which is dedicated to one eye. The second one contains two panoramic views dedicated to each eyes whereas the last one contains both panoramic views respectively on the top and bottom of the video.

The plugin defaults to Monoscopic panoramic mode.

In order to specify the type of your source (this can unfortunately not be automated in the plugin), you can specify a different value in your options:

### By HTML configuration
In the data-setup plugin section:
```
"plugins": { "threeSixty": { "videoType": "stereoscopicTopBottom" } }
```

The available types are: "monoscopicPanoramic", "stereoscopicSideBySide", "stereoscopicTopBottom".

### By code configuration
This works exactly the same as the previous point. In the options of your plugin:
```
plugins: { 
    "threeSixty": {
        videoType: "stereoscopicTopBottom"
    }
}
```

The available types are: "monoscopicPanoramic", "stereoscopicSideBySide", "stereoscopicTopBottom".

## Enable/Disable the VR Button
By default, the plugin is delivered with a VR mode available through a button shaped like a head-mounted display.

In order to disable the button, you can specify in your options:

### By HTML configuration
In the data-setup plugin section:
```
"plugins": { "threeSixty": { "enableVR": false } }
```

### By code configuration
This works exactly the same as the previous point. In the options of your plugin:
```
plugins: { 
    "threeSixty": {
        enableVR: false
    }
}
```

## Update the camera FOV
By default the plugin is delivered with a camera of a 1.18 radians field of view.

In order to change it if needed, you can specify a different value in your options:

### By HTML configuration
In the data-setup plugin section:
```
"plugins": { "threeSixty": { "fov": 1 } }
```

### By code configuration
This works exactly the same as the previous point. In the options of your plugin:
```
plugins: { 
    "threeSixty": {
        fov: 1
    }
}
```

## Update the default camera orientation
In case the camera is not looking at what you expect when the video starts, you can use both options defaultCameraOrientationX and defaultCameraOrientationY to adapt the starting point of the camera to your use case. Those properties are angles respectively around the x and y axis defined in radians.

In order to change them, you can specify a different value in your options:

### By HTML configuration
In the data-setup plugin section:
```
"plugins": { "threeSixty": { "defaultCameraOrientationX": 1 } }
```

### By code configuration
This works exactly the same as the previous point. In the options of your plugin:
```
plugins: { 
    "threeSixty": {
        defaultCameraOrientationY: 1
    }
}
```

## Disable WebGL2
The default setup enables Webgl2 to enhance the performances of the application. In case of compatibility issues with all platforms, would you wish to disable it, you can rely on the setup below:

### By HTML configuration
In the data-setup plugin section:
```
"plugins": { "threeSixty": { "disableWebGL2Support": true } }
```

### By code configuration
This works exactly the same as the previous point. In the options of your plugin:
```
plugins: { 
    "threeSixty": {
        disableWebGL2Support: true
    }
}
```

## Adapt to native resolution
To provide the best performances, by default the plugin does not account for you [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) setup. It renders 1 to 1 with CSS pixels. In case of HiDPI or Retina display the ratio might be pretty high meaning if you want to get the most of your pixels (using physical pixels), the plugin should for instance render 4 times more pixels than the actual CSS number of pixels.

You can use the hardwareScalingLevel settings of the plugin to chose how many times the Physical Pixels of your device are multiplied to define the number of CSS pixels. For instance a value of 0.5 means there would be twice as much pixels on width and height than the number of CSS pixels enhancing a lot the resolution.

### By HTML configuration
In the data-setup plugin section:
```
"plugins": { "threeSixty": { "hardwareScalingLevel": 0.5 } }
```

### By code configuration
This works exactly the same as the previous point. In the options of your plugin:
```
plugins: { 
    "threeSixty": {
        hardwareScalingLevel: 0.5
    }
}
```


## Display 3D models on your webpage

The Babylon.js viewer is the simplest way to display 3D content on a web page.

To display a 3D model on you web page:

1. Add a script reference to the viewer

    ```html
    <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
    ```

2. Add a `<babylon>` tag and set the _model_ attribute to point to a `.gltf` or `.glb` file

    ```html
    <babylon model="model.gltf"></babylon>
    ```

    We recommend using the [glTF format](https://github.com/khronosgroup/gltf) (`.gltf` or `.glb`) for displaying 3D models on your webpage. Other formats supported by Babylon.js loaders are also supported by the viewer component including `.babylon`, `.obj`, and `.stl` formats.

The Babylon.js viewer automatically provides a [default viewing experience](#default-viewing-experience) for 3D models. All aspects of this experience are configurable. See [Configuring the viewer](//doc.babylonjs.com/toolsAndResources/babylonViewer/configuringViewer) for more information on customizing the viewing experience.

## Example

<p data-height="400" data-theme-id="light" data-slug-hash="QxzBPd" data-default-tab="html,result" data-user="BabylonJS" data-embed-version="2" data-pen-title="Babylon.js Viewer - Display a 3D model" class="codepen">See the Pen <a href="https://codepen.io/BabylonJS/pen/QxzBPd/">Babylon.js Viewer - Display a 3D model</a> by Babylon.js (<a href="https://codepen.io/BabylonJS">@BabylonJS</a>) on <a href="https://codepen.io">CodePen</a>.</p>

## Resizing

Controlling the size of the viewer is one of the most common configuration operation. It is rather easy as the viewer in default mode will fill 100% of the width and height of its container. So in order to control the viewer, you can simply style its encclosing container.

<p data-height="400" data-theme-id="light" data-slug-hash="qMBwar" data-default-tab="html,result" data-user="BabylonJS" data-pen-title="Babylon.js Viewer - Resize the viewer" class="codepen">See the Pen <a href="https://codepen.io/BabylonJS/pen/qMBwar/">Babylon.js Viewer - Resize the viewer</a> by Babylon.js (<a href="https://codepen.io/BabylonJS">@BabylonJS</a>) on <a href="https://codepen.io">CodePen</a>.</p>

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Using the viewer in your project

The Babylon.js viewer is available on CDN as well as an NPM package. The Babylon.js viewer is a wrapper around the Babylon.js engine and follows the same versioning scheme as the engine. The currently stable version of the Babylon.js viewer will use the current stable version of Babylon.js engine and the preview version of the Babylon.js viewer will use the preview version of Babylon.js engine.

## CDN

Stable versions of the viewer are available on:

-   https://cdn.babylonjs.com/viewer/babylon.viewer.js (minified)
-   https://cdn.babylonjs.com/viewer/babylon.viewer.max.js

Preview releases (nightlies) of the viewer are available on:

-   https://preview.babylonjs.com/viewer/babylon.viewer.js (minified)
-   https://preview.babylonjs.com/viewer/babylon.viewer.max.js

## NPM

To install the Babylon.js viewer through NPM use:

```javascript
npm install --save babylonjs-viewer
```

This will install the latest stable version of the viewer, including its needed dependencies.

Afterwards it can be imported to the project using:

```javascript
import "babylonjs-viewer";
```

This will enable the `BabylonViewer` namespace.



# Babylon Buffered Interpolation

Have you ever wanted to manage the position, rotation, and scale of networked Babylon.js objects? This [awesome package](https://github.com/virbela/buffered-interpolation) provides a fantastic solution. It is a port of Mozilla's [buffered-interpolation](https://github.com/InfiniteLee/buffered-interpolation) to Babylon.js and aims to work well both in situations with continuous and sparse network updates.

To see this system working live, check out the virtual co-presence experience: [Frame](https://framevr.io/).

To get started and learn more, head over to the [Virbela's github page](https://github.com/virbela/buffered-interpolation).


Library to display a GUI game as a layer on top of the canvas HTML/CSS.

- [Depot](https://github.com/dad72/CastorGUI)
- [Documentation](/toolsAndResources/castorGUI)
- The maintenance of the CastorGUI extension is the responsibility of the author.

## Features:

Select or create themes.

Create GUI (element html5 and css3):

- texture
- text
- textLink
- label
- window draggable (with title & button close)
- dialog (with button close)
- panel (simple dialog without button close)
- button
- slider
- progress
- meter (jauge de measure)
- select color (with compatitility IE and Edge)
- spinner
- radio button
- checkbox
- textfield
- textarea
- fieldset
- select with options
- system of database (localStorage and sessionStorage)

## Quick overview of use GUI

We must create a GUIManager that allows to recover the origin of the canvas and provides other basic thing.
A GUIManager can have a CSS that Formatted anything you want to customize your GUI.
You can also options to add a theme in the third parameter.

```javascript
let canvas = document.getElementById("game");
let css = "button {cursor:pointer;}";
let options = { themeRoot: "../style/", themeGUI: "default", pixel: false };
let guisystem = new GUIManager(canvas, css, options);
```

Then we create interfaces items. eg textures and dialog with text:

```javascript
let myFunction = function () {
  alert("Yes, this work!");
};
let guiTexture = new GUITexture("life", "data/image.png", { w: 50, h: 50, x: 10, y: 0 }, guisystem, myFunction);

let optionsDialog = { w: guisystem.getCanvasSize().width - 20, h: 100, x: 8, y: guisystem.getCanvasSize().height - 110 };
let dialog = new GUIDialog("dialog", optionsDialog, guisystem);
dialog.setVisible(true);

let text = new GUIText("textDialog", { size: 15, text: "Display text here" }, guisystem, false);
dialog.add(text);
```

That's it. Everything works the same way with the same simplicity.

Demo PG: <Playground id="#S34THY#55" title="Castor GUI Playground Demo" description="Basic demo for showing the Castor GUI in action."/>

## For use Database

```javascript
let db = new DataBase(false); // true if use sessionStorage else use localStorage (stockage temporary)
db.addTable("user"); // create table
db.createField("user", "member", { pseudo: "dad72" }); // create field

db.selectItem("user", "member", "pseudo"); // return dad72
db.updateItem("user", "member", "pseudo", "Romeo"); // update pseudo
db.selectItem("user", "member", "pseudo"); // return Romeo

//if delete table:
db.deleteTable("member");
// if delete database:
db.deleteDataBase();
```

Demo PG: <Playground id="#S34THY#57" title="Castor GUI database Demo" description="Basic demo for using Castor GUI with a database."/>



This system allows you take an array of meshes, clone them and display the results in a variety of patterns. 

[Source Code](https://github.com/BabylonJS/Extensions/tree/master/ClonerSystem/src)  
The maintenance of the Cloner System extension is the responsibility of the author.



![Generated Navmesh ](/img/toolsAndResources/navigation/NavMeshGeneration.png)

A Navigation Mesh (or navmesh for short) is a surface topology describing the space where an agent can go based on constraints.
Based on parameters like agent radius, agent climbing capability, agent height,... the navmesh generation computes a topology from source meshes (the world geometry).
Then, this topology can have a debug display (blue mesh on screenshot above) to validate the parameters. 

A demo can be found at: <Playground id="#HFY257#4" title="Crowd Navigation Demo" description="Simple example showcasing the crowd agent and nav mesh systems."/>



Welcome to the documentation of the Babylon.JS Editor. A series of tutorials are available to understand the basics of the Editor. It is recommanded to read the tutorials before starting with the Editor.

Please note that the editor is a community project maintained mostly by Julien Moreau-Mathis ([@luaacro](https://twitter.com/Luaacro)).



# Make the Best use of The Forum

The [Babylon.js forum](https://forum.babylonjs.com) is a fantastic place to get help or help others.
This short page is intended to help you get the best answer as quickly as possible.

## What to do if you have a question for the forum

The best way to get an answer quickly is to follow this 3 easy steps:
- Search about your issue on the [documentation](https://doc.babylonjs.com/search). Maybe the problem you have is just a matter of understanding how the API works?
- Search about your issue on the [forum](https://forum.babylonjs.com/search). Maybe someone else already had the same problem?
- Provide a reproduction of your issue within the [playground](https://playground.babylonjs.com). Questions with a playground are likely to get a answer within the next two hours. It is really hard for the community to help without a repro because of the inner rich nature of JavaScript, WebGL and Babylon.js. Consider this step **mandatory**.


<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](/divingDeeper/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](/divingDeeper/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](/divingDeeper/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/tools/playground/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/tools/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" />



Generate letters in BABYLON meshes.

## Basic-Usage

```javascript
Writer = BABYLON.MeshWriter(scene, { scale: scale });
text1 = new Writer("ABC", {
  anchor: "center",
  "letter-height": 50,
  color: "#1C3870",
  position: {
    z: 20,
  },
});
```

PG: <Playground id="#PL752W#150" title="Mesh Writer Example 1" description=""/>

## Getting the code

Copy https://github.com/BabylonJS/features/extensions/blob/master/MeshWriter/meshwriter.min.js or https://github.com/BabylonJS/features/extensions/blob/master/MeshWriter/meshwriter.js and build it into your load sequence.  
Maintenance of Mesh Writer is the responsibility of the author.

## If you prefer npm

### npm i meshwriter

Import in your React/Angular component:

`import { MeshWriter } from "meshwriter";`

With **meshwriter** you can use MeshWriter directly like this:

```javascript
let Writer = MeshWriter(this.scene, { scale: 0.25, defaultFont: "Arial" });
let textMesh = new Writer("Hello World", {
  "font-family": "Arial",
  "letter-height": 30,
  "letter-thickness": 12,
  color: "#1C3870",
  anchor: "center",
  colors: {
    diffuse: "#F0F0F0",
    specular: "#000000",
    ambient: "#F0F0F0",
    emissive: "#ff00f0",
  },
  position: {
    x: 0,
    y: 10,
    z: 0,
  },
});
```

## Superconstructor - BABYLON.MeshWriter()

After MeshWriter is loaded, BABYLON.MeshWriter is defined. It is called with one or two parameters.

- **scene** &nbsp; required
- **preferences** &nbsp; optional &nbsp; The preferences object may specify up to three values

        FIELD                 DEFAULT
      default-font           Helvetica
      scale                      1
      letter-origin         "letter-center"

The call to BABYLON.MeshWriter returns a constructor. Call it "**Writer**".

## Constructor - new Writer()

new Writer() is called with a string and an (optional) options parameter.&nbsp; The options object conforms to normalBabylon.js structures and terminology.

          FIELD                 DEFAULT
        font-family             default-font
        anchor                  left
        letter-height           100
        letter-thickness        1
        color                   #808080              # hits emissive only
        alpha                   1
        position
            x                   0
            y                   0
            z                   0
        colors                                       # if you need to control more than just emissive
            diffuse             #F0F0F0
            specular            #000000
            ambient             #F0F0F0
            emissive            color                # from option field 'color' above

**new Writer()** builds a mesh with material that is inserted into the scene.&nbsp; This is a multi-step process with interim meshes and holes per letter.&nbsp; These meshes are sucked into an SPS and then disposed.&nbsp; At the end, one mesh, one material and one SPS have been added to the scene.

**new Writer()** also returns a **writer** instance with useful methods.&nbsp; See below.

## Instance

Each **writer** instance has methods to allow one to retrieve theBabylon.js objects or to get/set attributes of the SPS.

       getSPS
       getMesh
       getMaterial
       color                   # sets or gets color but no change to material
       alpha                   # sets or gets alpha but no change to material
       setColor                # set emissive color and change color value
       setAlpha                # change value and material
       overrideOpac            # change material but not value
       resetOpac               # sets material to current value
       dispose

## Usage Hints

If you wish to do extensive things with position, rotation or animation, retrieve the meshes and materials from the instance using the methods shown above.&nbsp; The output from **new Writer()** is an SPS with one particle for each character.

Example:
PG: <Playground id="#PL752W#151" title="Mesh Writer Example 2" description=""/>

```javascript
const SCALE = 0.25;
const TEXT_SIZE = 35;
const TEXT_THICKNESS = 10;

Writer = BABYLON.MeshWriter(scene, { scale: SCALE, defaultFont: "Arial" });
textMesh = new Writer("BABYLON JS", {
  "font-family": "Arial",
  anchor: "center",
  "letter-height": TEXT_SIZE,
  "letter-thickness": TEXT_THICKNESS,
  color: "#1C3870",
  colors: {
    diffuse: "#F0F0F0",
    specular: "#000000",
    ambient: "#F0F0F0",
    emissive: "#ff00f0",
  },
  position: {
    x: 0,
    y: 5,
    z: 70,
  },
});

//Text Writer create SPS with Particle for each letter
SPS = textMesh.getSPS();

//Update animation
SPS.updateParticle = (particle) => {
  particle.rotation.x -= 0.06;
};

scene.registerBeforeRender(() => {
  SPS.setParticles();
  //sps.mesh.rotation.y = k;
});
```

Colors:&nbsp; With most lighting, it is enough just to use the "color" field to specify the letter coloring.&nbsp; However, programmers may specify all four color types by putting a "colors" object in the options object.

Unless you have a specific need, do not specify a font.&nbsp; The default font, Helvetica, has the most extensive characters and the fewest faces; it will be the most efficient if you have a lot of text.&nbsp; Jura was added because the author likes it for numbers.



## 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/divingDeeper/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)


## TextureCanvas

![Fur material high](/img/features/extensions/texturecanvas.jpg)

## About

TextureCanvas is a texture on which other textures can be drawn.

## Usage

## Creating a canvas

To construct a TextureCanvas, you need to provide the size and the scene the texture will be used in:

```javascript
// A square texture
let canvas = new TextureCanvas(128, scene);
```

```javascript
// A rectangular texture
let canvas = new TextureCanvas({ width: 256, height: 128 }, scene);
```

Aditionally, you may pass three more parameters, which are:

-   _initTexture_, an initial texture to draw.
-   _onReady_, a function to be called when the canvas is ready.
-   _options_, an object with the properties _generateMipMaps_ (boolean) and _samplingMode_ (number)

PG: <Playground id="#9S5YZY#6" title="Texture Canvas" description="Example of a TextureCanavas"/>

## Draw using contexts

Contexts can be used to specify how a texture should be drawn. Multiple contexts can be created and used interchangably.

To draw a texture using the default context, you can call `canvas.drawTexture(myTexture)`.

You can create a context like this:

```javascript
let ctx = canvas.createContext();
```

A context has the following propteries:

| Name                    | Type                                                                                                                | Description                                                                                               |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| diffuseTexture          | [Texture](/typedoc/classes/babylon.texture)                                                    | The texture to draw.                                                                                      |
| diffuseSamplingRect     | [Rectangle](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#rectangle-class)         | The area of the diffuse texture to draw.                                                                  |
| drawRect                | [Rectangle](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#rectangle-class)         | The area to draw to.                                                                                      |
| rotation                | [Vector3Matrix](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#vector3matrix-class) | The rotation axes in radians to rotate the diffuse textures by (_z_ is 2D rotation).                      |
| pivotPoint              | [PivotPoint](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#pivotpoint-class)       | The rotation pivot point.                                                                                 |
| skewing                 | [UVector](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#uvector-class)             | The amount of skewing/shearing.                                                                           |
| opacityTexture          | [Texture](/typedoc/classes/babylon.texture)                                                    | The texture to get the alpha values from.                                                                 |
| opacityTextureIntensity | number                                                                                                              | How much the opacity texture should be contributing to the difuse's alpha values, ranging from 0.0 to 1.0 |
| opacitySamplingRect     | [Rectangle](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#rectangle-class)         | The area of the opacity texture to use.                                                                   |
| clearColor              | [Color4](/typedoc/classes/babylon.color4)                                                      | The color to clear the canvas with.                                                                       |

And the following methods:

| Name                   | Parameters                                                                                         | Description                                                                                 |
| ---------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| reset                  |                                                                                                    | Resets the draw options to their default values.                                            |
| setDiffuseSamplingRect | u, v, width, height                                                                                | Sets which area of the diffuse texture to draw.                                             |
| setOpacitySamplingRect | u, v, width, height                                                                                | Sets which area of the opacity texture to draw.                                             |
| setDrawRect            | u, v, width, height                                                                                | Sets which area of the canvas to draw to — this area may be tranformed by rotating/skewing. |
| setRotation            | x?: number, y?: number, z?: number                                                                 | Sets the rotation axes in radians rotate the diffuse texture by (_z_ is 2D rotation).       |
| setPivotPoint          | pu?: number, pv?: number, isLocalSpace?: boolean                                                   | Sets the point around which to rotate the texture.                                          |
| setSkewing             | u, v                                                                                               | Sets how the texture should be skewed (shear transform).                                    |
| draw                   |                                                                                                    | Draws the diffuse texture, if set.                                                          |
| drawTexture            | diffuseTexture: Texture                                                                            | Draws a texture.                                                                            |
| clear                  |                                                                                                    | Clears the canvas using the set clearColor.                                                 |
| clone                  | cloneDrawOptions?:&nbsp;boolean, cloneTextures?:&nbsp;boolean, ref?:&nbsp;TextureCanvasDrawContext | Returns a clone of the context.                                                             |

Once the context is set up, simply call `ctx.draw()` or `ctx.drawTexture(myTexture)`

PG: <Playground id="#436DIW#2" title="Texture Canvas" description="Example of drawing on a TextureCanavas"/>

## Notes

Please note that uv-coordinates are used rather than pixel values.

## Rotation

Rotating a texture happens in three dimensions in the default coordinate system of Babylon.js, with _z_ being the forward axis.

You can set a pivot point to be in local space (that of the diffuse texture), or world space (that of the canvas), with `pivotPoint.isLocalSpace`.



A series of extensions that generate 3D trees.



# 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 scenes and application with Babylon.js. This section is sure to help you make the most beautiful experiences possible, as quickly and effeciently as possible!


Tools And Resources

In This Category

Babylon.js Editor - Extension

Welcome to the Babylon.js Editor Documentation.

The Inspector

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

The GUI Editor

Learn how to use the GUI Editor.

The Node Material Editor

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

Babylon.js Viewer - Extension

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

CastorGUI V2.0 (ECEMAScript 6) - Extension

Library extension for displaying Castor GUI elements as a layer on top of the canvas.

Cloner System

This system allows you take an array of meshes, clone them and display the results in a variety of patterns.

Dynamic Terrain - Extension

The Dynamic Terrain is an extension that provides a way to display a large terrain dynamically morphed from a map of 3D data.

Crowd Navigation System - Extension

This system allows you to create primitive AI crowd agents that follow a path along a specific mesh.

Mesh Writer

The Mesh Writer allows you to write 3D text, as meshes, in various fonts.

Utilities

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

Azure Media Player 360 Video Plugin - Extension

The Azure Media Player 360 Video Plugin is a handy 360 video plugin for easy integration into your Babylon.js 360 Web Apps.

Babylon Buffered Interpolation

Awesome package for interpolation of position, rotation, scale data of networked Babylon.js objects.

Texture Canvas

Learn about the texture canvas extension that functions as a texture that other textures can be drawn upon.

Tree Generators - Extension

Learn about the tree generator extensions.

Make the Best Use of the Forum

Learn about the best place to get help, the Babylon.js forum.

Offsite Tutorials

List of helpful offsite tutorials about Babylon.js.