
Descriptions of how to use some third party libraries with Babylon.js



Please note that the Babylon.js Editor is a community project maintained mostly by Julien Moreau.

## Babylon.JS Editor v4.0 now available
**The Babylon.JS Editor v4.0 is available and is open to beta-tests. The Editor v4.0 can be downloaded here: http://editor.babylonjs.com/**

For new projects, it is highly recommanded to start using the version 4.0 of the Editor as it comes with more powerful tools to help Babylon.JS developers & artists to create awesome 3D games / applications.

## Babylon.JS Editor v3
V3 of the editor is now available and comes with new features from the V2. Such as multiple scene managements, improved tools and new tools.

It is highly recommended that you use the desktop app as you'll get access to the local file system to save your projects.

### Available features
* Create, edit and save particle systems
* Create, edit and save particle system sets
* Create and edit animations
* Create and edit lens flares systems
* Create and edit physics states on meshes
* Create and edit materials (including materials library)
* Add and edit sounds
* Add and edit textures (including render target textures & procedural textures)
* Save projects on OneDrive / local with Electron
* Deploy project template on OneDrive / local with Electron
* Scene graph view
* Create and edit custom post-process
* Attach custom scripts (JavaScript and TypeScript) to your objects
* Test your scenes with debug support


# Exporters
A range of 3D graphic software that can export files in a form that Babylon.js can import together with hints and tips on getting the best from the export.


The [Babylon Unity Toolkit](http://www.babylontoolkit.com) host a set of tools designed to provide a small subset of the unity editor design time features to export Babylon.js content scene files. You can create your games using a design time component based architecture. Please refer to the [Unity Editor](https://docs.unity3d.com/Manual/index.html) documentation for details. 



# 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/Extensions.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/Extensions/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/Extensions/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/Extensions/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
    }
}
```


This section contains extensions that help Babylon.js integrate with Content Management Systems.



## 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/extensions/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.



Library to display a GUI game as a layer on top of the canvas HTML/CSS.

* [Depot](https://github.com/dad72/CastorGUI)
* [Documentation](/extensions/castorGUI)

## 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." image="/img/playgroundsAndNMEs/pg-S34THY-55"/>

## 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." image="/img/playgroundsAndNMEs/pg-S34THY-57.png"/>

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



![Generated Navmesh ](/img/extensions/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." image=""/>


The glTF Exporter allows BabylonJS models to be exported to the [glTF 2.0 format](https://www.khronos.org/gltf/).

## Installation
The glTF Exporter can be installed by using the `babylonjs-serializers` module
### npm
```bash
npm install --save babylonjs babylonjs-serializers
```
### yarn
```bash
yarn add babylonjs babylonjs-serializers
```

### javascript
To include the BabylonJS serializers in javascript,
include a script tag in the html `<head>` tag, referencing the non-minified or minified compiled javascript:
```html

<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>


<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
```

If only the glTF serializer is desired, it can be specifically targeted with this `<head>` tag:
```html

<script src="https://preview.babylonjs.com/serializers/babylonjs.glTF2Serializer.js"></script>


<script src="https://preview.babylonjs.com/serializers/babylonjs.glTF2Serializer.min.js"></script>
```

## Exporting a Scene to glTF
```javascript
BABYLON.GLTF2Export.GLTFAsync(scene, "fileName").then((gltf) => {
    gltf.downloadFiles();
});

