Merge remote-tracking branch 'source/master' into native

.travis.yml

@@ -2,7 +2,7 @@ sudo: required
 dist: trusty
 language: node_js
 node_js:
-- '6'
+- '8'
 git:
   depth: 3
 cache:

Playground/js/index.js

@@ -170,7 +170,7 @@ function showError(errorMessage, errorEvent) {
         var zipCode;
         BABYLON.Engine.ShadersRepository = "/src/Shaders/";
 
-        if (location.href.indexOf("indexstable") !== -1) {
+        if (location.href.indexOf("indexStable") !== -1) {
             setToMultipleID("currentVersion", "innerHTML", "Version: Stable");
         } else {
             setToMultipleID("currentVersion", "innerHTML", "Version: Latest");

Tools/Gulp/gulpfile.js

@@ -22,7 +22,6 @@ var expect = require("gulp-expect-file");
 var optimisejs = require("gulp-optimize-js");
 var webserver = require("gulp-webserver");
 var path = require("path");
-var sass = require("gulp-sass");
 const webpack = require('webpack');
 var webpackStream = require("webpack-stream");
 var typedoc = require("gulp-typedoc");
@@ -206,7 +205,7 @@ gulp.task("workers", function (cb) {
 /**
  * Build tasks to concat minify uflify optimise the BJS js in different flavor (workers...).
  */
-gulp.task("buildWorker", gulp.series("workers", "shaders", function () {
+gulp.task("buildWorker", gulp.series(gulp.parallel("workers", "shaders"), function () {
     var filesToProcess = determineFilesToProcess("files");
     return merge2(
         gulp.src(filesToProcess).
@@ -402,7 +401,7 @@ var buildExternalLibrary = function (library, settings, watch) {
 
     var outputDirectory = config.build.outputDirectory + settings.build.distOutputDirectory;
 
-    let cssTask;
+    /*let cssTask;
 
     if (library.sassFiles && library.sassFiles.length) {
         cssTask = gulp.src(library.sassFiles)
@@ -410,7 +409,7 @@ var buildExternalLibrary = function (library, settings, watch) {
             .pipe(concat(library.output.replace(".js", ".css")))
             .pipe(gulp.dest(outputDirectory));
         tasks.push(cssTask);
-    }
+    }*/
 
 
     if (watch) {
@@ -481,9 +480,9 @@ var buildExternalLibrary = function (library, settings, watch) {
 
         var waitAll;
         let waitAllTasks = [];
-        if (cssTask) {
+        /*if (cssTask) {
             waitAllTasks.push(cssTask);
-        }
+        }*/
 
         if (dev) {
             waitAllTasks.push(dev);
@@ -523,7 +522,7 @@ var buildExternalLibrary = function (library, settings, watch) {
                     if (!out.minified) {
                         wpConfig.mode = "development";
                     }
-                    let wpBuild = webpackStream(wpConfig, webpack);
+                    let wpBuild = webpackStream(wpConfig, require("webpack"));
 
                     //shoud dtsBundle create the declaration?
                     if (settings.build.dtsBundle) {
@@ -592,9 +591,6 @@ var buildExternalLibrary = function (library, settings, watch) {
                     sequence.push(build);
 
                 });
-
-
-
             } else {
 
                 let wpBuild = webpackStream(require(library.webpack), webpack);
@@ -624,6 +620,11 @@ var buildExternalLibrary = function (library, settings, watch) {
                             let fileLocation = path.join(outputDirectory, settings.build.processDeclaration.filename);
                             fs.readFile(fileLocation, function (err, data) {
                                 if (err) throw err;
+
+                                // For Raanan,litera litteral import hack TO BETTER INTEGRATE
+                                data = data + "";
+                                data = data.replace('import "../sass/main.scss";', "");
+
                                 var newData = processDeclaration(data, settings.build.processDeclaration);
                                 fs.writeFileSync(fileLocation.replace('.module', ''), newData);
                                 //legacy module support

Tools/Gulp/package.json

@@ -9,12 +9,9 @@
     "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",
     "license": "(Apache-2.0)",
     "devDependencies": {
-        "@types/node": "^8.10.21",
-        "base64-image-loader": "^1.2.1",
+        "@types/node": "^8.10.22",
         "chai": "^4.1.2",
         "color-support": "^1.1.3",
-        "css-loader": "^1.0.0",
-        "deepmerge": "^2.1.1",
         "del": "3.0.0",
         "gulp": "^4.0.0",
         "gulp-clean-ts-extends": "~0.1.1",
@@ -25,15 +22,11 @@
         "gulp-optimize-js": "^1.1.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "~1.0.0",
-        "gulp-sass": "^4.0.1",
         "gulp-sourcemaps": "~2.6.4",
         "gulp-typedoc": "^2.2.0",
         "gulp-typescript": "4.0.2",
         "gulp-uglify": "^3.0.1",
         "gulp-webserver": "^0.9.1",
-        "handlebars": "^4.0.11",
-        "html-loader": "^0.5.5",
-        "json-loader": "^0.5.7",
         "karma": "^2.0.5",
         "karma-browserstack-launcher": "^1.3.0",
         "karma-chai": "^0.1.0",
@@ -51,8 +44,8 @@
         "ts-loader": "^4.4.2",
         "typedoc": "^0.11.0",
         "typescript": "^2.9.2",
-        "webpack": "^4.16.2",
-        "webpack-stream": "^5.0.0"
+        "webpack": "^4.16.3",
+        "webpack-stream": "5.0.0"
     },
     "scripts": {
         "install": "cd ../../gui && npm install && cd ../Tools/Gulp/ &&  cd ../../inspector && npm install && cd ../Tools/Gulp/ && npm --prefix ../../Playground/ install ../../Playground/ && npm --prefix ../../tests/unit/ install ../../tests/unit/ && npm --prefix ../../Viewer/tests/ install ../../Viewer/tests/ && cd ../../Viewer && npm install && cd ../Tools/Gulp/ && gulp deployLocalDev"

Tools/Gulp/readme.md

@@ -9,7 +9,7 @@ Build Babylon.js with [gulp](http://gulpjs.com/ "gulp") and npm ([nodejs](http:/
 
 ### First install gulp :
 ```
-npm install -g gulp
+npm install -g gulp@4.0.0
 ```
 
 ### Install some dependencies :
@@ -38,7 +38,6 @@ gulp
 ```
 Will be generated :
 - babylon.js
-- babylon.noworker.js (minified version without collisions workers)
 - babylon.max.js (unminified)
 
 ## From the typescript source
@@ -93,4 +92,4 @@ gulp typescript-all
 ### Zip individual Blender python files for distribute-able
 ```
 gulp zip-blender
-```
+```

Tools/Publisher/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "banylonjs-publisher",
+    "name": "babylonjs-publisher",
     "version": "1.0.0",
     "description": "Publishing babylon's packages automatically",
     "main": "index.js",

Viewer/src/model/viewerModel.ts

@@ -536,6 +536,7 @@ export class ViewerModel implements IDisposable {
     /**
      * Apply a material configuration to a material
      * @param material Material to apply configuration to
+     * @hidden
      */
     public _applyModelMaterialConfiguration(material: Material) {
         if (!this._modelConfiguration.material) return;

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/babylon.gui.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../Tools/gulp/babylonjs
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
@@ -180,9 +180,10 @@ declare module BABYLON.GUI {
                 * @param width defines the texture width (1024 by default)
                 * @param height defines the texture height (1024 by default)
                 * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
+                * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
                 * @returns a new AdvancedDynamicTexture
                 */
-            static CreateForMesh(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean): AdvancedDynamicTexture;
+            static CreateForMesh(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean): AdvancedDynamicTexture;
             /**
                 * Creates a new AdvancedDynamicTexture in fullscreen mode.
                 * In this mode the texture will rely on a layer for its rendering.
@@ -484,6 +485,8 @@ declare module BABYLON.GUI {
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
+}
+declare module BABYLON.GUI {
     /**
         * Class used to manage 3D user interface
         * @see http://doc.babylonjs.com/how_to/gui3d
@@ -659,6 +662,13 @@ declare module BABYLON.GUI {
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             /** @hidden */
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a checkbox with a header
+                * @param title defines the label to use for the header
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the checkbox and a textBlock
+                */
+            static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel;
     }
 }
 declare module BABYLON.GUI {
@@ -747,6 +757,11 @@ declare module BABYLON.GUI {
                 */
             addControl(control: BABYLON.Nullable<Control>): Container;
             /**
+                * Removes all controls from the current container
+                * @returns the current container
+                */
+            clearControls(): Container;
+            /**
                 * Removes a control from the current container
                 * @param control defines the control to remove
                 * @returns the current container
@@ -1540,6 +1555,15 @@ declare module BABYLON.GUI {
             protected _getTypeName(): string;
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a radio button with a header
+                * @param title defines the label to use for the header
+                * @param group defines the group to use for the radio button
+                * @param isChecked defines the initial state of the radio button
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the radio button and a textBlock
+                */
+            static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel;
     }
 }
 declare module BABYLON.GUI {
@@ -1809,6 +1833,10 @@ declare module BABYLON.GUI {
     /** Class used to render a grid  */
     export class DisplayGrid extends Control {
             name?: string | undefined;
+            /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
+            displayMinorLines: boolean;
+            /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
+            displayMajorLines: boolean;
             /** Gets or sets background color (Black by default) */
             background: string;
             /** Gets or sets the width of each cell (20 by default) */
@@ -2280,6 +2308,7 @@ declare module BABYLON.GUI {
             INNERGLOW: boolean;
             BORDER: boolean;
             HOVERLIGHT: boolean;
+            TEXTURE: boolean;
             constructor();
     }
     /**
@@ -2323,7 +2352,7 @@ declare module BABYLON.GUI {
                 */
             renderHoverLight: boolean;
             /**
-                * Gets or sets the radius used to render the hover light (default is 0.15)
+                * Gets or sets the radius used to render the hover light (default is 1.0)
                 */
             hoverRadius: number;
             /**
@@ -2334,6 +2363,7 @@ declare module BABYLON.GUI {
                 * Gets or sets the hover light position in world space (default is BABYLON.Vector3.Zero())
                 */
             hoverPosition: BABYLON.Vector3;
+            albedoTexture: BABYLON.Nullable<BABYLON.BaseTexture>;
             /**
                 * Creates a new Fluent material
                 * @param name defines the name of the material
@@ -2353,4 +2383,205 @@ declare module BABYLON.GUI {
             getClassName(): string;
             static Parse(source: any, scene: BABYLON.Scene, rootUrl: string): FluentMaterial;
     }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to store data to display
+        * @see http://doc.babylonjs.com/how_to/chart3d
+        */
+    export class DataSeries {
+            /** Gets or sets the label of the series */
+            label: string;
+            /** Gets or sets the color associated with the series */
+            color: BABYLON.Color3;
+            /** Gets or sets the list of dimensions (used to filter data) */
+            dimensions: Array<string>;
+            /** Gets or sets the list of values (data to display) */
+            data: Array<any>;
+            /**
+                * Apply a list of filters to the data and return a list
+                * @param filters defines the filters to apply
+                * @returns an array containing the filtered data
+                */
+            getFilteredData(filters: {
+                    [key: string]: string;
+            }): Array<any>;
+            /**
+                * Get the different values of a dimension
+                * @param key defines the dimension name
+                * @returns An array of values
+                */
+            getDimensionValues(key: string): Array<any>;
+            /**
+                * Create a new DataSeries containing testing values
+                * @returns the new DataSeries
+                */
+            static CreateFakeData(): DataSeries;
+            /**
+                * Create a new DataSeries containing testing spatial values
+                * @returns the new DataSeries
+                */
+            static CreateFakeSpatialData(): DataSeries;
+    }
+}
+declare module BABYLON.GUI {
+    /**
+        * Base class for all chart controls
+        * @see http://doc.babylonjs.com/how_to/chart3d#charts
+        */
+    export abstract class Chart {
+            protected _dataSource: BABYLON.Nullable<DataSeries>;
+            protected _rootNode: BABYLON.TransformNode;
+            protected _dataFilters: {
+                    [key: string]: string;
+            };
+            protected _scene: BABYLON.Scene;
+            protected _blockRefresh: boolean;
+            protected _elementWidth: number;
+            protected _defaultMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** BABYLON.Observable raised when a refresh was done */
+            onRefreshObservable: BABYLON.Observable<Chart>;
+            /** BABYLON.Observable raised when a new element is created */
+            onElementCreatedObservable: BABYLON.Observable<BABYLON.Mesh>;
+            /**
+                * BABYLON.Observable raised when the point picked by the pointer events changed
+                */
+            onPickedPointChangedObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.Vector3>>;
+            /**
+                * BABYLON.Observable raised when the pointer enters an element of the chart
+             */
+            onElementEnterObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
+            /**
+                * BABYLON.Observable raised when the pointer leaves an element of the chart
+                */
+            onElementOutObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
+            /** User defined callback used to create labels */
+            labelCreationFunction: BABYLON.Nullable<(label: string, width: number, includeBackground: boolean) => BABYLON.Mesh>;
+            /** User defined callback used to apply specific setup to hover labels */
+            updateHoverLabel: BABYLON.Nullable<(meshLabel: BABYLON.Mesh) => void>;
+            /** Gets or sets the width of each element */
+            elementWidth: number;
+            /** Gets or sets the rotation of the entire chart */
+            rotation: BABYLON.Vector3;
+            /** Gets or sets the position of the entire chart */
+            position: BABYLON.Vector3;
+            /** Gets or sets the scaling of the entire chart */
+            scaling: BABYLON.Vector3;
+            /** Gets or sets the data source used by the graph */
+            dataSource: BABYLON.Nullable<DataSeries>;
+            /** Gets or sets the filters applied to data source */
+            dataFilters: {
+                    [key: string]: string;
+            };
+            /** Gets the root node associated with this graph */
+            readonly rootNode: BABYLON.TransformNode;
+            /** Gets or sets a value indicating if refresh function should be executed (useful when multiple changes will happen and you want to run refresh only at the end) */
+            blockRefresh: boolean;
+            /** Gets or sets the material used by element meshes */
+            defaultMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Gets or sets a boolean indicating if labels must be displayed */
+            displayLabels: boolean;
+            /** Gets or sets the dimension used for the labels */
+            labelDimension: string;
+            /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
+            glowHover: boolean;
+            /** Gets or sets the name of the graph */
+            name: string;
+            /**
+                * Creates a new Chart
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            protected _createDefaultMaterial(scene: BABYLON.Scene): BABYLON.Material;
+            /**
+                * Function called by the chart objects when they need a label. Could be user defined if you set this.labelCreationFunction to a custom callback
+                * @param label defines the text of the label
+                * @param width defines the expected width (height is supposed to be 1)
+                * @param includeBackground defines if a background rectangle must be added (default is true)
+                * @returns a mesh used to host the label
+                */
+            protected _addLabel(label: string, width: number, includeBackground?: boolean): BABYLON.Mesh;
+            /**
+                * Remove specific label mesh
+                * @param label defines the label mesh to remove
+                */
+            protected _removeLabel(label: BABYLON.Mesh): void;
+            /** Remove all created labels */
+            protected _removeLabels(): void;
+            /**
+                * Force the chart to redraw itself
+                * @returns the current chart
+             */
+            abstract refresh(): Chart;
+            /** Release all associated resources */
+            dispose(): void;
+            protected _clean(): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+        */
+    export class BarGraph extends Chart {
+            /** Gets or sets a boolean indicating if the background must be displayed */
+            displayBackground: boolean;
+            /** Gets or sets the margin between bars */
+            margin: number;
+            /** Gets or sets the maximum height of a bar */
+            maxBarHeight: number;
+            /**
+                * Creates a new BarGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            /**
+                * Children class can override this function to provide a new mesh (as long as it stays inside a 1x1x1 box)
+                * @param name defines the mesh name
+                * @param scene defines the hosting scene
+                * @returns a new mesh used to represent the current bar
+                */
+            protected _createBarMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
+            /**
+                * Force the graph to redraw itself
+                * @returns the current BarGraph
+             */
+            refresh(): BarGraph;
+            protected _clean(): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+        */
+    export class MapGraph extends Chart {
+            /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+            xOffset: number;
+            /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+            yOffset: number;
+            /** Gets or sets the tesselation used to build the cylinders */
+            cylinderTesselation: number;
+            /** Gets or sets the size of the world map (this will define the width) */
+            worldMapSize: number;
+            updateHoverLabel: (meshLabel: BABYLON.Mesh) => void;
+            /**
+                * Gets the material used to render the world map
+                */
+            readonly worldMapMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Sets the texture url to use for the world map */
+            worldMapUrl: string;
+            /**
+                * Creates a new MapGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, mapUrl: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            protected _createCylinderMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
+            refresh(): MapGraph;
+            protected _clean(): void;
+            dispose(): void;
+    }
 }

dist/preview release/gui/babylon.gui.module.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../Tools/gulp/babylonjs
 
 declare module 'babylonjs-gui' {
     export * from "babylonjs-gui/2D";
@@ -20,6 +20,7 @@ declare module 'babylonjs-gui/2D' {
 declare module 'babylonjs-gui/3D' {
     export * from "babylonjs-gui/3D/controls";
     export * from "babylonjs-gui/3D/materials";
+    export * from "babylonjs-gui/3D/charting";
     export * from "babylonjs-gui/3D/gui3DManager";
     export * from "babylonjs-gui/3D/vector3WithInfo";
 }
@@ -222,9 +223,10 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
                 * @param width defines the texture width (1024 by default)
                 * @param height defines the texture height (1024 by default)
                 * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
+                * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
                 * @returns a new AdvancedDynamicTexture
                 */
-            static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean): AdvancedDynamicTexture;
+            static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean): AdvancedDynamicTexture;
             /**
                 * Creates a new AdvancedDynamicTexture in fullscreen mode.
                 * In this mode the texture will rely on a layer for its rendering.
@@ -554,6 +556,13 @@ declare module 'babylonjs-gui/3D/materials' {
     export * from "babylonjs-gui/3D/materials/fluentMaterial";
 }
 
+declare module 'babylonjs-gui/3D/charting' {
+    export * from "babylonjs-gui/3D/charting/dataSeries";
+    export * from "babylonjs-gui/3D/charting/chart";
+    export * from "babylonjs-gui/3D/charting/barGraph";
+    export * from "babylonjs-gui/3D/charting/mapGraph";
+}
+
 declare module 'babylonjs-gui/3D/gui3DManager' {
     import { IDisposable, Scene, Nullable, UtilityLayerRenderer, Observable, Vector3, Material } from "babylonjs";
     import { Container3D } from "babylonjs-gui/3D/controls/container3D";
@@ -716,6 +725,7 @@ declare module 'babylonjs-gui/2D/controls/checkbox' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Measure } from "babylonjs-gui/2D/measure";
     import { Observable, Vector2 } from "babylonjs";
+    import { StackPanel } from "babylonjs-gui/2D/controls/stackPanel";
     /**
         * Class used to represent a 2D checkbox
         */
@@ -743,6 +753,13 @@ declare module 'babylonjs-gui/2D/controls/checkbox' {
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             /** @hidden */
             _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a checkbox with a header
+                * @param title defines the label to use for the header
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the checkbox and a textBlock
+                */
+            static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel;
     }
 }
 
@@ -840,6 +857,11 @@ declare module 'babylonjs-gui/2D/controls/container' {
                 */
             addControl(control: Nullable<Control>): Container;
             /**
+                * Removes all controls from the current container
+                * @returns the current container
+                */
+            clearControls(): Container;
+            /**
                 * Removes a control from the current container
                 * @param control defines the control to remove
                 * @returns the current container
@@ -1648,6 +1670,7 @@ declare module 'babylonjs-gui/2D/controls/radioButton' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Observable, Vector2 } from "babylonjs";
     import { Measure } from "babylonjs-gui/2D/measure";
+    import { StackPanel } from "babylonjs-gui/2D/controls";
     /**
         * Class used to create radio button controls
         */
@@ -1673,6 +1696,15 @@ declare module 'babylonjs-gui/2D/controls/radioButton' {
             protected _getTypeName(): string;
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a radio button with a header
+                * @param title defines the label to use for the header
+                * @param group defines the group to use for the radio button
+                * @param isChecked defines the initial state of the radio button
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the radio button and a textBlock
+                */
+            static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel;
     }
 }
 
@@ -1963,6 +1995,10 @@ declare module 'babylonjs-gui/2D/controls/displayGrid' {
     /** Class used to render a grid  */
     export class DisplayGrid extends Control {
             name?: string | undefined;
+            /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
+            displayMinorLines: boolean;
+            /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
+            displayMajorLines: boolean;
             /** Gets or sets background color (Black by default) */
             background: string;
             /** Gets or sets the width of each cell (20 by default) */
@@ -2484,6 +2520,7 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
             INNERGLOW: boolean;
             BORDER: boolean;
             HOVERLIGHT: boolean;
+            TEXTURE: boolean;
             constructor();
     }
     /**
@@ -2527,7 +2564,7 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
                 */
             renderHoverLight: boolean;
             /**
-                * Gets or sets the radius used to render the hover light (default is 0.15)
+                * Gets or sets the radius used to render the hover light (default is 1.0)
                 */
             hoverRadius: number;
             /**
@@ -2538,6 +2575,7 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
                 * Gets or sets the hover light position in world space (default is Vector3.Zero())
                 */
             hoverPosition: Vector3;
+            albedoTexture: Nullable<BaseTexture>;
             /**
                 * Creates a new Fluent material
                 * @param name defines the name of the material
@@ -2559,10 +2597,222 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
     }
 }
 
+declare module 'babylonjs-gui/3D/charting/dataSeries' {
+    import { Color3 } from "babylonjs";
+    /**
+        * Class used to store data to display
+        * @see http://doc.babylonjs.com/how_to/chart3d
+        */
+    export class DataSeries {
+            /** Gets or sets the label of the series */
+            label: string;
+            /** Gets or sets the color associated with the series */
+            color: Color3;
+            /** Gets or sets the list of dimensions (used to filter data) */
+            dimensions: Array<string>;
+            /** Gets or sets the list of values (data to display) */
+            data: Array<any>;
+            /**
+                * Apply a list of filters to the data and return a list
+                * @param filters defines the filters to apply
+                * @returns an array containing the filtered data
+                */
+            getFilteredData(filters: {
+                    [key: string]: string;
+            }): Array<any>;
+            /**
+                * Get the different values of a dimension
+                * @param key defines the dimension name
+                * @returns An array of values
+                */
+            getDimensionValues(key: string): Array<any>;
+            /**
+                * Create a new DataSeries containing testing values
+                * @returns the new DataSeries
+                */
+            static CreateFakeData(): DataSeries;
+            /**
+                * Create a new DataSeries containing testing spatial values
+                * @returns the new DataSeries
+                */
+            static CreateFakeSpatialData(): DataSeries;
+    }
+}
+
+declare module 'babylonjs-gui/3D/charting/chart' {
+    import { Nullable, TransformNode, Scene, Vector3, Observable, Mesh, AbstractMesh, Material } from "babylonjs";
+    import { DataSeries } from "babylonjs-gui/3D/charting";
+    /**
+        * Base class for all chart controls
+        * @see http://doc.babylonjs.com/how_to/chart3d#charts
+        */
+    export abstract class Chart {
+            protected _dataSource: Nullable<DataSeries>;
+            protected _rootNode: TransformNode;
+            protected _dataFilters: {
+                    [key: string]: string;
+            };
+            protected _scene: Scene;
+            protected _blockRefresh: boolean;
+            protected _elementWidth: number;
+            protected _defaultMaterial: Nullable<Material>;
+            /** Observable raised when a refresh was done */
+            onRefreshObservable: Observable<Chart>;
+            /** Observable raised when a new element is created */
+            onElementCreatedObservable: Observable<Mesh>;
+            /**
+                * Observable raised when the point picked by the pointer events changed
+                */
+            onPickedPointChangedObservable: Observable<Nullable<Vector3>>;
+            /**
+                * Observable raised when the pointer enters an element of the chart
+             */
+            onElementEnterObservable: Observable<AbstractMesh>;
+            /**
+                * Observable raised when the pointer leaves an element of the chart
+                */
+            onElementOutObservable: Observable<AbstractMesh>;
+            /** User defined callback used to create labels */
+            labelCreationFunction: Nullable<(label: string, width: number, includeBackground: boolean) => Mesh>;
+            /** User defined callback used to apply specific setup to hover labels */
+            updateHoverLabel: Nullable<(meshLabel: Mesh) => void>;
+            /** Gets or sets the width of each element */
+            elementWidth: number;
+            /** Gets or sets the rotation of the entire chart */
+            rotation: Vector3;
+            /** Gets or sets the position of the entire chart */
+            position: Vector3;
+            /** Gets or sets the scaling of the entire chart */
+            scaling: Vector3;
+            /** Gets or sets the data source used by the graph */
+            dataSource: Nullable<DataSeries>;
+            /** Gets or sets the filters applied to data source */
+            dataFilters: {
+                    [key: string]: string;
+            };
+            /** Gets the root node associated with this graph */
+            readonly rootNode: TransformNode;
+            /** Gets or sets a value indicating if refresh function should be executed (useful when multiple changes will happen and you want to run refresh only at the end) */
+            blockRefresh: boolean;
+            /** Gets or sets the material used by element meshes */
+            defaultMaterial: Nullable<Material>;
+            /** Gets or sets a boolean indicating if labels must be displayed */
+            displayLabels: boolean;
+            /** Gets or sets the dimension used for the labels */
+            labelDimension: string;
+            /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
+            glowHover: boolean;
+            /** Gets or sets the name of the graph */
+            name: string;
+            /**
+                * Creates a new Chart
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, scene?: Nullable<Scene>);
+            protected _createDefaultMaterial(scene: Scene): Material;
+            /**
+                * Function called by the chart objects when they need a label. Could be user defined if you set this.labelCreationFunction to a custom callback
+                * @param label defines the text of the label
+                * @param width defines the expected width (height is supposed to be 1)
+                * @param includeBackground defines if a background rectangle must be added (default is true)
+                * @returns a mesh used to host the label
+                */
+            protected _addLabel(label: string, width: number, includeBackground?: boolean): Mesh;
+            /**
+                * Remove specific label mesh
+                * @param label defines the label mesh to remove
+                */
+            protected _removeLabel(label: Mesh): void;
+            /** Remove all created labels */
+            protected _removeLabels(): void;
+            /**
+                * Force the chart to redraw itself
+                * @returns the current chart
+             */
+            abstract refresh(): Chart;
+            /** Release all associated resources */
+            dispose(): void;
+            protected _clean(): void;
+    }
+}
+
+declare module 'babylonjs-gui/3D/charting/barGraph' {
+    import { Nullable, Scene, Mesh } from "babylonjs";
+    import { Chart } from "babylonjs-gui/3D/charting";
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+        */
+    export class BarGraph extends Chart {
+            /** Gets or sets a boolean indicating if the background must be displayed */
+            displayBackground: boolean;
+            /** Gets or sets the margin between bars */
+            margin: number;
+            /** Gets or sets the maximum height of a bar */
+            maxBarHeight: number;
+            /**
+                * Creates a new BarGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, scene?: Nullable<Scene>);
+            /**
+                * Children class can override this function to provide a new mesh (as long as it stays inside a 1x1x1 box)
+                * @param name defines the mesh name
+                * @param scene defines the hosting scene
+                * @returns a new mesh used to represent the current bar
+                */
+            protected _createBarMesh(name: string, scene: Scene): Mesh;
+            /**
+                * Force the graph to redraw itself
+                * @returns the current BarGraph
+             */
+            refresh(): BarGraph;
+            protected _clean(): void;
+    }
+}
+
+declare module 'babylonjs-gui/3D/charting/mapGraph' {
+    import { Chart } from "babylonjs-gui/3D/charting";
+    import { Scene, Nullable, Mesh, Material } from "babylonjs";
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+        */
+    export class MapGraph extends Chart {
+            /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+            xOffset: number;
+            /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+            yOffset: number;
+            /** Gets or sets the tesselation used to build the cylinders */
+            cylinderTesselation: number;
+            /** Gets or sets the size of the world map (this will define the width) */
+            worldMapSize: number;
+            updateHoverLabel: (meshLabel: Mesh) => void;
+            /**
+                * Gets the material used to render the world map
+                */
+            readonly worldMapMaterial: Nullable<Material>;
+            /** Sets the texture url to use for the world map */
+            worldMapUrl: string;
+            /**
+                * Creates a new MapGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, mapUrl: string, scene?: Nullable<Scene>);
+            protected _createCylinderMesh(name: string, scene: Scene): Mesh;
+            refresh(): MapGraph;
+            protected _clean(): void;
+            dispose(): void;
+    }
+}
+
 
 /*BabylonJS GUI*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../Tools/gulp/babylonjs
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
@@ -2742,9 +2992,10 @@ declare module BABYLON.GUI {
                 * @param width defines the texture width (1024 by default)
                 * @param height defines the texture height (1024 by default)
                 * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
+                * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
                 * @returns a new AdvancedDynamicTexture
                 */
-            static CreateForMesh(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean): AdvancedDynamicTexture;
+            static CreateForMesh(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean): AdvancedDynamicTexture;
             /**
                 * Creates a new AdvancedDynamicTexture in fullscreen mode.
                 * In this mode the texture will rely on a layer for its rendering.
@@ -3046,6 +3297,8 @@ declare module BABYLON.GUI {
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
+}
+declare module BABYLON.GUI {
     /**
         * Class used to manage 3D user interface
         * @see http://doc.babylonjs.com/how_to/gui3d
@@ -3221,6 +3474,13 @@ declare module BABYLON.GUI {
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             /** @hidden */
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a checkbox with a header
+                * @param title defines the label to use for the header
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the checkbox and a textBlock
+                */
+            static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel;
     }
 }
 declare module BABYLON.GUI {
@@ -3309,6 +3569,11 @@ declare module BABYLON.GUI {
                 */
             addControl(control: BABYLON.Nullable<Control>): Container;
             /**
+                * Removes all controls from the current container
+                * @returns the current container
+                */
+            clearControls(): Container;
+            /**
                 * Removes a control from the current container
                 * @param control defines the control to remove
                 * @returns the current container
@@ -4102,6 +4367,15 @@ declare module BABYLON.GUI {
             protected _getTypeName(): string;
             _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            /**
+                * Utility function to easily create a radio button with a header
+                * @param title defines the label to use for the header
+                * @param group defines the group to use for the radio button
+                * @param isChecked defines the initial state of the radio button
+                * @param onValueChanged defines the callback to call when value changes
+                * @returns a StackPanel containing the radio button and a textBlock
+                */
+            static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel;
     }
 }
 declare module BABYLON.GUI {
@@ -4371,6 +4645,10 @@ declare module BABYLON.GUI {
     /** Class used to render a grid  */
     export class DisplayGrid extends Control {
             name?: string | undefined;
+            /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
+            displayMinorLines: boolean;
+            /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
+            displayMajorLines: boolean;
             /** Gets or sets background color (Black by default) */
             background: string;
             /** Gets or sets the width of each cell (20 by default) */
@@ -4842,6 +5120,7 @@ declare module BABYLON.GUI {
             INNERGLOW: boolean;
             BORDER: boolean;
             HOVERLIGHT: boolean;
+            TEXTURE: boolean;
             constructor();
     }
     /**
@@ -4885,7 +5164,7 @@ declare module BABYLON.GUI {
                 */
             renderHoverLight: boolean;
             /**
-                * Gets or sets the radius used to render the hover light (default is 0.15)
+                * Gets or sets the radius used to render the hover light (default is 1.0)
                 */
             hoverRadius: number;
             /**
@@ -4896,6 +5175,7 @@ declare module BABYLON.GUI {
                 * Gets or sets the hover light position in world space (default is BABYLON.Vector3.Zero())
                 */
             hoverPosition: BABYLON.Vector3;
+            albedoTexture: BABYLON.Nullable<BABYLON.BaseTexture>;
             /**
                 * Creates a new Fluent material
                 * @param name defines the name of the material
@@ -4915,4 +5195,205 @@ declare module BABYLON.GUI {
             getClassName(): string;
             static Parse(source: any, scene: BABYLON.Scene, rootUrl: string): FluentMaterial;
     }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to store data to display
+        * @see http://doc.babylonjs.com/how_to/chart3d
+        */
+    export class DataSeries {
+            /** Gets or sets the label of the series */
+            label: string;
+            /** Gets or sets the color associated with the series */
+            color: BABYLON.Color3;
+            /** Gets or sets the list of dimensions (used to filter data) */
+            dimensions: Array<string>;
+            /** Gets or sets the list of values (data to display) */
+            data: Array<any>;
+            /**
+                * Apply a list of filters to the data and return a list
+                * @param filters defines the filters to apply
+                * @returns an array containing the filtered data
+                */
+            getFilteredData(filters: {
+                    [key: string]: string;
+            }): Array<any>;
+            /**
+                * Get the different values of a dimension
+                * @param key defines the dimension name
+                * @returns An array of values
+                */
+            getDimensionValues(key: string): Array<any>;
+            /**
+                * Create a new DataSeries containing testing values
+                * @returns the new DataSeries
+                */
+            static CreateFakeData(): DataSeries;
+            /**
+                * Create a new DataSeries containing testing spatial values
+                * @returns the new DataSeries
+                */
+            static CreateFakeSpatialData(): DataSeries;
+    }
+}
+declare module BABYLON.GUI {
+    /**
+        * Base class for all chart controls
+        * @see http://doc.babylonjs.com/how_to/chart3d#charts
+        */
+    export abstract class Chart {
+            protected _dataSource: BABYLON.Nullable<DataSeries>;
+            protected _rootNode: BABYLON.TransformNode;
+            protected _dataFilters: {
+                    [key: string]: string;
+            };
+            protected _scene: BABYLON.Scene;
+            protected _blockRefresh: boolean;
+            protected _elementWidth: number;
+            protected _defaultMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** BABYLON.Observable raised when a refresh was done */
+            onRefreshObservable: BABYLON.Observable<Chart>;
+            /** BABYLON.Observable raised when a new element is created */
+            onElementCreatedObservable: BABYLON.Observable<BABYLON.Mesh>;
+            /**
+                * BABYLON.Observable raised when the point picked by the pointer events changed
+                */
+            onPickedPointChangedObservable: BABYLON.Observable<BABYLON.Nullable<BABYLON.Vector3>>;
+            /**
+                * BABYLON.Observable raised when the pointer enters an element of the chart
+             */
+            onElementEnterObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
+            /**
+                * BABYLON.Observable raised when the pointer leaves an element of the chart
+                */
+            onElementOutObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
+            /** User defined callback used to create labels */
+            labelCreationFunction: BABYLON.Nullable<(label: string, width: number, includeBackground: boolean) => BABYLON.Mesh>;
+            /** User defined callback used to apply specific setup to hover labels */
+            updateHoverLabel: BABYLON.Nullable<(meshLabel: BABYLON.Mesh) => void>;
+            /** Gets or sets the width of each element */
+            elementWidth: number;
+            /** Gets or sets the rotation of the entire chart */
+            rotation: BABYLON.Vector3;
+            /** Gets or sets the position of the entire chart */
+            position: BABYLON.Vector3;
+            /** Gets or sets the scaling of the entire chart */
+            scaling: BABYLON.Vector3;
+            /** Gets or sets the data source used by the graph */
+            dataSource: BABYLON.Nullable<DataSeries>;
+            /** Gets or sets the filters applied to data source */
+            dataFilters: {
+                    [key: string]: string;
+            };
+            /** Gets the root node associated with this graph */
+            readonly rootNode: BABYLON.TransformNode;
+            /** Gets or sets a value indicating if refresh function should be executed (useful when multiple changes will happen and you want to run refresh only at the end) */
+            blockRefresh: boolean;
+            /** Gets or sets the material used by element meshes */
+            defaultMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Gets or sets a boolean indicating if labels must be displayed */
+            displayLabels: boolean;
+            /** Gets or sets the dimension used for the labels */
+            labelDimension: string;
+            /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
+            glowHover: boolean;
+            /** Gets or sets the name of the graph */
+            name: string;
+            /**
+                * Creates a new Chart
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            protected _createDefaultMaterial(scene: BABYLON.Scene): BABYLON.Material;
+            /**
+                * Function called by the chart objects when they need a label. Could be user defined if you set this.labelCreationFunction to a custom callback
+                * @param label defines the text of the label
+                * @param width defines the expected width (height is supposed to be 1)
+                * @param includeBackground defines if a background rectangle must be added (default is true)
+                * @returns a mesh used to host the label
+                */
+            protected _addLabel(label: string, width: number, includeBackground?: boolean): BABYLON.Mesh;
+            /**
+                * Remove specific label mesh
+                * @param label defines the label mesh to remove
+                */
+            protected _removeLabel(label: BABYLON.Mesh): void;
+            /** Remove all created labels */
+            protected _removeLabels(): void;
+            /**
+                * Force the chart to redraw itself
+                * @returns the current chart
+             */
+            abstract refresh(): Chart;
+            /** Release all associated resources */
+            dispose(): void;
+            protected _clean(): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+        */
+    export class BarGraph extends Chart {
+            /** Gets or sets a boolean indicating if the background must be displayed */
+            displayBackground: boolean;
+            /** Gets or sets the margin between bars */
+            margin: number;
+            /** Gets or sets the maximum height of a bar */
+            maxBarHeight: number;
+            /**
+                * Creates a new BarGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            /**
+                * Children class can override this function to provide a new mesh (as long as it stays inside a 1x1x1 box)
+                * @param name defines the mesh name
+                * @param scene defines the hosting scene
+                * @returns a new mesh used to represent the current bar
+                */
+            protected _createBarMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
+            /**
+                * Force the graph to redraw itself
+                * @returns the current BarGraph
+             */
+            refresh(): BarGraph;
+            protected _clean(): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to render bar graphs
+        * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+        */
+    export class MapGraph extends Chart {
+            /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+            xOffset: number;
+            /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+            yOffset: number;
+            /** Gets or sets the tesselation used to build the cylinders */
+            cylinderTesselation: number;
+            /** Gets or sets the size of the world map (this will define the width) */
+            worldMapSize: number;
+            updateHoverLabel: (meshLabel: BABYLON.Mesh) => void;
+            /**
+                * Gets the material used to render the world map
+                */
+            readonly worldMapMaterial: BABYLON.Nullable<BABYLON.Material>;
+            /** Sets the texture url to use for the world map */
+            worldMapUrl: string;
+            /**
+                * Creates a new MapGraph
+                * @param name defines the name of the graph
+                * @param scene defines the hosting scene
+                */
+            constructor(name: string, mapUrl: string, scene?: BABYLON.Nullable<BABYLON.Scene>);
+            protected _createCylinderMesh(name: string, scene: BABYLON.Scene): BABYLON.Mesh;
+            refresh(): MapGraph;
+            protected _clean(): void;
+            dispose(): void;
+    }
 }

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/inspector/babylon.inspector.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../Tools/gulp/babylonjs
 declare module INSPECTOR {
 }
 declare module INSPECTOR {
@@ -27,8 +27,8 @@ declare module INSPECTOR {
             static DOCUMENT: HTMLDocument;
             /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
             static WINDOW: Window;
-            onGUILoaded: BABYLON.Observable<typeof import("babylonjs-gui")>;
-            static GUIObject: typeof import("babylonjs-gui");
+            onGUILoaded: BABYLON.Observable<any>;
+            static GUIObject: any;
             /** The inspector is created with the given engine.
                 * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
                 * If the parameter 'popup' is true, the inspector is created in another popup.
@@ -239,7 +239,7 @@ declare module INSPECTOR {
     };
 }
 declare module INSPECTOR {
-    export type GUITyping = typeof import("babylonjs-gui");
+    export type GUITyping = any;
     export let guiLoaded: boolean;
     /**
        * Function that add gui objects properties to the variable PROPERTIES
@@ -284,7 +284,7 @@ declare module INSPECTOR {
 }
 declare module INSPECTOR {
     export class GUIAdapter extends Adapter implements IToolVisible {
-        constructor(obj: import("babylonjs-gui").Control);
+        constructor(obj: any);
         /** Returns the name displayed in the tree */
         id(): string;
         /** Returns the type of this object - displayed in the tree */

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -1,6 +1,6 @@
 /*BabylonJS Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../Tools/gulp/babylonjs
 
 declare module 'babylonjs-inspector' {
     export * from 'babylonjs-inspector/adapters';
@@ -101,14 +101,14 @@ declare module 'babylonjs-inspector/treetools' {
 
 declare module 'babylonjs-inspector/Inspector' {
     import { AbstractMesh, Nullable, Scene, Observable } from "babylonjs";
-    import "../sass/main.scss";
+    
     export class Inspector {
             /** The HTML document relative to this inspector (the window or the popup depending on its mode) */
             static DOCUMENT: HTMLDocument;
             /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
             static WINDOW: Window;
-            onGUILoaded: Observable<typeof import("babylonjs-gui")>;
-            static GUIObject: typeof import("babylonjs-gui");
+            onGUILoaded: Observable<any>;
+            static GUIObject: any;
             /** The inspector is created with the given engine.
                 * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
                 * If the parameter 'popup' is true, the inspector is created in another popup.
@@ -322,7 +322,7 @@ declare module 'babylonjs-inspector/properties' {
 }
 
 declare module 'babylonjs-inspector/properties_gui' {
-    export type GUITyping = typeof import("babylonjs-gui");
+    export type GUITyping = any;
     export let guiLoaded: boolean;
     /**
        * Function that add gui objects properties to the variable PROPERTIES
@@ -381,7 +381,7 @@ declare module 'babylonjs-inspector/adapters/GUIAdapter' {
     import { IToolVisible } from "babylonjs-inspector/treetools/Checkbox";
     import { Adapter } from "babylonjs-inspector/adapters/Adapter";
     export class GUIAdapter extends Adapter implements IToolVisible {
-        constructor(obj: import("babylonjs-gui").Control);
+        constructor(obj: any);
         /** Returns the name displayed in the tree */
         id(): string;
         /** Returns the type of this object - displayed in the tree */
@@ -1331,7 +1331,7 @@ declare module 'babylonjs-inspector/treetools/SoundInteractions' {
 
 /*BabylonJS Inspector*/
 // Dependencies for this module:
-//   ../../../../Tools/Gulp/babylonjs
+//   ../../../../Tools/gulp/babylonjs
 declare module INSPECTOR {
 }
 declare module INSPECTOR {
@@ -1358,8 +1358,8 @@ declare module INSPECTOR {
             static DOCUMENT: HTMLDocument;
             /** The HTML window. In popup mode, it's the popup itself. Otherwise, it's the current tab */
             static WINDOW: Window;
-            onGUILoaded: BABYLON.Observable<typeof import("babylonjs-gui")>;
-            static GUIObject: typeof import("babylonjs-gui");
+            onGUILoaded: BABYLON.Observable<any>;
+            static GUIObject: any;
             /** The inspector is created with the given engine.
                 * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.
                 * If the parameter 'popup' is true, the inspector is created in another popup.
@@ -1570,7 +1570,7 @@ declare module INSPECTOR {
     };
 }
 declare module INSPECTOR {
-    export type GUITyping = typeof import("babylonjs-gui");
+    export type GUITyping = any;
     export let guiLoaded: boolean;
     /**
        * Function that add gui objects properties to the variable PROPERTIES
@@ -1615,7 +1615,7 @@ declare module INSPECTOR {
 }
 declare module INSPECTOR {
     export class GUIAdapter extends Adapter implements IToolVisible {
-        constructor(obj: import("babylonjs-gui").Control);
+        constructor(obj: any);
         /** Returns the name displayed in the tree */
         id(): string;
         /** Returns the type of this object - displayed in the tree */

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.13"
+        "babylonjs-gltf2interface": "3.3.0-alpha.14"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -680,6 +680,9 @@ var BABYLON;
              * @param babylonTransformNode Babylon mesh used as the source for the transformation data
              */
             _Exporter.prototype.setNodeTransformation = function (node, babylonTransformNode) {
+                if (!babylonTransformNode.getPivotPoint().equalsToFloats(0, 0, 0)) {
+                    BABYLON.Tools.Warn("Pivot points are not supported in the glTF serializer");
+                }
                 if (!babylonTransformNode.position.equalsToFloats(0, 0, 0)) {
                     node.translation = this._convertToRightHandedSystem ? GLTF2._GLTFUtilities._GetRightHandedPositionVector3(babylonTransformNode.position).asArray() : babylonTransformNode.position.asArray();
                 }

dist/preview release/serializers/babylonjs.serializers.js

@@ -841,6 +841,9 @@ var BABYLON;
              * @param babylonTransformNode Babylon mesh used as the source for the transformation data
              */
             _Exporter.prototype.setNodeTransformation = function (node, babylonTransformNode) {
+                if (!babylonTransformNode.getPivotPoint().equalsToFloats(0, 0, 0)) {
+                    BABYLON.Tools.Warn("Pivot points are not supported in the glTF serializer");
+                }
                 if (!babylonTransformNode.position.equalsToFloats(0, 0, 0)) {
                     node.translation = this._convertToRightHandedSystem ? GLTF2._GLTFUtilities._GetRightHandedPositionVector3(babylonTransformNode.position).asArray() : babylonTransformNode.position.asArray();
                 }

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-alpha.13"
+        "babylonjs-gltf2interface": "3.3.0-alpha.14"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/viewer/babylon.viewer.d.ts

@@ -4,8 +4,8 @@
 declare module "babylonjs-loaders"{ export=BABYLON;}
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
-//   ../../../../../Tools/Gulp/babylonjs
-//   ../../../../../Tools/Gulp/babylonjs-loaders
+//   ../../../../../Tools/gulp/babylonjs
+//   ../../../../../Tools/gulp/babylonjs-loaders
 declare module BabylonViewer {
     /**
         * BabylonJS Viewer
@@ -639,6 +639,7 @@ declare module BabylonViewer {
             /**
                 * Apply a material configuration to a material
                 * @param material BABYLON.Material to apply configuration to
+                * @hidden
                 */
             _applyModelMaterialConfiguration(material: BABYLON.Material): void;
             /**

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -5,8 +5,8 @@ declare module "babylonjs-loaders"{ export=BABYLON;}
 
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
-//   ../../../../../Tools/Gulp/babylonjs
-//   ../../../../../Tools/Gulp/babylonjs-loaders
+//   ../../../../../Tools/gulp/babylonjs
+//   ../../../../../Tools/gulp/babylonjs-loaders
 
 declare module 'babylonjs-viewer' {
     import { mapperManager } from 'babylonjs-viewer/configuration/mappers';
@@ -696,6 +696,7 @@ declare module 'babylonjs-viewer/model/viewerModel' {
             /**
                 * Apply a material configuration to a material
                 * @param material Material to apply configuration to
+                * @hidden
                 */
             _applyModelMaterialConfiguration(material: Material): void;
             /**

dist/preview release/what's new.md

@@ -2,11 +2,11 @@
 
 ## Major updates
 
-- Added new `MixMaterial` to the Materials Library allowing to mix up to 8 textures ([julien-moreau](https://github.com/julien-moreau))
-- Added new `PhotoDome` object to display 360 photos. [Demo](https://www.babylonjs-playground.com/#14KRGG#0) ([SzeyinLee](https://github.com/SzeyinLee))
-- New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
-- Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
-- New GUI control: the [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
+- GUI
+  - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
+  - New 3D chart controls. [Complete doc + demos](http://doc.babylonjs.com/how_to/chart3d) ([Deltakosh](https://github.com/deltakosh))
+  - New GUI control: [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
+  - New GUI control: [InputPassword](https://doc.babylonjs.com/how_to/gui#inputpassword) ([theom](https://github.com/theom))
 - Gizmo Support ([TrevorDev](https://github.com/TrevorDev))
   - Gizmo and GizmoManager classes used to manipulate meshes in a scene. Gizmo types include: position, rotation, scale and bounding box. [Doc](http://doc.babylonjs.com/how_to/gizmo) ([TrevorDev](https://github.com/TrevorDev))
   - New behaviors: PointerDragBehavior, SixDofDragBehavior and MultiPointerScaleBehavior to enable smooth drag and drop/scaling with mouse or 6dof controller on a mesh. [Doc](http://doc.babylonjs.com/how_to/meshbehavior) ([TrevorDev](https://github.com/TrevorDev))
@@ -15,6 +15,7 @@
   - Ability to customize meshes on gizmos ([TrevorDev](https://github.com/TrevorDev))
   - Added ignoreChildren field to bounding box to save performance when using heavily nested meshes ([TrevorDev](https://github.com/TrevorDev))
   - Add uniform scaling drag support to scale gizmo ([TrevorDev](https://github.com/TrevorDev))
+  - Support interacting with child elements ([TrevorDev](https://github.com/TrevorDev))
 - Particle system improvements ([Deltakosh](https://github.com/deltakosh))
   - Added a ParticleHelper class to create some pre-configured particle systems in a one-liner method style. [Doc](https://doc.babylonjs.com/How_To/ParticleHelper) ([Deltakosh](https://github.com/deltakosh)) / ([DevChris](https://github.com/yovanoc))
   - Improved CPU particles rendering performance (up to x2 on low end devices)
@@ -36,21 +37,27 @@
   - Added support for limit velocty gradients. [Doc](https://doc.babylonjs.com/babylon101/particles#limit-velocity-over-time)
   - Added support for noise textures. [Doc](http://doc.babylonjs.com/babylon101/particles#noise-texture)
 - Added SceneComponent to help decoupling Scene from its components. ([sebavan](http://www.github.com/sebavan))
+- Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
 - Playground can now be used with TypeScript directly!. [Demo](https://www.babylonjs-playground.com/ts.html) ([Deltakosh](https://github.com/deltakosh), [NasimiAsl](https://github.com/NasimiAsl))
-- New GUI control: [InputPassword](https://doc.babylonjs.com/how_to/gui#inputpassword) ([theom](https://github.com/theom))
-- Added dead key support and before key add observable to InputText. [Doc](https://doc.babylonjs.com/how_to/gui#using-onbeforekeyaddobservable-for-extended-keyboard-layouts-and-input-masks)([theom](https://github.com/theom))
 - GUI and Inspector are now ES-Modules ([RaananW](https://github.com/RaananW))
 - Added support for noise procedural textures. [Doc](http://doc.babylonjs.com/how_to/how_to_use_procedural_textures#noise-procedural-texture) ([Deltakosh](https://github.com/deltakosh))
+- Added new `PhotoDome` object to display 360 photos. [Demo](https://www.babylonjs-playground.com/#14KRGG#0) ([SzeyinLee](https://github.com/SzeyinLee))
+- Added Video Recorder [Documentation](http://localhost:8080/How_To/Render_Scene_on_a_Video) ([sebavan](http://www.github.com/sebavan))
 
 ## Updates
 
 - All NPM packages have `latest`and `preview` streams [#3055](https://github.com/BabylonJS/Babylon.js/issues/3055) ([RaananW](https://github.com/RaananW))
 - Added New Tools Tab in the inspector (env texture and screenshot tools so far) ([sebavan](http://www.github.com/sebavan))
-- Added `TextBlock.computeExpectedHeight`, added `TextWrapping.Ellipsis` as `TextBlock.wordWrapping` possible value ([adrientetar](https://github.com/adrientetar))
 - Moved to gulp 4, updated dependencies to latest ([RaananW](https://github.com/RaananW))
 
+### GUI
+- Added dead key support and before key add observable to InputText. [Doc](https://doc.babylonjs.com/how_to/gui#using-onbeforekeyaddobservable-for-extended-keyboard-layouts-and-input-masks)([theom](https://github.com/theom))
+- Added `TextBlock.computeExpectedHeight`, added `TextWrapping.Ellipsis` as `TextBlock.wordWrapping` possible value ([adrientetar](https://github.com/adrientetar))
+- New vertical mode for sliders in 2D GUI. [Demo](https://www.babylonjs-playground.com/#U9AC0N#53) ([Saket Saurabh](https://github.com/ssaket))
+
 ### Core Engine
 
+- Added new `MixMaterial` to the Materials Library allowing to mix up to 8 textures ([julien-moreau](https://github.com/julien-moreau))
 - Added new `BoundingInfo.scale()` function to let users control the size of the bounding info ([Deltakosh](https://github.com/deltakosh))
 - Added new `Animatable.waitAsync` function to use Promises with animations. Demo [Here](https://www.babylonjs-playground.com/#HZBCXR) ([Deltakosh](https://github.com/deltakosh))
 - Added the choice of [forming a closed loop](http://doc.babylonjs.com/how_to/how_to_use_curve3#catmull-rom-spline) to the catmull-rom-spline curve3 ([johnk](https://github.com/babylonjsguide))
@@ -77,7 +84,6 @@
 - Added ```onUserActionRequestedObservable``` to workaround and detect autoplay video policy restriction on VideoTexture ([sebavan](http://www.github.com/sebavan))
 - `Sound` now accepts `MediaStream` as source to enable easier WebAudio and WebRTC integrations ([menduz](https://github.com/menduz))
 - Vector x, y and z constructor parameters are now optional and default to 0 ([TrevorDev](https://github.com/TrevorDev))
-- New vertical mode for sliders in 2D GUI. [Demo](https://www.babylonjs-playground.com/#U9AC0N#53) ([Saket Saurabh](https://github.com/ssaket))
 - Added and removed camera methods in the default pipeline ([TrevorDev](https://github.com/TrevorDev))
 - Added internal texture `format` support for RenderTargetCubeTexture ([PeapBoy](https://github.com/NicolasBuecher))
 - Added canvas toBlob polyfill in tools ([sebavan](http://www.github.com/sebavan))
@@ -90,9 +96,10 @@
 - Added falloff type per light to prevent material only inconsistencies [Issue 4148](https://github.com/BabylonJS/Babylon.js/issues/4148) ([sebavan](http://www.github.com/sebavan))
 - Added WeightedSound; selects one from many Sounds with random weight for playback. ([najadojo](https://github.com/najadojo))
 - Added HDR support to ReflectionProbe ([Deltakosh](https://github.com/deltakosh))
-- Added Video Recorder [Issue 4708](https://github.com/BabylonJS/Babylon.js/issues/4708) ([sebavan](http://www.github.com/sebavan))
 - Added ACES ToneMapping to the image processing to help getting more parity with other engines ([sebavan](http://www.github.com/sebavan))
 - Added Image Processing to the particle system to allow consistency in one pass forward rendering scenes ([sebavan](http://www.github.com/sebavan))
+- Added Video Recorder [Issue 4708](https://github.com/BabylonJS/Babylon.js/issues/4708) ([sebavan](http://www.github.com/sebavan))
+- Added support for main WebGL2 texture formats ([PeapBoy](https://github.com/NicolasBuecher))
 
 ### glTF Loader
 
@@ -141,6 +148,9 @@
 - Initializing gamepadManager should register the gamepad update events ([TrevorDev](https://github.com/TrevorDev))
 - Do not generate mipmaps for RawCubeTexture if OES_texture_float_linear and/or EXT_color_buffer_float extensions are not supported ([PeapBoy](https://github.com/NicolasBuecher))
 - Do not modify passed camera array parameter when creating a default pipeline ([TrevorDev](https://github.com/TrevorDev))
+- Fixed issue where gaze trackers were appearing even after leaving VR ([atulyar](https://github.com/atulyar))
+- AdvancedDynamicTexture should not overwrite skipOnPointerObservable to false ([TrevorDev](https://github.com/TrevorDev))
+- Fixed issue where VRExperienceHelper.onExitingVR observable was being fired twice ([atulyar](https://github.com/atulyar))
 
 ### Core Engine
 

gui/src/2D/advancedDynamicTexture.ts

@@ -603,9 +603,13 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             let y = (scene.pointerY / engine.getHardwareScalingLevel() - viewport.y * engine.getRenderHeight()) / viewport.height;
 
             this._shouldBlockPointer = false;
+            // Do picking modifies _shouldBlockPointer
             this._doPicking(x, y, pi.type, (pi.event as PointerEvent).pointerId || 0, pi.event.button);
-
-            pi.skipOnPointerObservable = this._shouldBlockPointer;
+            
+            // Avoid overwriting a true skipOnPointerObservable to false 
+            if(this._shouldBlockPointer){
+                pi.skipOnPointerObservable = this._shouldBlockPointer;
+            }
         });
 
         this._attachToOnPointerOut(scene);
@@ -705,17 +709,25 @@ export class AdvancedDynamicTexture extends DynamicTexture {
      * @param width defines the texture width (1024 by default)
      * @param height defines the texture height (1024 by default)
      * @param supportPointerMove defines a boolean indicating if the texture must capture move events (true by default)
+     * @param onlyAlphaTesting defines a boolean indicating that alpha blending will not be used (only alpha testing) (false by default)
      * @returns a new AdvancedDynamicTexture
      */
-    public static CreateForMesh(mesh: AbstractMesh, width = 1024, height = 1024, supportPointerMove = true): AdvancedDynamicTexture {
+    public static CreateForMesh(mesh: AbstractMesh, width = 1024, height = 1024, supportPointerMove = true, onlyAlphaTesting = false): AdvancedDynamicTexture {
         var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE);
 
         var material = new StandardMaterial("AdvancedDynamicTextureMaterial", mesh.getScene());
         material.backFaceCulling = false;
         material.diffuseColor = Color3.Black();
         material.specularColor = Color3.Black();
-        material.emissiveTexture = result;
-        material.opacityTexture = result;
+
+        if (onlyAlphaTesting) {
+            material.diffuseTexture = result;
+            material.emissiveTexture = result;
+            result.hasAlpha = true;    
+        } else {
+            material.emissiveTexture = result;
+            material.opacityTexture = result;   
+        }
 
         mesh.material = material;
 

gui/src/2D/controls/checkbox.ts

@@ -1,6 +1,8 @@
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { Observable, Vector2 } from "babylonjs";
+import { StackPanel } from "./stackPanel";
+import { TextBlock } from "./textBlock";
 
 /**
  * Class used to represent a 2D checkbox
@@ -142,4 +144,34 @@ export class Checkbox extends Control {
 
         return true;
     }
+
+    /**
+     * Utility function to easily create a checkbox with a header
+     * @param title defines the label to use for the header
+     * @param onValueChanged defines the callback to call when value changes
+     * @returns a StackPanel containing the checkbox and a textBlock
+     */
+    public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {
+        var panel = new StackPanel();
+        panel.isVertical = false;
+        panel.height = "30px";
+
+        var checkbox = new Checkbox();
+        checkbox.width = "20px";
+        checkbox.height = "20px";
+        checkbox.isChecked = true;
+        checkbox.color = "green";
+        checkbox.onIsCheckedChangedObservable.add(onValueChanged);
+        panel.addControl(checkbox);    
+    
+        var header = new TextBlock();
+        header.text = title;
+        header.width = "180px";
+        header.paddingLeft = "5px";
+        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        header.color = "white";
+        panel.addControl(header); 
+
+        return panel;
+    }
 }   

gui/src/2D/controls/radioButton.ts

@@ -1,6 +1,7 @@
 import { Control } from "./control";
 import { Observable, Vector2 } from "babylonjs";
 import { Measure } from "../measure";
+import { StackPanel, TextBlock } from ".";
 
 /**
  * Class used to create radio button controls
@@ -169,4 +170,37 @@ export class RadioButton extends Control {
 
         return true;
     }
+
+    /**
+     * Utility function to easily create a radio button with a header
+     * @param title defines the label to use for the header
+     * @param group defines the group to use for the radio button
+     * @param isChecked defines the initial state of the radio button
+     * @param onValueChanged defines the callback to call when value changes
+     * @returns a StackPanel containing the radio button and a textBlock
+     */
+    public static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel {
+        var panel = new StackPanel();
+        panel.isVertical = false;
+        panel.height = "30px";
+
+        var radio = new RadioButton();
+        radio.width = "20px";
+        radio.height = "20px";
+        radio.isChecked = isChecked;
+        radio.color = "green";
+        radio.group = group;
+        radio.onIsCheckedChangedObservable.add((value) => onValueChanged(radio, value));
+        panel.addControl(radio);    
+    
+        var header = new TextBlock();
+        header.text = title;
+        header.width = "180px";
+        header.paddingLeft = "5px";
+        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        header.color = "white";
+        panel.addControl(header); 
+
+        return panel;
+    }
 }   

gui/src/3D/charting/barGraph.ts

@@ -1,54 +1,48 @@
-import { Nullable, Scene, Mesh, StandardMaterial, Material, Animation, Observer, Vector3, GlowLayer, Engine, AbstractMesh } from "babylonjs";
+import { Nullable, Scene, Mesh, StandardMaterial, Animation, Engine, Matrix } from "babylonjs";
 import { Chart } from ".";
 import { AdvancedDynamicTexture, DisplayGrid } from "../../2D";
-import { FluentMaterial } from "../materials";
 
-/** Class used to render bar graphs */
+/** 
+ * Class used to render bar graphs 
+ * @see http://doc.babylonjs.com/how_to/chart3d#bargraph
+ */
 export class BarGraph extends Chart {
     private _margin = 1;
-    private _barWidth = 2
     private _maxBarHeight = 10;
-    private _defaultMaterial: Nullable<Material>;
-    protected _ownDefaultMaterial = false;
     private _barMeshes: Nullable<Array<Mesh>>;
     private _backgroundMesh: Nullable<Mesh>;
     private _backgroundADT : Nullable<AdvancedDynamicTexture>;
-
-    private _pickedPointObserver: Nullable<Observer<Vector3>>;
-
-    private _glowLayer: GlowLayer;
-    
-    private _onElementEnterObserver: Nullable<Observer<AbstractMesh>>;
-    private _onElementOutObserver: Nullable<Observer<AbstractMesh>>;
     
-    private _labelDimension: string;
+    private _displayBackground = true;
+    private _backgroundResolution = 512;
+    private _backgroundTickCount = 5;
 
-    /** Gets or sets the margin between bars */
-    public get margin(): number {
-        return this._margin;
+    /** Gets or sets a boolean indicating if the background must be displayed */
+    public get displayBackground(): boolean {
+        return this._displayBackground;
     }
 
-    public set margin(value: number) {
-        if (this._margin === value) {
+    public set displayBackground(value: boolean) {
+        if (this._displayBackground === value) {
             return;
         }
 
-        this._margin = value;
+        this._displayBackground = value;
 
         this.refresh();
-    }
+    }     
 
-    /** Gets or sets the with of each bar */
-    public get barWidth(): number {
-        return this._barWidth;
+    /** Gets or sets the margin between bars */
+    public get margin(): number {
+        return this._margin;
     }
 
-    public set barWidth(value: number) {
-        if (this._barWidth === value) {
+    public set margin(value: number) {
+        if (this._margin === value) {
             return;
         }
 
-        this._barWidth = value;
+        this._margin = value;
 
         this.refresh();
     }
@@ -68,36 +62,6 @@ export class BarGraph extends Chart {
         this.refresh();
     }
 
-    /** Gets or sets the dimension used for the labels */
-    public get labelDimension(): string {
-        return this._labelDimension;
-    }
-
-    public set labelDimension(value: string) {
-        if (this._labelDimension === value) {
-            return;
-        }
-
-        this._labelDimension = value;
-
-        this.refresh();
-    }
-
-    /** Gets or sets the material used by bar meshes */
-    public get defaultMaterial(): Nullable<Material> {
-        return this._defaultMaterial;
-    }
-
-    public set defaultMaterial(value: Nullable<Material>) {
-        if (this._defaultMaterial === value) {
-            return;
-        }
-
-        this._defaultMaterial = value;
-
-        this.refresh();
-    }
-
     /**
      * Creates a new BarGraph
      * @param name defines the name of the graph
@@ -105,45 +69,6 @@ export class BarGraph extends Chart {
      */
     constructor(name: string, scene: Nullable<Scene> = Engine.LastCreatedScene) {
         super(name, scene);
-
-        this._glowLayer = new GlowLayer("glow", scene!);
-
-        let activeBar: Nullable<Mesh>;
-        this._onElementEnterObserver = this.onElementEnterObservable.add(mesh => {
-            activeBar = <Mesh>mesh;
-        });
-
-        this._onElementOutObserver = this.onElementOutObservable.add(mesh => {
-            activeBar = null;
-        });
-
-        this._glowLayer.customEmissiveColorSelector = (mesh, subMesh, material, result) => {
-            if (mesh === activeBar) {
-                let chartColor = this._dataSource!.color.scale(0.75);
-                result.set(chartColor.r, chartColor.g, chartColor.b, 1.0);
-            } else {
-                result.set(0, 0, 0, 0);
-            }
-        }
-    }
-
-    protected _createDefaultMaterial(scene: Scene): Material {
-        var result = new FluentMaterial("fluent", scene);
-        result.albedoColor = this._dataSource!.color.scale(0.5);
-        result.innerGlowColorIntensity = 0.6;
-        result.renderHoverLight = true;
-        result.hoverRadius = 5;
-
-        this._pickedPointObserver = this.onPickedPointChangedObservable.add(pickedPoint => {
-            if (pickedPoint) {
-                result.hoverPosition = pickedPoint;
-                result.hoverColor.a = 1.0;
-            } else {
-                result.hoverColor.a = 0;
-            }
-        });
-
-        return result;
     }
 
     /**
@@ -154,9 +79,7 @@ export class BarGraph extends Chart {
      */
     protected _createBarMesh(name: string, scene: Scene): Mesh {
         var box = Mesh.CreateBox(name, 1, scene);
-        box.setPivotPoint(new BABYLON.Vector3(0, -0.5, 0));
-
-        box.metadata = "chart";
+        box.setPivotMatrix(Matrix.Translation(0, 0.5, 0), false);
 
         return box;
     }
@@ -175,7 +98,7 @@ export class BarGraph extends Chart {
             return this;
         }
 
-        let scene = this._rootNode.getScene();
+        const scene = this._rootNode.getScene();
 
         // Default material
         if (!this._defaultMaterial) {
@@ -199,9 +122,10 @@ export class BarGraph extends Chart {
             }
         });
 
-        let ratio = this.maxBarHeight / (max - min);
+        let ratio = this._maxBarHeight / (max - min);
 
         let createMesh = false;
+        let left = -(data.length / 2) * (this._elementWidth + this.margin) + 1.5 * this._margin;
 
         // Do we need to create new graph or animate the current one
         if (!this._barMeshes || this._barMeshes.length !== data.length) {
@@ -210,33 +134,46 @@ export class BarGraph extends Chart {
             this._barMeshes = [];
         }        
 
-        this.removeLabels();
+        this._removeLabels();
+
+        if (this._backgroundMesh) {
+            this._backgroundMesh.dispose(false, true);
+            this._backgroundMesh = null;
+        }
 
-        // Axis
-        if (!this._backgroundMesh) {
+        if (this._displayBackground) {
+            // Axis
             this._backgroundMesh = BABYLON.Mesh.CreatePlane("background", 1, scene);
             this._backgroundMesh.parent = this._rootNode;            
-            this._backgroundMesh.setPivotPoint(new BABYLON.Vector3(0, -0.5, 0));
+            this._backgroundMesh.setPivotMatrix(Matrix.Translation(0, 0.5, 0), false);
 
-            this._backgroundADT = AdvancedDynamicTexture.CreateForMesh(this._backgroundMesh, 512, 512, false);
+            this._backgroundADT = AdvancedDynamicTexture.CreateForMesh(this._backgroundMesh, this._backgroundResolution, this._backgroundResolution, false);
 
             let displayGrid = new DisplayGrid();
             displayGrid.displayMajorLines = false;
             displayGrid.minorLineColor = "White";
             displayGrid.minorLineTickness = 2;
-            displayGrid.cellWidth = 512 / data.length;
-            displayGrid.cellHeight = 512 / 5;
+            displayGrid.cellWidth = this._backgroundResolution / data.length;
+            displayGrid.cellHeight = this._backgroundResolution / this._backgroundTickCount;
 
             this._backgroundADT.addControl(displayGrid);
 
             (<StandardMaterial>this._backgroundMesh.material!).opacityTexture = null;
+
+            this._backgroundMesh.position.z = this._elementWidth;
+            this._backgroundMesh.scaling.x = (this._elementWidth + this.margin) * data.length;
+            this._backgroundMesh.scaling.y = this._maxBarHeight; 
+
+            for (var tickIndex = 0; tickIndex <= this._backgroundTickCount; tickIndex++) {
+                var label = (max / this._backgroundTickCount) * tickIndex + "";
+                var ticklabel = this._addLabel(label, this._elementWidth, false);
+                ticklabel.position.x = left - this._elementWidth;
+                ticklabel.position.y = (this.maxBarHeight * tickIndex) / this._backgroundTickCount;
+                ticklabel.position.z = this._elementWidth;
+            }
         }
-        this._backgroundMesh.position.z = this.barWidth;
-        this._backgroundMesh.scaling.x = (this.barWidth + this.margin) * data.length;
-        this._backgroundMesh.scaling.y = this._maxBarHeight; 
 
         // We will generate one bar per entry
-        let left = -(data.length / 2) * (this.barWidth + this.margin) + 1.5 * this._margin;
         let index = 0;
         data.forEach(entry => {
 
@@ -249,61 +186,34 @@ export class BarGraph extends Chart {
                 barMesh = this._barMeshes![index++];
             }
 
+            barMesh.metadata = entry;
             barMesh.parent = this._rootNode;
             barMesh.position.x = left;
             let currentScalingYState = barMesh.scaling.y;
-            barMesh.scaling.set(this.barWidth, 0, this._barWidth);
+            barMesh.scaling.set(this._elementWidth, 0, this._elementWidth);
 
             var easing = new BABYLON.CircleEase();
             Animation.CreateAndStartAnimation("entryScale", barMesh, "scaling.y", 30, 30, currentScalingYState, entry.value * ratio, 0, easing);
 
             barMesh.material = this._defaultMaterial;
 
-            this.onElementCreated.notifyObservers(barMesh);
+            this.onElementCreatedObservable.notifyObservers(barMesh);
 
-            left += this.barWidth + this.margin;
+            left += this._elementWidth + this.margin;
 
             // Label
-            if (!this._labelDimension) {
+            if (!this.labelDimension || !this.displayLabels) {
                 return;
             }
 
-            let label = this.addLabel(entry[this._labelDimension]);
+            let label = this._addLabel(entry[this.labelDimension], this._elementWidth);
             label.position = barMesh.position.clone();
-            label.position.z -= this.barWidth;
-            label.scaling.x = this.barWidth;
+            label.position.z -= this._elementWidth;
         });
 
-        return this;
-    }
+        this.onRefreshObservable.notifyObservers(this);
 
-    /** Clean associated resources */
-    public dispose() {
-        super.dispose();
-        if (this._ownDefaultMaterial && this._defaultMaterial) {
-            this._defaultMaterial.dispose();
-            this._defaultMaterial = null;
-        }
-
-        if (this._backgroundADT) {
-            this._backgroundADT.dispose();
-            this._backgroundADT = null;
-        }
-
-        if (this._pickedPointObserver) {
-            this.onPickedPointChangedObservable.remove(this._pickedPointObserver);
-            this._pickedPointObserver = null;
-        }
-
-        if (this._onElementEnterObserver) {
-            this.onElementEnterObservable.remove(this._onElementEnterObserver);
-            this._onElementEnterObserver = null;
-        }
-
-        if (this._onElementOutObserver) {
-            this.onElementOutObservable.remove(this._onElementOutObserver);
-            this._onElementOutObserver = null;
-        }
+        return this;
     }
 
     protected _clean(): void {

gui/src/3D/charting/chart.ts

@@ -1,8 +1,12 @@
-import { Nullable, TransformNode, Scene, Vector3, Engine, Observer, PointerInfo, Observable, Mesh, AbstractMesh } from "babylonjs";
+import { Nullable, TransformNode, Scene, Vector3, Engine, Observer, PointerInfo, Observable, Mesh, AbstractMesh, GlowLayer, Material } from "babylonjs";
 import { DataSeries } from ".";
-import { AdvancedDynamicTexture, TextBlock } from "../../2D";
+import { AdvancedDynamicTexture, TextBlock, Rectangle, TextWrapping } from "../../2D";
+import { FluentMaterial } from "../materials";
 
-/** base class for all chart controls*/
+/** 
+ * Base class for all chart controls
+ * @see http://doc.babylonjs.com/how_to/chart3d#charts
+ */
 export abstract class Chart {
     protected _dataSource: Nullable<DataSeries>;
     protected _rootNode: TransformNode;
@@ -11,10 +15,25 @@ export abstract class Chart {
     protected _scene: Scene;
     private _lastElementOver: Nullable<AbstractMesh>;
     private _labelMeshes = new Array<Mesh>();
-    protected _blockRefresh = false;
+    protected _blockRefresh = false;    
+    protected _elementWidth = 2;    
+    private _pickedPointObserver: Nullable<Observer<Vector3>>;      
+    protected _defaultMaterial: Nullable<Material>; 
+    private _labelDimension: string;
+    private _displayLabels = true;
+    private _activeBar: Nullable<Mesh>;
+
+    private _glowLayer: Nullable<GlowLayer>;
+    private _onElementEnterObserver: Nullable<Observer<AbstractMesh>>;
+    private _onElementOutObserver: Nullable<Observer<AbstractMesh>>;
+    
+    private _hoverLabel: Nullable<Mesh>;
+
+    /** Observable raised when a refresh was done */
+    public onRefreshObservable  = new Observable<Chart>();
 
     /** Observable raised when a new element is created */
-    public onElementCreated = new Observable<Mesh>();
+    public onElementCreatedObservable  = new Observable<Mesh>();
 
     /**
      * Observable raised when the point picked by the pointer events changed
@@ -31,6 +50,27 @@ export abstract class Chart {
      */
     public onElementOutObservable = new Observable<AbstractMesh>();
 
+    /** User defined callback used to create labels */
+    public labelCreationFunction: Nullable<(label: string, width: number, includeBackground: boolean) => Mesh>;
+
+    /** User defined callback used to apply specific setup to hover labels */
+    public updateHoverLabel: Nullable<(meshLabel: Mesh) => void>;
+
+    /** Gets or sets the width of each element */
+    public get elementWidth(): number {
+        return this._elementWidth;
+    }
+
+    public set elementWidth(value: number) {
+        if (this._elementWidth === value) {
+            return;
+        }
+
+        this._elementWidth = value;
+
+        this.refresh();
+    }    
+
     /** Gets or sets the rotation of the entire chart */
     public set rotation(value: Vector3) {
         this._rootNode.rotation = value;
@@ -73,7 +113,7 @@ export abstract class Chart {
         this.refresh();
     }
 
-    /** Gets the filters applied to data source */
+    /** Gets or sets the filters applied to data source */
     public get dataFilters(): {[key: string]: string} {
         return this._dataFilters;
     }
@@ -106,6 +146,79 @@ export abstract class Chart {
         }
     }
 
+    /** Gets or sets the material used by element meshes */
+    public get defaultMaterial(): Nullable<Material> {
+        return this._defaultMaterial;
+    }
+
+    public set defaultMaterial(value: Nullable<Material>) {
+        if (this._defaultMaterial === value) {
+            return;
+        }
+
+        this._defaultMaterial = value;
+
+        this.refresh();
+    }
+
+    /** Gets or sets a boolean indicating if labels must be displayed */
+    public get displayLabels(): boolean {
+        return this._displayLabels;
+    }
+
+    public set displayLabels(value: boolean) {
+        if (this._displayLabels === value) {
+            return;
+        }
+
+        this._displayLabels = value;
+
+        this.refresh();
+    }       
+    
+    /** Gets or sets the dimension used for the labels */
+    public get labelDimension(): string {
+        return this._labelDimension;
+    }
+
+    public set labelDimension(value: string) {
+        if (this._labelDimension === value) {
+            return;
+        }
+
+        this._labelDimension = value;
+
+        this.refresh();
+    }    
+
+    /** Gets or sets a boolean indicating if glow should be used to highlight element hovering */
+    public get glowHover(): boolean {
+        return this._glowLayer !== undefined && this._glowLayer !== null;
+    }
+
+    public set glowHover(value: boolean) {
+        if (this.glowHover === value) {
+            return;
+        }
+
+        if (this._glowLayer) {
+            this._glowLayer.dispose();
+            this._glowLayer = null;
+            return;
+        }
+
+        this._glowLayer = new GlowLayer("glow", this._scene);
+
+        this._glowLayer.customEmissiveColorSelector = (mesh, subMesh, material, result) => {
+            if (mesh === this._activeBar) {
+                let chartColor = this._dataSource!.color.scale(0.75);
+                result.set(chartColor.r, chartColor.g, chartColor.b, 1.0);
+            } else {
+                result.set(0, 0, 0, 0);
+            }
+        }     
+    }
+
     /** Gets or sets the name of the graph */
     public name: string; 
 
@@ -131,38 +244,136 @@ export abstract class Chart {
                 return;
             }
 
-            if (pi.pickInfo.pickedMesh!.metadata === "chart") {
+            let metadata = pi.pickInfo.pickedMesh!.metadata;
+            if (metadata && metadata.value) {
                 if (this._lastElementOver !== pi.pickInfo.pickedMesh) {
+                    if (this._lastElementOver) {
+                        this.onElementOutObservable.notifyObservers(this._lastElementOver);
+                        this._lastElementOver = null;
+                    }
                     this._lastElementOver = pi.pickInfo.pickedMesh;
                     this.onElementEnterObservable.notifyObservers(this._lastElementOver!);
                 }
+            } else {
+                if (this._lastElementOver) {
+                    this.onElementOutObservable.notifyObservers(this._lastElementOver);
+                    this._lastElementOver = null;
+                }
             }
 
             this.onPickedPointChangedObservable.notifyObservers(pi.pickInfo.pickedPoint);
         });
+
+        this._onElementEnterObserver = this.onElementEnterObservable.add(mesh => {
+            this._activeBar = <Mesh>mesh;
+
+            this._hoverLabel = this._addLabel(this._activeBar.metadata.value.toString(), this._elementWidth);
+
+            this._hoverLabel.position = this._activeBar.position.clone();
+            this._hoverLabel.position.y = this._activeBar.scaling.y + 1.0;
+            this._hoverLabel.scaling.x = this._elementWidth;     
+            
+            if (this.updateHoverLabel) {
+                this.updateHoverLabel(this._hoverLabel);
+            }
+        });
+
+        this._onElementOutObserver = this.onElementOutObservable.add(mesh => {
+            this._activeBar = null;
+
+            if (this._hoverLabel) {
+                this._removeLabel(this._hoverLabel);
+                this._hoverLabel = null;
+            }
+        });
+
+
+        this.glowHover = true;
     }
 
-    public addLabel(label: string): Mesh {
+    protected _createDefaultMaterial(scene: Scene): Material {
+        var result = new FluentMaterial("fluent", scene);
+        result.albedoColor = this._dataSource!.color.scale(0.5);
+        result.innerGlowColorIntensity = 0.6;
+        result.renderHoverLight = true;
+        result.hoverRadius = 5;
+
+        this._pickedPointObserver = this.onPickedPointChangedObservable.add(pickedPoint => {
+            if (pickedPoint) {
+                result.hoverPosition = pickedPoint;
+                result.hoverColor.a = 1.0;
+            } else {
+                result.hoverColor.a = 0;
+            }
+        });
+
+        return result;
+    }
+
+    /**
+     * Function called by the chart objects when they need a label. Could be user defined if you set this.labelCreationFunction to a custom callback
+     * @param label defines the text of the label
+     * @param width defines the expected width (height is supposed to be 1)
+     * @param includeBackground defines if a background rectangle must be added (default is true)
+     * @returns a mesh used to host the label
+     */
+    protected _addLabel(label: string, width: number, includeBackground = true): Mesh {
+        if (this.labelCreationFunction) {
+            let labelMesh = this.labelCreationFunction(label, width, includeBackground);
+            labelMesh.parent = this._rootNode;
+
+            this._labelMeshes.push(labelMesh);
+
+            return labelMesh;
+        }
+
         let plane = Mesh.CreatePlane(label, 1, this._scene);
 
         this._labelMeshes.push(plane);
 
         plane.parent = this._rootNode;
         plane.billboardMode = Mesh.BILLBOARDMODE_ALL;
-        plane.renderingGroupId = 1;
+        plane.scaling.x = width;
 
-        let adt = AdvancedDynamicTexture.CreateForMesh(plane, 512, 128, false);
+        let resolution = 256;
+        let adt = AdvancedDynamicTexture.CreateForMesh(plane, resolution, resolution / width, false, true);
         let textBlock = new TextBlock(label, label);
         textBlock.color = "White";
+        textBlock.textWrapping = TextWrapping.Ellipsis;
         textBlock.fontWeight = "Bold";
-        textBlock.fontSize = 80;
-
-        adt.addControl(textBlock);
+        textBlock.fontSize = 50;
+
+        if (includeBackground) {
+            let rectangle = new Rectangle(label + "Border");
+            rectangle.thickness = 4;
+            rectangle.color = "White";
+            rectangle.background = "Black";
+            rectangle.addControl(textBlock);
+            adt.addControl(rectangle);
+        } else {
+            adt.addControl(textBlock);
+        }
 
         return plane;
     }
 
-    public removeLabels() {
+    /**
+     * Remove specific label mesh
+     * @param label defines the label mesh to remove
+     */
+    protected _removeLabel(label: Mesh): void {
+        let index = this._labelMeshes.indexOf(label);
+
+        if (index === -1) {
+            return;
+        }
+
+        this._labelMeshes.splice(index, 1);
+        label.dispose(false, true);
+    }
+
+    /** Remove all created labels */
+    protected _removeLabels(): void {
         this._labelMeshes.forEach(label => {
             label.dispose(false, true);
         });
@@ -171,17 +382,42 @@ export abstract class Chart {
     }
 
     /** 
-     * Force the graph to redraw itself 
-     * @returns the current BarGraph
+     * Force the chart to redraw itself 
+     * @returns the current chart
     */
     public abstract refresh(): Chart;
 
+    /** Release all associated resources */
     public dispose() {
+        this.onElementCreatedObservable.clear();
+        this.onPickedPointChangedObservable.clear();
+        this.onElementEnterObservable.clear();
+        this.onElementOutObservable.clear();
+
+        this.labelCreationFunction = null;
+
+        if (this._onElementEnterObserver) {
+            this.onElementEnterObservable.remove(this._onElementEnterObserver);
+            this._onElementEnterObserver = null;
+        }
+
+        if (this._onElementOutObserver) {
+            this.onElementOutObservable.remove(this._onElementOutObserver);
+            this._onElementOutObserver = null;
+        }         
+
         if (this._pointerObserver) {
             this._scene.onPointerObservable.remove(this._pointerObserver);
             this._pointerObserver = null;
         }
 
+        this.glowHover = false;
+
+        if (this._pickedPointObserver) {
+            this.onPickedPointChangedObservable.remove(this._pickedPointObserver);
+            this._pickedPointObserver = null;
+        }
+
         this._rootNode.dispose();
     }
 

gui/src/3D/charting/dataSeries.ts

@@ -1,6 +1,9 @@
 import { Color3 } from "babylonjs";
 
-/** Class used to store data to display */
+/** 
+ * Class used to store data to display 
+ * @see http://doc.babylonjs.com/how_to/chart3d
+ */
 export class DataSeries {
     /** Gets or sets the label of the series */
     public label: string;
@@ -159,4 +162,133 @@ export class DataSeries {
         
         return series;
     }
+
+    /**
+     * Create a new DataSeries containing testing spatial values
+     * @returns the new DataSeries
+     */
+    public static CreateFakeSpatialData(): DataSeries {
+        var series = new DataSeries();
+        series.label = "Spatial Data";
+        series.color = new Color3(0, 1.0, 0);
+
+        series.dimensions = ["Year", "Country"];
+
+        series.data = [
+            {
+                "Year": 2014,
+                "Country": "France",
+                "value": 10,
+                "latitude": 46.63728,
+                "longitude": 2.338262
+            }, 
+            {
+                "Year": 2014,
+                "Country": "USA",
+                "value": 200,
+                "latitude": 39.83333,
+                "longitude": -98.58334
+            }, 
+            {
+                "Year": 2014,
+                "Country": "India",
+                "value": 400,
+                "latitude": 23.40601,
+                "longitude": 79.45809
+            },
+            {
+                "Year": 2014,
+                "Country": "UK",
+                "value": 180,
+                "latitude": 54.56089,
+                "longitude": -2.212512
+            },
+            {
+                "Year": 2014,
+                "Country": "Germany",
+                "value": 400,
+                "latitude": 51.20247,
+                "longitude": 10.3822
+            }, 
+            {
+                "Year": 2014,
+                "Country": "Australia",
+                "value": 24,
+                "latitude": -25.58524,
+                "longitude": 134.5041
+            }, 
+            {
+                "Year": 2014,
+                "Country": "China",
+                "value": 540,
+                "latitude": 36.55309,
+                "longitude": 103.9754
+            }, 
+            {
+                "Year": 2014,
+                "Country": "Japan",
+                "value": 150,
+                "latitude": 36.28165,
+                "longitude": 139.0773
+            },
+            {
+                "Year": 2015,
+                "Country": "France",
+                "value": 12,
+                "latitude": 46.63728,
+                "longitude": 2.338262
+            }, 
+            {
+                "Year": 2015,
+                "Country": "USA",
+                "value": 120,
+                "latitude": 39.83333,
+                "longitude": -98.58334
+            }, 
+            {
+                "Year": 2015,
+                "Country": "India",
+                "value": 480,
+                "latitude": 23.40601,
+                "longitude": 79.45809
+            }, 
+            {
+                "Year": 2015,
+                "Country": "UK",
+                "value": 10,
+                "latitude": 54.56089,
+                "longitude": -2.212512
+            },
+            {
+                "Year": 2015,
+                "Country": "Germany",
+                "value": 80,
+                "latitude": 51.20247,
+                "longitude": 10.3822
+            }, 
+            {
+                "Year": 2015,
+                "Country": "Australia",
+                "value": 230,
+                "latitude": -25.58524,
+                "longitude": 134.5041
+            }, 
+            {
+                "Year": 2015,
+                "Country": "China",
+                "value": 490,
+                "latitude": 36.55309,
+                "longitude": 103.9754
+            }, 
+            {
+                "Year": 2015,
+                "Country": "Japan",
+                "value": 120,
+                "latitude": 36.28165,
+                "longitude": 139.0773
+            }
+        ];
+        
+        return series;
+    }
 }

gui/src/3D/charting/index.ts

@@ -1,3 +1,4 @@
 export * from "./dataSeries";
 export * from "./chart";
-export * from "./barGraph";
+export * from "./barGraph";
+export * from "./mapGraph";

gui/src/3D/charting/mapGraph.ts

@@ -0,0 +1,266 @@
+import { Chart } from ".";
+import { Engine, Scene, Nullable, Mesh, Animation, Texture, Matrix, Observer, Vector3, Material } from "babylonjs";
+import { FluentMaterial } from "../materials";
+
+/** 
+ * Class used to render bar graphs 
+ * @see http://doc.babylonjs.com/how_to/chart3d#mapgraph
+ */
+export class MapGraph extends Chart {
+
+    private _cylinderMeshes: Nullable<Array<Mesh>>;
+    private _maxCylinderHeight = 10;
+    private _worldMap: Nullable<Mesh>;
+    private _mercatorMaterial: Nullable<FluentMaterial>;
+    private _worldMapSize = 40;   
+    private _cylinderTesselation = 16;
+    private _xOffset = 0;
+    private _yOffset = 0;
+    private _worldMapPickedPointObserver: Nullable<Observer<Vector3>>;  
+
+    /** Gets or sets the offset (in world unit) on X axis to apply to all elements */
+    public get xOffset(): number {
+        return this._xOffset;
+    }
+
+    public set xOffset(value: number) {
+        if (this._xOffset === value) {
+            return;
+        }
+
+        this._xOffset = value;
+
+        this.refresh();
+    }    
+    
+    /** Gets or sets the offset (in world unit) on Y axis to apply to all elements */
+    public get yOffset(): number {
+        return this._yOffset;
+    }
+
+    public set yOffset(value: number) {
+        if (this._yOffset === value) {
+            return;
+        }
+
+        this._yOffset = value;
+
+        this.refresh();
+    }       
+
+    /** Gets or sets the tesselation used to build the cylinders */
+    public get cylinderTesselation(): number {
+        return this._cylinderTesselation;
+    }
+
+    public set cylinderTesselation(value: number) {
+        if (this._cylinderTesselation === value) {
+            return;
+        }
+
+        this._cylinderTesselation = value;
+        this._clean();
+
+        this.refresh();
+    }        
+
+    
+    /** Gets or sets the size of the world map (this will define the width) */
+    public get worldMapSize(): number {
+        return this._worldMapSize;
+    }
+
+    public set worldMapSize(value: number) {
+        if (this._worldMapSize === value) {
+            return;
+        }
+
+        this._worldMapSize = value;
+
+        this.refresh();
+    }    
+
+    public updateHoverLabel = (meshLabel: Mesh) => {
+        if (!this.labelDimension || !this.displayLabels) {
+            return;
+        }
+
+        meshLabel.position.y += 1.5;
+    }
+
+    /**
+     * Gets the material used to render the world map
+     */
+    public get worldMapMaterial(): Nullable<Material> {
+        return this._mercatorMaterial;
+    }
+
+    /** Sets the texture url to use for the world map */
+    public set worldMapUrl(value: string) {
+        const scene = this._scene;
+        if (!this._mercatorMaterial) {
+            this._mercatorMaterial = new FluentMaterial("WorldMap", scene!);
+    
+            this._mercatorMaterial.backFaceCulling = false;
+    
+            this._mercatorMaterial.renderHoverLight = true;
+            this._mercatorMaterial.hoverRadius = 3;
+    
+            this._worldMapPickedPointObserver = this.onPickedPointChangedObservable.add(pickedPoint => {
+                if (pickedPoint) {
+                    this._mercatorMaterial!.hoverPosition = pickedPoint;
+                    this._mercatorMaterial!.hoverColor.a = 1.0;
+                } else {
+                    this._mercatorMaterial!.hoverColor.a = 0;
+                }
+            });
+        }
+
+        if (this._mercatorMaterial.albedoTexture) {
+            this._mercatorMaterial.albedoTexture.dispose();
+        }
+
+        const texture = new Texture(value, scene, false, true, Texture.LINEAR_LINEAR_MIPLINEAR, () => {
+            this.refresh();
+        });
+        this._mercatorMaterial.albedoTexture = texture;
+    }
+    
+    /**
+     * Creates a new MapGraph
+     * @param name defines the name of the graph
+     * @param scene defines the hosting scene
+     */
+    constructor(name: string, mapUrl: string, scene: Nullable<Scene> = Engine.LastCreatedScene) {
+        super(name, scene);
+
+        this.worldMapUrl = mapUrl;
+    }
+
+    protected _createCylinderMesh(name: string, scene: Scene): Mesh {
+        var cylinder = Mesh.CreateCylinder(name, 1, 1, 1, this._cylinderTesselation, 1, scene);
+        cylinder.setPivotMatrix(Matrix.Translation(0, 0.5, 0), false);
+
+        return cylinder;
+    }
+
+    public refresh(): MapGraph {
+        if (this._blockRefresh || !this._mercatorMaterial || !this._mercatorMaterial.albedoTexture!.isReady()) {
+            return this;
+        }
+
+        if (!this._dataSource) {
+            this._clean();
+            return this;
+        }
+
+        const scene = this._rootNode.getScene();
+        const data = this._dataFilters ? this._dataSource.getFilteredData(this._dataFilters) : this._dataSource.data;
+        let createMesh = false;
+
+        // Do we need to create new graph or animate the current one
+        if (!this._cylinderMeshes || this._cylinderMeshes.length !== data.length) {
+            this._clean();
+            createMesh = true;
+            this._cylinderMeshes = [];
+        }      
+
+        // Scan data
+        let min = 0;
+        let max = Number.MIN_VALUE;
+
+        // Check the limit of the entire series
+        this._dataSource.data.forEach(entry => {
+            if (min > entry.value) {
+                min = entry.value;
+            }
+
+            if (max < entry.value) {
+                max = entry.value;
+            }
+        });
+
+        let ratio = this._maxCylinderHeight / (max - min);     
+
+        this._removeLabels();
+        
+        const worldMaptextureSize = this._mercatorMaterial.albedoTexture!.getSize();
+        const worldMapWidth = this._worldMapSize;
+        const worldMapHeight = worldMapWidth * worldMaptextureSize.height / worldMaptextureSize.width;
+
+        if (this._worldMap) {
+            this._worldMap.dispose();
+        }
+
+        this._worldMap = Mesh.CreateGround("WorldMap", worldMapWidth, worldMapHeight, 1, scene);
+        this._worldMap.parent = this._rootNode;
+        this._worldMap.material = this._mercatorMaterial;
+        this._worldMap.enablePointerMoveEvents = true;
+
+        // Default material
+        if (!this._defaultMaterial) {
+            this._defaultMaterial = this._createDefaultMaterial(scene);
+        }        
+        
+        // We will generate one cylinder per entry
+        let index = 0;
+        data.forEach(entry => {
+
+            var cylinderMesh: Mesh;
+            if (createMesh) {
+                cylinderMesh = this._createCylinderMesh(this.name + "_cylinder_" + index++, scene);
+                cylinderMesh.enablePointerMoveEvents = true;
+                this._cylinderMeshes!.push(cylinderMesh);
+            } else {
+                cylinderMesh = this._cylinderMeshes![index++];
+            }
+
+            cylinderMesh.material = this._defaultMaterial;
+            cylinderMesh.metadata = entry;
+            cylinderMesh.parent = this._rootNode;
+            let currentScalingYState = cylinderMesh.scaling.y;
+            cylinderMesh.scaling.set(this._elementWidth / 2, 0, this._elementWidth / 2);
+
+            // Lat/long convertion
+            const latitude: number = entry.latitude;
+            const longitude: number = entry.longitude;
+            const x = (longitude + 180) * (worldMapWidth / 360) - worldMapWidth / 2;
+            const latRad = latitude * Math.PI / 180;
+            const mercN = Math.log(Math.tan(Math.PI / 4 + latRad / 2));
+            const z = worldMapWidth * mercN / (2 * Math.PI);
+            cylinderMesh.position.set(x + this._xOffset, 0.01, z + this._yOffset);
+
+            var easing = new BABYLON.CircleEase();
+            Animation.CreateAndStartAnimation("entryScale", cylinderMesh, "scaling.y", 30, 30, currentScalingYState, entry.value * ratio, 0, easing);
+
+            this.onElementCreatedObservable.notifyObservers(cylinderMesh);
+
+            // Label
+            if (!this.labelDimension || !this.displayLabels) {
+                return;
+            }
+
+            let label = this._addLabel(entry[this.labelDimension], this._elementWidth);
+            label.position = cylinderMesh.position.clone();
+            Animation.CreateAndStartAnimation("labelScale", label, "position.y", 30, 30, currentScalingYState + 1.0, entry.value * ratio + 1.0, 0, easing);
+        });
+
+        this.onRefreshObservable.notifyObservers(this);
+    
+        return this;
+    }
+
+    protected _clean(): void {
+        super._clean();
+        this._worldMap = null;
+        this._cylinderMeshes = null;
+    }
+
+    public dispose() {
+        super.dispose();
+        if (this._worldMapPickedPointObserver) {
+            this.onPickedPointChangedObservable.remove(this._worldMapPickedPointObserver);
+            this._worldMapPickedPointObserver = null;    
+        }
+    }
+}

gui/src/3D/materials/fluentMaterial.ts

@@ -1,4 +1,4 @@
-import { MaterialDefines, PushMaterial, serialize, expandToProperty, serializeAsColor3, Color3, serializeAsColor4, Color4, serializeAsVector3, Vector3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, VertexBuffer, MaterialHelper, EffectCreationOptions, Matrix, Mesh, Tmp, SerializationHelper } from "babylonjs";
+import { MaterialDefines, PushMaterial, serialize, expandToProperty, serializeAsColor3, Color3, serializeAsColor4, Color4, serializeAsVector3, Vector3, Scene, Nullable, BaseTexture, AbstractMesh, SubMesh, VertexBuffer, MaterialHelper, EffectCreationOptions, Matrix, Mesh, Tmp, SerializationHelper, serializeAsTexture } from "babylonjs";
 
 import { registerShader } from "./shaders/fluent";
 
@@ -10,6 +10,7 @@ export class FluentMaterialDefines extends MaterialDefines {
     public INNERGLOW = false;
     public BORDER = false;
     public HOVERLIGHT = false;
+    public TEXTURE = false;
 
     constructor() {
         super();
@@ -97,6 +98,11 @@ export class FluentMaterial extends PushMaterial {
     @serializeAsVector3()
     public hoverPosition = Vector3.Zero();
 
+    @serializeAsTexture("albedoTexture")
+    private _albedoTexture: Nullable<BaseTexture>;
+    @expandToProperty("_markAllSubMeshesAsTexturesAndMiscDirty")
+    public albedoTexture: Nullable<BaseTexture>;    
+
     /**
      * Creates a new Fluent material
      * @param name defines the name of the material
@@ -141,6 +147,16 @@ export class FluentMaterial extends PushMaterial {
             defines.INNERGLOW = this.innerGlowColorIntensity > 0;
             defines.BORDER = this.renderBorders;
             defines.HOVERLIGHT = this.renderHoverLight;
+
+            if (this._albedoTexture) {
+                if (!this._albedoTexture.isReadyOrNotBlocking()) {
+                    return false;
+                } else {
+                    defines.TEXTURE = true;
+                }
+            } else {
+                defines.TEXTURE = false;
+            }
         }
 
         var engine = scene.getEngine();
@@ -160,7 +176,7 @@ export class FluentMaterial extends PushMaterial {
                 "hoverColor", "hoverPosition", "hoverRadius"
             ];
 
-            var samplers = new Array<String>();
+            var samplers = ["albedoSampler"];
             var uniformBuffers = new Array<string>();
 
             MaterialHelper.PrepareUniformsAndSamplersList(<EffectCreationOptions>{
@@ -237,6 +253,10 @@ export class FluentMaterial extends PushMaterial {
                 this._activeEffect.setFloat("hoverRadius", this.hoverRadius);
                 this._activeEffect.setVector3("hoverPosition", this.hoverPosition);
             }
+
+            if (defines.TEXTURE) {
+                this._activeEffect.setTexture("albedoSampler", this._albedoTexture)
+            }
         }
 
         this._afterBind(mesh, this._activeEffect);

gui/src/3D/materials/shaders/fluent.fragment.fx

@@ -22,11 +22,19 @@ uniform vec4 hoverColor;
 uniform float hoverRadius;
 #endif
 
+#ifdef TEXTURE
+uniform sampler2D albedoSampler;
+#endif
+
 void main(void) {
 
 	vec3 albedo = albedoColor.rgb;
 	float alpha = albedoColor.a;
 
+#ifdef TEXTURE
+	albedo = texture(albedoSampler, vUV).rgb;
+#endif
+
 #ifdef HOVERLIGHT
 	float pointToHover = (1.0 - clamp(length(hoverPosition - worldPosition) / hoverRadius, 0., 1.)) * hoverColor.a;
 	albedo = clamp(albedo + hoverColor.rgb * pointToHover, 0., 1.);

inspector/src/Inspector.ts

@@ -32,9 +32,9 @@ export class Inspector {
 
     private _parentElement: Nullable<HTMLElement>;
 
-    public onGUILoaded: Observable<typeof import("babylonjs-gui")>;
+    public onGUILoaded: Observable<any>;
 
-    public static GUIObject: typeof import("babylonjs-gui"); // should be typeof "babylonjs-gui";
+    public static GUIObject: any; // should be typeof "babylonjs-gui";
 
     /** The inspector is created with the given engine.
      * If the parameter 'popup' is false, the inspector is created as a right panel on the main window.

inspector/src/adapters/GUIAdapter.ts

@@ -10,7 +10,7 @@ export class GUIAdapter
     extends Adapter
     implements IToolVisible {
 
-    constructor(obj: import("babylonjs-gui").Control) {
+    constructor(obj: any) {
         super(obj);
     }
 

inspector/src/properties_gui.ts

@@ -1,7 +1,7 @@
 
 import { PROPERTIES } from "./properties";
 
-export type GUITyping = typeof import("babylonjs-gui");
+export type GUITyping = any;
 
 export let guiLoaded: boolean = false;
 /**

inspector/src/tools/LabelTool.ts

@@ -64,7 +64,7 @@ export class LabelTool extends AbstractTool {
         return true;
     }
 
-    private _createLabel(mesh: AbstractMesh, GUI: typeof import("babylonjs-gui")) {
+    private _createLabel(mesh: AbstractMesh, GUI: any) {
         // Don't create label for "system nodes" (starting and ending with ###)
         let name = mesh.name;
 
@@ -73,14 +73,14 @@ export class LabelTool extends AbstractTool {
         }
 
         if (mesh && this._advancedTexture) {
-            let rect1: import("babylonjs-gui").Rectangle = new GUI.Rectangle();
+            let rect1 = new GUI.Rectangle();
             rect1.width = 4 + 10 * name.length + "px";
             rect1.height = "22px";
             rect1.background = "rgba(0,0,0,0.6)";
             rect1.color = "black";
             this._advancedTexture.addControl(rect1);
 
-            let label: import("babylonjs-gui").TextBlock = new GUI.TextBlock();
+            let label = new GUI.TextBlock();
             label.text = name;
             label.fontSize = 12;
             rect1.addControl(label);

package.json

@@ -9,7 +9,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "3.3.0-alpha.13",
+    "version": "3.3.0-alpha.14",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

serializers/src/glTF/2.0/babylon.glTFExporter.ts

@@ -783,6 +783,9 @@ module BABYLON.GLTF2 {
          * @param babylonTransformNode Babylon mesh used as the source for the transformation data
          */
         private setNodeTransformation(node: INode, babylonTransformNode: TransformNode): void {
+            if (!babylonTransformNode.getPivotPoint().equalsToFloats(0,0,0)) {
+                BABYLON.Tools.Warn("Pivot points are not supported in the glTF serializer");
+            }
             if (!babylonTransformNode.position.equalsToFloats(0, 0, 0)) {
                 node.translation = this._convertToRightHandedSystem ? _GLTFUtilities._GetRightHandedPositionVector3(babylonTransformNode.position).asArray() : babylonTransformNode.position.asArray();
             }

src/Actions/babylon.directActions.ts

@@ -9,6 +9,7 @@
             this._target = this._effectiveTarget = target;
         }
 
+        /** @hidden */
         public _prepare(): void {
             this._effectiveTarget = this._getEffectiveTarget(this._effectiveTarget, this.propertyPath);
             this._property = this._getProperty(this.propertyPath);
@@ -17,7 +18,7 @@
         public execute(): void {
             this._effectiveTarget[this._property] = !this._effectiveTarget[this._property];
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "SwitchBooleanAction",
@@ -40,7 +41,7 @@
         public execute(): void {
             this._target.state = this.value;
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "SetStateAction",
@@ -62,6 +63,7 @@
             this._target = this._effectiveTarget = target;
         }
 
+        /** @hidden */
         public _prepare(): void {
             this._effectiveTarget = this._getEffectiveTarget(this._effectiveTarget, this.propertyPath);
             this._property = this._getProperty(this.propertyPath);
@@ -74,7 +76,7 @@
                 this._target.markAsDirty(this._property);
             }
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "SetValueAction",
@@ -97,6 +99,7 @@
             this._target = this._effectiveTarget = target;
         }
 
+        /** @hidden */
         public _prepare(): void {
             this._effectiveTarget = this._getEffectiveTarget(this._effectiveTarget, this.propertyPath);
             this._property = this._getProperty(this.propertyPath);
@@ -113,7 +116,7 @@
                 this._target.markAsDirty(this._property);
             }
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "IncrementValueAction",
@@ -134,6 +137,7 @@
             this._target = target;
         }
 
+        /** @hidden */
         public _prepare(): void {
         }
 
@@ -141,7 +145,7 @@
             var scene = this._actionManager.getScene();
             scene.beginAnimation(this._target, this.from, this.to, this.loop);
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "PlayAnimationAction",
@@ -163,14 +167,15 @@
             this._target = target;
         }
 
-        public _prepare(): void {           
+        /** @hidden */
+        public _prepare(): void {
         }
 
         public execute(): void {
             var scene = this._actionManager.getScene();
             scene.stopAnimation(this._target);
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "StopAnimationAction",
@@ -186,7 +191,7 @@
 
         public execute(): void {
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "DoNothingAction",
@@ -200,6 +205,7 @@
             super(triggerOptions, condition);
         }
 
+        /** @hidden */
         public _prepare(): void {
             for (var index = 0; index < this.children.length; index++) {
                 this.children[index]._actionManager = this._actionManager;
@@ -212,18 +218,18 @@
                 this.children[index].execute(evt);
             }
         }
-        
+
         public serialize(parent: any): any {
             var serializationObject = super._serialize({
                 name: "CombineAction",
                 properties: [],
                 combine: []
             }, parent);
-            
-            for (var i=0; i < this.children.length; i++) {
+
+            for (var i = 0; i < this.children.length; i++) {
                 serializationObject.combine.push(this.children[i].serialize(null));
             }
-            
+
             return serializationObject;
         }
     }
@@ -248,6 +254,7 @@
             this._parent = parent;
         }
 
+        /** @hidden */
         public _prepare(): void {
         }
 
@@ -263,7 +270,7 @@
 
             this._target.parent = this._parent;
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "SetParentAction",
@@ -283,6 +290,7 @@
             this._sound = sound;
         }
 
+        /** @hidden */
         public _prepare(): void {
         }
 
@@ -290,7 +298,7 @@
             if (this._sound !== undefined)
                 this._sound.play();
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "PlaySoundAction",
@@ -307,6 +315,7 @@
             this._sound = sound;
         }
 
+        /** @hidden */
         public _prepare(): void {
         }
 
@@ -314,7 +323,7 @@
             if (this._sound !== undefined)
                 this._sound.stop();
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "StopSoundAction",

src/Actions/babylon.interpolateValueAction.ts

@@ -12,6 +12,7 @@
             this._target = this._effectiveTarget = target;
         }
 
+        /** @hidden */
         public _prepare(): void {
             this._effectiveTarget = this._getEffectiveTarget(this._effectiveTarget, this.propertyPath);
             this._property = this._getProperty(this.propertyPath);
@@ -54,7 +55,7 @@
                 scene.stopAnimation(this._effectiveTarget);
             }
 
-            let wrapper = ()=> {
+            let wrapper = () => {
                 this.onInterpolationDoneObservable.notifyObservers(this);
                 if (this.onInterpolationDone) {
                     this.onInterpolationDone();
@@ -63,7 +64,7 @@
 
             scene.beginDirectAnimation(this._effectiveTarget, [animation], 0, 100, false, 1, wrapper);
         }
-        
+
         public serialize(parent: any): any {
             return super._serialize({
                 name: "InterpolateValueAction",

src/Cameras/Inputs/babylon.arcRotateCameraVRDeviceOrientationInput.ts

@@ -21,6 +21,7 @@ module BABYLON {
             window.addEventListener("deviceorientation", this._deviceOrientationHandler);
         }
 
+        /** @hidden */
         public _onOrientationEvent(evt: DeviceOrientationEvent): void {
             if (evt.alpha !== null) {
                 this._alpha = +evt.alpha | 0;

src/Cameras/Inputs/babylon.freeCameraKeyboardMoveInput.ts

@@ -5,7 +5,7 @@ module BABYLON {
         private _onCanvasBlurObserver: Nullable<Observer<Engine>>;
         private _onKeyboardObserver: Nullable<Observer<KeyboardInfo>>;
         private _engine: Engine;
-        private _scene: Scene;        
+        private _scene: Scene;
 
         @serialize()
         public keysUp = [38];
@@ -19,7 +19,7 @@ module BABYLON {
         @serialize()
         public keysRight = [39];
 
-        attachControl(element : HTMLElement, noPreventDefault?: boolean) {
+        attachControl(element: HTMLElement, noPreventDefault?: boolean) {
             if (this._onCanvasBlurObserver) {
                 return;
             }
@@ -27,7 +27,7 @@ module BABYLON {
             this._scene = this.camera.getScene();
             this._engine = this._scene.getEngine();
 
-            this._onCanvasBlurObserver = this._engine.onCanvasBlurObservable.add(()=>{
+            this._onCanvasBlurObserver = this._engine.onCanvasBlurObservable.add(() => {
                 this._keys = [];
             });
 
@@ -63,7 +63,7 @@ module BABYLON {
                         }
                     }
                 }
-            });     
+            });
         }
 
         detachControl(element: Nullable<HTMLElement>) {
@@ -80,9 +80,9 @@ module BABYLON {
             }
             this._keys = [];
         }
-        
+
         public checkInputs() {
-            if (this._onKeyboardObserver){
+            if (this._onKeyboardObserver) {
                 var camera = this.camera;
                 // Keyboard
                 for (var index = 0; index < this._keys.length; index++) {
@@ -114,14 +114,15 @@ module BABYLON {
             return "FreeCameraKeyboardMoveInput";
         }
 
+        /** @hidden */
         public _onLostFocus(e: FocusEvent): void {
             this._keys = [];
         }
-        
-        getSimpleName(){
+
+        getSimpleName() {
             return "keyboard";
         }
     }
-    
+
     (<any>CameraInputTypes)["FreeCameraKeyboardMoveInput"] = FreeCameraKeyboardMoveInput;
 }

src/Cameras/VR/babylon.vrExperienceHelper.ts

@@ -28,7 +28,7 @@ module BABYLON {
         /**
          * Uses the main button on the controller to toggle the laser casted. (default: true)
          */
-        laserToggle?:boolean;
+        laserToggle?: boolean;
         /**
          * A list of meshes to be used as the teleportation floor. If specified, teleportation will be enabled (default: undefined)
          */
@@ -36,32 +36,46 @@ module BABYLON {
     }
 
     class VRExperienceHelperGazer implements IDisposable {
-        public _gazeTracker:Mesh;
-        
-        public _currentMeshSelected:Nullable<AbstractMesh>;
-        public _currentHit:Nullable<PickingInfo>;
+        /** @hidden */
+        public _gazeTracker: Mesh;
+
+        /** @hidden */
+        public _currentMeshSelected: Nullable<AbstractMesh>;
+        /** @hidden */
+        public _currentHit: Nullable<PickingInfo>;
 
         public static _idCounter = 0;
-        public _id:number;
+        /** @hidden */
+        public _id: number;
+
+        /** @hidden */
+        public _pointerDownOnMeshAsked: boolean = false;
+        /** @hidden */
+        public _isActionableMesh: boolean = false;
 
-        public _pointerDownOnMeshAsked:boolean = false;
-        public _isActionableMesh:boolean = false;
-        
+        /** @hidden */
         public _interactionsEnabled: boolean;
+        /** @hidden */
         public _teleportationEnabled: boolean;
+        /** @hidden */
         public _teleportationRequestInitiated = false;
+        /** @hidden */
         public _teleportationBackRequestInitiated = false;
+        /** @hidden */
         public _rotationRightAsked = false;
+        /** @hidden */
         public _rotationLeftAsked = false;
+        /** @hidden */
         public _dpadPressed = true;
 
+        /** @hidden */
         public _activePointer = false;
 
-        constructor(public scene: Scene, gazeTrackerToClone:Nullable<Mesh> = null){
+        constructor(public scene: Scene, gazeTrackerToClone: Nullable<Mesh> = null) {
             this._id = VRExperienceHelperGazer._idCounter++;
 
             // Gaze tracker
-            if(!gazeTrackerToClone){
+            if (!gazeTrackerToClone) {
                 this._gazeTracker = Mesh.CreateTorus("gazeTracker", 0.0035, 0.0025, 20, scene, false);
                 this._gazeTracker.bakeCurrentTransformIntoVertices();
                 this._gazeTracker.isPickable = false;
@@ -71,54 +85,60 @@ module BABYLON {
                 targetMat.emissiveColor = new Color3(0.7, 0.7, 0.7)
                 targetMat.backFaceCulling = false;
                 this._gazeTracker.material = targetMat;
-            }else{
+            } else {
                 this._gazeTracker = gazeTrackerToClone.clone("gazeTracker");
             }
-            
+
         }
 
-        public _getForwardRay(length:number):Ray{
-            return new Ray(Vector3.Zero(),new Vector3(0,0,length));
+        /** @hidden */
+        public _getForwardRay(length: number): Ray {
+            return new Ray(Vector3.Zero(), new Vector3(0, 0, length));
         }
 
+        /** @hidden */
         public _selectionPointerDown() {
             this._pointerDownOnMeshAsked = true;
             if (this._currentHit) {
-                this.scene.simulatePointerDown(this._currentHit, {pointerId: this._id});
+                this.scene.simulatePointerDown(this._currentHit, { pointerId: this._id });
             }
         }
 
+        /** @hidden */
         public _selectionPointerUp() {
             if (this._currentHit) {
-                this.scene.simulatePointerUp(this._currentHit, {pointerId: this._id});
+                this.scene.simulatePointerUp(this._currentHit, { pointerId: this._id });
             }
             this._pointerDownOnMeshAsked = false;
         }
 
+        /** @hidden */
         public _activatePointer() {
             this._activePointer = true;
         }
 
+        /** @hidden */
         public _deactivatePointer() {
             this._activePointer = false;
         }
 
-        public _updatePointerDistance(distance:number = 100) {
+        /** @hidden */
+        public _updatePointerDistance(distance: number = 100) {
         }
 
-        public dispose(){
+        public dispose() {
             this._interactionsEnabled = false;
             this._teleportationEnabled = false;
-            if(this._gazeTracker){
+            if (this._gazeTracker) {
                 this._gazeTracker.dispose()
             }
         }
     }
 
-    class VRExperienceHelperControllerGazer extends VRExperienceHelperGazer{
+    class VRExperienceHelperControllerGazer extends VRExperienceHelperGazer {
         private _laserPointer: Mesh;
         private _meshAttachedObserver: Nullable<Observer<AbstractMesh>>;
-        constructor(public webVRController: WebVRController, scene: Scene, gazeTrackerToClone:Mesh){
+        constructor(public webVRController: WebVRController, scene: Scene, gazeTrackerToClone: Mesh) {
             super(scene, gazeTrackerToClone);
             // Laser pointer
             this._laserPointer = Mesh.CreateCylinder("laserPointer", 1, 0.004, 0.0002, 20, 1, scene, false);
@@ -131,7 +151,7 @@ module BABYLON {
             this._laserPointer.isVisible = false;
             this._laserPointer.isPickable = false;
 
-            if(!webVRController.mesh){
+            if (!webVRController.mesh) {
                 // Create an empty mesh that is used prior to loading the high quality model
                 var preloadMesh = new Mesh("preloadControllerMesh", scene);
                 var preloadPointerPose = new Mesh(PoseEnabledController.POINTING_POSE, scene);
@@ -142,30 +162,34 @@ module BABYLON {
 
             this._setLaserPointerParent(webVRController.mesh!);
 
-            this._meshAttachedObserver = webVRController._meshAttachedObservable.add((mesh)=>{
+            this._meshAttachedObserver = webVRController._meshAttachedObservable.add((mesh) => {
                 this._setLaserPointerParent(mesh);
             });
         }
 
-        _getForwardRay(length:number):Ray{
+        _getForwardRay(length: number): Ray {
             return this.webVRController.getForwardRay(length);
         }
 
+        /** @hidden */
         public _activatePointer() {
             super._activatePointer();
             this._laserPointer.isVisible = true;
         }
-        
+
+        /** @hidden */
         public _deactivatePointer() {
             super._deactivatePointer();
             this._laserPointer.isVisible = false;
         }
 
-        public _setLaserPointerColor(color:Color3){
+        /** @hidden */
+        public _setLaserPointerColor(color: Color3) {
             (<StandardMaterial>this._laserPointer.material).emissiveColor = color;
         }
 
-        public _setLaserPointerParent(mesh:AbstractMesh){
+        /** @hidden */
+        public _setLaserPointerParent(mesh: AbstractMesh) {
             var makeNotPick = (root: AbstractMesh) => {
                 root.isPickable = false;
                 root.getChildMeshes().forEach((c) => {
@@ -186,29 +210,29 @@ module BABYLON {
             this._laserPointer.parent = mesh;
         }
 
-        public _updatePointerDistance(distance:number = 100) {
+        public _updatePointerDistance(distance: number = 100) {
             this._laserPointer.scaling.y = distance;
-            this._laserPointer.position.z = -distance / 2;  
+            this._laserPointer.position.z = -distance / 2;
         }
 
-        dispose(){
+        dispose() {
             super.dispose();
             this._laserPointer.dispose();
-            if(this._meshAttachedObserver){
+            if (this._meshAttachedObserver) {
                 this.webVRController._meshAttachedObservable.remove(this._meshAttachedObserver);
             }
         }
     }
 
-    class VRExperienceHelperCameraGazer extends VRExperienceHelperGazer{
-        constructor(private getCamera:()=>Nullable<Camera>, scene: Scene){
+    class VRExperienceHelperCameraGazer extends VRExperienceHelperGazer {
+        constructor(private getCamera: () => Nullable<Camera>, scene: Scene) {
             super(scene);
         }
-        _getForwardRay(length:number):Ray{
+        _getForwardRay(length: number): Ray {
             var camera = this.getCamera();
-            if(camera){
+            if (camera) {
                 return camera.getForwardRay(length);
-            }else{
+            } else {
                 return new Ray(Vector3.Zero(), Vector3.Forward());
             }
         }
@@ -304,10 +328,10 @@ module BABYLON {
         private _cameraGazer: VRExperienceHelperCameraGazer;
         private _padSensibilityUp = 0.65;
         private _padSensibilityDown = 0.35;
-        
 
-        private leftController:Nullable<VRExperienceHelperControllerGazer> = null;
-        private rightController:Nullable<VRExperienceHelperControllerGazer> = null;
+
+        private leftController: Nullable<VRExperienceHelperControllerGazer> = null;
+        private rightController: Nullable<VRExperienceHelperControllerGazer> = null;
 
         /**
          * Observable raised when a new mesh is selected based on meshSelectionPredicate
@@ -352,7 +376,7 @@ module BABYLON {
          * Set teleportation enabled. If set to false camera teleportation will be disabled but camera rotation will be kept.
          */
         public teleportationEnabled: boolean = true;
-        
+
         private _defaultHeight: number;
         private _teleportationInitialized = false;
         private _interactionsEnabled = false;
@@ -394,11 +418,11 @@ module BABYLON {
                 this._cameraGazer._gazeTracker.isPickable = false;
                 this._cameraGazer._gazeTracker.isVisible = false;
                 this._cameraGazer._gazeTracker.name = "gazeTracker";
-                if(this.leftController){
+                if (this.leftController) {
                     this.leftController._gazeTracker = this._cameraGazer._gazeTracker.clone("gazeTracker");
                 }
 
-                if(this.rightController){
+                if (this.rightController) {
                     this.rightController._gazeTracker = this._cameraGazer._gazeTracker.clone("gazeTracker");
                 }
             }
@@ -419,11 +443,11 @@ module BABYLON {
             if (!value) {
                 this._cameraGazer._gazeTracker.isVisible = false;
 
-                if(this.leftController){
+                if (this.leftController) {
                     this.leftController._gazeTracker.isVisible = false;
                 }
 
-                if(this.rightController){
+                if (this.rightController) {
                     this.rightController._gazeTracker.isVisible = false;
                 }
             }
@@ -496,8 +520,8 @@ module BABYLON {
 
         private get _teleportationRequestInitiated(): boolean {
             var result = this._cameraGazer._teleportationRequestInitiated
-            || (this.leftController !== null && this.leftController._teleportationRequestInitiated)
-            || (this.rightController !== null && this.rightController._teleportationRequestInitiated);
+                || (this.leftController !== null && this.leftController._teleportationRequestInitiated)
+                || (this.rightController !== null && this.rightController._teleportationRequestInitiated);
             return result;
         }
 
@@ -507,7 +531,7 @@ module BABYLON {
          * @param scene The scene the VRExperienceHelper belongs to.
          * @param webVROptions Options to modify the vr experience helper's behavior.
          */
-        constructor(scene: Scene, 
+        constructor(scene: Scene,
             /** Options to modify the vr experience helper's behavior. */
             public webVROptions: VRExperienceHelperOptions = {}) {
             this._scene = scene;
@@ -537,7 +561,7 @@ module BABYLON {
             }
             this._defaultHeight = webVROptions.defaultHeight;
 
-            if(webVROptions.positionScale){
+            if (webVROptions.positionScale) {
                 this._rayLength *= webVROptions.positionScale;
                 this._defaultHeight *= webVROptions.positionScale;
             }
@@ -584,7 +608,7 @@ module BABYLON {
             this._webVRCamera = new WebVRFreeCamera("WebVRHelper", this._position, this._scene, webVROptions);
             this._webVRCamera.useStandingMatrix()
 
-            this._cameraGazer = new VRExperienceHelperCameraGazer(()=>{return this.currentVRCamera;}, scene);
+            this._cameraGazer = new VRExperienceHelperCameraGazer(() => { return this.currentVRCamera; }, scene);
             // Create default button
             if (!this._useCustomVRButton) {
                 this._btnVR = <HTMLButtonElement>document.createElement("BUTTON");
@@ -683,25 +707,25 @@ module BABYLON {
             //create easing functions
             this._circleEase = new CircleEase();
             this._circleEase.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT);
-            
-            if(this.webVROptions.floorMeshes){
-                this.enableTeleportation({floorMeshes: this.webVROptions.floorMeshes});
+
+            if (this.webVROptions.floorMeshes) {
+                this.enableTeleportation({ floorMeshes: this.webVROptions.floorMeshes });
             }
         }
 
         // Raised when one of the controller has loaded successfully its associated default mesh
         private _onDefaultMeshLoaded(webVRController: WebVRController) {
-            if(this.leftController && this.leftController.webVRController == webVRController){
-                if(webVRController.mesh){
+            if (this.leftController && this.leftController.webVRController == webVRController) {
+                if (webVRController.mesh) {
                     this.leftController._setLaserPointerParent(webVRController.mesh)
                 }
             }
-            if(this.rightController && this.rightController.webVRController == webVRController){
-                if(webVRController.mesh){
+            if (this.rightController && this.rightController.webVRController == webVRController) {
+                if (webVRController.mesh) {
                     this.rightController._setLaserPointerParent(webVRController.mesh)
                 }
             }
-            
+
             try {
                 this.onControllerMeshLoadedObservable.notifyObservers(webVRController);
             }
@@ -753,7 +777,7 @@ module BABYLON {
                 // A VR display is connected
                 this._webVRpresenting = vrDisplay.isPresenting;
 
-                if (wasPresenting && !this._webVRpresenting)
+                if (wasPresenting && !this._webVRpresenting && this.isInVRMode)
                     this.exitVR();
             } else {
                 Tools.Warn('Detected VRDisplayPresentChange on an unknown VRDisplay. Did you can enterVR on the vrExperienceHelper?');
@@ -830,7 +854,7 @@ module BABYLON {
             }
             else if (this._vrDeviceOrientationCamera) {
                 this._vrDeviceOrientationCamera.position = this._position;
-                if(this._scene.activeCamera){
+                if (this._scene.activeCamera) {
                     this._vrDeviceOrientationCamera.minZ = this._scene.activeCamera.minZ
                 }
                 this._scene.activeCamera = this._vrDeviceOrientationCamera;
@@ -882,6 +906,13 @@ module BABYLON {
 
             if (this._interactionsEnabled) {
                 this._scene.unregisterBeforeRender(this.beforeRender);
+                this._cameraGazer._gazeTracker.isVisible = false;
+                if (this.leftController) {
+                    this.leftController._gazeTracker.isVisible = false;
+                }
+                if (this.rightController) {
+                    this.rightController._gazeTracker.isVisible = false;
+                }
             }
 
             // resize to update width and height when exiting vr exits fullscreen
@@ -911,7 +942,7 @@ module BABYLON {
          */
         public enableInteractions() {
             if (!this._interactionsEnabled) {
-                this._interactionsRequested = true;            
+                this._interactionsRequested = true;
 
                 if (this.leftController) {
                     this._enableInteractionOnController(this.leftController)
@@ -942,25 +973,25 @@ module BABYLON {
             }
         }
 
-        private get _noControllerIsActive(){
+        private get _noControllerIsActive() {
             return !(this.leftController && this.leftController._activePointer) && !(this.rightController && this.rightController._activePointer)
         }
 
         private beforeRender = () => {
-            if(this.leftController && this.leftController._activePointer){
+            if (this.leftController && this.leftController._activePointer) {
                 this._castRayAndSelectObject(this.leftController);
             }
-            
-            if(this.rightController && this.rightController._activePointer){
+
+            if (this.rightController && this.rightController._activePointer) {
                 this._castRayAndSelectObject(this.rightController);
             }
 
-            if(this._noControllerIsActive){
+            if (this._noControllerIsActive) {
                 this._castRayAndSelectObject(this._cameraGazer);
-            }else{
+            } else {
                 this._cameraGazer._gazeTracker.isVisible = false;
             }
-            
+
         }
 
         private _isTeleportationFloor(mesh: AbstractMesh): boolean {
@@ -1094,10 +1125,10 @@ module BABYLON {
 
                 if (webVRController.hand === "right" || (this.leftController && this.leftController.webVRController != webVRController)) {
                     this.rightController = controller;
-                }else{
+                } else {
                     this.leftController = controller;
                 }
-                
+
                 this._tryEnableInteractionOnController(controller);
             }
         }
@@ -1114,7 +1145,7 @@ module BABYLON {
 
         private _onNewGamepadDisconnected = (gamepad: Gamepad) => {
             if (gamepad instanceof WebVRController) {
-                
+
                 if (gamepad.hand === "left" && this.leftController != null) {
                     this.leftController.dispose();
                     this.leftController = null;
@@ -1129,27 +1160,27 @@ module BABYLON {
         private _enableInteractionOnController(controller: VRExperienceHelperControllerGazer) {
             var controllerMesh = controller.webVRController.mesh;
             if (controllerMesh) {
-                
+
                 controller._interactionsEnabled = true;
                 controller._activatePointer();
-                if(this.webVROptions.laserToggle){
+                if (this.webVROptions.laserToggle) {
                     controller.webVRController.onMainButtonStateChangedObservable.add((stateObject) => {
                         // Enabling / disabling laserPointer 
                         if (this._displayLaserPointer && stateObject.value === 1) {
-                            if(controller._activePointer){
+                            if (controller._activePointer) {
                                 controller._deactivatePointer();
-                            }else{
+                            } else {
                                 controller._activatePointer();
                             }
-                            if(this.displayGaze){
+                            if (this.displayGaze) {
                                 controller._gazeTracker.isVisible = controller._activePointer;
                             }
                         }
                     });
                 }
                 controller.webVRController.onTriggerStateChangedObservable.add((stateObject) => {
-                    var gazer:VRExperienceHelperGazer = controller;
-                    if(this._noControllerIsActive){
+                    var gazer: VRExperienceHelperGazer = controller;
+                    if (this._noControllerIsActive) {
                         gazer = this._cameraGazer;
                     }
                     if (!gazer._pointerDownOnMeshAsked) {
@@ -1165,7 +1196,7 @@ module BABYLON {
 
         private _checkTeleportWithRay(stateObject: StickValues, gazer: VRExperienceHelperGazer) {
             // Dont teleport if another gaze already requested teleportation
-            if(this._teleportationRequestInitiated && !gazer._teleportationRequestInitiated){
+            if (this._teleportationRequestInitiated && !gazer._teleportationRequestInitiated) {
                 return;
             }
             if (!gazer._teleportationRequestInitiated) {
@@ -1176,15 +1207,15 @@ module BABYLON {
             } else {
                 // Listening to the proper controller values changes to confirm teleportation
                 if (Math.sqrt(stateObject.y * stateObject.y + stateObject.x * stateObject.x) < this._padSensibilityDown) {
-                    if(this._teleportActive){
+                    if (this._teleportActive) {
                         this._teleportCamera(this._haloCenter);
                     }
-                    
+
                     gazer._teleportationRequestInitiated = false;
                 }
             }
         }
-        private _checkRotate(stateObject: StickValues, gazer:VRExperienceHelperGazer) {
+        private _checkRotate(stateObject: StickValues, gazer: VRExperienceHelperGazer) {
             // Only rotate when user is not currently selecting a teleportation location
             if (gazer._teleportationRequestInitiated) {
                 return;
@@ -1216,7 +1247,7 @@ module BABYLON {
                 }
             }
         }
-        private _checkTeleportBackwards(stateObject: StickValues, gazer:VRExperienceHelperGazer) {
+        private _checkTeleportBackwards(stateObject: StickValues, gazer: VRExperienceHelperGazer) {
             // Only teleport backwards when user is not currently selecting a teleportation location
             if (gazer._teleportationRequestInitiated) {
                 return;
@@ -1462,14 +1493,14 @@ module BABYLON {
             this._scene.beginAnimation(this.currentVRCamera, 0, 6, false, 1);
         }
 
-        private _moveTeleportationSelectorTo(hit: PickingInfo, gazer:VRExperienceHelperGazer, ray: Ray) {
+        private _moveTeleportationSelectorTo(hit: PickingInfo, gazer: VRExperienceHelperGazer, ray: Ray) {
             if (hit.pickedPoint) {
                 if (gazer._teleportationRequestInitiated) {
                     this._displayTeleportationTarget();
                     this._haloCenter.copyFrom(hit.pickedPoint);
                     this._teleportationTarget.position.copyFrom(hit.pickedPoint);
                 }
-                
+
                 var pickNormal = this._convertNormalToDirectionOfRay(hit.getNormal(true, false), ray);
                 if (pickNormal) {
                     var axis1 = Vector3.Cross(Axis.Y, pickNormal);
@@ -1577,34 +1608,34 @@ module BABYLON {
             this._hideTeleportationTarget();
         }
 
-        private _convertNormalToDirectionOfRay(normal:Nullable<Vector3>, ray:Ray){
-            if(normal){
+        private _convertNormalToDirectionOfRay(normal: Nullable<Vector3>, ray: Ray) {
+            if (normal) {
                 var angle = Math.acos(BABYLON.Vector3.Dot(normal, ray.direction));
-                if(angle < Math.PI/2){
+                if (angle < Math.PI / 2) {
                     normal.scaleInPlace(-1);
                 }
-            }            
+            }
             return normal;
         }
 
-        private _castRayAndSelectObject(gazer:VRExperienceHelperGazer) {
+        private _castRayAndSelectObject(gazer: VRExperienceHelperGazer) {
             if (!(this.currentVRCamera instanceof FreeCamera)) {
                 return;
             }
-             
+
             var ray = gazer._getForwardRay(this._rayLength);
             var hit = this._scene.pickWithRay(ray, this._raySelectionPredicate);
-            if(hit){
+            if (hit) {
                 // Populate the contrllers mesh that can be used for drag/drop
-                if((<any>gazer)._laserPointer){
+                if ((<any>gazer)._laserPointer) {
                     hit.originMesh = (<any>gazer)._laserPointer.parent;
                 }
-                this._scene.simulatePointerMove(hit, {pointerId: gazer._id});
+                this._scene.simulatePointerMove(hit, { pointerId: gazer._id });
             }
             gazer._currentHit = hit;
 
             // Moving the gazeTracker on the mesh face targetted
-            if (hit && hit.pickedPoint) {                
+            if (hit && hit.pickedPoint) {
                 if (this._displayGaze) {
                     let multiplier = 1;
 
@@ -1649,13 +1680,13 @@ module BABYLON {
                 }
 
                 // Changing the size of the laser pointer based on the distance from the targetted point
-                gazer._updatePointerDistance(hit.distance);        
+                gazer._updatePointerDistance(hit.distance);
             }
             else {
-                gazer._updatePointerDistance();   
+                gazer._updatePointerDistance();
                 gazer._gazeTracker.isVisible = false;
             }
-            
+
             if (hit && hit.pickedMesh) {
                 // The object selected is the floor, we're in a teleportation scenario
                 if (this._teleportationInitialized && this._isTeleportationFloor(hit.pickedMesh) && hit.pickedPoint) {
@@ -1667,7 +1698,7 @@ module BABYLON {
                     }
 
                     gazer._currentMeshSelected = null;
-                    if(gazer._teleportationRequestInitiated){
+                    if (gazer._teleportationRequestInitiated) {
                         this._moveTeleportationSelectorTo(hit, gazer, ray);
                     }
                     return;
@@ -1711,9 +1742,9 @@ module BABYLON {
                 this.changeLaserColor(new Color3(0.7, 0.7, 0.7));
             }
         }
-        
-        private _notifySelectedMeshUnselected(mesh:Nullable<AbstractMesh>) {
-            if(mesh) {
+
+        private _notifySelectedMeshUnselected(mesh: Nullable<AbstractMesh>) {
+            if (mesh) {
                 this.onSelectedMeshUnselected.notifyObservers(mesh);
             }
         }
@@ -1725,7 +1756,7 @@ module BABYLON {
         public changeLaserColor(color: Color3) {
             if (this.leftController) {
                 this.leftController._setLaserPointerColor(color);
-                
+
             }
             if (this.rightController) {
                 this.rightController._setLaserPointerColor(color);
@@ -1737,14 +1768,14 @@ module BABYLON {
          * @param color new color for the ray.
          */
         public changeGazeColor(color: Color3) {
-            if(!(<StandardMaterial>this._cameraGazer._gazeTracker.material)){
+            if (!(<StandardMaterial>this._cameraGazer._gazeTracker.material)) {
                 return;
             }
             (<StandardMaterial>this._cameraGazer._gazeTracker.material).emissiveColor = color;
-            if(this.leftController){
+            if (this.leftController) {
                 (<StandardMaterial>this.leftController._gazeTracker.material).emissiveColor = color;
             }
-            if(this.rightController){
+            if (this.rightController) {
                 (<StandardMaterial>this.rightController._gazeTracker.material).emissiveColor = color;
             }
         }
@@ -1756,7 +1787,7 @@ module BABYLON {
             if (this.isInVRMode) {
                 this.exitVR();
             }
-            
+
             if (this._postProcessMove) {
                 this._postProcessMove.dispose();
             }

src/Cameras/VR/babylon.webVRCamera.ts

@@ -41,11 +41,11 @@ module BABYLON {
         readonly angularAcceleration: Nullable<Float32Array>;
     }
 
-     /**
-     * Interface representing a pose controlled object in Babylon.
-     * A pose controlled object has both regular pose values as well as pose values 
-     * from an external device such as a VR head mounted display
-     */
+    /**
+    * Interface representing a pose controlled object in Babylon.
+    * A pose controlled object has both regular pose values as well as pose values 
+    * from an external device such as a VR head mounted display
+    */
     export interface PoseControlled {
         /**
          * The position of the object in babylon space.
@@ -131,6 +131,7 @@ module BABYLON {
      */
     export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
         /**
+         * @hidden
          * The vrDisplay tied to the camera. See https://developer.mozilla.org/en-US/docs/Web/API/VRDisplay
          */
         public _vrDevice: any = null;
@@ -302,7 +303,7 @@ module BABYLON {
                 return this._deviceRoomPosition.y + this._workingVector.y
             }
             //If VRDisplay does not inform stage parameters and no default height is set we fallback to zero.
-            return this._defaultHeight || 0;            
+            return this._defaultHeight || 0;
         }
 
         /**
@@ -311,7 +312,7 @@ module BABYLON {
          */
         public useStandingMatrix(callback = (bool: boolean) => { }) {
             // Use standing matrix if available
-            this.getEngine().initWebVRAsync().then((result)=>{
+            this.getEngine().initWebVRAsync().then((result) => {
                 if (!result.vrDisplay || !result.vrDisplay.stageParameters || !result.vrDisplay.stageParameters.sittingToStandingTransform) {
                     callback(false);
                 } else {
@@ -333,9 +334,9 @@ module BABYLON {
          * Enables the standing matrix when supported. This can be used to position the user's view the correct height from the ground.
          * @returns A promise with a boolean set to if the standing matrix is supported.
          */
-        public useStandingMatrixAsync():Promise<boolean> {
-            return new Promise((res, rej)=>{
-                this.useStandingMatrix((supported)=>{
+        public useStandingMatrixAsync(): Promise<boolean> {
+            return new Promise((res, rej) => {
+                this.useStandingMatrix((supported) => {
                     res(supported);
                 });
             });
@@ -405,6 +406,7 @@ module BABYLON {
         }
 
         /**
+         * @hidden
          * Updates the camera based on device's frame data
          */
         public _checkInputs(): void {
@@ -492,6 +494,7 @@ module BABYLON {
         }
 
         /**
+         * @hidden
          * Updates the rig cameras (left and right eye)
          */
         public _updateRigCameras() {
@@ -511,6 +514,7 @@ module BABYLON {
         private updateCacheCalled: boolean;
 
         /**
+         * @hidden
          * Updates the cached values of the camera
          * @param ignoreParentClass ignores updating the parent class's cache (default: false)
          */
@@ -565,13 +569,14 @@ module BABYLON {
             this._workingMatrix.multiplyToRef(this._deviceToWorld, this._workingMatrix)
             Quaternion.FromRotationMatrixToRef(this._workingMatrix, this.deviceRotationQuaternion);
 
-            if(this._poseSet){
+            if (this._poseSet) {
                 this.onPoseUpdatedFromDeviceObservable.notifyObservers(null);
             }
             super.update();
         }
 
         /**
+         * @hidden
          * Gets the view matrix of this camera (Always set to identity as left and right eye cameras contain the actual view matrix)
          * @returns an identity matrix
          */
@@ -590,7 +595,7 @@ module BABYLON {
 
             //WebVR 1.1
             var viewArray = this._cameraRigParams["left"] ? this._cameraRigParams["frameData"].leftViewMatrix : this._cameraRigParams["frameData"].rightViewMatrix;
-            
+
             Matrix.FromArrayToRef(viewArray, 0, this._webvrViewMatrix);
 
             if (!this.getScene().useRightHandedSystem) {

src/Cameras/babylon.arcRotateCamera.ts

@@ -239,11 +239,16 @@
         @serialize()
         public allowUpsideDown = true;
 
+        /** @hidden */
         public _viewMatrix = new Matrix();
+        /** @hidden */
         public _useCtrlForPanning: boolean;
+        /** @hidden */
         public _panningMouseButton: number;
+
         public inputs: ArcRotateCameraInputsManager;
 
+        /** @hidden */
         public _reset: () => void;
 
         // Panning
@@ -362,6 +367,7 @@
         }
 
         // Cache
+        /** @hidden */
         public _initCache(): void {
             super._initCache();
             this._cache._target = new Vector3(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
@@ -371,6 +377,7 @@
             this._cache.targetScreenOffset = Vector2.Zero();
         }
 
+        /** @hidden */
         public _updateCache(ignoreParentClass?: boolean): void {
             if (!ignoreParentClass) {
                 super._updateCache();
@@ -422,6 +429,7 @@
         }
 
         /**
+         * @hidden
          * Restored camera state. You must call storeState() first
          */
         public _restoreStateValues(): boolean {
@@ -444,6 +452,7 @@
         }
 
         // Synchronized
+        /** @hidden */
         public _isSynchronizedViewMatrix(): boolean {
             if (!super._isSynchronizedViewMatrix())
                 return false;
@@ -479,6 +488,7 @@
             }
         }
 
+        /** @hidden */
         public _checkInputs(): void {
             //if (async) collision inspection was triggered, don't update the camera's position - until the collision callback was called.
             if (this._collisionTriggered) {
@@ -645,6 +655,7 @@
             this.rebuildAnglesAndRadius();
         }
 
+        /** @hidden */
         public _getViewMatrix(): Matrix {
             // Compute
             var cosa = Math.cos(this.alpha);
@@ -785,6 +796,7 @@
         }
 
         /**
+         * @hidden
          * @override
          * Override Camera._updateRigCameras
          */

src/Cameras/babylon.camera.ts

@@ -141,11 +141,17 @@
         @serialize()
         public isStereoscopicSideBySide: boolean
 
+        /** @hidden */
         public _cameraRigParams: any;
+        /** @hidden */
         public _rigCameras = new Array<Camera>();
+        /** @hidden */
         public _rigPostProcess: Nullable<PostProcess>;
+
         protected _webvrViewMatrix = Matrix.Identity();
+        /** @hidden */
         public _skipRendering = false;
+        /** @hidden */
         public _alternateCamera: Camera;
 
         public customRenderTargets = new Array<RenderTargetTexture>();
@@ -269,6 +275,7 @@
         }
 
         //Cache
+        /** @hidden */
         public _initCache() {
             super._initCache();
 
@@ -291,6 +298,7 @@
             this._cache.renderHeight = undefined;
         }
 
+        /** @hidden */
         public _updateCache(ignoreParentClass?: boolean): void {
             if (!ignoreParentClass) {
                 super._updateCache();
@@ -301,10 +309,12 @@
         }
 
         // Synchronized
+        /** @hidden */
         public _isSynchronized(): boolean {
             return this._isSynchronizedViewMatrix() && this._isSynchronizedProjectionMatrix();
         }
 
+        /** @hidden */
         public _isSynchronizedViewMatrix(): boolean {
             if (!super._isSynchronized())
                 return false;
@@ -314,6 +324,7 @@
                 && this.isSynchronizedWithParent();
         }
 
+        /** @hidden */
         public _isSynchronizedProjectionMatrix(): boolean {
             var check = this._cache.mode === this.mode
                 && this._cache.minZ === this.minZ
@@ -356,6 +367,7 @@
             }
         }
 
+        /** @hidden */
         public _checkInputs(): void {
             this.onAfterCheckInputsObservable.notifyObservers(this);
         }
@@ -372,9 +384,9 @@
          * Internal, gets the first post proces.
          * @returns the first post process to be run on this camera.
          */
-        public _getFirstPostProcess():Nullable<PostProcess>{
-            for(var ppIndex = 0; ppIndex < this._postProcesses.length; ppIndex++){
-                if(this._postProcesses[ppIndex] !== null){
+        public _getFirstPostProcess(): Nullable<PostProcess> {
+            for (var ppIndex = 0; ppIndex < this._postProcesses.length; ppIndex++) {
+                if (this._postProcesses[ppIndex] !== null) {
                     return this._postProcesses[ppIndex];
                 }
             }
@@ -417,9 +429,9 @@
 
             if (insertAt == null || insertAt < 0) {
                 this._postProcesses.push(postProcess);
-            } else if(this._postProcesses[insertAt] === null) {
+            } else if (this._postProcesses[insertAt] === null) {
                 this._postProcesses[insertAt] = postProcess;
-            }else{
+            } else {
                 this._postProcesses.splice(insertAt, 0, postProcess);
             }
             this._cascadePostProcessesToRigCams(); // also ensures framebuffer invalidated
@@ -445,6 +457,7 @@
             return this._worldMatrix;
         }
 
+        /** @hidden */
         public _getViewMatrix(): Matrix {
             return Matrix.Identity();
         }
@@ -652,7 +665,7 @@
                 var i = this._postProcesses.length;
                 while (--i >= 0) {
                     var postProcess = this._postProcesses[i]
-                    if(postProcess){
+                    if (postProcess) {
                         postProcess.dispose(this);
                     }
                 }
@@ -858,6 +871,7 @@
 
         /**
          * May need to be overridden by children
+         * @hidden
          */
         public _updateRigCameras() {
             for (var i = 0; i < this._rigCameras.length; i++) {
@@ -872,6 +886,7 @@
             }
         }
 
+        /** @hidden */
         public _setupInputs() {
         }
 

src/Cameras/babylon.deviceOrientationCamera.ts

@@ -36,6 +36,7 @@ module BABYLON {
         }
 
         /**
+         * @hidden
          * Checks and applies the current values of the inputs to the camera. (Internal use only)
          */
         public _checkInputs(): void {

src/Cameras/babylon.followCamera.ts

@@ -5,7 +5,7 @@
 
     Node.AddNodeConstructor("ArcFollowCamera", (name, scene) => {
         return () => new ArcFollowCamera(name, 0, 0, 1.0, null, scene);
-    });    
+    });
 
     export class FollowCamera extends TargetCamera {
         @serialize()
@@ -76,6 +76,7 @@
             this.setTarget(targetPosition);
         }
 
+        /** @hidden */
         public _checkInputs(): void {
             super._checkInputs();
             if (this.lockedTarget) {
@@ -110,6 +111,7 @@
             this.setTarget(targetPosition);
         }
 
+        /** @hidden */
         public _checkInputs(): void {
             super._checkInputs();
             this.follow();

src/Cameras/babylon.freeCamera.ts

@@ -1,7 +1,7 @@
 module BABYLON {
     Node.AddNodeConstructor("FreeCamera", (name, scene) => {
         // Forcing to use the Universal camera
-        return () => new UniversalCamera(name, Vector3.Zero(), scene);   
+        return () => new UniversalCamera(name, Vector3.Zero(), scene);
     });
 
     export class FreeCamera extends TargetCamera {
@@ -108,7 +108,9 @@
         private _diffPosition = Vector3.Zero();
         private _newPosition = Vector3.Zero();
 
+        /** @hidden */
         public _localDirection: Vector3;
+        /** @hidden */
         public _transformedDirection: Vector3;
 
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive = true) {
@@ -140,6 +142,7 @@
             this._collisionMask = !isNaN(mask) ? mask : -1;
         }
 
+        /** @hidden */
         public _collideWithWorld(displacement: Vector3): void {
             var globalPosition: Vector3;
 
@@ -193,6 +196,7 @@
             updatePosition(newPosition);
         }
 
+        /** @hidden */
         public _checkInputs(): void {
             if (!this._localDirection) {
                 this._localDirection = Vector3.Zero();
@@ -204,10 +208,12 @@
             super._checkInputs();
         }
 
+        /** @hidden */
         public _decideIfNeedsToMove(): boolean {
             return this._needMoveForGravity || Math.abs(this.cameraDirection.x) > 0 || Math.abs(this.cameraDirection.y) > 0 || Math.abs(this.cameraDirection.z) > 0;
         }
 
+        /** @hidden */
         public _updatePosition(): void {
             if (this.checkCollisions && this.getScene().collisionsEnabled) {
                 this._collideWithWorld(this.cameraDirection);

src/Cameras/babylon.targetCamera.ts

@@ -17,20 +17,27 @@
         @serializeAsMeshReference("lockedTargetId")
         public lockedTarget: any = null;
 
+        /** @hidden */
         public _currentTarget = Vector3.Zero();
+        /** @hidden */
         public _viewMatrix = Matrix.Zero();
+        /** @hidden */
         public _camMatrix = Matrix.Zero();
+        /** @hidden */
         public _cameraTransformMatrix = Matrix.Zero();
+        /** @hidden */
         public _cameraRotationMatrix = Matrix.Zero();
         private _rigCamTransformMatrix: Matrix;
 
+        /** @hidden */
         public _referencePoint = new Vector3(0, 0, 1);
-        private _currentUpVector = new Vector3(0, 1, 0);
+        /** @hidden */
         public _transformedReferencePoint = Vector3.Zero();
 
         protected _globalCurrentTarget = Vector3.Zero();
         protected _globalCurrentUpVector = Vector3.Zero();
 
+        /** @hidden */
         public _reset: () => void;
 
         constructor(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive = true) {
@@ -45,6 +52,7 @@
             return this.globalPosition.add(direction);
         }
 
+        /** @hidden */
         public _getLockedTargetPosition(): Nullable<Vector3> {
             if (!this.lockedTarget) {
                 return null;
@@ -79,6 +87,7 @@
         /**
          * Restored camera state. You must call storeState() first
          * @returns whether it was successful or not
+         * @hidden
          */
         public _restoreStateValues(): boolean {
             if (!super._restoreStateValues()) {
@@ -99,6 +108,7 @@
         }
 
         // Cache
+        /** @hidden */
         public _initCache() {
             super._initCache();
             this._cache.lockedTarget = new Vector3(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
@@ -106,6 +116,7 @@
             this._cache.rotationQuaternion = new Quaternion(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
         }
 
+        /** @hidden */
         public _updateCache(ignoreParentClass?: boolean): void {
             if (!ignoreParentClass) {
                 super._updateCache();
@@ -130,6 +141,7 @@
         }
 
         // Synchronized
+        /** @hidden */
         public _isSynchronizedViewMatrix(): boolean {
             if (!super._isSynchronizedViewMatrix()) {
                 return false;
@@ -142,12 +154,14 @@
         }
 
         // Methods
+        /** @hidden */
         public _computeLocalCameraSpeed(): number {
             var engine = this.getEngine();
             return this.speed * Math.sqrt((engine.getDeltaTime() / (engine.getFps() * 100.0)));
         }
 
         // Target
+        /** @hidden */
         public setTarget(target: Vector3): void {
             this.upVector.normalize();
 
@@ -155,7 +169,7 @@
                 this.position.z += Epsilon;
             }
 
-            Matrix.LookAtLHToRef(this.position, target, this.upVector, this._camMatrix);
+            Matrix.LookAtLHToRef(this.position, target, Vector3.Up(), this._camMatrix);
             this._camMatrix.invert();
 
             this.rotation.x = Math.atan(this._camMatrix.m[6] / this._camMatrix.m[10]);
@@ -195,10 +209,12 @@
             return this._currentTarget;
         }
 
+        /** @hidden */
         public _decideIfNeedsToMove(): boolean {
             return Math.abs(this.cameraDirection.x) > 0 || Math.abs(this.cameraDirection.y) > 0 || Math.abs(this.cameraDirection.z) > 0;
         }
 
+        /** @hidden */
         public _updatePosition(): void {
             if (this.parent) {
                 this.parent.getWorldMatrix().invertToRef(Tmp.Matrix[0]);
@@ -208,6 +224,8 @@
             }
             this.position.addInPlace(this.cameraDirection);
         }
+
+        /** @hidden */
         public _checkInputs(): void {
             var needToMove = this._decideIfNeedsToMove();
             var needToRotate = Math.abs(this.cameraRotation.x) > 0 || Math.abs(this.cameraRotation.y) > 0;
@@ -278,11 +296,18 @@
             } else {
                 Matrix.RotationYawPitchRollToRef(this.rotation.y, this.rotation.x, this.rotation.z, this._cameraRotationMatrix);
             }
+        }
 
-            //update the up vector!
-            Vector3.TransformNormalToRef(this.upVector, this._cameraRotationMatrix, this._currentUpVector);
+        /**
+         * Update the up vector to apply the rotation of the camera (So if you changed the camera rotation.z this will let you update the up vector as well)
+         * @returns the current camera
+         */
+        public rotateUpVectorWithCameraRotationMatrix(): TargetCamera {
+            Vector3.TransformNormalToRef(this.upVector, this._cameraRotationMatrix, this.upVector);
+            return this;
         }
 
+        /** @hidden */
         public _getViewMatrix(): Matrix {
             if (this.lockedTarget) {
                 this.setTarget(this._getLockedTargetPosition()!);
@@ -296,7 +321,7 @@
             // Computing target and final matrix
             this.position.addToRef(this._transformedReferencePoint, this._currentTarget);
 
-            this._computeViewMatrix(this.position, this._currentTarget, this._currentUpVector);
+            this._computeViewMatrix(this.position, this._currentTarget, this.upVector);
             return this._viewMatrix;
         }
 
@@ -340,6 +365,7 @@
         }
 
         /**
+         * @hidden
          * @override
          * Override Camera._updateRigCameras
          */

src/Cameras/babylon.touchCamera.ts

@@ -46,6 +46,7 @@ module BABYLON {
             return "TouchCamera";
         }
 
+        /** @hidden */
         public _setupInputs() {
             var mouse = <FreeCameraMouseInput>this.inputs.attached["mouse"];
             if (mouse) {

src/Collisions/babylon.collider.ts

@@ -83,16 +83,22 @@
         private _slidePlaneNormal = Vector3.Zero();
         private _displacementVector = Vector3.Zero();
 
+        /** @hidden */
         public _radius = Vector3.One();
+        /** @hidden */
         public _retry = 0;
         private _velocity: Vector3;
         private _basePoint: Vector3;
         private _epsilon: number;
+        /** @hidden */
         public _velocityWorldLength: number;
+        /** @hidden */
         public _basePointWorld = Vector3.Zero();
         private _velocityWorld = Vector3.Zero();
         private _normalizedVelocity = Vector3.Zero();
+        /** @hidden */
         public _initialVelocity: Vector3;
+        /** @hidden */
         public _initialPosition: Vector3;
         private _nearestDistance: number;
 
@@ -114,6 +120,7 @@
         }
 
         // Methods
+        /** @hidden */
         public _initialize(source: Vector3, dir: Vector3, e: number): void {
             this._velocity = dir;
             Vector3.NormalizeToRef(dir, this._normalizedVelocity);
@@ -128,6 +135,7 @@
             this.collisionFound = false;
         }
 
+        /** @hidden */
         public _checkPointInTriangle(point: Vector3, pa: Vector3, pb: Vector3, pc: Vector3, n: Vector3): boolean {
             pa.subtractToRef(point, this._tempVector);
             pb.subtractToRef(point, this._tempVector2);
@@ -148,6 +156,7 @@
             return d >= 0;
         }
 
+        /** @hidden */
         public _canDoCollision(sphereCenter: Vector3, sphereRadius: number, vecMin: Vector3, vecMax: Vector3): boolean {
             var distance = Vector3.Distance(this._basePointWorld, sphereCenter);
 
@@ -163,6 +172,7 @@
             return true;
         }
 
+        /** @hidden */
         public _testTriangle(faceIndex: number, trianglePlaneArray: Array<Plane>, p1: Vector3, p2: Vector3, p3: Vector3, hasMaterial: boolean): void {
             var t0;
             var embeddedInPlane = false;
@@ -346,6 +356,7 @@
             }
         }
 
+        /** @hidden */
         public _collide(trianglePlaneArray: Array<Plane>, pts: Vector3[], indices: IndicesArray, indexStart: number, indexEnd: number, decal: number, hasMaterial: boolean): void {
             for (var i = indexStart; i < indexEnd; i += 3) {
                 var p1 = pts[indices[i] - decal];
@@ -356,6 +367,7 @@
             }
         }
 
+        /** @hidden */
         public _getResponse(pos: Vector3, vel: Vector3): void {
             pos.addToRef(vel, this._destinationPoint);
             vel.scaleInPlace((this._nearestDistance / vel.length()));

src/Culling/babylon.boundingBox.ts

@@ -34,7 +34,7 @@
             this.minimum = min.clone();
             this.maximum = max.clone()
             // Bounding vectors
-            this.vectors= new Array<Vector3>();
+            this.vectors = new Array<Vector3>();
             this.vectors.push(this.minimum.clone());
             this.vectors.push(this.maximum.clone());
 
@@ -101,6 +101,7 @@
             return this;
         }
 
+        /** @hidden */
         public _update(world: Matrix): void {
             Vector3.FromFloatsToRef(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE, this.minimumWorld);
             Vector3.FromFloatsToRef(-Number.MAX_VALUE, -Number.MAX_VALUE, -Number.MAX_VALUE, this.maximumWorld);

src/Culling/babylon.boundingInfo.ts

@@ -42,7 +42,7 @@
             return this._isLocked;
         }
 
-        public set isLocked(value: boolean) { 
+        public set isLocked(value: boolean) {
             this._isLocked = value;
         }
 
@@ -92,16 +92,16 @@
         /**
 		 * Gets the world distance between the min and max points of the bounding box
 		 */
-		public get diagonalLength(): number {
+        public get diagonalLength(): number {
             let boundingBox = this.boundingBox;
             let size = boundingBox.maximumWorld.subtract(boundingBox.minimumWorld);
-		    return size.length();
-		}     
+            return size.length();
+        }
 
         public isCompletelyInFrustum(frustumPlanes: Plane[]): boolean {
             return this.boundingBox.isCompletelyInFrustum(frustumPlanes);
         }
-       
+        /** @hidden */
         public _checkCollision(collider: Collider): boolean {
             return collider._canDoCollision(this.boundingSphere.centerWorld, this.boundingSphere.radiusWorld, this.boundingBox.minimumWorld, this.boundingBox.maximumWorld);
         }

src/Culling/babylon.boundingSphere.ts

@@ -33,7 +33,7 @@
             this.radius = distance * 0.5;
 
             this.centerWorld = Vector3.Zero();
-            this._update(Matrix.Identity());            
+            this._update(Matrix.Identity());
         }
 
         /**
@@ -54,6 +54,7 @@
         }
 
         // Methods
+        /** @hidden */
         public _update(world: Matrix): void {
             Vector3.TransformCoordinatesToRef(this.center, world, this.centerWorld);
             Vector3.TransformNormalFromFloatsToRef(1.0, 1.0, 1.0, world, this._tempRadiusVector);

src/Engine/babylon.engine.ts

@@ -359,17 +359,57 @@
         public static readonly TEXTUREFORMAT_RGB = 4;
         /** RGBA */
         public static readonly TEXTUREFORMAT_RGBA = 5;
-        /** R */
+        /** RED */
+        public static readonly TEXTUREFORMAT_RED = 6;
+        /** RED (2nd reference) */
         public static readonly TEXTUREFORMAT_R = 6;
         /** RG */
         public static readonly TEXTUREFORMAT_RG = 7;
-
-        /** UNSIGNED_INT */
+        /** RED_INTEGER */
+        public static readonly TEXTUREFORMAT_RED_INTEGER = 8;
+        /** RED_INTEGER (2nd reference) */
+        public static readonly TEXTUREFORMAT_R_INTEGER = 8;
+        /** RG_INTEGER */
+        public static readonly TEXTUREFORMAT_RG_INTEGER = 9;
+        /** RGB_INTEGER */
+        public static readonly TEXTUREFORMAT_RGB_INTEGER = 10;
+        /** RGBA_INTEGER */
+        public static readonly TEXTUREFORMAT_RGBA_INTEGER = 11;
+
+        /** UNSIGNED_BYTE */
+        public static readonly TEXTURETYPE_UNSIGNED_BYTE = 0;
+        /** UNSIGNED_BYTE (2nd reference) */
         public static readonly TEXTURETYPE_UNSIGNED_INT = 0;
         /** FLOAT */
         public static readonly TEXTURETYPE_FLOAT = 1;
         /** HALF_FLOAT */
         public static readonly TEXTURETYPE_HALF_FLOAT = 2;
+        /** BYTE */
+        public static readonly TEXTURETYPE_BYTE = 3;
+        /** SHORT */
+        public static readonly TEXTURETYPE_SHORT = 4;
+        /** UNSIGNED_SHORT */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT = 5;
+        /** INT */
+        public static readonly TEXTURETYPE_INT = 6;
+        /** UNSIGNED_INT */
+        public static readonly TEXTURETYPE_UNSIGNED_INTEGER = 7;
+        /** UNSIGNED_SHORT_4_4_4_4 */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4 = 8;
+        /** UNSIGNED_SHORT_5_5_5_1 */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1 = 9;
+        /** UNSIGNED_SHORT_5_6_5 */
+        public static readonly TEXTURETYPE_UNSIGNED_SHORT_5_6_5 = 10;
+        /** UNSIGNED_INT_2_10_10_10_REV */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV = 11;
+        /** UNSIGNED_INT_24_8 */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_24_8 = 12;
+        /** UNSIGNED_INT_10F_11F_11F_REV */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV = 13;
+        /** UNSIGNED_INT_5_9_9_9_REV */
+        public static readonly TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV = 14;
+        /** FLOAT_32_UNSIGNED_INT_24_8_REV */
+        public static readonly TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV = 15;
 
         /** nearest is mag = nearest and min = nearest and mip = linear */
         public static readonly TEXTURE_NEAREST_SAMPLINGMODE = 1; 
@@ -435,7 +475,7 @@
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "3.3.0-alpha.13";
+            return "3.3.0-alpha.14";
         }
 
         // Updatable statics so stick with vars here
@@ -4850,6 +4890,7 @@
             texture.generateMipMaps = fullOptions.generateMipMaps ? true : false;
             texture.samplingMode = fullOptions.samplingMode;
             texture.type = fullOptions.type;
+            texture.format = fullOptions.format;
             texture._generateDepthBuffer = fullOptions.generateDepthBuffer;
             texture._generateStencilBuffer = fullOptions.generateStencilBuffer ? true : false;
 
@@ -5353,6 +5394,7 @@
             texture.generateMipMaps = fullOptions.generateMipMaps;
             texture.samplingMode = fullOptions.samplingMode;
             texture.type = fullOptions.type;
+            texture.format = fullOptions.format;
             texture._generateDepthBuffer = fullOptions.generateDepthBuffer;
             texture._generateStencilBuffer = fullOptions.generateStencilBuffer;
 
@@ -7027,12 +7069,51 @@
 
         /** @hidden */
         public _getWebGLTextureType(type: number): number {
-            if (type === Engine.TEXTURETYPE_FLOAT) {
-                return this._gl.FLOAT;
-            }
-            else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
-                // Add Half Float Constant.
-                return this._gl.HALF_FLOAT_OES;
+            if (this._webGLVersion === 1) {
+                switch (type) {
+                    case Engine.TEXTURETYPE_FLOAT:
+                        return this._gl.FLOAT;
+                    case Engine.TEXTURETYPE_HALF_FLOAT:
+                        return this._gl.HALF_FLOAT_OES;
+                    case Engine.TEXTURETYPE_UNSIGNED_BYTE:
+                        return this._gl.UNSIGNED_BYTE;
+                }
+                return this._gl.UNSIGNED_BYTE;
+            }
+
+            switch (type) {
+                case Engine.TEXTURETYPE_BYTE:
+                    return this._gl.BYTE;
+                case Engine.TEXTURETYPE_UNSIGNED_BYTE:
+                    return this._gl.UNSIGNED_BYTE;
+                case Engine.TEXTURETYPE_SHORT:
+                    return this._gl.SHORT;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT:
+                    return this._gl.UNSIGNED_SHORT;
+                case Engine.TEXTURETYPE_INT:
+                    return this._gl.INT;
+                case Engine.TEXTURETYPE_UNSIGNED_INTEGER: // Refers to UNSIGNED_INT
+                    return this._gl.UNSIGNED_INT;
+                case Engine.TEXTURETYPE_FLOAT:
+                    return this._gl.FLOAT;
+                case Engine.TEXTURETYPE_HALF_FLOAT:
+                    return this._gl.HALF_FLOAT;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4:
+                    return this._gl.UNSIGNED_SHORT_4_4_4_4;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1:
+                    return this._gl.UNSIGNED_SHORT_5_5_5_1;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_6_5:
+                    return this._gl.UNSIGNED_SHORT_5_6_5;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV:
+                    return this._gl.UNSIGNED_INT_2_10_10_10_REV;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_24_8:
+                    return this._gl.UNSIGNED_INT_24_8;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV:
+                    return this._gl.UNSIGNED_INT_10F_11F_11F_REV;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV:
+                    return this._gl.UNSIGNED_INT_5_9_9_9_REV;
+                case Engine.TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV:
+                    return this._gl.FLOAT_32_UNSIGNED_INT_24_8_REV;
             }
 
             return this._gl.UNSIGNED_BYTE;
@@ -7040,6 +7121,7 @@
 
         private _getInternalFormat(format: number): number {
             var internalFormat = this._gl.RGBA;
+
             switch (format) {
                 case Engine.TEXTUREFORMAT_ALPHA:
                     internalFormat = this._gl.ALPHA;
@@ -7050,18 +7132,35 @@
                 case Engine.TEXTUREFORMAT_LUMINANCE_ALPHA:
                     internalFormat = this._gl.LUMINANCE_ALPHA;
                     break;
+                case Engine.TEXTUREFORMAT_RED:
+                    internalFormat = this._gl.RED;
+                    break;
+                case Engine.TEXTUREFORMAT_RG:
+                    internalFormat = this._gl.RG;
+                    break;
                 case Engine.TEXTUREFORMAT_RGB:
                     internalFormat = this._gl.RGB;
                     break;
                 case Engine.TEXTUREFORMAT_RGBA:
                     internalFormat = this._gl.RGBA;
                     break;
-                case Engine.TEXTUREFORMAT_R:
-                    internalFormat = this._gl.RED;
-                    break;       
-                case Engine.TEXTUREFORMAT_RG:
-                    internalFormat = this._gl.RG;
-                    break;                                    
+            }
+
+            if (this._webGLVersion > 1) {
+                switch (format) {
+                    case Engine.TEXTUREFORMAT_RED_INTEGER:
+                        internalFormat = this._gl.RED_INTEGER;
+                        break;
+                    case Engine.TEXTUREFORMAT_RG_INTEGER:
+                        internalFormat = this._gl.RG_INTEGER;
+                        break;
+                    case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                        internalFormat = this._gl.RGB_INTEGER;
+                        break;
+                    case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                        internalFormat = this._gl.RGBA_INTEGER;
+                        break;
+                }
             }
 
             return internalFormat;
@@ -7072,58 +7171,158 @@
             if (this._webGLVersion === 1) {
                 if (format !== undefined) {
                     switch(format) {
+                        case Engine.TEXTUREFORMAT_ALPHA:
+                            return this._gl.ALPHA; 
                         case Engine.TEXTUREFORMAT_LUMINANCE:
                             return this._gl.LUMINANCE;
-                        case Engine.TEXTUREFORMAT_ALPHA:
-                            return this._gl.ALPHA;     
+                        case Engine.TEXTUREFORMAT_LUMINANCE_ALPHA:
+                            return this._gl.LUMINANCE_ALPHA;
                     }                    
                 }
                 return this._gl.RGBA;
             }
 
-            if (type === Engine.TEXTURETYPE_FLOAT) {
-                if (format !== undefined) {
-                    switch(format) {
-                        case Engine.TEXTUREFORMAT_R:
-                            return this._gl.R32F;
+            switch (type) {
+                case Engine.TEXTURETYPE_BYTE:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
+                            return this._gl.R8_SNORM;
                         case Engine.TEXTUREFORMAT_RG:
-                            return this._gl.RG32F;
-                            case Engine.TEXTUREFORMAT_RGB:
-                            return this._gl.RGB32F;
-                    }                    
-                }
-                return this._gl.RGBA32F;
-            }
-
-            if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
-                if (format) {
-                    switch(format) {
-                        case Engine.TEXTUREFORMAT_R:
+                            return this._gl.RG8_SNORM;
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB8_SNORM;
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R8I;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG8I;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB8I;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA8I;
+                        default:
+                            return this._gl.RGBA8_SNORM;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_BYTE:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
+                            return this._gl.R8;
+                        case Engine.TEXTUREFORMAT_RG:
+                            return this._gl.RG8;
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB8; // By default. Other possibilities are RGB565, SRGB8.
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGBA8; // By default. Other possibilities are RGB5_A1, RGBA4, SRGB8_ALPHA8.
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R8UI;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG8UI;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB8UI;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA8UI;
+                        default:
+                            return this._gl.RGBA8;
+                        }
+                case Engine.TEXTURETYPE_SHORT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R16I;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG16I;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB16I;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA16I;
+                        default:
+                            return this._gl.RGBA16I;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R16UI;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG16UI;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB16UI;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA16UI;
+                        default:
+                            return this._gl.RGBA16UI;
+                    }
+                case Engine.TEXTURETYPE_INT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R32I;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG32I;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB32I;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA32I;
+                        default:
+                            return this._gl.RGBA32I;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_INTEGER: // Refers to UNSIGNED_INT
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED_INTEGER:
+                            return this._gl.R32UI;
+                        case Engine.TEXTUREFORMAT_RG_INTEGER:
+                            return this._gl.RG32UI;
+                        case Engine.TEXTUREFORMAT_RGB_INTEGER:
+                            return this._gl.RGB32UI;
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGBA32UI;
+                        default:
+                            return this._gl.RGBA32UI;
+                    }
+                case Engine.TEXTURETYPE_FLOAT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
+                            return this._gl.R32F; // By default. Other possibility is R16F.
+                        case Engine.TEXTUREFORMAT_RG:
+                            return this._gl.RG32F; // By default. Other possibility is RG16F.
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB32F; // By default. Other possibilities are RGB16F, R11F_G11F_B10F, RGB9_E5.
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGBA32F; // By default. Other possibility is RGBA16F.
+                        default:
+                            return this._gl.RGBA32F;
+                    }
+                case Engine.TEXTURETYPE_HALF_FLOAT:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RED:
                             return this._gl.R16F;
                         case Engine.TEXTUREFORMAT_RG:
                             return this._gl.RG16F;
-                            case Engine.TEXTUREFORMAT_RGB:
-                            return this._gl.RGB16F;
-                    }                    
-                }
-                return this._gl.RGBA16F;
+                        case Engine.TEXTUREFORMAT_RGB:
+                            return this._gl.RGB16F; // By default. Other possibilities are R11F_G11F_B10F, RGB9_E5.
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGBA16F;
+                        default:
+                            return this._gl.RGBA16F;
+                    }
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_6_5:
+                    return this._gl.RGB565;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV:
+                    return this._gl.R11F_G11F_B10F;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV:
+                    return this._gl.RGB9_E5;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4:
+                    return this._gl.RGBA4;
+                case Engine.TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1:
+                    return this._gl.RGB5_A1;
+                case Engine.TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV:
+                    switch (format) {
+                        case Engine.TEXTUREFORMAT_RGBA:
+                            return this._gl.RGB10_A2; // By default. Other possibility is RGB5_A1.
+                        case Engine.TEXTUREFORMAT_RGBA_INTEGER:
+                            return this._gl.RGB10_A2UI;
+                        default:
+                            return this._gl.RGB10_A2;
+                    }
             }
 
-            if (format !== undefined) {
-                switch(format) {
-                    case Engine.TEXTUREFORMAT_LUMINANCE:
-                        return this._gl.LUMINANCE;
-                    case Engine.TEXTUREFORMAT_RGB:
-                        return this._gl.RGB;
-                    case Engine.TEXTUREFORMAT_R:
-                        return this._gl.R8;
-                    case Engine.TEXTUREFORMAT_RG:
-                        return this._gl.RG8;
-                    case Engine.TEXTUREFORMAT_ALPHA:
-                        return this._gl.ALPHA;
-                }
-            }
-            return this._gl.RGBA;
+            return this._gl.RGBA8;
         };
 
         /** @hidden */

src/Engine/babylon.nullEngine.ts

@@ -288,10 +288,12 @@
         public drawArraysType(fillMode: number, verticesStart: number, verticesCount: number, instancesCount?: number): void {
         }
 
+        /** @hidden */
         public _createTexture(): WebGLTexture {
             return {};
         }
 
+        /** @hidden */
         public _releaseTexture(texture: InternalTexture): void {
         }
 
@@ -404,6 +406,7 @@
         }
 
         /**
+         * @hidden
          * Get the current error code of the webGL context
          * @returns the error code
          * @see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getError
@@ -442,6 +445,7 @@
             return false;
         }
 
+        /** @hidden */
         public _bindTexture(channel: number, texture: InternalTexture): void {
             if (channel < 0) {
                 return;
@@ -450,6 +454,7 @@
             this._bindTextureDirectly(0, texture);
         }
 
+        /** @hidden */
         public _releaseBuffer(buffer: WebGLBuffer): boolean {
             buffer.references--;
 

src/Engine/babylon.webgl2.ts

@@ -13,6 +13,47 @@ interface WebGLRenderingContext {
     readonly COMPARE_REF_TO_TEXTURE: number;
     readonly TEXTURE_WRAP_R: number;
     readonly HALF_FLOAT: number;
+    readonly RGB8: number;
+    readonly RED_INTEGER: number;
+    readonly RG_INTEGER: number;
+    readonly RGB_INTEGER: number;
+    readonly RGBA_INTEGER: number;
+    readonly R8_SNORM: number;
+    readonly RG8_SNORM: number;
+    readonly RGB8_SNORM: number;
+    readonly RGBA8_SNORM: number;
+    readonly R8I: number;
+    readonly RG8I: number;
+    readonly RGB8I: number;
+    readonly RGBA8I: number;
+    readonly R8UI: number;
+    readonly RG8UI: number;
+    readonly RGB8UI: number;
+    readonly RGBA8UI: number;
+    readonly R16I: number;
+    readonly RG16I: number;
+    readonly RGB16I: number;
+    readonly RGBA16I: number;
+    readonly R16UI: number;
+    readonly RG16UI: number;
+    readonly RGB16UI: number;
+    readonly RGBA16UI: number;
+    readonly R32I: number;
+    readonly RG32I: number;
+    readonly RGB32I: number;
+    readonly RGBA32I: number;
+    readonly R32UI: number;
+    readonly RG32UI: number;
+    readonly RGB32UI: number;
+    readonly RGBA32UI: number;
+    readonly RGB10_A2UI: number;
+    readonly R11F_G11F_B10F: number;
+    readonly RGB9_E5: number;
+    readonly RGB10_A2: number;
+    readonly UNSIGNED_INT_2_10_10_10_REV: number;
+    readonly UNSIGNED_INT_10F_11F_11F_REV: number;
+    readonly UNSIGNED_INT_5_9_9_9_REV: number;
+    readonly FLOAT_32_UNSIGNED_INT_24_8_REV: number;
 
     texImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, format: number, type: number, pixels: ArrayBufferView | null): void;
     texImage3D(target: number, level: number, internalformat: number, width: number, height: number, depth: number, border: number, format: number, type: number, pixels: ArrayBufferView, offset: number): void;
@@ -29,6 +70,11 @@ interface WebGLRenderingContext {
     beginTransformFeedback(primitiveMode: number): void;
     endTransformFeedback(): void;
     transformFeedbackVaryings(program: WebGLProgram, varyings: string[], bufferMode: number): void;
+
+    clearBufferfv(buffer: number, drawbuffer: number, values: ArrayBufferView, srcOffset: number | null): void;
+    clearBufferiv(buffer: number, drawbuffer: number, values: ArrayBufferView, srcOffset: number | null): void;
+    clearBufferuiv(buffer: number, drawbuffer: number, values: ArrayBufferView, srcOffset: number | null): void;
+    clearBufferfi(buffer: number, drawbuffer: number, depth: number, stencil: number): void;
 }
 
 interface ImageBitmap {

src/Gamepad/Controllers/babylon.poseEnabledController.ts

@@ -147,6 +147,7 @@ module BABYLON {
 
         /**
          * Internal, the mesh attached to the controller
+         * @hidden
          */
         public _mesh: Nullable<AbstractMesh>; // a node that will be attached to this Gamepad
         private _poseControlledCamera: TargetCamera;
@@ -155,13 +156,15 @@ module BABYLON {
 
         /**
          * Internal, matrix used to convert room space to babylon space
+         * @hidden
          */
         public _deviceToWorld = Matrix.Identity();
 
         /**
          * Node to be used when casting a ray from the controller
+         * @hidden
          */
-        public _pointingPoseNode:Nullable<AbstractMesh> = null;
+        public _pointingPoseNode: Nullable<AbstractMesh> = null;
         /**
          * Name of the child mesh that can be used to cast a ray from the controller
          */
@@ -194,7 +197,7 @@ module BABYLON {
         /**
          * Updates only the pose device and mesh without doing any button event checking
          */
-        protected _updatePoseAndMesh(){
+        protected _updatePoseAndMesh() {
             var pose: GamepadPose = this.browserGamepad.pose;
             this.updateFromDevice(pose);
 
@@ -269,14 +272,14 @@ module BABYLON {
 
             // Sync controller mesh and pointing pose node's state with controller, this is done to avoid a frame where position is 0,0,0 when attaching mesh
             this._updatePoseAndMesh();
-            if(this._pointingPoseNode){
+            if (this._pointingPoseNode) {
                 var parents = [];
-                var obj:Node = this._pointingPoseNode;
-                while(obj.parent){
-                    parents.push(obj.parent); 
+                var obj: Node = this._pointingPoseNode;
+                while (obj.parent) {
+                    parents.push(obj.parent);
                     obj = obj.parent;
                 }
-                parents.reverse().forEach((p)=>{p.computeWorldMatrix(true)});
+                parents.reverse().forEach((p) => { p.computeWorldMatrix(true) });
             }
 
             this._meshAttachedObservable.notifyObservers(mesh);

src/Gamepad/babylon.gamepad.ts

@@ -10,7 +10,7 @@
         touchChanged: boolean;
         valueChanged: boolean;
     }
-    
+
     export class Gamepad {
 
         public type: number;
@@ -18,6 +18,7 @@
         private _leftStick: StickValues;
         private _rightStick: StickValues;
 
+        /** @hidden */
         public _isConnected = true;
 
         private _leftStickAxisX: number;
@@ -33,7 +34,7 @@
         public static XBOX = 2;
         public static POSE_ENABLED = 3;
 
-        protected _invertLeftStickY:boolean = false;
+        protected _invertLeftStickY: boolean = false;
 
         public get isConnected(): boolean {
             return this._isConnected;
@@ -83,7 +84,7 @@
         public update() {
             if (this._leftStick) {
                 this.leftStick = { x: this.browserGamepad.axes[this._leftStickAxisX], y: this.browserGamepad.axes[this._leftStickAxisY] };
-                if(this._invertLeftStickY){
+                if (this._invertLeftStickY) {
                     this.leftStick.y *= -1;
                 }
             }
@@ -92,14 +93,14 @@
             }
         }
 
-        public dispose() {            
+        public dispose() {
         }
     }
 
     export class GenericPad extends Gamepad {
         private _buttons: Array<number>;
         private _onbuttondown: (buttonPressed: number) => void;
-        private _onbuttonup: (buttonReleased: number) => void;        
+        private _onbuttonup: (buttonReleased: number) => void;
 
         public onButtonDownObservable = new Observable<number>();
         public onButtonUpObservable = new Observable<number>();
@@ -144,7 +145,7 @@
             }
         }
 
-        public dispose(){
+        public dispose() {
             super.dispose();
             this.onButtonDownObservable.clear();
             this.onButtonUpObservable.clear();

src/Gamepad/babylon.gamepadManager.ts

@@ -3,6 +3,7 @@
         private _babylonGamepads: Array<Gamepad> = [];
         private _oneGamepadConnected: boolean = false;
 
+        /** @hidden */
         public _isMonitoring: boolean = false;
         private _gamepadEventSupported: boolean;
         private _gamepadSupport: () => Array<any>;
@@ -160,6 +161,7 @@
             this._isMonitoring = false;
         }
 
+        /** @hidden */
         public _checkGamepadsStatus() {
             // Hack to be compatible Chrome
             this._updateGamepadObjects();

src/Gizmos/babylon.axisDragGizmo.ts

@@ -53,7 +53,7 @@ module BABYLON {
             arrowTail.material = coloredMaterial;
             arrow.lookAt(this._rootMesh.position.subtract(dragAxis));
 
-            this._rootMesh.addChild(arrow)
+            this._rootMesh.addChild(arrow);
 
             var currentSnapDragDistance = 0;
             var tmpVector = new Vector3();
@@ -62,17 +62,28 @@ module BABYLON {
             this.dragBehavior = new PointerDragBehavior({dragAxis: dragAxis});
             this.dragBehavior.moveAttached = false;
             this._rootMesh.addBehavior(this.dragBehavior);
+
+            var localDelta = new BABYLON.Vector3();
+            var tmpMatrix = new BABYLON.Matrix();
             this.dragBehavior.onDragObservable.add((event)=>{
                 if(this.attachedMesh){
+                    // Convert delta to local translation if it has a parent
+                    if(this.attachedMesh.parent){
+                        this.attachedMesh.parent.computeWorldMatrix().invertToRef(tmpMatrix);
+                        tmpMatrix.setTranslationFromFloats(0,0,0);
+                        Vector3.TransformCoordinatesToRef(event.delta, tmpMatrix, localDelta);
+                    }else{
+                        localDelta.copyFrom(event.delta);
+                    }
                     // Snapping logic
                     if(this.snapDistance == 0){
-                        this.attachedMesh.position.addInPlace(event.delta);
+                        this.attachedMesh.position.addInPlace(localDelta);
                     }else{
-                        currentSnapDragDistance+=event.dragDistance
+                        currentSnapDragDistance+=event.dragDistance;
                         if(Math.abs(currentSnapDragDistance)>this.snapDistance){
                             var dragSteps = Math.floor(Math.abs(currentSnapDragDistance)/this.snapDistance);
                             currentSnapDragDistance = currentSnapDragDistance % this.snapDistance;
-                            event.delta.normalizeToRef(tmpVector);
+                            localDelta.normalizeToRef(tmpVector);
                             tmpVector.scaleInPlace(this.snapDistance*dragSteps);
                             this.attachedMesh.position.addInPlace(tmpVector);
                             tmpSnapEvent.snapDistance = this.snapDistance*dragSteps;

src/Gizmos/babylon.gizmo.ts

@@ -101,6 +101,8 @@ module BABYLON {
                     this.attachedMesh.scaling.copyFrom(this._tempVector);
                     this.attachedMesh.computeWorldMatrix();
                     Quaternion.FromRotationMatrixToRef(this._tmpMatrix, this._rootMesh.rotationQuaternion);
+                }else if(this._rootMesh.rotationQuaternion){
+                    this._rootMesh.rotationQuaternion.set(0,0,0,1);
                 }
                 if(this.updateGizmoPositionToMatchAttachedMesh){
                     this._rootMesh.position.copyFrom(this.attachedMesh.absolutePosition);

src/Gizmos/babylon.gizmoManager.ts

@@ -8,7 +8,6 @@ module BABYLON {
          */
         public gizmos:{positionGizmo: Nullable<PositionGizmo>, rotationGizmo: Nullable<RotationGizmo>, scaleGizmo: Nullable<ScaleGizmo>, boundingBoxGizmo: Nullable<BoundingBoxGizmo>};
         private _gizmosEnabled = {positionGizmo: false, rotationGizmo: false, scaleGizmo: false, boundingBoxGizmo: false};
-        private _gizmoLayer:UtilityLayerRenderer;
         private _pointerObserver:Nullable<Observer<PointerInfo>> = null;
         private _attachedMesh:Nullable<AbstractMesh> = null;
         private _boundingBoxColor = BABYLON.Color3.FromHexString("#0984e3");
@@ -90,8 +89,10 @@ module BABYLON {
          */
         public set positionGizmoEnabled(value:boolean){
             if(value){
-                this.gizmos.positionGizmo = this.gizmos.positionGizmo || new PositionGizmo();
-                this.gizmos.positionGizmo.updateGizmoRotationToMatchAttachedMesh = false;
+                if(!this.gizmos.positionGizmo){
+                    this.gizmos.positionGizmo = new PositionGizmo();
+                    this.gizmos.positionGizmo.updateGizmoRotationToMatchAttachedMesh = false;
+                }
                 this.gizmos.positionGizmo.attachedMesh = this._attachedMesh;
             }else if(this.gizmos.positionGizmo){
                 this.gizmos.positionGizmo.attachedMesh = null;
@@ -106,8 +107,10 @@ module BABYLON {
          */
         public set rotationGizmoEnabled(value:boolean){
             if(value){
-                this.gizmos.rotationGizmo = this.gizmos.rotationGizmo || new RotationGizmo();
-                this.gizmos.rotationGizmo.updateGizmoRotationToMatchAttachedMesh = false;
+                if(!this.gizmos.rotationGizmo){
+                    this.gizmos.rotationGizmo = new RotationGizmo();
+                    this.gizmos.rotationGizmo.updateGizmoRotationToMatchAttachedMesh = false;
+                }
                 this.gizmos.rotationGizmo.attachedMesh = this._attachedMesh;
             }else if(this.gizmos.rotationGizmo){
                 this.gizmos.rotationGizmo.attachedMesh = null;
@@ -164,7 +167,6 @@ module BABYLON {
                 }
             }
             this._dragBehavior.detach();
-            this._gizmoLayer.dispose();
         }
     }
 }

src/Gizmos/babylon.planeRotationGizmo.ts

@@ -80,14 +80,17 @@ module BABYLON {
 
             var tmpSnapEvent = {snapDistance: 0};
             var currentSnapDragDistance = 0;
+            var tmpMatrix = new BABYLON.Matrix();
+            var tmpVector = new BABYLON.Vector3();
+            var amountToRotate = new BABYLON.Quaternion();
             this.dragBehavior.onDragObservable.add((event)=>{
                 if(this.attachedMesh){
                     if(!this.attachedMesh.rotationQuaternion){
                         this.attachedMesh.rotationQuaternion = Quaternion.RotationYawPitchRoll(this.attachedMesh.rotation.y, this.attachedMesh.rotation.x, this.attachedMesh.rotation.z);
                     }
                     // Calc angle over full 360 degree (https://stackoverflow.com/questions/43493711/the-angle-between-two-3d-vectors-with-a-result-range-0-360)
-                    var newVector = event.dragPlanePoint.subtract(this.attachedMesh.position).normalize();
-                    var originalVector = lastDragPosition.subtract(this.attachedMesh.position).normalize();
+                    var newVector = event.dragPlanePoint.subtract(this.attachedMesh.absolutePosition).normalize();
+                    var originalVector = lastDragPosition.subtract(this.attachedMesh.absolutePosition).normalize();
                     var cross = Vector3.Cross(newVector,originalVector);
                     var dot = Vector3.Dot(newVector,originalVector);
                     var angle = Math.atan2(cross.length(), dot);
@@ -121,9 +124,24 @@ module BABYLON {
                             angle = 0;
                         }
                     }
-                     // Convert angle and axis to quaternion (http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm)
-                     var quaternionCoefficient = Math.sin(angle/2)
-                     var amountToRotate = new BABYLON.Quaternion(planeNormalTowardsCamera.x*quaternionCoefficient,planeNormalTowardsCamera.y*quaternionCoefficient,planeNormalTowardsCamera.z*quaternionCoefficient,Math.cos(angle/2));
+
+                    // If the mesh has a parent, convert needed world rotation to local rotation
+                    tmpMatrix.reset();
+                    if(this.attachedMesh.parent){
+                        this.attachedMesh.parent.computeWorldMatrix().invertToRef(tmpMatrix);
+                        tmpMatrix.getRotationMatrixToRef(tmpMatrix);
+                        Vector3.TransformCoordinatesToRef(planeNormalTowardsCamera, tmpMatrix, planeNormalTowardsCamera);
+                    }
+
+                    // Convert angle and axis to quaternion (http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm)
+                    var quaternionCoefficient = Math.sin(angle/2);
+                    amountToRotate.set(planeNormalTowardsCamera.x*quaternionCoefficient,planeNormalTowardsCamera.y*quaternionCoefficient,planeNormalTowardsCamera.z*quaternionCoefficient,Math.cos(angle/2));
+
+                    // If the meshes local scale is inverted (eg. loaded gltf file parent with z scale of -1) the rotation needs to be inverted on the y axis
+                    if(tmpMatrix.determinant() > 0){
+                        amountToRotate.toEulerAnglesToRef(tmpVector);
+                        BABYLON.Quaternion.RotationYawPitchRollToRef(tmpVector.y, -tmpVector.x, -tmpVector.z, amountToRotate);
+                    }
 
                      if(this.updateGizmoRotationToMatchAttachedMesh){
                         // Rotate selected mesh quaternion over fixed axis

src/Helpers/babylon.photoDome.ts

@@ -1,11 +1,11 @@
 module BABYLON {
     /**
      * Display a 360 degree photo on an approximately spherical surface, useful for VR applications or skyboxes.
-     * As a subclass of Node, this allow parenting to the camera with different locations in the scene.
+     * As a subclass of TransformNode, this allow parenting to the camera with different locations in the scene.
      * This class achieves its effect with a Texture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
      */
-    export class PhotoDome extends Node {
+    export class PhotoDome extends TransformNode {
         private _useDirectMapping = false;
 
         /**

src/Helpers/babylon.videoDome.ts

@@ -1,11 +1,11 @@
 module BABYLON {
     /**
      * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
-     * As a subclass of Node, this allow parenting to the camera or multiple videos with different locations in the scene.
+     * As a subclass of TransformNode, this allow parenting to the camera or multiple videos with different locations in the scene.
      * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
      * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
      */
-    export class VideoDome extends Node {
+    export class VideoDome extends TransformNode {
         private _useDirectMapping = false;
 
         /**

src/Layer/babylon.glowLayer.ts

@@ -9,7 +9,7 @@
         getGlowLayerByName(name: string): Nullable<GlowLayer>;
     }
 
-    AbstractScene.prototype.getGlowLayerByName = function(name: string): Nullable<GlowLayer> {
+    AbstractScene.prototype.getGlowLayerByName = function (name: string): Nullable<GlowLayer> {
         for (var index = 0; index < this.effectLayers.length; index++) {
             if (this.effectLayers[index].name === name && this.effectLayers[index].getEffectName() === GlowLayer.EffectName) {
                 return (<any>this.effectLayers[index]) as GlowLayer;
@@ -172,7 +172,7 @@
         /**
          * Get the effect name of the layer.
          * @return The effect name
-         */ 
+         */
         public getEffectName(): string {
             return GlowLayer.EffectName;
         }
@@ -182,8 +182,8 @@
          * to the main canvas at the end of the scene rendering.
          */
         protected _createMergeEffect(): Effect {
-             // Effect
-             return this._engine.createEffect("glowMapMerge",
+            // Effect
+            return this._engine.createEffect("glowMapMerge",
                 [VertexBuffer.PositionKind],
                 ["offset"],
                 ["textureSampler", "textureSampler2"],
@@ -241,12 +241,12 @@
             this._blurTexture2.renderParticles = false;
             this._blurTexture2.ignoreCameraViewport = true;
 
-            this._textures = [ this._blurTexture1, this._blurTexture2 ];
+            this._textures = [this._blurTexture1, this._blurTexture2];
 
             this._horizontalBlurPostprocess1 = new BlurPostProcess("GlowLayerHBP1", new Vector2(1.0, 0), this._options.blurKernelSize / 2, {
-                    width:  blurTextureWidth,
-                    height: blurTextureHeight
-                },
+                width: blurTextureWidth,
+                height: blurTextureHeight
+            },
                 null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
             this._horizontalBlurPostprocess1.width = blurTextureWidth;
             this._horizontalBlurPostprocess1.height = blurTextureHeight;
@@ -255,15 +255,15 @@
             });
 
             this._verticalBlurPostprocess1 = new BlurPostProcess("GlowLayerVBP1", new Vector2(0, 1.0), this._options.blurKernelSize / 2, {
-                    width:  blurTextureWidth,
-                    height: blurTextureHeight
-                },
+                width: blurTextureWidth,
+                height: blurTextureHeight
+            },
                 null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
 
             this._horizontalBlurPostprocess2 = new BlurPostProcess("GlowLayerHBP2", new Vector2(1.0, 0), this._options.blurKernelSize / 2, {
-                    width:  blurTextureWidth2,
-                    height: blurTextureHeight2
-                },
+                width: blurTextureWidth2,
+                height: blurTextureHeight2
+            },
                 null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
             this._horizontalBlurPostprocess2.width = blurTextureWidth2;
             this._horizontalBlurPostprocess2.height = blurTextureHeight2;
@@ -272,14 +272,14 @@
             });
 
             this._verticalBlurPostprocess2 = new BlurPostProcess("GlowLayerVBP2", new Vector2(0, 1.0), this._options.blurKernelSize / 2, {
-                    width:  blurTextureWidth2,
-                    height: blurTextureHeight2
-                },
+                width: blurTextureWidth2,
+                height: blurTextureHeight2
+            },
                 null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
 
-            this._postProcesses = [ this._horizontalBlurPostprocess1, this._verticalBlurPostprocess1, this._horizontalBlurPostprocess2, this._verticalBlurPostprocess2 ];
-            this._postProcesses1 = [ this._horizontalBlurPostprocess1, this._verticalBlurPostprocess1 ];
-            this._postProcesses2 = [ this._horizontalBlurPostprocess2, this._verticalBlurPostprocess2 ];
+            this._postProcesses = [this._horizontalBlurPostprocess1, this._verticalBlurPostprocess1, this._horizontalBlurPostprocess2, this._verticalBlurPostprocess2];
+            this._postProcesses1 = [this._horizontalBlurPostprocess1, this._verticalBlurPostprocess1];
+            this._postProcesses2 = [this._horizontalBlurPostprocess2, this._verticalBlurPostprocess2];
 
             this._mainTexture.samples = this._options.mainTextureSamples!;
             this._mainTexture.onAfterUnbindObservable.add(() => {
@@ -287,16 +287,16 @@
                 if (internalTexture) {
                     this._scene.postProcessManager.directRender(
                         this._postProcesses1,
-                        internalTexture, 
+                        internalTexture,
                         true);
 
-                        internalTexture = this._blurTexture2.getInternalTexture();
-                        if (internalTexture) {
-                            this._scene.postProcessManager.directRender(
-                                this._postProcesses2,
-                                internalTexture, 
-                                true);
-                        }
+                    internalTexture = this._blurTexture2.getInternalTexture();
+                    if (internalTexture) {
+                        this._scene.postProcessManager.directRender(
+                            this._postProcesses2,
+                            internalTexture,
+                            true);
+                    }
                 }
             });
 
@@ -343,7 +343,7 @@
             // Cache
             var engine = this._engine;
             var previousStencilBuffer = engine.getStencilBuffer();
-                
+
             // Draw order
             engine.setStencilBuffer(false);
 
@@ -380,7 +380,7 @@
                     this._emissiveTextureAndColor.color.set(
                         (<any>material).emissiveColor.r * textureLevel,
                         (<any>material).emissiveColor.g * textureLevel,
-                        (<any>material).emissiveColor .b * textureLevel,
+                        (<any>material).emissiveColor.b * textureLevel,
                         1.0);
                 }
                 else {
@@ -420,7 +420,7 @@
             var index = this._excludedMeshes.indexOf(mesh.uniqueId);
             if (index !== -1) {
                 this._excludedMeshes.splice(index, 1);
-            } 
+            }
         }
 
         /**
@@ -441,7 +441,7 @@
             var index = this._includedOnlyMeshes.indexOf(mesh.uniqueId);
             if (index !== -1) {
                 this._includedOnlyMeshes.splice(index, 1);
-            } 
+            }
         }
 
         /**
@@ -471,6 +471,7 @@
          * Free any resources and references associated to a mesh.
          * Internal use
          * @param mesh The mesh to free.
+         * @hidden
          */
         public _disposeMesh(mesh: Mesh): void {
             this.removeIncludedOnlyMesh(mesh);
@@ -481,7 +482,7 @@
           * Gets the class name of the effect layer
           * @returns the string with the class name of the effect layer
           */
-         public getClassName(): string {
+        public getClassName(): string {
             return "GlowLayer";
         }
 

src/Layer/babylon.highlightLayer.ts

@@ -8,7 +8,7 @@
         getHighlightLayerByName(name: string): Nullable<HighlightLayer>;
     }
 
-    AbstractScene.prototype.getHighlightLayerByName = function(name: string): Nullable<HighlightLayer> {
+    AbstractScene.prototype.getHighlightLayerByName = function (name: string): Nullable<HighlightLayer> {
         for (var index = 0; index < this.effectLayers.length; index++) {
             if (this.effectLayers[index].name === name && this.effectLayers[index].getEffectName() === HighlightLayer.EffectName) {
                 return (<any>this.effectLayers[index]) as HighlightLayer;
@@ -25,7 +25,7 @@
     class GlowBlurPostProcess extends PostProcess {
         constructor(name: string, public direction: Vector2, public kernel: number, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode: number = Texture.BILINEAR_SAMPLINGMODE, engine?: Engine, reusable?: boolean) {
             super(name, "glowBlurPostProcess", ["screenSize", "direction", "blurWidth"], null, options, camera, samplingMode, engine, reusable);
-            
+
             this.onApplyObservable.add((effect: Effect) => {
                 effect.setFloat2("screenSize", this.width, this.height);
                 effect.setVector2("direction", this.direction);
@@ -269,7 +269,7 @@
         /**
          * Get the effect name of the layer.
          * @return The effect name
-         */ 
+         */
         public getEffectName(): string {
             return HighlightLayer.EffectName;
         }
@@ -279,8 +279,8 @@
          * to the main canvas at the end of the scene rendering.
          */
         protected _createMergeEffect(): Effect {
-             // Effect
-             return this._engine.createEffect("glowMapMerge",
+            // Effect
+            return this._engine.createEffect("glowMapMerge",
                 [VertexBuffer.PositionKind],
                 ["offset"],
                 ["textureSampler"],
@@ -321,7 +321,7 @@
             this._blurTexture.renderParticles = false;
             this._blurTexture.ignoreCameraViewport = true;
 
-            this._textures = [ this._blurTexture ];
+            this._textures = [this._blurTexture];
 
             if (this._options.alphaBlendingMode === Engine.ALPHA_COMBINE) {
                 this._downSamplePostprocess = new PassPostProcess("HighlightLayerPPP", this._options.blurTextureSizeRatio,
@@ -346,9 +346,9 @@
             }
             else {
                 this._horizontalBlurPostprocess = new BlurPostProcess("HighlightLayerHBP", new Vector2(1.0, 0), this._options.blurHorizontalSize / 2, {
-                        width:  blurTextureWidth,
-                        height: blurTextureHeight
-                    },
+                    width: blurTextureWidth,
+                    height: blurTextureHeight
+                },
                     null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
                 this._horizontalBlurPostprocess.width = blurTextureWidth;
                 this._horizontalBlurPostprocess.height = blurTextureHeight;
@@ -357,9 +357,9 @@
                 });
 
                 this._verticalBlurPostprocess = new BlurPostProcess("HighlightLayerVBP", new Vector2(0, 1.0), this._options.blurVerticalSize / 2, {
-                        width:  blurTextureWidth,
-                        height: blurTextureHeight
-                    },
+                    width: blurTextureWidth,
+                    height: blurTextureHeight
+                },
                     null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, textureType);
 
                 this._postProcesses = [this._horizontalBlurPostprocess, this._verticalBlurPostprocess];
@@ -372,7 +372,7 @@
                 if (internalTexture) {
                     this._scene.postProcessManager.directRender(
                         this._postProcesses,
-                        internalTexture, 
+                        internalTexture,
                         true);
                 }
 
@@ -672,6 +672,7 @@
          * Free any resources and references associated to a mesh.
          * Internal use
          * @param mesh The mesh to free.
+         * @hidden
          */
         public _disposeMesh(mesh: Mesh): void {
             this.removeMesh(mesh);
@@ -724,7 +725,7 @@
           * Gets the class name of the effect layer
           * @returns the string with the class name of the effect layer
           */
-         public getClassName(): string {
+        public getClassName(): string {
             return "HighlightLayer";
         }
 
@@ -784,7 +785,7 @@
             for (index = 0; index < parsedHightlightLayer.excludedMeshes.length; index++) {
                 var mesh = scene.getMeshByID(parsedHightlightLayer.excludedMeshes[index]);
                 if (mesh) {
-                    hl.addExcludedMesh(<Mesh> mesh);
+                    hl.addExcludedMesh(<Mesh>mesh);
                 }
             }
 
@@ -794,7 +795,7 @@
                 var mesh = scene.getMeshByID(highlightedMesh.meshId);
 
                 if (mesh) {
-                    hl.addMesh(<Mesh> mesh, Color3.FromArray(highlightedMesh.color), highlightedMesh.glowEmissiveOnly);
+                    hl.addMesh(<Mesh>mesh, Color3.FromArray(highlightedMesh.color), highlightedMesh.glowEmissiveOnly);
                 }
             }
 

src/Layer/babylon.layer.ts

@@ -112,6 +112,7 @@
             this._indexBuffer = engine.createIndexBuffer(indices);
         }
 
+        /** @hidden */
         public _rebuild(): void {
             let vb = this._vertexBuffers[VertexBuffer.PositionKind];
 

src/LensFlare/babylon.lensFlareSystem.ts

@@ -95,7 +95,7 @@
 
             position = Vector3.TransformCoordinates(this.getEmitterPosition(), this._scene.getViewMatrix());
 
-            if (this.viewportBorder>0) {
+            if (this.viewportBorder > 0) {
                 globalViewport.x -= this.viewportBorder;
                 globalViewport.y -= this.viewportBorder;
                 globalViewport.width += this.viewportBorder * 2;
@@ -117,6 +117,7 @@
             return false;
         }
 
+        /** @hidden */
         public _isVisible(): boolean {
             if (!this._isEnabled || !this._scene.activeCamera) {
                 return false;
@@ -188,7 +189,7 @@
                 intensity = 1.0;
             }
 
-            if (this.viewportBorder>0) {
+            if (this.viewportBorder > 0) {
                 globalViewport.x += this.viewportBorder;
                 globalViewport.y += this.viewportBorder;
                 globalViewport.width -= this.viewportBorder * 2;

src/Lights/babylon.light.ts

@@ -305,7 +305,7 @@ module BABYLON {
 
         /**
          * Shadow generator associted to the light.
-         * Internal use only.
+         * @hidden Internal use only.
          */
         public _shadowGenerator: Nullable<IShadowGenerator>;
 

src/Materials/Textures/Procedurals/babylon.proceduralTexture.ts

@@ -3,6 +3,7 @@
         @serialize()
         private _size: number;
 
+        /** @hidden */
         @serialize()
         public _generateMipMaps: boolean;
 
@@ -21,15 +22,16 @@
         private _samplers = new Array<string>();
         private _fragment: any;
 
-        public _textures: {[key: string]: Texture} = {};
-        private _floats: {[key: string]: number} = {};
-        private _ints: {[key: string]: number} = {};
-        private _floatsArrays: {[key: string]: number[]} = {};
-        private _colors3: {[key: string]: Color3} = {};
-        private _colors4: {[key: string]: Color4} = {};
-        private _vectors2: {[key: string]: Vector2} = {};
-        private _vectors3: {[key: string]: Vector3} = {};
-        private _matrices: {[key: string]: Matrix} = {};
+        /** @hidden */
+        public _textures: { [key: string]: Texture } = {};
+        private _floats: { [key: string]: number } = {};
+        private _ints: { [key: string]: number } = {};
+        private _floatsArrays: { [key: string]: number[] } = {};
+        private _colors3: { [key: string]: Color3 } = {};
+        private _colors4: { [key: string]: Color4 } = {};
+        private _vectors2: { [key: string]: Vector2 } = {};
+        private _vectors3: { [key: string]: Vector3 } = {};
+        private _matrices: { [key: string]: Matrix } = {};
 
         private _fallbackTexture: Nullable<Texture>;
 
@@ -90,25 +92,26 @@
             this._indexBuffer = engine.createIndexBuffer(indices);
         }
 
+        /** @hidden */
         public _rebuild(): void {
             let vb = this._vertexBuffers[VertexBuffer.PositionKind];
 
             if (vb) {
                 vb._rebuild();
             }
-            
+
             this._createIndexBuffer();
 
             if (this.refreshRate === RenderTargetTexture.REFRESHRATE_RENDER_ONCE) {
                 this.refreshRate = RenderTargetTexture.REFRESHRATE_RENDER_ONCE;
-            }            
+            }
         }
 
         public reset(): void {
             if (this._effect === undefined) {
                 return;
-            }      
-            
+            }
+
             var engine = this._engine;
             engine._releaseEffect(this._effect);
         }
@@ -173,6 +176,7 @@
             this.resetRefreshCounter();
         }
 
+        /** @hidden */
         public _shouldRender(): boolean {
             if (!this.isEnabled || !this.isReady() || !this._texture) {
                 return false;
@@ -311,7 +315,7 @@
             // Float    
             for (name in this._ints) {
                 this._effect.setInt(name, this._ints[name]);
-            }            
+            }
 
             // Float    
             for (name in this._floats) {
@@ -347,8 +351,8 @@
             // Matrix      
             for (name in this._matrices) {
                 this._effect.setMatrix(name, this._matrices[name]);
-            }           
-            
+            }
+
             if (!this._texture) {
                 return;
             }

src/Materials/Textures/babylon.baseTexture.ts

@@ -28,10 +28,10 @@
 
         @serialize()
         public coordinatesIndex = 0;
-        
+
         @serialize("coordinatesMode")
         private _coordinatesMode = Texture.EXPLICIT_MODE;
-        
+
         /**
         * How a texture is mapped.
         *
@@ -59,8 +59,8 @@
         }
         public get coordinatesMode(): number {
             return this._coordinatesMode;
-        } 
-        
+        }
+
         /**
         * | Value | Type               | Description |
         * | ----- | ------------------ | ----------- |
@@ -70,7 +70,7 @@
         */
         @serialize()
         public wrapU = Texture.WRAP_ADDRESSMODE;
-        
+
         /**
         * | Value | Type               | Description |
         * | ----- | ------------------ | ----------- |
@@ -80,7 +80,7 @@
         */
         @serialize()
         public wrapV = Texture.WRAP_ADDRESSMODE;
-        
+
         /**
         * | Value | Type               | Description |
         * | ----- | ------------------ | ----------- |
@@ -172,6 +172,8 @@
         public delayLoadState = Engine.DELAYLOADSTATE_NONE;
 
         private _scene: Nullable<Scene>;
+
+        /** @hidden */
         public _texture: Nullable<InternalTexture>;
         private _uid: Nullable<string>;
 
@@ -257,6 +259,7 @@
             return false;
         }
 
+        /** @hidden */
         public _getFromCache(url: Nullable<string>, noMipmap: boolean, sampling?: number): Nullable<InternalTexture> {
             if (!this._scene) {
                 return null
@@ -277,6 +280,7 @@
             return null;
         }
 
+        /** @hidden */
         public _rebuild(): void {
 
         }

src/Materials/Textures/babylon.internalTexture.ts

@@ -382,6 +382,7 @@ module BABYLON {
             }
         }
 
+        /** @hidden */
         public _swapAndDie(target: InternalTexture): void {
             target._webGLTexture = this._webGLTexture;
 

src/Materials/Textures/babylon.multiRenderTarget.ts

@@ -94,6 +94,7 @@ module BABYLON {
             this._createTextures();
         }
 
+        /** @hidden */
         public _rebuild(): void {
             this.releaseInternalTextures();
             this._createInternalTextures();

src/Materials/Textures/babylon.renderTargetTexture.ts

@@ -29,7 +29,7 @@
         public get renderList(): Nullable<Array<AbstractMesh>> {
             return this._renderList;
         }
- 
+
         public set renderList(value: Nullable<Array<AbstractMesh>>) {
             this._renderList = value;
 
@@ -42,7 +42,7 @@
             var oldPush = array.push;
             array.push = (...items: AbstractMesh[]) => {
                 var result = oldPush.apply(array, items);
-                
+
                 this.getScene()!.meshes.forEach(mesh => {
                     mesh._markSubMeshesAsLightDirty();
                 })
@@ -71,7 +71,7 @@
         public ignoreCameraViewport: boolean = false;
 
         private _postProcessManager: Nullable<PostProcessManager>;
-        private _postProcesses: PostProcess[];        
+        private _postProcesses: PostProcess[];
 
         private _resizeObserver: Nullable<Observer<Engine>>;
 
@@ -135,11 +135,13 @@
         }
 
         public clearColor: Color4;
-        protected _size: number | {width: number, height: number};
-        protected _initialSizeParameter: number | {width: number, height: number} | {ratio: number}
+        protected _size: number | { width: number, height: number };
+        protected _initialSizeParameter: number | { width: number, height: number } | { ratio: number }
         protected _sizeRatio: Nullable<number>;
+        /** @hidden */
         public _generateMipMaps: boolean;
         protected _renderingManager: RenderingManager;
+        /** @hidden */
         public _waitingRenderList: string[];
         protected _doNotChangeAspectRatio: boolean;
         protected _currentRefreshId = -1;
@@ -172,7 +174,7 @@
          * When defined, the cubemap will switch to local mode
          * @see https://community.arm.com/graphics/b/blog/posts/reflections-based-on-local-cubemaps-in-unity
          * @example https://www.babylonjs-playground.com/#RNASML
-         */        
+         */
         public set boundingBoxSize(value: Vector3) {
             if (this._boundingBoxSize && this._boundingBoxSize.equals(value)) {
                 return;
@@ -210,7 +212,7 @@
          * @param isMulti True if multiple textures need to be created (Draw Buffers)
          * @param format The internal format of the buffer in the RTT (RED, RG, RGB, RGBA, ALPHA...)
          */
-        constructor(name: string, size: number | {width: number, height: number} | {ratio: number}, scene: Nullable<Scene>, generateMipMaps?: boolean, doNotChangeAspectRatio: boolean = true, type: number = Engine.TEXTURETYPE_UNSIGNED_INT, public isCube = false, samplingMode = Texture.TRILINEAR_SAMPLINGMODE, generateDepthBuffer = true, generateStencilBuffer = false, isMulti = false, format = Engine.TEXTUREFORMAT_RGBA) {
+        constructor(name: string, size: number | { width: number, height: number } | { ratio: number }, scene: Nullable<Scene>, generateMipMaps?: boolean, doNotChangeAspectRatio: boolean = true, type: number = Engine.TEXTURETYPE_UNSIGNED_INT, public isCube = false, samplingMode = Texture.TRILINEAR_SAMPLINGMODE, generateDepthBuffer = true, generateStencilBuffer = false, isMulti = false, format = Engine.TEXTUREFORMAT_RGBA) {
             super(null, scene, !generateMipMaps);
             scene = this.getScene();
 
@@ -227,7 +229,7 @@
             this._processSizeParameter(size);
 
             this._resizeObserver = this.getScene()!.getEngine().onResizeObservable.add(() => {
-            });            
+            });
 
             this._generateMipMaps = generateMipMaps ? true : false;
             this._doNotChangeAspectRatio = doNotChangeAspectRatio;
@@ -271,7 +273,7 @@
          * @param bilinearFiltering Specifies whether or not bilinear filtering is enable on the texture
          * @param generateStencil Specifies whether or not a stencil should be allocated in the texture
          */
-        public createDepthStencilTexture(comparisonFunction: number = 0, bilinearFiltering: boolean = true, generateStencil: boolean = false) : void {
+        public createDepthStencilTexture(comparisonFunction: number = 0, bilinearFiltering: boolean = true, generateStencil: boolean = false): void {
             if (!this.getScene()) {
                 return;
             }
@@ -286,15 +288,15 @@
             engine.setFrameBufferDepthStencilTexture(this);
         }
 
-        private _processSizeParameter(size: number | {width: number, height: number} | {ratio: number}): void {
-            if ((<{ratio: number}>size).ratio) {
-                this._sizeRatio = (<{ratio: number}>size).ratio;
+        private _processSizeParameter(size: number | { width: number, height: number } | { ratio: number }): void {
+            if ((<{ ratio: number }>size).ratio) {
+                this._sizeRatio = (<{ ratio: number }>size).ratio;
                 this._size = {
                     width: this._bestReflectionRenderTargetDimension(this._engine.getRenderWidth(), this._sizeRatio),
                     height: this._bestReflectionRenderTargetDimension(this._engine.getRenderHeight(), this._sizeRatio)
                 }
-            } else {            
-                this._size = <number | {width: number, height: number}>size;
+            } else {
+                this._size = <number | { width: number, height: number }>size;
             }
         }
 
@@ -333,10 +335,10 @@
         public addPostProcess(postProcess: PostProcess): void {
             if (!this._postProcessManager) {
                 let scene = this.getScene();
-                
+
                 if (!scene) {
                     return;
-                }                
+                }
                 this._postProcessManager = new PostProcessManager(scene);
                 this._postProcesses = new Array<PostProcess>();
             }
@@ -377,6 +379,7 @@
             }
         }
 
+        /** @hidden */
         public _shouldRender(): boolean {
             if (this._currentRefreshId === -1) { // At least render once
                 this._currentRefreshId = 1;
@@ -393,24 +396,24 @@
         }
 
         public getRenderSize(): number {
-            if ((<{width: number, height: number}>this._size).width) {
-                return (<{width: number, height: number}>this._size).width;
+            if ((<{ width: number, height: number }>this._size).width) {
+                return (<{ width: number, height: number }>this._size).width;
             }
 
             return <number>this._size;
         }
 
         public getRenderWidth(): number {
-            if ((<{width: number, height: number}>this._size).width) {
-                return (<{width: number, height: number}>this._size).width;
+            if ((<{ width: number, height: number }>this._size).width) {
+                return (<{ width: number, height: number }>this._size).width;
             }
 
             return <number>this._size;
         }
 
         public getRenderHeight(): number {
-            if ((<{width: number, height: number}>this._size).width) {
-                return (<{width: number, height: number}>this._size).height;
+            if ((<{ width: number, height: number }>this._size).width) {
+                return (<{ width: number, height: number }>this._size).height;
             }
 
             return <number>this._size;
@@ -434,16 +437,16 @@
             return super.getReflectionTextureMatrix();
         }
 
-        public resize(size: number | {width: number, height: number} | {ratio: number}) {
+        public resize(size: number | { width: number, height: number } | { ratio: number }) {
             this.releaseInternalTexture();
             let scene = this.getScene();
-            
+
             if (!scene) {
                 return;
             }
-            
+
             this._processSizeParameter(size);
-            
+
             if (this.isCube) {
                 this._texture = scene.getEngine().createRenderTargetCubeTexture(this.getRenderSize(), this._renderTargetOptions);
             } else {
@@ -486,7 +489,7 @@
                 }
 
                 var scene = this.getScene();
-                
+
                 if (!scene) {
                     return;
                 }
@@ -596,7 +599,7 @@
             let minimum = 128;
             let x = renderDimension * scale;
             let curved = Tools.NearestPOT(x + (minimum * minimum / (minimum + x)));
-            
+
             // Ensure we don't exceed the render dimension (while staying POT)
             return Math.min(Tools.FloorPOT(renderDimension), curved);
         }
@@ -612,7 +615,7 @@
 
         private renderToTarget(faceIndex: number, currentRenderList: AbstractMesh[], currentRenderListLength: number, useCameraPostProcess: boolean, dumpForDebug: boolean): void {
             var scene = this.getScene();
-            
+
             if (!scene) {
                 return;
             }
@@ -674,7 +677,7 @@
                     }
                 }
 
-            this.unbindFrameBuffer(engine, faceIndex);
+                this.unbindFrameBuffer(engine, faceIndex);
 
             } else {
                 this.onAfterRenderObservable.notifyObservers(faceIndex);
@@ -807,6 +810,7 @@
             super.dispose();
         }
 
+        /** @hidden */
         public _rebuild(): void {
             if (this.refreshRate === RenderTargetTexture.REFRESHRATE_RENDER_ONCE) {
                 this.refreshRate = RenderTargetTexture.REFRESHRATE_RENDER_ONCE;

src/Materials/Textures/babylon.texture.ts

@@ -88,6 +88,7 @@
         }
 
         private _noMipmap: boolean;
+        /** @hidden */
         public _invertY: boolean;
         private _rowGenerationMatrix: Matrix;
         private _cachedTextureMatrix: Matrix;
@@ -105,6 +106,7 @@
         private _cachedWAng: number;
         private _cachedProjectionMatrixId: number;
         private _cachedCoordinatesMode: number;
+        /** @hidden */
         public _samplingMode: number;
         /** @hidden */
         public _buffer: Nullable<string | ArrayBuffer | HTMLImageElement | Blob>;
@@ -245,10 +247,10 @@
             }
 
             let scene = this.getScene();
-            
+
             if (!scene) {
                 return;
-            }            
+            }
 
             this._samplingMode = samplingMode;
             scene.getEngine().updateTextureSamplingMode(samplingMode, this._texture);
@@ -312,7 +314,7 @@
             this._cachedTextureMatrix.m[8] = this._t0.x; this._cachedTextureMatrix.m[9] = this._t0.y; this._cachedTextureMatrix.m[10] = this._t0.z;
 
             let scene = this.getScene();
-            
+
             if (!scene) {
                 return this._cachedTextureMatrix;
             }
@@ -349,11 +351,11 @@
             if (!this._cachedTextureMatrix) {
                 this._cachedTextureMatrix = Matrix.Zero();
             }
-            
+
             if (!this._projectionModeMatrix) {
                 this._projectionModeMatrix = Matrix.Zero();
             }
-            
+
             this._cachedUOffset = this.uOffset;
             this._cachedVOffset = this.vOffset;
             this._cachedUScale = this.uScale;
@@ -439,8 +441,8 @@
         }
 
         // Statics
-        public static CreateFromBase64String(data: string, name: string, scene: Scene, noMipmap?: boolean, invertY?: boolean, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, 
-                                            onLoad: Nullable<() => void> = null, onError: Nullable<() => void> = null, format: number = Engine.TEXTUREFORMAT_RGBA): Texture {
+        public static CreateFromBase64String(data: string, name: string, scene: Scene, noMipmap?: boolean, invertY?: boolean, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE,
+            onLoad: Nullable<() => void> = null, onError: Nullable<() => void> = null, format: number = Engine.TEXTUREFORMAT_RGBA): Texture {
             return new Texture("data:" + name, scene, noMipmap, invertY, samplingMode, onLoad, onError, data, false, format);
         }
 
@@ -486,9 +488,9 @@
                     if (parsedTexture.base64String) {
                         texture = Texture.CreateFromBase64String(parsedTexture.base64String, parsedTexture.name, scene, !generateMipMaps);
                     } else {
-                        let url = rootUrl + parsedTexture.name; 
+                        let url = rootUrl + parsedTexture.name;
 
-                        if (Texture.UseSerializedUrlIfAny && parsedTexture.url ) {
+                        if (Texture.UseSerializedUrlIfAny && parsedTexture.url) {
                             url = parsedTexture.url;
                         }
                         texture = new Texture(url, scene, !generateMipMaps, parsedTexture.invertY);
@@ -518,8 +520,8 @@
             return texture;
         }
 
-        public static LoadFromDataString(name: string, buffer: any, scene: Scene, deleteBuffer: boolean = false, noMipmap: boolean = false, invertY: boolean = true, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, 
-                                    onLoad: Nullable<() => void> = null, onError: Nullable<(message?: string, exception?: any) => void> = null, format: number = Engine.TEXTUREFORMAT_RGBA): Texture {
+        public static LoadFromDataString(name: string, buffer: any, scene: Scene, deleteBuffer: boolean = false, noMipmap: boolean = false, invertY: boolean = true, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE,
+            onLoad: Nullable<() => void> = null, onError: Nullable<(message?: string, exception?: any) => void> = null, format: number = Engine.TEXTUREFORMAT_RGBA): Texture {
             if (name.substr(0, 5) !== "data:") {
                 name = "data:" + name;
             }

src/Materials/Textures/babylon.videoTexture.ts

@@ -94,7 +94,7 @@
             }
 
             this.video.setAttribute("playsinline", "");
-                
+
             this.video.addEventListener("canplay", this._createInternalTexture);
             this.video.addEventListener("paused", this._updateInternalTexture);
             this.video.addEventListener("seeked", this._updateInternalTexture);
@@ -114,14 +114,14 @@
             if (src instanceof HTMLVideoElement) {
                 return src.currentSrc;
             }
-    
+
             if (typeof src === "object") {
                 return src.toString();
             }
 
             return src;
         };
-    
+
         private _getVideo(src: string | string[] | HTMLVideoElement): HTMLVideoElement {
             if (src instanceof HTMLVideoElement) {
                 Tools.SetCorsBehavior(src.currentSrc, src);
@@ -189,13 +189,13 @@
                     playing.then(() => {
                         // Everything is good.
                     })
-                    .catch(() => {
-                        error = true;
-                        // On Chrome for instance, new policies might prevent playing without user interaction.
-                        if (this._onUserActionRequestedObservable && this._onUserActionRequestedObservable.hasObservers()) {
-                            this._onUserActionRequestedObservable.notifyObservers(this);
-                        }
-                    });
+                        .catch(() => {
+                            error = true;
+                            // On Chrome for instance, new policies might prevent playing without user interaction.
+                            if (this._onUserActionRequestedObservable && this._onUserActionRequestedObservable.hasObservers()) {
+                                this._onUserActionRequestedObservable.notifyObservers(this);
+                            }
+                        });
                 }
                 else {
                     this.video.onplaying = oldHandler;
@@ -227,7 +227,7 @@
         };
 
         /**
-         * Internal method to initiate `update`.
+         * @hidden Internal method to initiate `update`.
          */
         public _rebuild(): void {
             this.update();
@@ -281,7 +281,7 @@
 
         public dispose(): void {
             super.dispose();
-            
+
             if (this._onUserActionRequestedObservable) {
                 this._onUserActionRequestedObservable.clear();
                 this._onUserActionRequestedObservable = null;
@@ -321,7 +321,7 @@
 
             if (navigator.mediaDevices) {
                 navigator.mediaDevices.getUserMedia({ video: constraints })
-                    .then(function(stream) {
+                    .then(function (stream) {
                         if (video.mozSrcObject !== undefined) {
                             // hack for Firefox < 19
                             video.mozSrcObject = stream;
@@ -339,7 +339,7 @@
                         video.addEventListener("playing", onPlaying);
                         video.play();
                     })
-                    .catch(function(err) {
+                    .catch(function (err) {
                         Tools.Error(err.name);
                     });
             }
@@ -379,7 +379,7 @@
                                 onReady(new VideoTexture("video", video, scene, true, true));
                             }
                         },
-                        function(e: MediaStreamError) {
+                        function (e: MediaStreamError) {
                             Tools.Error(e.name);
                         }
                     );