```
To download to glb format, simply replace the `GLTFAsync` static function with `GLBAsync`:

```javascript
BABYLON.GLTF2Export.GLBAsync(scene, "fileName").then((glb) => {
    glb.downloadFiles();
};
```

## Export options
glTF Exporter accepts an optional `options` parameter with certain functions and properties defined.

### Excluding geometry 
Sometimes you may need to exclude geometry from export, such as the skybox. You can define a boolean callback called `shouldExportNode` which accepts a BabylonJS node as an argument and returns a boolean, specifying if the node should be exported or not:

```javascript
// Initializer code...
let skybox = scene.createDefaultSkybox(hdrTexture, true, 100, 0.3);
// scene setup code...

let options = {
    shouldExportNode: function(node) {
        return node !== skybox;
    }
}

BABYLON.GLTF2Export.GLBAsync(scene, "fileName", options).then((glb) => {
    glb.downloadFiles();
});  

```

## Supported features
- Currently the following material types are supported:
  - `PBRMaterial`
    - Not all Babylon `PBRMaterial` features are supported in glTF.
  - `MetallicRoughnessMaterial`
  - `StandardMaterial` 
    -  A conversion from `StandardMaterial` to `MetallicRoughness` has been implemented to try to match as close as visibly possible, though not all BabylonJS features are supported in glTF.
  - `SpecularGlossinessMaterial` 
    -  glTF Exporter converts `SpecularGlossiness` materials to `MetallicRoughness` to match core glTF 2.0 specification.
- Node-based TRS animation

## Coming soon
- Skinning animation
- Morph Targets


Generate letters in BABYLON meshes.

## Basic-Usage

	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="" image=""/>

## Getting the code

Copy https://github.com/BabylonJS/Extensions/blob/master/MeshWriter/meshwriter.min.js or https://github.com/BabylonJS/Extensions/blob/master/MeshWriter/meshwriter.js and build it into your load sequence.

## 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:

	  let Writer = MeshWriter(this.scene, { scale: .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 normal BabylonJS 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 the BabylonJS 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="" image=""/>

	    const SCALE =.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.





## TextureCanvas

![Fur material high](/img/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" image=""/>

## 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](/api/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](/api/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](/api/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" image=""/>

## 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.



As with any code it is important to have a firm idea of what you want to achieve, what is possible to code and 
a design. 

## Requirements
The requirements are for a collection of coloured facets to bursts out from a central position so that each fragment lies on the surface of an expanding sphere. 
All fragments should be equally spaced on the sphere and should change colour during the expansion, fading over time.

## First Stage Design
A sphere created in BabylonJS is made up of facets where vertices of adjoining facets share normals to ensure a smooth surface. 
Converting the sphere to a flat shaded mesh will give each facet its own set of normals which will be the mathematical normals for the plane of the facet. 
To make a facet travel outwards from the centre over time its position at any time will be _start position + normal \* function of time_

The sphere is flat shaded and the normals for the three vertices of each facet will be the same. The original position of each vertex and its normal 
are accessible to the shader as attributes passing time as a uniform will be enough. 

To obtain an initially fast expansion the slowing down a logarithmic function of time will be used.

## Second Stage Design
The colour and transparency of all the facets will be the same at the same time and so a change to each component of the colour of a vertex 
can be applied as a function of time.

## Third Stage Design
After the first coding of the shaders adjustments were made to the functions of time, manually, to obtaim a satisfactory appearance to the burst of facets.

## Shader Material Code

### Vertex Shader Main Function

```
void main(void) {
    vec3 p = position;
    vec3 j = vec3(0., -1.0, 0.);
    p = p + normal * log2(1. + time) * 25.0;
    gl_Position = worldViewProjection * vec4(p, 1.0);
}
```

### Fragment Shader Main Function

```
void main(void) {
    gl_FragColor = vec4(1. - log2(1. + time)/100., 1. * log2(1. + time), 0., 1. - log2(1. + time/2.)/log2(1. + 3.95));
}
```

### Sphere 

```javascript
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:10}, scene);
sphere.convertToFlatShadedMesh();	

sphere.material = shaderMaterial;
```

### Animation Loop

```javascript
var t = 0.;
var time = 0.;
scene.registerBeforeRender(function() {
    if(time<8) {
        sphere.material.setFloat("time", time);
        time +=0.1;
    }   
    else {
        sphere.dispose();
    }
});
```

## Fireworks

[External Example - Shader Material](http://babylonjsguide.github.io/examples/fireworkcode.html)  
PG: <Playground id="#1OH09K#4" title="Fireworks" description="Build from Shader Material." image=""/>

Extensions

Coming next

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.

Babylon.js Viewer

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

Babylon.js CMS Integration

This section contains extensions that help Babylon.js integrate with Content Management Systems.

CastorGUI V2.0 (ECEMAScript 6)

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

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

Mesh Writer

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

Crowd Navigation System

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

Texture Canvas

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

Tree Generators

Learn about the tree generator extensions.

Babylon.js Editor

The Babylon.js Editor is a community project maintained mostly by Julien Moreau.

Exporters

A range of 3D graphic software that can export files in a form that Babylon.js can import.

External Libraries

Descriptions of how to use some third party libraries with Babylon.js.

Unity Toolkit

The Unity Toolkit hosts a set of tools designed to provide a small subset of the unity editor design time features to export Babylon.js content scene files.

glTF Exporter

The glTF Exporter allows BabylonJS models to be exported to the [glTF 2.0 format]