Merge branch 'master' into FollowCamera_InputManager_tweak_keyboard

Playground/js/frame.js

@@ -203,4 +203,4 @@
 
     checkHash();
 
-})();
+})();

Tools/Config/config.js

@@ -21,6 +21,8 @@ const tempTypingsFileName = tempTypingsAMDFileName.replace(".js", ".d.ts");
 const tempTypingsAMDFilePath = path.join(tempFolder, tempTypingsAMDFileName);
 const tempTypingsFilePath = path.join(tempFolder, tempTypingsFileName);
 
+const tscPath = path.resolve(rootFolder, "node_modules/typescript/bin/tsc");
+
 config.computed = {
     rootFolder,
     tempFolder,
@@ -36,7 +38,8 @@ config.computed = {
     tempTypingsAMDFileName,
     tempTypingsFileName,
     tempTypingsAMDFilePath,
-    tempTypingsFilePath
+    tempTypingsFilePath,
+    tscPath
 }
 
 config.additionalNpmPackages.forEach(package => {

Tools/Config/config.json

@@ -60,7 +60,7 @@
     "additionalNpmPackages": [
         {
             "name": "gltf2interface",
-            "path": "dist/preview release/gltf2interface/"
+            "path": "dist/preview release/gltf2interface"
         }
     ],
     "core": {
@@ -102,29 +102,28 @@
                             "path": "babylonjs/Debug/skeletonViewer",
                             "namespace": "BABYLON.Debug"
                         }
-                    ],
-                    "doNotAppendNamespace": true,
-                    "prependToNamespaceText": "declare module 'babylonjs' { export = BABYLON; }"
+                    ]
                 },
+                "requiredFiles": [
+                    "readme.md"
+                ],
                 "packagesFiles": [
-                    "babylon.d.ts",
+                    "babylon.module.d.ts",
                     "babylon.js",
                     "babylon.max.js",
                     "babylon.max.js.map",
                     "Oimo.js",
                     "readme.md"
                 ],
-                "typings": "babylon.d.ts",
+                "typings": "babylon.module.d.ts",
                 "index": "babylon.js",
                 "dependencies": [],
                 "devDependencies": []
             },
             "es6": {
-                "packageName": "@babylonjs/core"
-            },
-            "requiredFiles": [
-                "readme.md"
-            ]
+                "packageName": "@babylonjs/core",
+                "readme": "readme-es6.md"
+            }
         }
     },
     "materialsLibrary": {
@@ -225,9 +224,7 @@
             },
             "es6": {
                 "packageName": "@babylonjs/materials",
-                "requiredFiles": [
-                    "dist/preview release/materialsLibrary/readme.md"
-                ]
+                "readme": "dist/preview release/materialsLibrary/readme-es6.md"
             }
         }
     },
@@ -264,9 +261,7 @@
             },
             "es6": {
                 "packageName": "@babylonjs/post-processes",
-                "requiredFiles": [
-                    "dist/preview release/postProcessesLibrary/readme.md"
-                ]
+                "readme": "dist/preview release/postProcessesLibrary/readme-es6.md"
             }
         }
     },
@@ -343,9 +338,7 @@
             },
             "es6": {
                 "packageName": "@babylonjs/procedural-textures",
-                "requiredFiles": [
-                    "dist/preview release/proceduralTexturesLibrary/readme.md"
-                ]
+                "readme": "dist/preview release/proceduralTexturesLibrary/readme-es6.md"
             }
         }
     },
@@ -416,9 +409,7 @@
             },
             "es6": {
                 "packageName": "@babylonjs/loaders",
-                "requiredFiles": [
-                    "dist/preview release/loaders/readme.md"
-                ]
+                "readme": "dist/preview release/loaders/readme-es6.md"
             }
         }
     },
@@ -476,9 +467,7 @@
             },
             "es6": {
                 "packageName": "@babylonjs/serializers",
-                "requiredFiles": [
-                    "dist/preview release/serializers/readme.md"
-                ]
+                "readme": "dist/preview release/serializers/readme-es6.md"
             }
         }
     },
@@ -507,9 +496,7 @@
             },
             "es6": {
                 "packageName": "@babylonjs/gui",
-                "requiredFiles": [
-                    "dist/preview release/gui/readme.md"
-                ]
+                "readme": "dist/preview release/gui/readme-es6.md"
             }
         }
     },
@@ -553,9 +540,7 @@
                     ]
                 },
                 "packageName": "@babylonjs/inspector",
-                "requiredFiles": [
-                    "dist/preview release/inspector/readme.md"
-                ],
+                "readme": "dist/preview release/inspector/readme-es6.md",
                 "packagesFiles": [
                     "babylon.inspector.bundle.max.js",
                     "babylon.inspector.bundle.max.js.map",
@@ -591,7 +576,7 @@
                 "processDeclaration": {
                     "moduleName": "BabylonViewer",
                     "doNotAppendNamespace": true,
-                    "prependText": "/// <reference path=\"./babylon.d.ts\"/>\n/// <reference path=\"./babylon.glTF2Interface.d.ts\"/>\n/// <reference path=\"./babylonjs.loaders.d.ts\"/>\ndeclare module \"babylonjs-loaders\"{ export=BABYLON;}\n",
+                    "prependText": "/// <reference path=\"./babylon.module.d.ts\"/>\n/// <reference path=\"./babylon.glTF2Interface.d.ts\"/>\n/// <reference path=\"./babylonjs.loaders.d.ts\"/>\ndeclare module \"babylonjs-loaders\"{ export=BABYLON;}\n",
                     "importsToRemove": [
                         "pep",
                         "babylonjs-loaders"
@@ -600,7 +585,13 @@
                         "babylonjs": "BABYLON",
                         "babylonjs-loaders": "BABYLON"
                     }
-                }
+                },
+                "requiredFiles": [
+                    "dist/preview release/viewer/readme.md",
+                    "dist/preview release/viewer/package.json",
+                    "dist/preview release/viewer/babylon.viewer.js",
+                    "dist/preview release/viewer/babylon.viewer.max.js"
+                ]
             },
             "outputs": [
                 {
@@ -613,7 +604,7 @@
                             "filename": "babylon.viewer.js",
                             "outputDirectory": "/viewer/",
                             "addBabylonDeclaration": [
-                                "babylon.d.ts",
+                                "babylon.module.d.ts",
                                 "loaders/babylonjs.loaders.d.ts",
                                 "glTF2Interface/babylon.glTF2Interface.d.ts"
                             ]
@@ -634,13 +625,7 @@
                     ]
                 }
             ],
-            "legacyPackageOutputDirectory": "../../../Viewer/build/src/",
-            "requiredFiles": [
-                "dist/preview release/viewer/readme.md",
-                "dist/preview release/viewer/package.json",
-                "dist/preview release/viewer/babylon.viewer.js",
-                "dist/preview release/viewer/babylon.viewer.max.js"
-            ]
+            "legacyPackageOutputDirectory": "../../../Viewer/build/src/"
         }
     },
     "viewer-assets": {
@@ -658,7 +643,11 @@
             "webpack": "../../../Viewer/webpack.assets.config.js",
             "distOutputDirectory": "/viewer/",
             "umd": {
-                "packageName": "babylonjs-viewer-assets"
+                "packageName": "babylonjs-viewer-assets",
+                "requiredFiles": [
+                    "Viewer/assets/readme.md",
+                    "Viewer/assets/package.json"
+                ]
             },
             "dtsBundle": {
                 "name": "babylonjs-viewer-assets",
@@ -676,11 +665,7 @@
                     "minified": true
                 }
             ],
-            "legacyPackageOutputDirectory": "../../../Viewer/build/assets/",
-            "requiredFiles": [
-                "Viewer/assets/readme.md",
-                "Viewer/assets/package.json"
-            ]
+            "legacyPackageOutputDirectory": "../../../Viewer/build/assets/"
         }
     }
 }

Tools/Gulp/helpers/gulp-validateTypedoc.js

@@ -305,22 +305,25 @@ Validate.prototype.validateTypedocNamespace = function (namespace) {
                                         "Unrecognized tag " + tags + " at " + signatureNode.name + " (id: " + signatureNode.id + ") in " + containerNode.name + " (id: " + containerNode.id + ")", Validate.position(childNode));
                                 }
 
-                                if (signatureNode.type.name !== "void" && signatureNode.comment && !signatureNode.comment.returns) {
-                                    this.errorCallback(containerNode.name,
-                                        signatureNode.name,
-                                        childNode.kindString,
-                                        "Comments",
-                                        "MissingReturn",
-                                        "No Return Comment at " + signatureNode.name + " (id: " + signatureNode.id + ") in " + containerNode.name + " (id: " + containerNode.id + ")", Validate.position(childNode));
-                                }
-
-                                if (signatureNode.type.name === "void" && signatureNode.comment && signatureNode.comment.returns) {
-                                    this.errorCallback(containerNode.name,
-                                        signatureNode.name,
-                                        childNode.kindString,
-                                        "Comments",
-                                        "UselessReturn",
-                                        "No Return Comment Needed at " + signatureNode.name + " (id: " + signatureNode.id + ") in " + containerNode.name + " (id: " + containerNode.id + ")", Validate.position(childNode));
+                                if (signatureNode.kindString !== "Constructor" && 
+                                    signatureNode.kindString !== "Constructor signature") {
+                                    if (signatureNode.type.name !== "void" && signatureNode.comment && !signatureNode.comment.returns) {
+                                        this.errorCallback(containerNode.name,
+                                            signatureNode.name,
+                                            childNode.kindString,
+                                            "Comments",
+                                            "MissingReturn",
+                                            "No Return Comment at " + signatureNode.name + " (id: " + signatureNode.id + ") in " + containerNode.name + " (id: " + containerNode.id + ")", Validate.position(childNode));
+                                    }
+    
+                                    if (signatureNode.type.name === "void" && signatureNode.comment && signatureNode.comment.returns) {
+                                        this.errorCallback(containerNode.name,
+                                            signatureNode.name,
+                                            childNode.kindString,
+                                            "Comments",
+                                            "UselessReturn",
+                                            "No Return Comment Needed at " + signatureNode.name + " (id: " + signatureNode.id + ") in " + containerNode.name + " (id: " + containerNode.id + ")", Validate.position(childNode));
+                                    }
                                 }
                             }
 
@@ -371,7 +374,6 @@ Validate.prototype.validateTags = function (node) {
  * Validate that a JSON node has the correct TypeDoc comments
  */
 Validate.prototype.validateComment = function (node) {
-
     // Return-only methods are allowed to just have a @return tag
     if ((node.kindString === "Call signature" || node.kindString === "Accessor") && !node.parameters && node.comment && node.comment.returns) {
         return true;
@@ -395,7 +397,7 @@ Validate.prototype.validateComment = function (node) {
     // Check comments.
     if (node.comment) {
         if (node.comment.text || node.comment.shortText) {
-            return true;
+            return node.kindString !== "Constructor";
         }
 
         return false;
@@ -428,6 +430,12 @@ Validate.prototype.validateParameters = function (containerNode, method, signatu
         }
 
         if (this.validateNamingConvention && !Validate.camelCase.test(parametersNode.name)) {
+            if (containerNode.kindString === "Constructor" ||
+                containerNode.kindString !== "Constructor signature") {
+                    if (Validate.underscoreCamelCase.test(parametersNode.name)) {
+                        continue;
+                    }
+                }
             this.errorCallback([containerNode.name, method.kindString, signature.name],
                 parametersNode.name,
                 parametersNode.kindString,

Tools/Gulp/package.json

@@ -12,4 +12,4 @@
         "install": "cd ../../ && npm install && cd Playground/ && npm install && cd ../Viewer && npm install && cd ../Tools/Gulp/",
         "build": "gulp --max-old-space-size=8192 --tsLintFix"
     }
-}
+}

Tools/Gulp/tasks/gulpTasks-libraries.js

@@ -17,7 +17,8 @@ var del = require("del");
 // Parse Command Line.
 var commandLineOptions = minimist(process.argv.slice(2), {
     boolean: ["noNamespace"],
-    string: ["moduleName"]
+    string: ["moduleName"],
+    string: ["tscPath"]
 });
 
 // Import Build Config
@@ -95,7 +96,7 @@ var buildAMDDTSFiles = function(libraries, settings, cb) {
     let library = libraries[0];
     if (!library.preventLoadLibrary) {
         // Generate DTS the old way...
-        cp.execSync(`tsc --module amd --outFile "${config.computed.tempTypingsAMDFilePath}" --emitDeclarationOnly true`, {
+        cp.execSync(`node "${commandLineOptions.tscPath || config.computed.tscPath}" --module amd --outFile "${config.computed.tempTypingsAMDFilePath}" --emitDeclarationOnly true`, {
             cwd: settings.computed.srcDirectory
         });
     }

Tools/Gulp/tasks/gulpTasks-librariesES6.js

@@ -187,7 +187,7 @@ var build = function(settings, cb) {
         verbose: true
     };
 
-    let command = `tsc --inlineSources --sourceMap true -t es5 -m esNext --outDir "${settings.computed.distES6Directory}"`;
+    let command = `node "${config.computed.tscPath}" --skipLibCheck false --inlineSources --sourceMap true -t es5 -m esNext --outDir "${settings.computed.distES6Directory}"`;
     shelljs.exec(command, options, function(code, stdout, stderr) {
         if (stderr) {
             console.log(stderr);
@@ -216,7 +216,8 @@ var buildWebpack = function(settings, module, cb) {
         verbose: true
     };
 
-    let command = `gulp ${module} --noNamespace --moduleName ${settings.build.es6.packageName}`;
+    let command = `gulp ${module} --noNamespace --moduleName ${settings.build.es6.packageName} --tscPath "${config.computed.tscPath}"`;
+    console.log(command)
     shelljs.exec(command, options, function(code, stdout, stderr) {
         if (stderr) {
             console.log(stderr);

Tools/Gulp/tasks/gulpTasks-viewerLibraries.js

@@ -68,7 +68,7 @@ var buildViewerLibrary = function(library, settings) {
             if (dest.addBabylonDeclaration) {
                 // include the babylon declaration
                 if (dest.addBabylonDeclaration === true) {
-                    dest.addBabylonDeclaration = ["babylon.d.ts"];
+                    dest.addBabylonDeclaration = ["babylon.module.d.ts"];
                 }
                 var decsToAdd = dest.addBabylonDeclaration.map(function(dec) {
                     return config.build.outputDirectory + '/' + dec;

Tools/Gulp/tasks/gulpTasks-watchCore.js

@@ -54,7 +54,7 @@ gulp.task("watchCore", gulp.series("watchCore-buildShaders", function watch() {
         async: true,
         verbose: true
     };
-    shelljs.exec(`tsc --importHelpers false --isolatedModules true --declaration false --target es5 --module es2015 --outDir "${outputDirectory}" -w`, options, function(code, stdout, stderr) {
+    shelljs.exec(`node "${config.computed.tscPath}" --importHelpers false --isolatedModules true --declaration false --target es5 --module es2015 --outDir "${outputDirectory}" -w`, options, function(code, stdout, stderr) {
         if (stderr) {
             console.log(stderr);
         }

Tools/Publisher/tasks/main.js

@@ -34,8 +34,7 @@ const createVersion = function(version, options) {
     }
 
     if (options.es6) {
-        // Do not publish es6 yet.
-        process.env.BABYLONJSREALPUBLISH = false;
+        // Create the packages and publish if needed.
         processEs6Packages(version);
         // Prepare es6 Dev Folder.
         prepareEs6DevPackages();

Tools/Publisher/tasks/processEs6Packages.js

@@ -32,14 +32,6 @@ function processEs6Packages(version) {
         colorConsole.log("    Copy Dist folder " + distPath.cyan + " to " + packagePath.cyan);
         fs.copySync(distPath, packagePath);
 
-        if (module.build.requiredFiles) {
-            module.build.requiredFiles.forEach(file => {
-                let source = path.join(config.computed.rootFolder, file);
-                let destination = path.join(packagePath, path.basename(file));
-                colorConsole.log("    Copy required file: ", source.cyan, destination.cyan);
-                fs.copySync(source, destination);
-            });
-        }
         if (es6Config.requiredFiles) {
             es6Config.requiredFiles.forEach(file => {
                 let source = path.join(config.computed.rootFolder, file);
@@ -49,6 +41,13 @@ function processEs6Packages(version) {
             });
         }
 
+        if (es6Config.readme) {
+            let source = path.join(config.computed.rootFolder, es6Config.readme);
+            let destination = path.join(packagePath, "readme.md");
+            colorConsole.log("    Copy es6 readme file: ", source.cyan, destination.cyan);
+            fs.copySync(source, destination);
+        }
+
         umdPackageJson.name = es6Config.packageName;
         umdPackageJson.version = version;
         umdPackageJson.main = es6Config.index || "index.js";

Tools/Publisher/tasks/processUMDPackages.js

@@ -32,8 +32,8 @@ function processUMDPackages(version) {
                 outputDirectory = module.computed.distDirectory;
             }
 
-            if (module.build.requiredFiles) {
-                module.build.requiredFiles.forEach(file => {
+            if (module.build.umd.requiredFiles) {
+                module.build.umd.requiredFiles.forEach(file => {
                     let source = path.join(config.computed.rootFolder, file);
                     let destination = path.join(outputDirectory, path.basename(file));
                     colorConsole.log("    Copy required file: ", source.cyan, destination.cyan);

Tools/Publisher/tasks/processUMDViewer.js

@@ -19,8 +19,8 @@ function processUMDViewer(module, version) {
     let projectPath = '../../../Viewer';
     let buildPath = path.resolve(__dirname, projectPath + "/build/src/");
 
-    if (module.build.requiredFiles) {
-        module.build.requiredFiles.forEach(file => {
+    if (module.build.umd.requiredFiles) {
+        module.build.umd.requiredFiles.forEach(file => {
             let source = path.join(config.computed.rootFolder, file);
             let destination = path.join(buildPath, path.basename(file));
             colorConsole.log("    Copy required file: ", source.cyan, destination.cyan);

Viewer/tests/unit/tsconfig.json

@@ -23,7 +23,7 @@
         "rootDir": "../../",
         "paths": {
             "babylonjs": [
-                "../../../../dist/preview release/babylon.d.ts"
+                "../../../../dist/preview release/babylon.module.d.ts"
             ],
             "babylonjs-loaders": [
                 "../../../../dist/preview release/loaders/babylonjs.loaders.module.d.ts"

dist/preview release/glTF2Interface/package.json

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

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

@@ -114,6 +114,118 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+     * Class used to transport BABYLON.Vector2 information for pointer events
+     */
+    export class Vector2WithInfo extends BABYLON.Vector2 {
+        /** defines the current mouse button index */
+        buttonIndex: number;
+        /**
+         * Creates a new Vector2WithInfo
+         * @param source defines the vector2 data to transport
+         * @param buttonIndex defines the current mouse button index
+         */
+        constructor(source: BABYLON.Vector2, 
+        /** defines the current mouse button index */
+        buttonIndex?: number);
+    }
+    /** Class used to provide 2D matrix features */
+    export class Matrix2D {
+        /** Gets the internal array of 6 floats used to store matrix data */
+        m: Float32Array;
+        /**
+         * Creates a new matrix
+         * @param m00 defines value for (0, 0)
+         * @param m01 defines value for (0, 1)
+         * @param m10 defines value for (1, 0)
+         * @param m11 defines value for (1, 1)
+         * @param m20 defines value for (2, 0)
+         * @param m21 defines value for (2, 1)
+         */
+        constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
+        /**
+         * Fills the matrix from direct values
+         * @param m00 defines value for (0, 0)
+         * @param m01 defines value for (0, 1)
+         * @param m10 defines value for (1, 0)
+         * @param m11 defines value for (1, 1)
+         * @param m20 defines value for (2, 0)
+         * @param m21 defines value for (2, 1)
+         * @returns the current modified matrix
+         */
+        fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
+        /**
+         * Gets matrix determinant
+         * @returns the determinant
+         */
+        determinant(): number;
+        /**
+         * Inverses the matrix and stores it in a target matrix
+         * @param result defines the target matrix
+         * @returns the current matrix
+         */
+        invertToRef(result: Matrix2D): Matrix2D;
+        /**
+         * Multiplies the current matrix with another one
+         * @param other defines the second operand
+         * @param result defines the target matrix
+         * @returns the current matrix
+         */
+        multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
+        /**
+         * Applies the current matrix to a set of 2 floats and stores the result in a vector2
+         * @param x defines the x coordinate to transform
+         * @param y defines the x coordinate to transform
+         * @param result defines the target vector2
+         * @returns the current matrix
+         */
+        transformCoordinates(x: number, y: number, result: BABYLON.Vector2): Matrix2D;
+        /**
+         * Creates an identity matrix
+         * @returns a new matrix
+         */
+        static Identity(): Matrix2D;
+        /**
+         * Creates a translation matrix and stores it in a target matrix
+         * @param x defines the x coordinate of the translation
+         * @param y defines the y coordinate of the translation
+         * @param result defines the target matrix
+         */
+        static TranslationToRef(x: number, y: number, result: Matrix2D): void;
+        /**
+         * Creates a scaling matrix and stores it in a target matrix
+         * @param x defines the x coordinate of the scaling
+         * @param y defines the y coordinate of the scaling
+         * @param result defines the target matrix
+         */
+        static ScalingToRef(x: number, y: number, result: Matrix2D): void;
+        /**
+         * Creates a rotation matrix and stores it in a target matrix
+         * @param angle defines the rotation angle
+         * @param result defines the target matrix
+         */
+        static RotationToRef(angle: number, result: Matrix2D): void;
+        private static _TempPreTranslationMatrix;
+        private static _TempPostTranslationMatrix;
+        private static _TempRotationMatrix;
+        private static _TempScalingMatrix;
+        private static _TempCompose0;
+        private static _TempCompose1;
+        private static _TempCompose2;
+        /**
+         * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
+         * @param tx defines the x coordinate of the translation
+         * @param ty defines the y coordinate of the translation
+         * @param angle defines the rotation angle
+         * @param scaleX defines the x coordinate of the scaling
+         * @param scaleY defines the y coordinate of the scaling
+         * @param parentMatrix defines the parent matrix to multiply by (can be null)
+         * @param result defines the target matrix
+         */
+        static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: BABYLON.Nullable<Matrix2D>, result: Matrix2D): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
      * Class used to store 2D control sizes
      */
     export class Measure {
@@ -155,6 +267,19 @@ declare module BABYLON.GUI {
          */
         copyFromFloats(left: number, top: number, width: number, height: number): void;
         /**
+         * Computes the axis aligned bounding box measure for two given measures
+         * @param a Input measure
+         * @param b Input measure
+         * @param result the resulting bounding measure
+         */
+        static CombineToRef(a: Measure, b: Measure, result: Measure): void;
+        /**
+         * Computes the axis aligned bounding box of the measure after it is modified by a given transform
+         * @param transform the matrix to transform the measure before computing the AABB
+         * @param result the resulting AABB
+         */
+        transformToRef(transform: Matrix2D, result: Measure): void;
+        /**
          * Check equality between this measure and another one
          * @param other defines the other measures
          * @returns true if both measures are equals
@@ -357,20 +482,15 @@ declare module BABYLON.GUI {
          * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
          */
         useInvalidateRectOptimization: boolean;
-        private _clearRectangle;
         private _invalidatedRectangle;
         /**
          * Invalidates a rectangle area on the gui texture
-         * @param clearMinX left most position of the rectangle to clear in the texture
-         * @param clearMinY top most position of the rectangle to clear in the texture
-         * @param clearMaxX right most position of the rectangle to clear in the texture
-         * @param clearMaxY bottom most position of the rectangle to clear in the texture
-         * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+         * @param invalidMinX left most position of the rectangle to invalidate in the texture
+         * @param invalidMinY top most position of the rectangle to invalidate in the texture
+         * @param invalidMaxX right most position of the rectangle to invalidate in the texture
+         * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
          */
-        invalidateRect(clearMinX: number, clearMinY: number, clearMaxX: number, clearMaxY: number, minX: number, minY: number, maxX: number, maxY: number): void;
+        invalidateRect(invalidMinX: number, invalidMinY: number, invalidMaxX: number, invalidMaxY: number): void;
         /**
         * Marks the texture as dirty forcing a complete update
         */
@@ -477,118 +597,6 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
-     * Class used to transport BABYLON.Vector2 information for pointer events
-     */
-    export class Vector2WithInfo extends BABYLON.Vector2 {
-        /** defines the current mouse button index */
-        buttonIndex: number;
-        /**
-         * Creates a new Vector2WithInfo
-         * @param source defines the vector2 data to transport
-         * @param buttonIndex defines the current mouse button index
-         */
-        constructor(source: BABYLON.Vector2, 
-        /** defines the current mouse button index */
-        buttonIndex?: number);
-    }
-    /** Class used to provide 2D matrix features */
-    export class Matrix2D {
-        /** Gets the internal array of 6 floats used to store matrix data */
-        m: Float32Array;
-        /**
-         * Creates a new matrix
-         * @param m00 defines value for (0, 0)
-         * @param m01 defines value for (0, 1)
-         * @param m10 defines value for (1, 0)
-         * @param m11 defines value for (1, 1)
-         * @param m20 defines value for (2, 0)
-         * @param m21 defines value for (2, 1)
-         */
-        constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
-        /**
-         * Fills the matrix from direct values
-         * @param m00 defines value for (0, 0)
-         * @param m01 defines value for (0, 1)
-         * @param m10 defines value for (1, 0)
-         * @param m11 defines value for (1, 1)
-         * @param m20 defines value for (2, 0)
-         * @param m21 defines value for (2, 1)
-         * @returns the current modified matrix
-         */
-        fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
-        /**
-         * Gets matrix determinant
-         * @returns the determinant
-         */
-        determinant(): number;
-        /**
-         * Inverses the matrix and stores it in a target matrix
-         * @param result defines the target matrix
-         * @returns the current matrix
-         */
-        invertToRef(result: Matrix2D): Matrix2D;
-        /**
-         * Multiplies the current matrix with another one
-         * @param other defines the second operand
-         * @param result defines the target matrix
-         * @returns the current matrix
-         */
-        multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
-        /**
-         * Applies the current matrix to a set of 2 floats and stores the result in a vector2
-         * @param x defines the x coordinate to transform
-         * @param y defines the x coordinate to transform
-         * @param result defines the target vector2
-         * @returns the current matrix
-         */
-        transformCoordinates(x: number, y: number, result: BABYLON.Vector2): Matrix2D;
-        /**
-         * Creates an identity matrix
-         * @returns a new matrix
-         */
-        static Identity(): Matrix2D;
-        /**
-         * Creates a translation matrix and stores it in a target matrix
-         * @param x defines the x coordinate of the translation
-         * @param y defines the y coordinate of the translation
-         * @param result defines the target matrix
-         */
-        static TranslationToRef(x: number, y: number, result: Matrix2D): void;
-        /**
-         * Creates a scaling matrix and stores it in a target matrix
-         * @param x defines the x coordinate of the scaling
-         * @param y defines the y coordinate of the scaling
-         * @param result defines the target matrix
-         */
-        static ScalingToRef(x: number, y: number, result: Matrix2D): void;
-        /**
-         * Creates a rotation matrix and stores it in a target matrix
-         * @param angle defines the rotation angle
-         * @param result defines the target matrix
-         */
-        static RotationToRef(angle: number, result: Matrix2D): void;
-        private static _TempPreTranslationMatrix;
-        private static _TempPostTranslationMatrix;
-        private static _TempRotationMatrix;
-        private static _TempScalingMatrix;
-        private static _TempCompose0;
-        private static _TempCompose1;
-        private static _TempCompose2;
-        /**
-         * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
-         * @param tx defines the x coordinate of the translation
-         * @param ty defines the y coordinate of the translation
-         * @param angle defines the rotation angle
-         * @param scaleX defines the x coordinate of the scaling
-         * @param scaleY defines the y coordinate of the scaling
-         * @param parentMatrix defines the parent matrix to multiply by (can be null)
-         * @param result defines the target matrix
-         */
-        static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: BABYLON.Nullable<Matrix2D>, result: Matrix2D): void;
-    }
-}
-declare module BABYLON.GUI {
-    /**
      * Root class used for all 2D controls
      * @see http://doc.babylonjs.com/how_to/gui#controls
      */
@@ -637,7 +645,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         _tempParentMeasure: Measure;
         /** @hidden */
-        _tempCurrentMeasure: Measure;
+        _prevCurrentMeasureTransformedIntoGlobalSpace: Measure;
         /** @hidden */
         protected _cachedParentMeasure: Measure;
         private _paddingLeft;
@@ -653,7 +661,8 @@ declare module BABYLON.GUI {
         private _rotation;
         private _transformCenterX;
         private _transformCenterY;
-        private _transformMatrix;
+        /** @hidden */
+        _transformMatrix: Matrix2D;
         /** @hidden */
         protected _invertTransformMatrix: Matrix2D;
         /** @hidden */
@@ -693,7 +702,10 @@ declare module BABYLON.GUI {
         isPointerBlocker: boolean;
         /** Gets or sets a boolean indicating if the control can be focusable */
         isFocusInvisible: boolean;
-        /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
+        /**
+         * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
+         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
+         */
         clipChildren: boolean;
         /**
          * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
@@ -1022,7 +1034,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         _intersectsRect(rect: Measure): boolean;
         /** @hidden */
-        protected invalidateRect(left: number, top: number, right: number, bottom: number): void;
+        protected invalidateRect(): void;
         /** @hidden */
         _markAsDirty(force?: boolean): void;
         /** @hidden */
@@ -1053,6 +1065,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         protected _clipForChildren(context: CanvasRenderingContext2D): void;
         private static _ClipMeasure;
+        private _tmpMeasureA;
         private _clip;
         /** @hidden */
         _render(context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;

dist/preview release/gui/babylon.gui.js

@@ -7,7 +7,7 @@
 		exports["babylonjs-gui"] = factory(require("babylonjs"));
 	else
 		root["BABYLON"] = root["BABYLON"] || {}, root["BABYLON"]["GUI"] = factory(root["BABYLON"]);
-})(window, function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__) {
+})(window, function(__WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -355,7 +355,7 @@ module.exports = g;
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTextureInstrumentation", function() { return AdvancedDynamicTextureInstrumentation; });
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__);
 
 /**
@@ -498,7 +498,7 @@ var AdvancedDynamicTextureInstrumentation = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AdvancedDynamicTexture", function() { return AdvancedDynamicTexture; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _controls_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./controls/container */ "./2D/controls/container.ts");
 /* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style */ "./2D/style.ts");
@@ -592,7 +592,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         */
         _this.premulAlpha = false;
         _this._useInvalidateRectOptimization = true;
-        _this._clearRectangle = null;
+        // Invalidated rectangle which is the combination of all invalidated controls after they have been rotated into absolute position
         _this._invalidatedRectangle = null;
         _this._clearMeasure = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](0, 0, 0, 0);
         /** @hidden */
@@ -885,35 +885,24 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
     });
     /**
      * Invalidates a rectangle area on the gui texture
-     * @param clearMinX left most position of the rectangle to clear in the texture
-     * @param clearMinY top most position of the rectangle to clear in the texture
-     * @param clearMaxX right most position of the rectangle to clear in the texture
-     * @param clearMaxY bottom most position of the rectangle to clear in the texture
-     * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-     * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-     * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-     * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-     */
-    AdvancedDynamicTexture.prototype.invalidateRect = function (clearMinX, clearMinY, clearMaxX, clearMaxY, minX, minY, maxX, maxY) {
+     * @param invalidMinX left most position of the rectangle to invalidate in the texture
+     * @param invalidMinY top most position of the rectangle to invalidate in the texture
+     * @param invalidMaxX right most position of the rectangle to invalidate in the texture
+     * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
+     */
+    AdvancedDynamicTexture.prototype.invalidateRect = function (invalidMinX, invalidMinY, invalidMaxX, invalidMaxY) {
         if (!this._useInvalidateRectOptimization) {
             return;
         }
-        if (!this._clearRectangle || !this._invalidatedRectangle) {
-            this._clearRectangle = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](clearMinX, clearMinY, clearMaxX - clearMinX + 1, clearMaxY - clearMinY + 1);
-            this._invalidatedRectangle = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](minX, minY, maxX - minX + 1, maxY - minY + 1);
+        if (!this._invalidatedRectangle) {
+            this._invalidatedRectangle = new _measure__WEBPACK_IMPORTED_MODULE_4__["Measure"](invalidMinX, invalidMinY, invalidMaxX - invalidMinX + 1, invalidMaxY - invalidMinY + 1);
         }
         else {
             // Compute intersection
-            var maxX = Math.ceil(Math.max(this._clearRectangle.left + this._clearRectangle.width - 1, clearMaxX));
-            var maxY = Math.ceil(Math.max(this._clearRectangle.top + this._clearRectangle.height - 1, clearMaxY));
-            this._clearRectangle.left = Math.floor(Math.min(this._clearRectangle.left, clearMinX));
-            this._clearRectangle.top = Math.floor(Math.min(this._clearRectangle.top, clearMinY));
-            this._clearRectangle.width = maxX - this._clearRectangle.left + 1;
-            this._clearRectangle.height = maxY - this._clearRectangle.top + 1;
-            maxX = Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, maxX);
-            maxY = Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, maxY);
-            this._invalidatedRectangle.left = Math.min(this._invalidatedRectangle.left, minX);
-            this._invalidatedRectangle.top = Math.min(this._invalidatedRectangle.top, minY);
+            var maxX = Math.ceil(Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, invalidMaxX));
+            var maxY = Math.ceil(Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, invalidMaxY));
+            this._invalidatedRectangle.left = Math.floor(Math.min(this._invalidatedRectangle.left, invalidMinX));
+            this._invalidatedRectangle.top = Math.floor(Math.min(this._invalidatedRectangle.top, invalidMinY));
             this._invalidatedRectangle.width = maxX - this._invalidatedRectangle.left + 1;
             this._invalidatedRectangle.height = maxY - this._invalidatedRectangle.top + 1;
         }
@@ -1016,7 +1005,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
                 this._rootContainer._markAllAsDirty();
             }
         }
-        this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1, 0, 0, textureSize.width - 1, textureSize.height - 1);
+        this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1);
     };
     /** @hidden */
     AdvancedDynamicTexture.prototype._getGlobalViewport = function (scene) {
@@ -1096,8 +1085,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         this.onEndLayoutObservable.notifyObservers(this);
         this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
         // Clear
-        if (this._clearRectangle) {
-            this._clearMeasure.copyFrom(this._clearRectangle);
+        if (this._invalidatedRectangle) {
+            this._clearMeasure.copyFrom(this._invalidatedRectangle);
         }
         else {
             this._clearMeasure.copyFromFloats(0, 0, renderWidth, renderHeight);
@@ -1113,7 +1102,6 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         this.onBeginRenderObservable.notifyObservers(this);
         this._rootContainer._render(context, this._invalidatedRectangle);
         this.onEndRenderObservable.notifyObservers(this);
-        this._clearRectangle = null;
         this._invalidatedRectangle = null;
     };
     /** @hidden */
@@ -1624,7 +1612,7 @@ var Button = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return Checkbox; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -1805,7 +1793,7 @@ var Checkbox = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorPicker", function() { return ColorPicker; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _inputText__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputText */ "./2D/controls/inputText.ts");
@@ -3252,7 +3240,7 @@ var ColorPicker = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container", function() { return Container; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/logger */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_logger__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -3442,13 +3430,17 @@ var Container = /** @class */ (function (_super) {
     /** @hidden */
     Container.prototype._reOrderControl = function (control) {
         this.removeControl(control);
+        var wasAdded = false;
         for (var index = 0; index < this._children.length; index++) {
             if (this._children[index].zIndex > control.zIndex) {
                 this._children.splice(index, 0, control);
-                return;
+                wasAdded = true;
+                break;
             }
         }
-        this._children.push(control);
+        if (!wasAdded) {
+            this._children.push(control);
+        }
         control.parent = this;
         this._markAsDirty();
     };
@@ -3511,11 +3503,11 @@ var Container = /** @class */ (function (_super) {
     };
     /** @hidden */
     Container.prototype._layout = function (parentMeasure, context) {
-        if (!this.isVisible || this.notRenderable) {
+        if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
             return false;
         }
         if (this._isDirty) {
-            this._tempCurrentMeasure.copyFrom(this._currentMeasure);
+            this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
         }
         var rebuildCount = 0;
         context.save();
@@ -3560,7 +3552,7 @@ var Container = /** @class */ (function (_super) {
         }
         context.restore();
         if (this._isDirty) {
-            this.invalidateRect(Math.min(this._currentMeasure.left, this._tempCurrentMeasure.left), Math.min(this._currentMeasure.top, this._tempCurrentMeasure.top), Math.max(this._currentMeasure.left + this._currentMeasure.width, this._tempCurrentMeasure.left + this._tempCurrentMeasure.width) - 1, Math.max(this._currentMeasure.top + this._currentMeasure.height, this._tempCurrentMeasure.top + this._tempCurrentMeasure.height) - 1);
+            this.invalidateRect();
             this._isDirty = false;
         }
         return true;
@@ -3579,7 +3571,7 @@ var Container = /** @class */ (function (_super) {
             // Only redraw parts of the screen that are invalidated
             if (invalidatedRectangle) {
                 if (!child._intersectsRect(invalidatedRectangle)) {
-                    // continue;
+                    continue;
                 }
             }
             child._render(context, invalidatedRectangle);
@@ -3653,7 +3645,7 @@ var Container = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control", function() { return Control; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _measure__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../measure */ "./2D/measure.ts");
@@ -3666,7 +3658,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 /**
  * Root class used for all 2D controls
  * @see http://doc.babylonjs.com/how_to/gui#controls
@@ -3707,7 +3698,7 @@ var Control = /** @class */ (function () {
         /** @hidden */
         this._tempParentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
         /** @hidden */
-        this._tempCurrentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
+        this._prevCurrentMeasureTransformedIntoGlobalSpace = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
         /** @hidden */
         this._cachedParentMeasure = _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].Empty();
         this._paddingLeft = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"](0);
@@ -3723,6 +3714,7 @@ var Control = /** @class */ (function () {
         this._rotation = 0;
         this._transformCenterX = 0.5;
         this._transformCenterY = 0.5;
+        /** @hidden */
         this._transformMatrix = _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].Identity();
         /** @hidden */
         this._invertTransformMatrix = _math2D__WEBPACK_IMPORTED_MODULE_3__["Matrix2D"].Identity();
@@ -3753,7 +3745,10 @@ var Control = /** @class */ (function () {
         this.isPointerBlocker = false;
         /** Gets or sets a boolean indicating if the control can be focusable */
         this.isFocusInvisible = false;
-        /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
+        /**
+         * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
+         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
+         */
         this.clipChildren = true;
         /**
          * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
@@ -3805,6 +3800,7 @@ var Control = /** @class */ (function () {
          * An event triggered after the control was drawn
          */
         this.onAfterDrawObservable = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
+        this._tmpMeasureA = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
     }
     Object.defineProperty(Control.prototype, "shadowOffsetX", {
         /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
@@ -3948,7 +3944,6 @@ var Control = /** @class */ (function () {
                 return;
             }
             this._scaleX = value;
-            this._transform();
             this._markAsDirty();
             this._markMatrixAsDirty();
         },
@@ -3967,7 +3962,6 @@ var Control = /** @class */ (function () {
                 return;
             }
             this._scaleY = value;
-            this._transform();
             this._markAsDirty();
             this._markMatrixAsDirty();
         },
@@ -4753,35 +4747,32 @@ var Control = /** @class */ (function () {
     };
     /** @hidden */
     Control.prototype._intersectsRect = function (rect) {
-        if (this._currentMeasure.left >= rect.left + rect.width) {
+        // Rotate the control's current measure into local space and check if it intersects the passed in rectangle
+        this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
+        if (this._tmpMeasureA.left >= rect.left + rect.width) {
             return false;
         }
-        if (this._currentMeasure.top >= rect.top + rect.height) {
+        if (this._tmpMeasureA.top >= rect.top + rect.height) {
             return false;
         }
-        if (this._currentMeasure.left + this._currentMeasure.width <= rect.left) {
+        if (this._tmpMeasureA.left + this._tmpMeasureA.width <= rect.left) {
             return false;
         }
-        if (this._currentMeasure.top + this._currentMeasure.height <= rect.top) {
+        if (this._tmpMeasureA.top + this._tmpMeasureA.height <= rect.top) {
             return false;
         }
         return true;
     };
     /** @hidden */
-    Control.prototype.invalidateRect = function (left, top, right, bottom) {
+    Control.prototype.invalidateRect = function () {
+        this._transform();
         if (this.host && this.host.useInvalidateRectOptimization) {
-            // Compute AABB of transformed container box (eg. to handle rotation and scaling)
-            var rectanglePoints = babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Polygon"].Rectangle(left, top, right, bottom);
-            var min = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"](Number.MAX_VALUE, Number.MAX_VALUE);
-            var max = new babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0);
-            for (var i = 0; i < 4; i++) {
-                this._transformMatrix.transformCoordinates(rectanglePoints[i].x, rectanglePoints[i].y, rectanglePoints[i]);
-                min.x = Math.min(min.x, rectanglePoints[i].x);
-                min.y = Math.min(min.y, rectanglePoints[i].y);
-                max.x = Math.max(max.x, rectanglePoints[i].x);
-                max.y = Math.max(max.y, rectanglePoints[i].y);
-            }
-            this.host.invalidateRect(min.x, min.y, max.x, max.y, left, top, right, bottom);
+            // Rotate by transform to get the measure transformed to global space
+            this._currentMeasure.transformToRef(this._transformMatrix, this._tmpMeasureA);
+            // get the boudning box of the current measure and last frames measure in global space and invalidate it
+            // the previous measure is used to properly clear a control that is scaled down
+            _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"].CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
+            this.host.invalidateRect(Math.floor(this._tmpMeasureA.left), Math.floor(this._tmpMeasureA.top), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height));
         }
     };
     /** @hidden */
@@ -4876,11 +4867,11 @@ var Control = /** @class */ (function () {
     };
     /** @hidden */
     Control.prototype._layout = function (parentMeasure, context) {
-        if (!this.isVisible || this.notRenderable) {
+        if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
             return false;
         }
         if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
-            this._tempCurrentMeasure.copyFrom(this._currentMeasure);
+            this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
             context.save();
             this._applyStates(context);
             var rebuildCount = 0;
@@ -4893,7 +4884,7 @@ var Control = /** @class */ (function () {
                 babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Logger"].Error("Layout cycle detected in GUI (Control name=" + this.name + ", uniqueId=" + this.uniqueId + ")");
             }
             context.restore();
-            this.invalidateRect(Math.min(this._currentMeasure.left, this._tempCurrentMeasure.left), Math.min(this._currentMeasure.top, this._tempCurrentMeasure.top), Math.max(this._currentMeasure.left + this._currentMeasure.width, this._tempCurrentMeasure.left + this._tempCurrentMeasure.width), Math.max(this._currentMeasure.top + this._currentMeasure.height, this._tempCurrentMeasure.top + this._tempCurrentMeasure.height));
+            this.invalidateRect();
             this._evaluateClippingState(parentMeasure);
         }
         this._wasDirty = this._isDirty;
@@ -5047,12 +5038,15 @@ var Control = /** @class */ (function () {
         context.beginPath();
         Control._ClipMeasure.copyFrom(this._currentMeasure);
         if (invalidatedRectangle) {
-            var right = Math.min(invalidatedRectangle.left + invalidatedRectangle.width, this._currentMeasure.left + this._currentMeasure.width);
-            var bottom = Math.min(invalidatedRectangle.top + invalidatedRectangle.height, this._currentMeasure.top + this._currentMeasure.height);
-            Control._ClipMeasure.left = Math.max(invalidatedRectangle.left, this._currentMeasure.left);
-            Control._ClipMeasure.top = Math.max(invalidatedRectangle.top, this._currentMeasure.top);
-            Control._ClipMeasure.width = right - Control._ClipMeasure.left;
-            Control._ClipMeasure.height = bottom - Control._ClipMeasure.top;
+            // Rotate the invalidated rect into the control's space
+            invalidatedRectangle.transformToRef(this._invertTransformMatrix, this._tmpMeasureA);
+            // Get the intersection of the rect in context space and the current context
+            var intersection = new _measure__WEBPACK_IMPORTED_MODULE_2__["Measure"](0, 0, 0, 0);
+            intersection.left = Math.max(this._tmpMeasureA.left, this._currentMeasure.left);
+            intersection.top = Math.max(this._tmpMeasureA.top, this._currentMeasure.top);
+            intersection.width = Math.min(this._tmpMeasureA.left + this._tmpMeasureA.width, this._currentMeasure.left + this._currentMeasure.width) - intersection.left;
+            intersection.height = Math.min(this._tmpMeasureA.top + this._tmpMeasureA.height, this._currentMeasure.top + this._currentMeasure.height) - intersection.top;
+            Control._ClipMeasure.copyFrom(intersection);
         }
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
             var shadowOffsetX = this.shadowOffsetX;
@@ -6193,7 +6187,7 @@ var Grid = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return Image; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 
@@ -6964,7 +6958,7 @@ var InputPassword = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputText", function() { return InputText; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -7973,7 +7967,7 @@ var InputText = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Line", function() { return Line; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -8241,7 +8235,7 @@ var Line = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLine", function() { return MultiLine; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/abstractMesh */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_abstractMesh__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _multiLinePoint__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../multiLinePoint */ "./2D/multiLinePoint.ts");
@@ -8508,7 +8502,7 @@ var MultiLine = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioButton", function() { return RadioButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
@@ -8853,7 +8847,7 @@ var Rectangle = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollViewer", function() { return ScrollViewer; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Events/pointerEvents */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Events/pointerEvents */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Events_pointerEvents__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _rectangle__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../rectangle */ "./2D/controls/rectangle.ts");
 /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../grid */ "./2D/controls/grid.ts");
@@ -9944,7 +9938,7 @@ var SelectionPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseSlider", function() { return BaseSlider; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../control */ "./2D/controls/control.ts");
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../valueAndUnit */ "./2D/valueAndUnit.ts");
@@ -10820,7 +10814,7 @@ var Slider = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel", function() { return StackPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container */ "./2D/controls/container.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -11078,7 +11072,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextWrapping", function() { return TextWrapping; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextBlock", function() { return TextBlock; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../valueAndUnit */ "./2D/valueAndUnit.ts");
 /* harmony import */ var _control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./control */ "./2D/controls/control.ts");
@@ -11518,7 +11512,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "KeyPropertySet", function() { return KeyPropertySet; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualKeyboard", function() { return VirtualKeyboard; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _stackPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./stackPanel */ "./2D/controls/stackPanel.ts");
 /* harmony import */ var _button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./button */ "./2D/controls/button.ts");
@@ -11891,7 +11885,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector2WithInfo", function() { return Vector2WithInfo; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Matrix2D", function() { return Matrix2D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -12115,6 +12109,9 @@ var Matrix2D = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Measure", function() { return Measure; });
+/* harmony import */ var babylonjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs */ "babylonjs/Misc/observable");
+/* harmony import */ var babylonjs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs__WEBPACK_IMPORTED_MODULE_0__);
+
 /**
  * Class used to store 2D control sizes
  */
@@ -12164,6 +12161,43 @@ var Measure = /** @class */ (function () {
         this.height = height;
     };
     /**
+     * Computes the axis aligned bounding box measure for two given measures
+     * @param a Input measure
+     * @param b Input measure
+     * @param result the resulting bounding measure
+     */
+    Measure.CombineToRef = function (a, b, result) {
+        var left = Math.min(a.left, b.left);
+        var top = Math.min(a.top, b.top);
+        var right = Math.max(a.left + a.width, b.left + b.width);
+        var bottom = Math.max(a.top + a.height, b.top + b.height);
+        result.left = left;
+        result.top = top;
+        result.width = right - left;
+        result.height = bottom - top;
+    };
+    /**
+     * Computes the axis aligned bounding box of the measure after it is modified by a given transform
+     * @param transform the matrix to transform the measure before computing the AABB
+     * @param result the resulting AABB
+     */
+    Measure.prototype.transformToRef = function (transform, result) {
+        var rectanglePoints = babylonjs__WEBPACK_IMPORTED_MODULE_0__["Polygon"].Rectangle(this.left, this.top, this.left + this.width, this.top + this.height);
+        var min = new babylonjs__WEBPACK_IMPORTED_MODULE_0__["Vector2"](Number.MAX_VALUE, Number.MAX_VALUE);
+        var max = new babylonjs__WEBPACK_IMPORTED_MODULE_0__["Vector2"](0, 0);
+        for (var i = 0; i < 4; i++) {
+            transform.transformCoordinates(rectanglePoints[i].x, rectanglePoints[i].y, rectanglePoints[i]);
+            min.x = Math.floor(Math.min(min.x, rectanglePoints[i].x));
+            min.y = Math.floor(Math.min(min.y, rectanglePoints[i].y));
+            max.x = Math.ceil(Math.max(max.x, rectanglePoints[i].x));
+            max.y = Math.ceil(Math.max(max.y, rectanglePoints[i].y));
+        }
+        result.left = min.x;
+        result.top = min.y;
+        result.width = max.x - min.x;
+        result.height = max.y - min.y;
+    };
+    /**
      * Check equality between this measure and another one
      * @param other defines the other measures
      * @returns true if both measures are equals
@@ -12207,7 +12241,7 @@ var Measure = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MultiLinePoint", function() { return MultiLinePoint; });
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -12350,7 +12384,7 @@ var MultiLinePoint = /** @class */ (function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Style", function() { return Style; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _valueAndUnit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./valueAndUnit */ "./2D/valueAndUnit.ts");
 
@@ -12654,7 +12688,7 @@ var ValueAndUnit = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractButton3D", function() { return AbstractButton3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -12697,7 +12731,7 @@ var AbstractButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Button3D", function() { return Button3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _abstractButton3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./abstractButton3D */ "./3D/controls/abstractButton3D.ts");
 /* harmony import */ var _2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../2D/advancedDynamicTexture */ "./2D/advancedDynamicTexture.ts");
@@ -12874,7 +12908,7 @@ var Button3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Container3D", function() { return Container3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Meshes/transformNode */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Meshes_transformNode__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _control3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./control3D */ "./3D/controls/control3D.ts");
 
@@ -13031,7 +13065,7 @@ var Container3D = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Control3D", function() { return Control3D; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _vector3WithInfo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../vector3WithInfo */ "./3D/vector3WithInfo.ts");
 
@@ -13425,7 +13459,7 @@ var Control3D = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CylinderPanel", function() { return CylinderPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -13510,7 +13544,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HolographicButton", function() { return HolographicButton; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
 /* harmony import */ var _button3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./button3D */ "./3D/controls/button3D.ts");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _materials_fluentMaterial__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../materials/fluentMaterial */ "./3D/materials/fluentMaterial.ts");
 /* harmony import */ var _2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../2D/controls/stackPanel */ "./2D/controls/stackPanel.ts");
@@ -13985,7 +14019,7 @@ var MeshButton3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlanePanel", function() { return PlanePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
@@ -14040,7 +14074,7 @@ var PlanePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScatterPanel", function() { return ScatterPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -14167,7 +14201,7 @@ var ScatterPanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SpherePanel", function() { return SpherePanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _volumeBasedPanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./volumeBasedPanel */ "./3D/controls/volumeBasedPanel.ts");
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
@@ -14252,7 +14286,7 @@ var SpherePanel = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StackPanel3D", function() { return StackPanel3D; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -14377,7 +14411,7 @@ var StackPanel3D = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VolumeBasedPanel", function() { return VolumeBasedPanel; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/tools */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _container3D__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./container3D */ "./3D/controls/container3D.ts");
 
@@ -14568,7 +14602,7 @@ var VolumeBasedPanel = /** @class */ (function (_super) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GUI3DManager", function() { return GUI3DManager; });
-/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Misc/observable */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _controls_container3D__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./controls/container3D */ "./3D/controls/container3D.ts");
 
@@ -14835,7 +14869,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterialDefines", function() { return FluentMaterialDefines; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FluentMaterial", function() { return FluentMaterial; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Misc/decorators */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Misc_decorators__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _shaders_fluent_vertex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./shaders/fluent.vertex */ "./3D/materials/shaders/fluent.vertex.ts");
 /* harmony import */ var _shaders_fluent_fragment__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./shaders/fluent.fragment */ "./3D/materials/shaders/fluent.fragment.ts");
@@ -15157,7 +15191,7 @@ __webpack_require__.r(__webpack_exports__);
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentPixelShader", function() { return fluentPixelShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentPixelShader';
@@ -15179,7 +15213,7 @@ var fluentPixelShader = { name: name, shader: shader };
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fluentVertexShader", function() { return fluentVertexShader; });
-/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! babylonjs/Materials/effect */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_effect__WEBPACK_IMPORTED_MODULE_0__);
 
 var name = 'fluentVertexShader';
@@ -15202,7 +15236,7 @@ var fluentVertexShader = { name: name, shader: shader };
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Vector3WithInfo", function() { return Vector3WithInfo; });
 /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../node_modules/tslib/tslib.es6.js");
-/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/tools");
+/* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! babylonjs/Maths/math */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Maths_math__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -15492,14 +15526,14 @@ if (typeof globalObject !== "undefined") {
 
 /***/ }),
 
-/***/ "babylonjs/Misc/tools":
+/***/ "babylonjs/Misc/observable":
 /*!****************************************************************************************************!*\
   !*** external {"root":"BABYLON","commonjs":"babylonjs","commonjs2":"babylonjs","amd":"babylonjs"} ***!
   \****************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_tools__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_babylonjs_Misc_observable__;
 
 /***/ })
 

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

@@ -117,7 +117,122 @@ declare module "babylonjs-gui/2D/style" {
         dispose(): void;
     }
 }
+declare module "babylonjs-gui/2D/math2D" {
+    import { Nullable } from "babylonjs/types";
+    import { Vector2 } from "babylonjs/Maths/math";
+    /**
+     * Class used to transport Vector2 information for pointer events
+     */
+    export class Vector2WithInfo extends Vector2 {
+        /** defines the current mouse button index */
+        buttonIndex: number;
+        /**
+         * Creates a new Vector2WithInfo
+         * @param source defines the vector2 data to transport
+         * @param buttonIndex defines the current mouse button index
+         */
+        constructor(source: Vector2, 
+        /** defines the current mouse button index */
+        buttonIndex?: number);
+    }
+    /** Class used to provide 2D matrix features */
+    export class Matrix2D {
+        /** Gets the internal array of 6 floats used to store matrix data */
+        m: Float32Array;
+        /**
+         * Creates a new matrix
+         * @param m00 defines value for (0, 0)
+         * @param m01 defines value for (0, 1)
+         * @param m10 defines value for (1, 0)
+         * @param m11 defines value for (1, 1)
+         * @param m20 defines value for (2, 0)
+         * @param m21 defines value for (2, 1)
+         */
+        constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
+        /**
+         * Fills the matrix from direct values
+         * @param m00 defines value for (0, 0)
+         * @param m01 defines value for (0, 1)
+         * @param m10 defines value for (1, 0)
+         * @param m11 defines value for (1, 1)
+         * @param m20 defines value for (2, 0)
+         * @param m21 defines value for (2, 1)
+         * @returns the current modified matrix
+         */
+        fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
+        /**
+         * Gets matrix determinant
+         * @returns the determinant
+         */
+        determinant(): number;
+        /**
+         * Inverses the matrix and stores it in a target matrix
+         * @param result defines the target matrix
+         * @returns the current matrix
+         */
+        invertToRef(result: Matrix2D): Matrix2D;
+        /**
+         * Multiplies the current matrix with another one
+         * @param other defines the second operand
+         * @param result defines the target matrix
+         * @returns the current matrix
+         */
+        multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
+        /**
+         * Applies the current matrix to a set of 2 floats and stores the result in a vector2
+         * @param x defines the x coordinate to transform
+         * @param y defines the x coordinate to transform
+         * @param result defines the target vector2
+         * @returns the current matrix
+         */
+        transformCoordinates(x: number, y: number, result: Vector2): Matrix2D;
+        /**
+         * Creates an identity matrix
+         * @returns a new matrix
+         */
+        static Identity(): Matrix2D;
+        /**
+         * Creates a translation matrix and stores it in a target matrix
+         * @param x defines the x coordinate of the translation
+         * @param y defines the y coordinate of the translation
+         * @param result defines the target matrix
+         */
+        static TranslationToRef(x: number, y: number, result: Matrix2D): void;
+        /**
+         * Creates a scaling matrix and stores it in a target matrix
+         * @param x defines the x coordinate of the scaling
+         * @param y defines the y coordinate of the scaling
+         * @param result defines the target matrix
+         */
+        static ScalingToRef(x: number, y: number, result: Matrix2D): void;
+        /**
+         * Creates a rotation matrix and stores it in a target matrix
+         * @param angle defines the rotation angle
+         * @param result defines the target matrix
+         */
+        static RotationToRef(angle: number, result: Matrix2D): void;
+        private static _TempPreTranslationMatrix;
+        private static _TempPostTranslationMatrix;
+        private static _TempRotationMatrix;
+        private static _TempScalingMatrix;
+        private static _TempCompose0;
+        private static _TempCompose1;
+        private static _TempCompose2;
+        /**
+         * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
+         * @param tx defines the x coordinate of the translation
+         * @param ty defines the y coordinate of the translation
+         * @param angle defines the rotation angle
+         * @param scaleX defines the x coordinate of the scaling
+         * @param scaleY defines the y coordinate of the scaling
+         * @param parentMatrix defines the parent matrix to multiply by (can be null)
+         * @param result defines the target matrix
+         */
+        static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: Nullable<Matrix2D>, result: Matrix2D): void;
+    }
+}
 declare module "babylonjs-gui/2D/measure" {
+    import { Matrix2D } from "babylonjs-gui/2D/math2D";
     /**
      * Class used to store 2D control sizes
      */
@@ -160,6 +275,19 @@ declare module "babylonjs-gui/2D/measure" {
          */
         copyFromFloats(left: number, top: number, width: number, height: number): void;
         /**
+         * Computes the axis aligned bounding box measure for two given measures
+         * @param a Input measure
+         * @param b Input measure
+         * @param result the resulting bounding measure
+         */
+        static CombineToRef(a: Measure, b: Measure, result: Measure): void;
+        /**
+         * Computes the axis aligned bounding box of the measure after it is modified by a given transform
+         * @param transform the matrix to transform the measure before computing the AABB
+         * @param result the resulting AABB
+         */
+        transformToRef(transform: Matrix2D, result: Measure): void;
+        /**
          * Check equality between this measure and another one
          * @param other defines the other measures
          * @returns true if both measures are equals
@@ -373,20 +501,15 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
          */
         useInvalidateRectOptimization: boolean;
-        private _clearRectangle;
         private _invalidatedRectangle;
         /**
          * Invalidates a rectangle area on the gui texture
-         * @param clearMinX left most position of the rectangle to clear in the texture
-         * @param clearMinY top most position of the rectangle to clear in the texture
-         * @param clearMaxX right most position of the rectangle to clear in the texture
-         * @param clearMaxY bottom most position of the rectangle to clear in the texture
-         * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+         * @param invalidMinX left most position of the rectangle to invalidate in the texture
+         * @param invalidMinY top most position of the rectangle to invalidate in the texture
+         * @param invalidMaxX right most position of the rectangle to invalidate in the texture
+         * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
          */
-        invalidateRect(clearMinX: number, clearMinY: number, clearMaxX: number, clearMaxY: number, minX: number, minY: number, maxX: number, maxY: number): void;
+        invalidateRect(invalidMinX: number, invalidMinY: number, invalidMaxX: number, invalidMaxY: number): void;
         /**
         * Marks the texture as dirty forcing a complete update
         */
@@ -491,120 +614,6 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
         static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Nullable<Scene>, sampling?: number): AdvancedDynamicTexture;
     }
 }
-declare module "babylonjs-gui/2D/math2D" {
-    import { Nullable } from "babylonjs/types";
-    import { Vector2 } from "babylonjs/Maths/math";
-    /**
-     * Class used to transport Vector2 information for pointer events
-     */
-    export class Vector2WithInfo extends Vector2 {
-        /** defines the current mouse button index */
-        buttonIndex: number;
-        /**
-         * Creates a new Vector2WithInfo
-         * @param source defines the vector2 data to transport
-         * @param buttonIndex defines the current mouse button index
-         */
-        constructor(source: Vector2, 
-        /** defines the current mouse button index */
-        buttonIndex?: number);
-    }
-    /** Class used to provide 2D matrix features */
-    export class Matrix2D {
-        /** Gets the internal array of 6 floats used to store matrix data */
-        m: Float32Array;
-        /**
-         * Creates a new matrix
-         * @param m00 defines value for (0, 0)
-         * @param m01 defines value for (0, 1)
-         * @param m10 defines value for (1, 0)
-         * @param m11 defines value for (1, 1)
-         * @param m20 defines value for (2, 0)
-         * @param m21 defines value for (2, 1)
-         */
-        constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
-        /**
-         * Fills the matrix from direct values
-         * @param m00 defines value for (0, 0)
-         * @param m01 defines value for (0, 1)
-         * @param m10 defines value for (1, 0)
-         * @param m11 defines value for (1, 1)
-         * @param m20 defines value for (2, 0)
-         * @param m21 defines value for (2, 1)
-         * @returns the current modified matrix
-         */
-        fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
-        /**
-         * Gets matrix determinant
-         * @returns the determinant
-         */
-        determinant(): number;
-        /**
-         * Inverses the matrix and stores it in a target matrix
-         * @param result defines the target matrix
-         * @returns the current matrix
-         */
-        invertToRef(result: Matrix2D): Matrix2D;
-        /**
-         * Multiplies the current matrix with another one
-         * @param other defines the second operand
-         * @param result defines the target matrix
-         * @returns the current matrix
-         */
-        multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
-        /**
-         * Applies the current matrix to a set of 2 floats and stores the result in a vector2
-         * @param x defines the x coordinate to transform
-         * @param y defines the x coordinate to transform
-         * @param result defines the target vector2
-         * @returns the current matrix
-         */
-        transformCoordinates(x: number, y: number, result: Vector2): Matrix2D;
-        /**
-         * Creates an identity matrix
-         * @returns a new matrix
-         */
-        static Identity(): Matrix2D;
-        /**
-         * Creates a translation matrix and stores it in a target matrix
-         * @param x defines the x coordinate of the translation
-         * @param y defines the y coordinate of the translation
-         * @param result defines the target matrix
-         */
-        static TranslationToRef(x: number, y: number, result: Matrix2D): void;
-        /**
-         * Creates a scaling matrix and stores it in a target matrix
-         * @param x defines the x coordinate of the scaling
-         * @param y defines the y coordinate of the scaling
-         * @param result defines the target matrix
-         */
-        static ScalingToRef(x: number, y: number, result: Matrix2D): void;
-        /**
-         * Creates a rotation matrix and stores it in a target matrix
-         * @param angle defines the rotation angle
-         * @param result defines the target matrix
-         */
-        static RotationToRef(angle: number, result: Matrix2D): void;
-        private static _TempPreTranslationMatrix;
-        private static _TempPostTranslationMatrix;
-        private static _TempRotationMatrix;
-        private static _TempScalingMatrix;
-        private static _TempCompose0;
-        private static _TempCompose1;
-        private static _TempCompose2;
-        /**
-         * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
-         * @param tx defines the x coordinate of the translation
-         * @param ty defines the y coordinate of the translation
-         * @param angle defines the rotation angle
-         * @param scaleX defines the x coordinate of the scaling
-         * @param scaleY defines the y coordinate of the scaling
-         * @param parentMatrix defines the parent matrix to multiply by (can be null)
-         * @param result defines the target matrix
-         */
-        static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: Nullable<Matrix2D>, result: Matrix2D): void;
-    }
-}
 declare module "babylonjs-gui/2D/controls/control" {
     import { Nullable } from "babylonjs/types";
     import { Observable } from "babylonjs/Misc/observable";
@@ -666,7 +675,7 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** @hidden */
         _tempParentMeasure: Measure;
         /** @hidden */
-        _tempCurrentMeasure: Measure;
+        _prevCurrentMeasureTransformedIntoGlobalSpace: Measure;
         /** @hidden */
         protected _cachedParentMeasure: Measure;
         private _paddingLeft;
@@ -682,7 +691,8 @@ declare module "babylonjs-gui/2D/controls/control" {
         private _rotation;
         private _transformCenterX;
         private _transformCenterY;
-        private _transformMatrix;
+        /** @hidden */
+        _transformMatrix: Matrix2D;
         /** @hidden */
         protected _invertTransformMatrix: Matrix2D;
         /** @hidden */
@@ -722,7 +732,10 @@ declare module "babylonjs-gui/2D/controls/control" {
         isPointerBlocker: boolean;
         /** Gets or sets a boolean indicating if the control can be focusable */
         isFocusInvisible: boolean;
-        /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
+        /**
+         * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
+         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
+         */
         clipChildren: boolean;
         /**
          * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
@@ -1051,7 +1064,7 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** @hidden */
         _intersectsRect(rect: Measure): boolean;
         /** @hidden */
-        protected invalidateRect(left: number, top: number, right: number, bottom: number): void;
+        protected invalidateRect(): void;
         /** @hidden */
         _markAsDirty(force?: boolean): void;
         /** @hidden */
@@ -1082,6 +1095,7 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** @hidden */
         protected _clipForChildren(context: CanvasRenderingContext2D): void;
         private static _ClipMeasure;
+        private _tmpMeasureA;
         private _clip;
         /** @hidden */
         _render(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean;
@@ -3940,6 +3954,118 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+     * Class used to transport BABYLON.Vector2 information for pointer events
+     */
+    export class Vector2WithInfo extends BABYLON.Vector2 {
+        /** defines the current mouse button index */
+        buttonIndex: number;
+        /**
+         * Creates a new Vector2WithInfo
+         * @param source defines the vector2 data to transport
+         * @param buttonIndex defines the current mouse button index
+         */
+        constructor(source: BABYLON.Vector2, 
+        /** defines the current mouse button index */
+        buttonIndex?: number);
+    }
+    /** Class used to provide 2D matrix features */
+    export class Matrix2D {
+        /** Gets the internal array of 6 floats used to store matrix data */
+        m: Float32Array;
+        /**
+         * Creates a new matrix
+         * @param m00 defines value for (0, 0)
+         * @param m01 defines value for (0, 1)
+         * @param m10 defines value for (1, 0)
+         * @param m11 defines value for (1, 1)
+         * @param m20 defines value for (2, 0)
+         * @param m21 defines value for (2, 1)
+         */
+        constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
+        /**
+         * Fills the matrix from direct values
+         * @param m00 defines value for (0, 0)
+         * @param m01 defines value for (0, 1)
+         * @param m10 defines value for (1, 0)
+         * @param m11 defines value for (1, 1)
+         * @param m20 defines value for (2, 0)
+         * @param m21 defines value for (2, 1)
+         * @returns the current modified matrix
+         */
+        fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
+        /**
+         * Gets matrix determinant
+         * @returns the determinant
+         */
+        determinant(): number;
+        /**
+         * Inverses the matrix and stores it in a target matrix
+         * @param result defines the target matrix
+         * @returns the current matrix
+         */
+        invertToRef(result: Matrix2D): Matrix2D;
+        /**
+         * Multiplies the current matrix with another one
+         * @param other defines the second operand
+         * @param result defines the target matrix
+         * @returns the current matrix
+         */
+        multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
+        /**
+         * Applies the current matrix to a set of 2 floats and stores the result in a vector2
+         * @param x defines the x coordinate to transform
+         * @param y defines the x coordinate to transform
+         * @param result defines the target vector2
+         * @returns the current matrix
+         */
+        transformCoordinates(x: number, y: number, result: BABYLON.Vector2): Matrix2D;
+        /**
+         * Creates an identity matrix
+         * @returns a new matrix
+         */
+        static Identity(): Matrix2D;
+        /**
+         * Creates a translation matrix and stores it in a target matrix
+         * @param x defines the x coordinate of the translation
+         * @param y defines the y coordinate of the translation
+         * @param result defines the target matrix
+         */
+        static TranslationToRef(x: number, y: number, result: Matrix2D): void;
+        /**
+         * Creates a scaling matrix and stores it in a target matrix
+         * @param x defines the x coordinate of the scaling
+         * @param y defines the y coordinate of the scaling
+         * @param result defines the target matrix
+         */
+        static ScalingToRef(x: number, y: number, result: Matrix2D): void;
+        /**
+         * Creates a rotation matrix and stores it in a target matrix
+         * @param angle defines the rotation angle
+         * @param result defines the target matrix
+         */
+        static RotationToRef(angle: number, result: Matrix2D): void;
+        private static _TempPreTranslationMatrix;
+        private static _TempPostTranslationMatrix;
+        private static _TempRotationMatrix;
+        private static _TempScalingMatrix;
+        private static _TempCompose0;
+        private static _TempCompose1;
+        private static _TempCompose2;
+        /**
+         * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
+         * @param tx defines the x coordinate of the translation
+         * @param ty defines the y coordinate of the translation
+         * @param angle defines the rotation angle
+         * @param scaleX defines the x coordinate of the scaling
+         * @param scaleY defines the y coordinate of the scaling
+         * @param parentMatrix defines the parent matrix to multiply by (can be null)
+         * @param result defines the target matrix
+         */
+        static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: BABYLON.Nullable<Matrix2D>, result: Matrix2D): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
      * Class used to store 2D control sizes
      */
     export class Measure {
@@ -3981,6 +4107,19 @@ declare module BABYLON.GUI {
          */
         copyFromFloats(left: number, top: number, width: number, height: number): void;
         /**
+         * Computes the axis aligned bounding box measure for two given measures
+         * @param a Input measure
+         * @param b Input measure
+         * @param result the resulting bounding measure
+         */
+        static CombineToRef(a: Measure, b: Measure, result: Measure): void;
+        /**
+         * Computes the axis aligned bounding box of the measure after it is modified by a given transform
+         * @param transform the matrix to transform the measure before computing the AABB
+         * @param result the resulting AABB
+         */
+        transformToRef(transform: Matrix2D, result: Measure): void;
+        /**
          * Check equality between this measure and another one
          * @param other defines the other measures
          * @returns true if both measures are equals
@@ -4183,20 +4322,15 @@ declare module BABYLON.GUI {
          * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
          */
         useInvalidateRectOptimization: boolean;
-        private _clearRectangle;
         private _invalidatedRectangle;
         /**
          * Invalidates a rectangle area on the gui texture
-         * @param clearMinX left most position of the rectangle to clear in the texture
-         * @param clearMinY top most position of the rectangle to clear in the texture
-         * @param clearMaxX right most position of the rectangle to clear in the texture
-         * @param clearMaxY bottom most position of the rectangle to clear in the texture
-         * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-         * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+         * @param invalidMinX left most position of the rectangle to invalidate in the texture
+         * @param invalidMinY top most position of the rectangle to invalidate in the texture
+         * @param invalidMaxX right most position of the rectangle to invalidate in the texture
+         * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
          */
-        invalidateRect(clearMinX: number, clearMinY: number, clearMaxX: number, clearMaxY: number, minX: number, minY: number, maxX: number, maxY: number): void;
+        invalidateRect(invalidMinX: number, invalidMinY: number, invalidMaxX: number, invalidMaxY: number): void;
         /**
         * Marks the texture as dirty forcing a complete update
         */
@@ -4303,118 +4437,6 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
-     * Class used to transport BABYLON.Vector2 information for pointer events
-     */
-    export class Vector2WithInfo extends BABYLON.Vector2 {
-        /** defines the current mouse button index */
-        buttonIndex: number;
-        /**
-         * Creates a new Vector2WithInfo
-         * @param source defines the vector2 data to transport
-         * @param buttonIndex defines the current mouse button index
-         */
-        constructor(source: BABYLON.Vector2, 
-        /** defines the current mouse button index */
-        buttonIndex?: number);
-    }
-    /** Class used to provide 2D matrix features */
-    export class Matrix2D {
-        /** Gets the internal array of 6 floats used to store matrix data */
-        m: Float32Array;
-        /**
-         * Creates a new matrix
-         * @param m00 defines value for (0, 0)
-         * @param m01 defines value for (0, 1)
-         * @param m10 defines value for (1, 0)
-         * @param m11 defines value for (1, 1)
-         * @param m20 defines value for (2, 0)
-         * @param m21 defines value for (2, 1)
-         */
-        constructor(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number);
-        /**
-         * Fills the matrix from direct values
-         * @param m00 defines value for (0, 0)
-         * @param m01 defines value for (0, 1)
-         * @param m10 defines value for (1, 0)
-         * @param m11 defines value for (1, 1)
-         * @param m20 defines value for (2, 0)
-         * @param m21 defines value for (2, 1)
-         * @returns the current modified matrix
-         */
-        fromValues(m00: number, m01: number, m10: number, m11: number, m20: number, m21: number): Matrix2D;
-        /**
-         * Gets matrix determinant
-         * @returns the determinant
-         */
-        determinant(): number;
-        /**
-         * Inverses the matrix and stores it in a target matrix
-         * @param result defines the target matrix
-         * @returns the current matrix
-         */
-        invertToRef(result: Matrix2D): Matrix2D;
-        /**
-         * Multiplies the current matrix with another one
-         * @param other defines the second operand
-         * @param result defines the target matrix
-         * @returns the current matrix
-         */
-        multiplyToRef(other: Matrix2D, result: Matrix2D): Matrix2D;
-        /**
-         * Applies the current matrix to a set of 2 floats and stores the result in a vector2
-         * @param x defines the x coordinate to transform
-         * @param y defines the x coordinate to transform
-         * @param result defines the target vector2
-         * @returns the current matrix
-         */
-        transformCoordinates(x: number, y: number, result: BABYLON.Vector2): Matrix2D;
-        /**
-         * Creates an identity matrix
-         * @returns a new matrix
-         */
-        static Identity(): Matrix2D;
-        /**
-         * Creates a translation matrix and stores it in a target matrix
-         * @param x defines the x coordinate of the translation
-         * @param y defines the y coordinate of the translation
-         * @param result defines the target matrix
-         */
-        static TranslationToRef(x: number, y: number, result: Matrix2D): void;
-        /**
-         * Creates a scaling matrix and stores it in a target matrix
-         * @param x defines the x coordinate of the scaling
-         * @param y defines the y coordinate of the scaling
-         * @param result defines the target matrix
-         */
-        static ScalingToRef(x: number, y: number, result: Matrix2D): void;
-        /**
-         * Creates a rotation matrix and stores it in a target matrix
-         * @param angle defines the rotation angle
-         * @param result defines the target matrix
-         */
-        static RotationToRef(angle: number, result: Matrix2D): void;
-        private static _TempPreTranslationMatrix;
-        private static _TempPostTranslationMatrix;
-        private static _TempRotationMatrix;
-        private static _TempScalingMatrix;
-        private static _TempCompose0;
-        private static _TempCompose1;
-        private static _TempCompose2;
-        /**
-         * Composes a matrix from translation, rotation, scaling and parent matrix and stores it in a target matrix
-         * @param tx defines the x coordinate of the translation
-         * @param ty defines the y coordinate of the translation
-         * @param angle defines the rotation angle
-         * @param scaleX defines the x coordinate of the scaling
-         * @param scaleY defines the y coordinate of the scaling
-         * @param parentMatrix defines the parent matrix to multiply by (can be null)
-         * @param result defines the target matrix
-         */
-        static ComposeToRef(tx: number, ty: number, angle: number, scaleX: number, scaleY: number, parentMatrix: BABYLON.Nullable<Matrix2D>, result: Matrix2D): void;
-    }
-}
-declare module BABYLON.GUI {
-    /**
      * Root class used for all 2D controls
      * @see http://doc.babylonjs.com/how_to/gui#controls
      */
@@ -4463,7 +4485,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         _tempParentMeasure: Measure;
         /** @hidden */
-        _tempCurrentMeasure: Measure;
+        _prevCurrentMeasureTransformedIntoGlobalSpace: Measure;
         /** @hidden */
         protected _cachedParentMeasure: Measure;
         private _paddingLeft;
@@ -4479,7 +4501,8 @@ declare module BABYLON.GUI {
         private _rotation;
         private _transformCenterX;
         private _transformCenterY;
-        private _transformMatrix;
+        /** @hidden */
+        _transformMatrix: Matrix2D;
         /** @hidden */
         protected _invertTransformMatrix: Matrix2D;
         /** @hidden */
@@ -4519,7 +4542,10 @@ declare module BABYLON.GUI {
         isPointerBlocker: boolean;
         /** Gets or sets a boolean indicating if the control can be focusable */
         isFocusInvisible: boolean;
-        /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
+        /**
+         * Gets or sets a boolean indicating if the children are clipped to the current control bounds.
+         * Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children
+         */
         clipChildren: boolean;
         /**
          * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
@@ -4848,7 +4874,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         _intersectsRect(rect: Measure): boolean;
         /** @hidden */
-        protected invalidateRect(left: number, top: number, right: number, bottom: number): void;
+        protected invalidateRect(): void;
         /** @hidden */
         _markAsDirty(force?: boolean): void;
         /** @hidden */
@@ -4879,6 +4905,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         protected _clipForChildren(context: CanvasRenderingContext2D): void;
         private static _ClipMeasure;
+        private _tmpMeasureA;
         private _clip;
         /** @hidden */
         _render(context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;

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": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.0.0-alpha.17"
+        "babylonjs": "4.0.0-alpha.19"
     },
     "engines": {
         "node": "*"

dist/preview release/gui/readme-es6.md

@@ -0,0 +1,31 @@
+Babylon.js GUI module
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/overviews/gui
+
+# Installation instructions
+
+To install using npm :
+
+```
+npm install --save @babylonjs/core @babylonjs/gui
+```
+
+# How to use
+
+Afterwards it can be imported to the your project using:
+
+```
+import { AdvancedDynamicTexture } from '@babylonjs/gui/2D';
+```
+
+And used as usual:
+
+```
+// Some awesome code
+// Creates the post process
+let postProcess = new AdvancedDynamicTexture("adt", 128, 128, scene);
+// Some more awesome code
+```
+
+For more information you can have a look at our [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support).

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -31,11 +31,11 @@
     "dependencies": {
         "@types/react": "~16.7.3",
         "@types/react-dom": "~16.0.9",
-        "babylonjs": "4.0.0-alpha.17",
-        "babylonjs-gui": "4.0.0-alpha.17",
-        "babylonjs-loaders": "4.0.0-alpha.17",
-        "babylonjs-serializers": "4.0.0-alpha.17",
-        "babylonjs-gltf2interface": "4.0.0-alpha.17"
+        "babylonjs": "4.0.0-alpha.19",
+        "babylonjs-gui": "4.0.0-alpha.19",
+        "babylonjs-loaders": "4.0.0-alpha.19",
+        "babylonjs-serializers": "4.0.0-alpha.19",
+        "babylonjs-gltf2interface": "4.0.0-alpha.19"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/readme-es6.md

@@ -0,0 +1,27 @@
+Babylon.js inspector module
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/how_to/debug_layer.
+
+# Installation instructions
+
+To install using npm :
+
+```
+npm install --save-dev @babylonjs/core @babylonjs/inspector
+```
+
+# How to use
+
+Afterwards it can be imported to the your project using:
+
+```
+import "@babylonjs/core/Debug/debugLayer";
+import "@babylonjs/inspector";
+```
+
+The first line will ensure you can access the property debugLayer of the scene while the second will ensure the inspector can be use within your scene.
+
+This is a great example where code splitting or conditional loading could be use to ensure you are not delivering the inspector if not part of your final app.
+
+For more information you can have a look at our [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support).

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": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "4.0.0-alpha.17",
-        "babylonjs": "4.0.0-alpha.17"
+        "babylonjs-gltf2interface": "4.0.0-alpha.19",
+        "babylonjs": "4.0.0-alpha.19"
     },
     "engines": {
         "node": "*"

dist/preview release/loaders/readme-es6.md

@@ -0,0 +1,24 @@
+Babylon.js Loaders module
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "loaders".
+
+# Installation instructions
+
+To install using npm :
+
+```
+npm install --save-dev @babylonjs/core @babylonjs/loaders
+```
+
+# How to use
+
+Afterwards it can be imported to the your project using:
+
+```
+import "@babylonjs/loaders/glTF";
+```
+
+This will extend Babylon's loader plugins to allow the load of gltf and glb files.
+
+For more information you can have a look at our [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support).

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": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.0.0-alpha.17"
+        "babylonjs": "4.0.0-alpha.19"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/readme-es6.md

@@ -0,0 +1,30 @@
+Babylon.js Materials Library
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "materials library".
+
+# Installation instructions
+
+To install using npm :
+
+```
+npm install --save @babylonjs/core @babylonjs/materials
+```
+
+# How to use
+
+Afterwards it can be imported to the your project using:
+
+```
+import { GridMaterial } from '@babylonjs/materials/Grid';
+```
+
+And used as usual:
+
+```
+// Some awesome code
+let gridMaterial = new GridMaterial("gridMaterial", scene);
+// Some more awesome code
+```
+
+For more information you can have a look at our [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support).

dist/preview release/package.json

@@ -9,21 +9,21 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
     },
     "main": "babylon.js",
     "files": [
-        "babylon.d.ts",
+        "babylon.module.d.ts",
         "babylon.js",
         "babylon.max.js",
         "babylon.max.js.map",
         "Oimo.js",
         "readme.md"
     ],
-    "typings": "babylon.d.ts",
+    "typings": "babylon.module.d.ts",
     "keywords": [
         "3D",
         "javascript",

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": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.0.0-alpha.17"
+        "babylonjs": "4.0.0-alpha.19"
     },
     "engines": {
         "node": "*"

dist/preview release/postProcessesLibrary/readme-es6.md

@@ -0,0 +1,31 @@
+Babylon.js Post Processes Library
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "post process library".
+
+# Installation instructions
+
+To install using npm :
+
+```
+npm install --save @babylonjs/core @babylonjs/post-processes
+```
+
+# How to use
+
+Afterwards it can be imported to the your project using:
+
+```
+import { AsciiArtPostProcess } from '@babylonjs/post-processes/asciiArt';
+```
+
+And used as usual:
+
+```
+// Some awesome code
+// Creates the post process
+let postProcess = new AsciiArtPostProcess("AsciiArt", camera);
+// Some more awesome code
+```
+
+For more information you can have a look at our [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support).

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": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.0.0-alpha.17"
+        "babylonjs": "4.0.0-alpha.19"
     },
     "engines": {
         "node": "*"

dist/preview release/proceduralTexturesLibrary/readme-es6.md

@@ -0,0 +1,34 @@
+Babylon.js Procedural Textures Library
+=====================
+
+For usage documentation please visit http://doc.babylonjs.com/extensions and choose "procedural textures library".
+
+# Installation instructions
+
+To install using npm :
+
+```
+npm install --save @babylonjs/core @babylonjs/procedural-textures
+```
+
+# How to use
+
+Afterwards it can be imported to the your project using:
+
+```
+import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
+import { FireProceduralTexture } from '@babylonjs/procedural-textures/fireProceduralTexture';
+```
+
+And used as usual:
+
+```
+// Some awesome code
+var fireMaterial = new StandardMaterial("fontainSculptur2", scene);
+var fireTexture = new FireProceduralTexture("fire", 256, scene);
+fireMaterial.diffuseTexture = fireTexture;
+fireMaterial.opacityTexture = fireTexture;
+// Some more awesome code
+```
+
+For more information you can have a look at our [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support).

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": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.0.0-alpha.17",
-        "babylonjs-gltf2interface": "4.0.0-alpha.17"
+        "babylonjs": "4.0.0-alpha.19",
+        "babylonjs-gltf2interface": "4.0.0-alpha.19"
     },
     "engines": {
         "node": "*"

dist/preview release/serializers/readme-es6.md

@@ -0,0 +1,29 @@
+Babylon.js Serializers
+=====================
+
+# Installation instructions
+
+To install using npm :
+
+```
+npm install --save @babylonjs/core @babylonjs/serializers
+```
+
+# How to use
+
+Afterwards it can be imported to the your project using:
+
+```
+import { GLTF2Export } from '@babylonjs/serializers/glTF';
+```
+
+And used as usual:
+
+```
+GLTF2Export.GLTFAsync(scene, "fileName").then((gltf) => {
+    gltf.downloadFiles();
+});
+```
+
+For more information you can have a look at our [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support) and the [gltf exporter documentation](https://doc.babylonjs.com/extensions/gltfexporter).
+

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

@@ -1,4 +1,8 @@
-/// <reference path="./babylon.d.ts"/>
+/// <reference path="./babylon.module.d.ts"/>
+/// <reference path="./babylon.glTF2Interface.d.ts"/>
+/// <reference path="./babylonjs.loaders.d.ts"/>
+declare module "babylonjs-loaders"{ export=BABYLON;}
+/// <reference path="./babylon.module.d.ts"/>
 /// <reference path="./babylon.glTF2Interface.d.ts"/>
 /// <reference path="./babylonjs.loaders.d.ts"/>
 declare module "babylonjs-loaders"{ export=BABYLON;}

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

@@ -1,4 +1,9 @@
-/// <reference path="./babylon.d.ts"/>
+/// <reference path="./babylon.module.d.ts"/>
+/// <reference path="./babylon.glTF2Interface.d.ts"/>
+/// <reference path="./babylonjs.loaders.d.ts"/>
+declare module "babylonjs-loaders"{ export=BABYLON;}
+
+/// <reference path="./babylon.module.d.ts"/>
 /// <reference path="./babylon.glTF2Interface.d.ts"/>
 /// <reference path="./babylonjs.loaders.d.ts"/>
 declare module "babylonjs-loaders"{ export=BABYLON;}

dist/preview release/what's new.md

@@ -23,7 +23,7 @@
   - Added new [ScrollViewer](https://doc.babylonjs.com/how_to/scrollviewer) with mouse wheel scrolling for larger containers to be viewed using Sliders ([JohnK](https://github.com/BabylonJSGuide/) / [Deltakosh](https://github.com/deltakosh))
   - Moved to a measure / draw mechanism ([Deltakosh](https://github.com/deltakosh))
   - Added support for [nine patch stretch](https://www.babylonjs-playground.com/#G5H9IN#2) mode for images. ([Deltakosh](https://github.com/deltakosh))
-  - InvalidateRect added to AdvancedDynamicTexture to improve perf for highly populated GUIs ([TrevorDev](https://github.com/TrevorDev))
+  - InvalidateRect added to AdvancedDynamicTexture to improve perf for heavily populated GUIs ([TrevorDev](https://github.com/TrevorDev))
 
 ## Updates
 
@@ -89,6 +89,8 @@
 - Added per mesh culling strategy ([jerome](https://github.com/jbousquie))
 - Added InputsManager and keyboard bindings for FollowCamera. ([mrdunk](https://github.com))
 - Fix typo in FollowCamera InputsManager when limiting rotation to 360 degrees. ([mrdunk](https://github.com))
+- Added MouseWheel bindings for FollowCamera. ([mrdunk](https://github.com))
+- Added maximum and minimum limits for FollowCamera parameters. ([mrdunk](https://github.com))
 - Added per solid particle culling possibility : `solidParticle.isInFrustum()`  ([jerome](https://github.com/jbousquie))
 - Added transparency support to `GlowLayer` ([Sebavan](https://github.com/Sebavan))
 - Added option `forceDisposeChildren` to multiMaterial.dispose ([danjpar](https://github.com/danjpar))
@@ -113,6 +115,7 @@
 ### Materials Library
 - Added the `cameraOffset` vector property in the `SkyMaterial` to get an offset according to the horizon ([julien-moreau](https://github.com/julien-moreau))
 - Fixed `GradientMaterial` to consider disableLighting working as emissive ([julien-moreau](https://github.com/julien-moreau))
+- Fixed fresnel term computation in `WaterMaterial` ([julien-moreau](https://github.com/julien-moreau))
 
 ## Bug fixes
 - Fixed TransformNode.setDirection (orientation was wrong) ([Deltakosh](https://github.com/deltakosh))
@@ -124,7 +127,7 @@
 - Gizmo scaling not consistent when camera is parented ([TrevorDev](https://github.com/TrevorDev))
 - Context loss causing unexpected results with dynamic textures, geometries with the same name and reflectionTextures ([TrevorDev](https://github.com/TrevorDev))
 - CreateScreenshotUsingRenderTarget stretches mirror textures when setting both width and height ([TrevorDev](https://github.com/TrevorDev))
-- VR helper only updating vr cameras position when entering vr, rotation was missing ([TrevorDev](https://github.com/TrevorDev))
+- VR helper only updating vr cameras position when entering vr, rotation was missing, laser distance stopped working ([TrevorDev](https://github.com/TrevorDev))
 - Fix VR controllers after gltfLoader transformNode change ([TrevorDev](https://github.com/TrevorDev))
 - Bounding Box fixedDragMeshScreenSize stopped working and allow rotating through bounding box ([TrevorDev](https://github.com/TrevorDev))
 - VR helper would rotate non vr camera while in VR ([TrevorDev](https://github.com/TrevorDev))
@@ -145,6 +148,9 @@
 - Fix case sensitive paths ([mrdunk](https://github.com))
 - Fix more case sensitive paths ([mrdunk](https://github.com))
 - Attaching a BoundingBoxGizmo on a child should not remove its parent ([TrevorDev](https://github.com/TrevorDev)))
+- AmmoJS fix include issue caused after modules update and use world contact point to be consistent with oimo and cannon ([TrevorDev](https://github.com/TrevorDev)))
+- Oimo disable motor maxForce, cannonJS support no impostor, cannonJS cylinder axis, ammoJS wake up impostor when apply force/impulse ([TrevorDev](https://github.com/TrevorDev)))
+- Utility layer should render on last active camera ([TrevorDev](https://github.com/TrevorDev))
 
 ### Core Engine
 - Fixed a bug with `mesh.alwaysSelectAsActiveMesh` preventing layerMask to be taken in account ([Deltakosh](https://github.com/deltakosh))

gui/src/2D/advancedDynamicTexture.ts

@@ -346,39 +346,27 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._useInvalidateRectOptimization = value;
     }
 
-    private _clearRectangle: Nullable<Measure> = null;
+    // Invalidated rectangle which is the combination of all invalidated controls after they have been rotated into absolute position
     private _invalidatedRectangle: Nullable<Measure> = null;
     /**
      * Invalidates a rectangle area on the gui texture
-     * @param clearMinX left most position of the rectangle to clear in the texture
-     * @param clearMinY top most position of the rectangle to clear in the texture
-     * @param clearMaxX right most position of the rectangle to clear in the texture
-     * @param clearMaxY bottom most position of the rectangle to clear in the texture
-     * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-     * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-     * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
-     * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+     * @param invalidMinX left most position of the rectangle to invalidate in the texture
+     * @param invalidMinY top most position of the rectangle to invalidate in the texture
+     * @param invalidMaxX right most position of the rectangle to invalidate in the texture
+     * @param invalidMaxY bottom most position of the rectangle to invalidate in the texture
      */
-    public invalidateRect(clearMinX: number, clearMinY: number, clearMaxX: number, clearMaxY: number, minX: number, minY: number, maxX: number, maxY: number) {
+    public invalidateRect(invalidMinX: number, invalidMinY: number, invalidMaxX: number, invalidMaxY: number) {
         if (!this._useInvalidateRectOptimization) {
             return;
         }
-        if (!this._clearRectangle || !this._invalidatedRectangle) {
-            this._clearRectangle = new Measure(clearMinX, clearMinY, clearMaxX - clearMinX + 1, clearMaxY - clearMinY + 1);
-            this._invalidatedRectangle = new Measure(minX, minY, maxX - minX + 1, maxY - minY + 1);
+        if (!this._invalidatedRectangle) {
+            this._invalidatedRectangle = new Measure(invalidMinX, invalidMinY, invalidMaxX - invalidMinX + 1, invalidMaxY - invalidMinY + 1);
         } else {
             // Compute intersection
-            var maxX = Math.ceil(Math.max(this._clearRectangle.left + this._clearRectangle.width - 1, clearMaxX));
-            var maxY = Math.ceil(Math.max(this._clearRectangle.top + this._clearRectangle.height - 1, clearMaxY));
-            this._clearRectangle.left = Math.floor(Math.min(this._clearRectangle.left, clearMinX));
-            this._clearRectangle.top = Math.floor(Math.min(this._clearRectangle.top, clearMinY));
-            this._clearRectangle.width = maxX - this._clearRectangle.left + 1;
-            this._clearRectangle.height = maxY - this._clearRectangle.top + 1;
-
-            maxX = Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, maxX);
-            maxY = Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, maxY);
-            this._invalidatedRectangle.left = Math.min(this._invalidatedRectangle.left, minX);
-            this._invalidatedRectangle.top = Math.min(this._invalidatedRectangle.top, minY);
+            var maxX = Math.ceil(Math.max(this._invalidatedRectangle.left + this._invalidatedRectangle.width - 1, invalidMaxX));
+            var maxY = Math.ceil(Math.max(this._invalidatedRectangle.top + this._invalidatedRectangle.height - 1, invalidMaxY));
+            this._invalidatedRectangle.left = Math.floor(Math.min(this._invalidatedRectangle.left, invalidMinX));
+            this._invalidatedRectangle.top = Math.floor(Math.min(this._invalidatedRectangle.top, invalidMinY));
             this._invalidatedRectangle.width = maxX - this._invalidatedRectangle.left + 1;
             this._invalidatedRectangle.height = maxY - this._invalidatedRectangle.top + 1;
         }
@@ -480,7 +468,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
                 this._rootContainer._markAllAsDirty();
             }
         }
-        this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1, 0, 0, textureSize.width - 1, textureSize.height - 1);
+        this.invalidateRect(0, 0, textureSize.width - 1, textureSize.height - 1);
     }
     /** @hidden */
     public _getGlobalViewport(scene: Scene): Viewport {
@@ -563,8 +551,8 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
 
         // Clear
-        if (this._clearRectangle) {
-            this._clearMeasure.copyFrom(this._clearRectangle);
+        if (this._invalidatedRectangle) {
+            this._clearMeasure.copyFrom(this._invalidatedRectangle);
         } else {
             this._clearMeasure.copyFromFloats(0, 0, renderWidth, renderHeight);
         }
@@ -580,7 +568,6 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this.onBeginRenderObservable.notifyObservers(this);
         this._rootContainer._render(context, this._invalidatedRectangle);
         this.onEndRenderObservable.notifyObservers(this);
-        this._clearRectangle = null;
         this._invalidatedRectangle = null;
     }
     /** @hidden */

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

@@ -203,14 +203,18 @@ export class Container extends Control {
     public _reOrderControl(control: Control): void {
         this.removeControl(control);
 
+        let wasAdded = false;
         for (var index = 0; index < this._children.length; index++) {
             if (this._children[index].zIndex > control.zIndex) {
                 this._children.splice(index, 0, control);
-                return;
+                wasAdded = true;
+                break;
             }
         }
 
-        this._children.push(control);
+        if (!wasAdded) {
+            this._children.push(control);
+        }
 
         control.parent = this;
 
@@ -285,12 +289,12 @@ export class Container extends Control {
 
     /** @hidden */
     public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean {
-        if (!this.isVisible || this.notRenderable) {
+        if (!this.isDirty && (!this.isVisible || this.notRenderable)) {
             return false;
         }
 
         if (this._isDirty) {
-            this._tempCurrentMeasure.copyFrom(this._currentMeasure);
+            this._currentMeasure.transformToRef(this._transformMatrix, this._prevCurrentMeasureTransformedIntoGlobalSpace);
         }
 
         let rebuildCount = 0;
@@ -348,12 +352,7 @@ export class Container extends Control {
         context.restore();
 
         if (this._isDirty) {
-            this.invalidateRect(
-                Math.min(this._currentMeasure.left, this._tempCurrentMeasure.left),
-                Math.min(this._currentMeasure.top, this._tempCurrentMeasure.top),
-                Math.max(this._currentMeasure.left + this._currentMeasure.width, this._tempCurrentMeasure.left + this._tempCurrentMeasure.width) - 1,
-                Math.max(this._currentMeasure.top + this._currentMeasure.height, this._tempCurrentMeasure.top + this._tempCurrentMeasure.height) - 1
-            );
+            this.invalidateRect();
 
             this._isDirty = false;
         }
@@ -378,7 +377,7 @@ export class Container extends Control {
             // Only redraw parts of the screen that are invalidated
             if (invalidatedRectangle) {
                 if (!child._intersectsRect(invalidatedRectangle)) {
-                    // continue;
+                    continue;
                 }
             }
             child._render(context, invalidatedRectangle);

gui/src/2D/measure.ts

@@ -1,3 +1,5 @@
+import { Matrix2D } from "./math2D";
+import { Vector2, Polygon } from "babylonjs";
 
 /**
  * Class used to store 2D control sizes
@@ -48,6 +50,45 @@ export class Measure {
     }
 
     /**
+     * Computes the axis aligned bounding box measure for two given measures
+     * @param a Input measure
+     * @param b Input measure
+     * @param result the resulting bounding measure
+     */
+    public static CombineToRef(a: Measure, b: Measure, result: Measure) {
+        var left = Math.min(a.left, b.left);
+        var top = Math.min(a.top, b.top);
+        var right = Math.max(a.left + a.width, b.left + b.width);
+        var bottom = Math.max(a.top + a.height, b.top + b.height);
+        result.left = left;
+        result.top = top;
+        result.width = right - left;
+        result.height = bottom - top;
+    }
+
+    /**
+     * Computes the axis aligned bounding box of the measure after it is modified by a given transform
+     * @param transform the matrix to transform the measure before computing the AABB
+     * @param result the resulting AABB
+     */
+    public transformToRef(transform: Matrix2D, result: Measure) {
+        var rectanglePoints = Polygon.Rectangle(this.left, this.top, this.left + this.width, this.top + this.height);
+        var min = new Vector2(Number.MAX_VALUE, Number.MAX_VALUE);
+        var max = new Vector2(0, 0);
+        for (var i = 0; i < 4; i++) {
+            transform.transformCoordinates(rectanglePoints[i].x, rectanglePoints[i].y, rectanglePoints[i]);
+            min.x = Math.floor(Math.min(min.x, rectanglePoints[i].x));
+            min.y = Math.floor(Math.min(min.y, rectanglePoints[i].y));
+            max.x = Math.ceil(Math.max(max.x, rectanglePoints[i].x));
+            max.y = Math.ceil(Math.max(max.y, rectanglePoints[i].y));
+        }
+        result.left = min.x;
+        result.top = min.y;
+        result.width = max.x - min.x;
+        result.height = max.y - min.y;
+    }
+
+    /**
      * Check equality between this measure and another one
      * @param other defines the other measures
      * @returns true if both measures are equals

materialsLibrary/src/water/water.fragment.fx

@@ -123,8 +123,6 @@ void main(void) {
 #ifdef FRESNELSEPARATE
     #ifdef REFLECTION
         // Water
-        vec3 eyeVector = normalize(vEyePosition - vPosition);
-
         vec2 projectedRefractionTexCoords = clamp(vRefractionMapTexCoord.xy / vRefractionMapTexCoord.z + perturbation*0.5, 0.0, 1.0);
         vec4 refractiveColor = texture2D(refractionSampler, projectedRefractionTexCoords);
 
@@ -137,7 +135,7 @@ void main(void) {
 
         vec3 upVector = vec3(0.0, 1.0, 0.0);
 
-        float fresnelTerm = clamp(abs(pow(dot(eyeVector, upVector),3.0)),0.05,0.65);
+        float fresnelTerm = clamp(abs(pow(dot(viewDirectionW, upVector),3.0)),0.05,0.65);
         float IfresnelTerm = 1.0 - fresnelTerm;
 
         refractiveColor = colorBlendFactor*waterColor + (1.0-colorBlendFactor)*refractiveColor;
@@ -178,8 +176,6 @@ void main(void) {
 #else // !FRESNELSEPARATE
     #ifdef REFLECTION
         // Water
-        vec3 eyeVector = normalize(vEyePosition - vPosition);
-
         vec2 projectedRefractionTexCoords = clamp(vRefractionMapTexCoord.xy / vRefractionMapTexCoord.z + perturbation, 0.0, 1.0);
         vec4 refractiveColor = texture2D(refractionSampler, projectedRefractionTexCoords);
 
@@ -188,7 +184,7 @@ void main(void) {
 
         vec3 upVector = vec3(0.0, 1.0, 0.0);
 
-        float fresnelTerm = max(dot(eyeVector, upVector), 0.0);
+        float fresnelTerm = max(dot(viewDirectionW, upVector), 0.0);
 
         vec4 combinedColor = refractiveColor * fresnelTerm + reflectiveColor * (1.0 - fresnelTerm);
 

package.json

@@ -9,7 +9,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "4.0.0-alpha.17",
+    "version": "4.0.0-alpha.19",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -99,10 +99,10 @@
         "tslib": "^1.9.3",
         "tslint": "^5.11.0",
         "typedoc": "^0.12.0",
-        "typescript": "~3.0.1",
+        "typescript": "^3.2.2",
         "webpack": "^4.25.1",
         "webpack-cli": "^3.1.2",
         "webpack-dev-server": "^3.1.14",
         "webpack-stream": "5.0.0"
     }
-}
+}

readme-es6.md

@@ -0,0 +1,122 @@
+# Babylon.js
+
+Getting started? Play directly with the Babylon.js API using our [playground](https://playground.babylonjs.com/). It also contains a lot of samples to learn how to use it.
+
+[![npm version](https://badge.fury.io/js/babylonjs.svg)](https://badge.fury.io/js/babylonjs)
+[![Build Status](https://travis-ci.com/BabylonJS/Babylon.js.svg?branch=master)](https://travis-ci.com/BabylonJS/Babylon.js)
+[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/BabylonJS/Babylon.js.svg)](http://isitmaintained.com/project/BabylonJS/Babylon.js "Average time to resolve an issue")
+[![Percentage of issues still open](https://isitmaintained.com/badge/open/babylonJS/babylon.js.svg)](https://isitmaintained.com/project/babylonJS/babylon.js "Percentage of issues still open")
+[![Build Size](https://img.badgesize.io/BabylonJS/Babylon.js/master/dist/preview%20release/babylon.js.svg?compression=gzip)](https://img.badgesize.io/BabylonJS/Babylon.js/master/dist/preview%20release/babylon.js.svg?compression=gzip)
+[![Twitter](https://img.shields.io/twitter/follow/babylonjs.svg?style=social&label=Follow)](https://twitter.com/intent/follow?screen_name=babylonjs)
+
+**Any questions?** Here is our official [forum](https://forum.babylonjs.com/).
+
+## CDN
+
+To look into our CDN bundled distribution, you can refer to the package [babylonjs](https://www.npmjs.com/package/babylonjs)
+
+## npm
+
+BabylonJS and its modules are published on npm as esNext modules with full typing support. To install, use:
+
+```text
+npm install @babylonjs/core --save
+```
+
+This will allow you to import BabylonJS entirely using:
+
+```javascript
+import * as BABYLON from '@babylonjs/core/Legacy/legacy';
+```
+
+or individual classes to benefit from enhanced tree shaking using :
+
+```javascript
+import { Scene } from '@babylonjs/core/scene';
+import { Engine } from '@babylonjs/core/Engines/engine';
+```
+
+To add a module, install the respective package. A list of extra packages and their installation instructions can be found on the [babylonjs user on npm](https://www.npmjs.com/~babylonjs) scoped on @babylonjs.
+
+## Usage
+
+See [our ES6 dedicated documentation](https://doc.babylonjs.com/features/es6_support):
+
+```javascript
+import { Engine } from "@babylonjs/core/Engines/engine";
+import { Scene } from "@babylonjs/core/scene";
+import { Vector3 } from "@babylonjs/core/Maths/math";
+import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
+import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
+import { Mesh } from "@babylonjs/core/Meshes/mesh";
+
+// Side-effects only imports allowing the standard material to be used as default.
+import "@babylonjs/core/Materials/standardMaterial";
+// Side-effects only imports allowing Mesh to create default shapes (to enhance tree shaking, the construction methods on mesh are not available if the meshbuilder has not been imported).
+import "@babylonjs/core/Meshes/meshBuilder";
+
+const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
+const engine = new Engine(canvas);
+var scene = new Scene(engine);
+
+// This creates and positions a free camera (non-mesh)
+var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
+
+// This targets the camera to scene origin
+camera.setTarget(Vector3.Zero());
+
+// This attaches the camera to the canvas
+camera.attachControl(canvas, true);
+
+// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
+var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
+
+// Default intensity is 1. Let's dim the light a small amount
+light.intensity = 0.7;
+
+// Our built-in 'sphere' shape. Params: name, subdivs, size, scene
+var sphere = Mesh.CreateSphere("sphere1", 16, 2, scene);
+
+// Move the sphere upward 1/2 its height
+sphere.position.y = 2;
+
+// Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene
+Mesh.CreateGround("ground1", 6, 6, 2, scene);
+
+engine.runRenderLoop(() => {
+    scene.render();
+});
+```
+
+## Preview release
+
+Preview version of **4.0** can be found [here](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release).
+If you want to contribute, please read our [contribution guidelines](https://github.com/BabylonJS/Babylon.js/blob/master/contributing.md) first.
+
+## Documentation
+
+- [Documentation](https://doc.babylonjs.com)
+- [Examples](https://doc.babylonjs.com/examples)
+
+## Contributing
+Please see the [Contributing Guidelines](./contributing.md)
+
+## Useful links
+
+- Official web site: [www.babylonjs.com](https://www.babylonjs.com/)
+- Online [playground](https://playground.babylonjs.com/) to learn by experimentating
+- Online [sandbox](https://www.babylonjs.com/sandbox) where you can test your .babylon and glTF scenes with a simple drag'n'drop
+- Online [shader creation tool](https://www.babylonjs.com/cyos/) where you can learn how to create GLSL shaders
+- 3DS Max [exporter](https://github.com/BabylonJS/Exporters/tree/master/3ds%20Max) can be used to generate a .babylon file from 3DS Max
+- Maya [exporter](https://github.com/BabylonJS/Exporters/tree/master/Maya) can be used to generate a .babylon file from 3DS Max
+- Blender [exporter](https://github.com/BabylonJS/Exporters/tree/master/Blender) can be used to generate a .babylon file from Blender 3d
+- Unity 5[ (deprecated) exporter](https://github.com/BabylonJS/Exporters/tree/master/Unity) can be used to export your geometries from Unity 5 scene editor(animations are supported)
+- [glTF Tools](https://github.com/KhronosGroup/glTF#gltf-tools) by KhronosGroup
+
+## Features
+
+To get a complete list of supported features, please visit our [website](https://www.babylonjs.com/#specifications).
+
+## Build
+
+Babylon.js is automatically built using [Gulp](https://gulpjs.com/). For further instructions see the readme at [/Tools/Gulp](https://github.com/BabylonJS/Babylon.js/tree/master/Tools/Gulp).

src/Animations/animation.ts

@@ -481,7 +481,7 @@ export class Animation {
      * @param framePerSecond The frames per second of the animation
      * @param dataType The data type of the animation
      * @param loopMode The loop mode of the animation
-     * @param enableBlendings Specifies if blending should be enabled
+     * @param enableBlending Specifies if blending should be enabled
      */
     constructor(
         /**Name of the animation */

src/Audio/sound.ts

@@ -122,6 +122,7 @@ export class Sound {
     * Create a sound and attach it to a scene
     * @param name Name of your sound
     * @param urlOrArrayBuffer Url to the sound to load async or ArrayBuffer, it also works with MediaStreams
+    * @param scene defines the scene the sound belongs to
     * @param readyToPlayCallback Provide a callback function if you'd like to load your code once the sound is ready to be played
     * @param options Objects to provide with the current available options: autoplay, loop, volume, spatialSound, maxDistance, rolloffFactor, refDistance, distanceModel, panningModel, streaming
     */

src/Bones/boneLookController.ts

@@ -142,7 +142,7 @@ export class BoneLookController {
      * @param mesh the mesh that the bone belongs to
      * @param bone the bone that will be looking to the target
      * @param target the target Vector3 to look at
-     * @param settings optional settings:
+     * @param options optional settings:
      * * maxYaw: the maximum angle the bone will yaw to
      * * minYaw: the minimum angle the bone will yaw to
      * * maxPitch: the maximum angle the bone will pitch to

src/Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput.ts

@@ -1,6 +1,27 @@
 import { Nullable } from "../../types";
 import { ArcRotateCamera } from "../../Cameras/arcRotateCamera";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
+import { ArcRotateCameraInputsManager } from "../../Cameras/arcRotateCameraInputsManager";
+
+// Module augmentation to abstract orientation inputs from camera.
+declare module "../../Cameras/arcRotateCameraInputsManager" {
+    export interface ArcRotateCameraInputsManager {
+        /**
+         * Add orientation input support to the input manager.
+         * @returns the current input manager
+         */
+        addVRDeviceOrientation(): ArcRotateCameraInputsManager;
+    }
+}
+
+/**
+ * Add orientation input support to the input manager.
+ * @returns the current input manager
+ */
+ArcRotateCameraInputsManager.prototype.addVRDeviceOrientation = function(): ArcRotateCameraInputsManager {
+    this.add(new ArcRotateCameraVRDeviceOrientationInput());
+    return this;
+};
 
 /**
  * Manage the device orientation inputs (gyroscope) to control an arc rotate camera.

src/Cameras/Inputs/followCameraMouseWheelInput.ts

@@ -0,0 +1,147 @@
+import { Nullable } from "../../types";
+import { serialize } from "../../Misc/decorators";
+import { EventState, Observer } from "../../Misc/observable";
+import { FollowCamera } from "../../Cameras/followCamera";
+import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
+import { PointerInfo, PointerEventTypes } from "../../Events/pointerEvents";
+
+/**
+ * Manage the mouse wheel inputs to control a follow camera.
+ * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs
+ */
+export class FollowCameraMouseWheelInput implements ICameraInput<FollowCamera> {
+    /**
+     * Defines the camera the input is attached to.
+     */
+    public camera: FollowCamera;
+
+    /**
+     * Moue wheel controls zoom. (Moue wheel modifies camera.radius value.)
+     */
+    @serialize()
+    public axisControlRadius: boolean = true;
+
+    /**
+     * Moue wheel controls height. (Moue wheel modifies camera.heightOffset value.)
+     */
+    @serialize()
+    public axisControlHeight: boolean = false;
+
+    /**
+     * Moue wheel controls angle. (Moue wheel modifies camera.rotationOffset value.)
+     */
+    @serialize()
+    public axisControlRotation: boolean = false;
+
+    /**
+     * Gets or Set the mouse wheel precision or how fast is the camera moves in
+     * relation to mouseWheel events.
+     */
+    @serialize()
+    public wheelPrecision = 3.0;
+
+    /**
+     * wheelDeltaPercentage will be used instead of wheelPrecision if different from 0.
+     * It defines the percentage of current camera.radius to use as delta when wheel is used.
+     */
+    @serialize()
+    public wheelDeltaPercentage = 0;
+
+    private _wheel: Nullable<(p: PointerInfo, s: EventState) => void>;
+    private _observer: Nullable<Observer<PointerInfo>>;
+
+    /**
+     * Attach the input controls to a specific dom element to get the input from.
+     * @param element Defines the element the controls should be listened from
+     * @param noPreventDefault Defines whether event caught by the controls should call preventdefault() (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+     */
+    public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
+        this._wheel = (p, s) => {
+            // sanity check - this should be a PointerWheel event.
+            if (p.type !== PointerEventTypes.POINTERWHEEL) { return; }
+            var event = <MouseWheelEvent>p.event;
+            var delta = 0;
+
+            // Chrome, Safari: event.deltaY
+            // IE: event.wheelDelta
+            // Firefox: event.detail (inverted)
+            var wheelDelta = Math.max(-1, Math.min(1,
+              (event.deltaY || (<any>event).wheelDelta || -event.detail)));
+            if (this.wheelDeltaPercentage) {
+                console.assert((<number>(<unknown>this.axisControlRadius) +
+                                <number>(<unknown>this.axisControlHeight) +
+                                <number>(<unknown>this.axisControlRotation)) <= 1,
+                               "wheelDeltaPercentage only usable when mouse wheel " +
+                               "controlls ONE axis. " +
+                               "Currently enabled: " +
+                               "axisControlRadius: " + this.axisControlRadius +
+                               ", axisControlHeightOffset: " + this.axisControlHeight +
+                               ", axisControlRotationOffset: " + this.axisControlRotation);
+
+                if (this.axisControlRadius) {
+                    delta =
+                        wheelDelta * 0.01 * this.wheelDeltaPercentage *
+                        this.camera.radius;
+                } else if (this.axisControlHeight) {
+                    delta =
+                        wheelDelta * 0.01 * this.wheelDeltaPercentage *
+                        this.camera.heightOffset;
+                } else if (this.axisControlRotation) {
+                    delta =
+                        wheelDelta * 0.01 * this.wheelDeltaPercentage *
+                        this.camera.rotationOffset;
+                }
+            } else {
+                delta = wheelDelta * this.wheelPrecision;
+            }
+
+            if (delta) {
+                if (this.axisControlRadius) {
+                    this.camera.radius += delta;
+                } else if (this.axisControlHeight) {
+                    this.camera.heightOffset += delta;
+                } else if (this.axisControlRotation) {
+                    this.camera.rotationOffset += delta;
+                }
+            }
+
+            if (event.preventDefault) {
+                if (!noPreventDefault) {
+                    event.preventDefault();
+                }
+            }
+        };
+
+        this._observer = this.camera.getScene().onPointerObservable.add(this._wheel, PointerEventTypes.POINTERWHEEL);
+    }
+
+    /**
+     * Detach the current controls from the specified dom element.
+     * @param element Defines the element to stop listening the inputs from
+     */
+    public detachControl(element: Nullable<HTMLElement>): void {
+        if (this._observer && element) {
+            this.camera.getScene().onPointerObservable.remove(this._observer);
+            this._observer = null;
+            this._wheel = null;
+        }
+    }
+
+    /**
+     * Gets the class name of the current intput.
+     * @returns the class name
+     */
+    public getClassName(): string {
+        return "ArcRotateCameraMouseWheelInput";
+    }
+
+    /**
+     * Get the friendly name associated with the input class.
+     * @returns the input friendly name
+     */
+    public getSimpleName(): string {
+        return "mousewheel";
+    }
+}
+
+(<any>CameraInputTypes)["FollowCameraMouseWheelInput"] = FollowCameraMouseWheelInput;

src/Cameras/Inputs/freeCameraDeviceOrientationInput.ts

@@ -3,6 +3,28 @@ import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManage
 import { FreeCamera } from "../../Cameras/freeCamera";
 import { Quaternion } from "../../Maths/math";
 import { Tools } from "../../Misc/tools";
+import { FreeCameraInputsManager } from "../../Cameras/freeCameraInputsManager";
+
+// Module augmentation to abstract orientation inputs from camera.
+declare module "../../Cameras/freeCameraInputsManager" {
+    export interface FreeCameraInputsManager {
+        /**
+         * Add orientation input support to the input manager.
+         * @returns the current input manager
+         */
+        addDeviceOrientation(): FreeCameraInputsManager;
+    }
+}
+
+/**
+ * Add orientation input support to the input manager.
+ * @returns the current input manager
+ */
+FreeCameraInputsManager.prototype.addDeviceOrientation = function(): FreeCameraInputsManager {
+    this.add(new FreeCameraDeviceOrientationInput());
+    return this;
+};
+
 /**
  * Takes information about the orientation of the device as reported by the deviceorientation event to orient the camera.
  * Screen rotation is taken into account.

src/Cameras/Inputs/freeCameraVirtualJoystickInput.ts

@@ -3,6 +3,28 @@ import { Nullable } from "../../types";
 import { ICameraInput, CameraInputTypes } from "../../Cameras/cameraInputsManager";
 import { FreeCamera } from "../../Cameras/freeCamera";
 import { Matrix, Vector3 } from "../../Maths/math";
+import { FreeCameraInputsManager } from "../../Cameras/freeCameraInputsManager";
+
+// Module augmentation to abstract virtual joystick from camera.
+declare module "../../Cameras/freeCameraInputsManager" {
+    export interface FreeCameraInputsManager {
+        /**
+         * Add virtual joystick input support to the input manager.
+         * @returns the current input manager
+         */
+        addVirtualJoystick(): FreeCameraInputsManager;
+    }
+}
+
+/**
+* Add virtual joystick input support to the input manager.
+* @returns the current input manager
+*/
+FreeCameraInputsManager.prototype.addVirtualJoystick = function(): FreeCameraInputsManager {
+   this.add(new FreeCameraVirtualJoystickInput());
+   return this;
+};
+
 /**
  * Manage the Virtual Joystick inputs to control the movement of a free camera.
  * @see http://doc.babylonjs.com/how_to/customizing_camera_inputs

src/Cameras/RigModes/index.ts

@@ -0,0 +1,4 @@
+export * from "./stereoscopicAnaglyphRigMode";
+export * from "./stereoscopicRigMode";
+export * from "./vrRigMode";
+export * from "./webVRRigMode";

src/Cameras/RigModes/stereoscopicAnaglyphRigMode.ts

@@ -0,0 +1,8 @@
+import { Camera } from "../camera";
+import { PassPostProcess } from "../../PostProcesses/passPostProcess";
+import { AnaglyphPostProcess } from "../../PostProcesses/anaglyphPostProcess";
+
+Camera._setStereoscopicAnaglyphRigMode = function(camera: Camera) {
+    camera._rigCameras[0]._rigPostProcess = new PassPostProcess(camera.name + "_passthru", 1.0, camera._rigCameras[0]);
+    camera._rigCameras[1]._rigPostProcess = new AnaglyphPostProcess(camera.name + "_anaglyph", 1.0, camera._rigCameras);
+};

src/Cameras/RigModes/stereoscopicRigMode.ts

@@ -0,0 +1,10 @@
+import { Camera } from "../camera";
+import { PassPostProcess } from "../../PostProcesses/passPostProcess";
+import { StereoscopicInterlacePostProcess } from "../../PostProcesses/stereoscopicInterlacePostProcess";
+
+Camera._setStereoscopicRigMode = function(camera: Camera) {
+    var isStereoscopicHoriz = camera.cameraRigMode === Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL || camera.cameraRigMode === Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_CROSSEYED;
+
+    camera._rigCameras[0]._rigPostProcess = new PassPostProcess(camera.name + "_passthru", 1.0, camera._rigCameras[0]);
+    camera._rigCameras[1]._rigPostProcess = new StereoscopicInterlacePostProcess(camera.name + "_stereoInterlace", camera._rigCameras, isStereoscopicHoriz);
+};

src/Cameras/RigModes/vrRigMode.ts

@@ -0,0 +1,27 @@
+import { Camera } from "../camera";
+import { Matrix, Viewport } from "../../Maths/math";
+import { VRDistortionCorrectionPostProcess } from "../../PostProcesses/vrDistortionCorrectionPostProcess";
+import { VRCameraMetrics } from "../VR/vrCameraMetrics";
+
+Camera._setVRRigMode = function(camera: Camera, rigParams: any) {
+    var metrics = rigParams.vrCameraMetrics || VRCameraMetrics.GetDefault();
+
+    camera._rigCameras[0]._cameraRigParams.vrMetrics = metrics;
+    camera._rigCameras[0].viewport = new Viewport(0, 0, 0.5, 1.0);
+    camera._rigCameras[0]._cameraRigParams.vrWorkMatrix = new Matrix();
+    camera._rigCameras[0]._cameraRigParams.vrHMatrix = metrics.leftHMatrix;
+    camera._rigCameras[0]._cameraRigParams.vrPreViewMatrix = metrics.leftPreViewMatrix;
+    camera._rigCameras[0].getProjectionMatrix = camera._rigCameras[0]._getVRProjectionMatrix;
+
+    camera._rigCameras[1]._cameraRigParams.vrMetrics = metrics;
+    camera._rigCameras[1].viewport = new Viewport(0.5, 0, 0.5, 1.0);
+    camera._rigCameras[1]._cameraRigParams.vrWorkMatrix = new Matrix();
+    camera._rigCameras[1]._cameraRigParams.vrHMatrix = metrics.rightHMatrix;
+    camera._rigCameras[1]._cameraRigParams.vrPreViewMatrix = metrics.rightPreViewMatrix;
+    camera._rigCameras[1].getProjectionMatrix = camera._rigCameras[1]._getVRProjectionMatrix;
+
+    if (metrics.compensateDistortion) {
+        camera._rigCameras[0]._rigPostProcess = new VRDistortionCorrectionPostProcess("VR_Distort_Compensation_Left", camera._rigCameras[0], false, metrics);
+        camera._rigCameras[1]._rigPostProcess = new VRDistortionCorrectionPostProcess("VR_Distort_Compensation_Right", camera._rigCameras[1], true, metrics);
+    }
+};

src/Cameras/RigModes/webVRRigMode.ts

@@ -0,0 +1,38 @@
+import { Camera } from "../camera";
+import { Matrix, Viewport } from "../../Maths/math";
+
+Camera._setWebVRRigMode = function(camera: Camera, rigParams: any) {
+    if (rigParams.vrDisplay) {
+        var leftEye = rigParams.vrDisplay.getEyeParameters('left');
+        var rightEye = rigParams.vrDisplay.getEyeParameters('right');
+
+        //Left eye
+        camera._rigCameras[0].viewport = new Viewport(0, 0, 0.5, 1.0);
+        camera._rigCameras[0].setCameraRigParameter("left", true);
+        //leaving this for future reference
+        camera._rigCameras[0].setCameraRigParameter("specs", rigParams.specs);
+        camera._rigCameras[0].setCameraRigParameter("eyeParameters", leftEye);
+        camera._rigCameras[0].setCameraRigParameter("frameData", rigParams.frameData);
+        camera._rigCameras[0].setCameraRigParameter("parentCamera", rigParams.parentCamera);
+        camera._rigCameras[0]._cameraRigParams.vrWorkMatrix = new Matrix();
+        camera._rigCameras[0].getProjectionMatrix = camera._getWebVRProjectionMatrix;
+        camera._rigCameras[0].parent = camera;
+        camera._rigCameras[0]._getViewMatrix = camera._getWebVRViewMatrix;
+
+        //Right eye
+        camera._rigCameras[1].viewport = new Viewport(0.5, 0, 0.5, 1.0);
+        camera._rigCameras[1].setCameraRigParameter('eyeParameters', rightEye);
+        camera._rigCameras[1].setCameraRigParameter("specs", rigParams.specs);
+        camera._rigCameras[1].setCameraRigParameter("frameData", rigParams.frameData);
+        camera._rigCameras[1].setCameraRigParameter("parentCamera", rigParams.parentCamera);
+        camera._rigCameras[1]._cameraRigParams.vrWorkMatrix = new Matrix();
+        camera._rigCameras[1].getProjectionMatrix = camera._getWebVRProjectionMatrix;
+        camera._rigCameras[1].parent = camera;
+        camera._rigCameras[1]._getViewMatrix = camera._getWebVRViewMatrix;
+
+        if (Camera.UseAlternateWebVRRendering) {
+            camera._rigCameras[1]._skipRendering = true;
+            camera._rigCameras[0]._alternateCamera = camera._rigCameras[1];
+        }
+    }
+};

src/Cameras/Stereoscopic/anaglyphArcRotateCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicAnaglyphRigMode";
+
 Node.AddNodeConstructor("AnaglyphArcRotateCamera", (name, scene, options) => {
     return () => new AnaglyphArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), options.interaxial_distance, scene);
 });

src/Cameras/Stereoscopic/anaglyphFreeCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicAnaglyphRigMode";
+
 Node.AddNodeConstructor("AnaglyphFreeCamera", (name, scene, options) => {
     return () => new AnaglyphFreeCamera(name, Vector3.Zero(), options.interaxial_distance, scene);
 });

src/Cameras/Stereoscopic/anaglyphGamepadCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicAnaglyphRigMode";
+
 Node.AddNodeConstructor("AnaglyphGamepadCamera", (name, scene, options) => {
     return () => new AnaglyphGamepadCamera(name, Vector3.Zero(), options.interaxial_distance, scene);
 });

src/Cameras/Stereoscopic/anaglyphUniversalCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicAnaglyphRigMode";
+
 Node.AddNodeConstructor("AnaglyphUniversalCamera", (name, scene, options) => {
     return () => new AnaglyphUniversalCamera(name, Vector3.Zero(), options.interaxial_distance, scene);
 });

src/Cameras/Stereoscopic/stereoscopicArcRotateCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicRigMode";
+
 Node.AddNodeConstructor("StereoscopicArcRotateCamera", (name, scene, options) => {
     return () => new StereoscopicArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
 });

src/Cameras/Stereoscopic/stereoscopicFreeCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicRigMode";
+
 Node.AddNodeConstructor("StereoscopicFreeCamera", (name, scene, options) => {
     return () => new StereoscopicFreeCamera(name, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
 });

src/Cameras/Stereoscopic/stereoscopicGamepadCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicRigMode";
+
 Node.AddNodeConstructor("StereoscopicGamepadCamera", (name, scene, options) => {
     return () => new StereoscopicGamepadCamera(name, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
 });

src/Cameras/Stereoscopic/stereoscopicUniversalCamera.ts

@@ -4,6 +4,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/stereoscopicRigMode";
+
 Node.AddNodeConstructor("StereoscopicFreeCamera", (name, scene, options) => {
     return () => new StereoscopicUniversalCamera(name, Vector3.Zero(), options.interaxial_distance, options.isStereoscopicSideBySide, scene);
 });

src/Cameras/VR/vrDeviceOrientationArcRotateCamera.ts

@@ -5,6 +5,11 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+import "../Inputs/arcRotateCameraVRDeviceOrientationInput";
+
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/vrRigMode";
+
 Node.AddNodeConstructor("VRDeviceOrientationFreeCamera", (name, scene) => {
     return () => new VRDeviceOrientationArcRotateCamera(name, 0, 0, 1.0, Vector3.Zero(), scene);
 });

src/Cameras/VR/vrDeviceOrientationFreeCamera.ts

@@ -5,6 +5,9 @@ import { Scene } from "../../scene";
 import { Vector3 } from "../../Maths/math";
 import { Node } from "../../node";
 
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/vrRigMode";
+
 Node.AddNodeConstructor("VRDeviceOrientationFreeCamera", (name, scene) => {
     return () => new VRDeviceOrientationFreeCamera(name, Vector3.Zero(), scene);
 });

src/Cameras/VR/vrExperienceHelper.ts

@@ -151,7 +151,7 @@ class VRExperienceHelperGazer implements IDisposable {
     }
 
     /** @hidden */
-    public _updatePointerDistance() {
+    public _updatePointerDistance(distance: number = 100) {
     }
 
     public dispose() {
@@ -1841,7 +1841,7 @@ export class VRExperienceHelper {
             }
 
             // Changing the size of the laser pointer based on the distance from the targetted point
-            gazer._updatePointerDistance();
+            gazer._updatePointerDistance(hit.distance);
         }
         else {
             gazer._updatePointerDistance();

src/Cameras/VR/webVRCamera.ts

@@ -13,6 +13,10 @@ import { Node } from "../../node";
 import { AbstractMesh } from "../../Meshes/abstractMesh";
 import { Ray } from "../../Culling/ray";
 import { HemisphericLight } from "../../Lights/hemisphericLight";
+
+// Side effect import to define the stereoscopic mode.
+import "../RigModes/webVRRigMode";
+
 Node.AddNodeConstructor("WebVRFreeCamera", (name, scene) => {
     return () => new WebVRFreeCamera(name, Vector3.Zero(), scene);
 });
@@ -634,8 +638,9 @@ export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
     /**
      * This function is called by the two RIG cameras.
      * 'this' is the left or right camera (and NOT (!!!) the WebVRFreeCamera instance)
+     * @hidden
      */
-    protected _getWebVRViewMatrix(): Matrix {
+    public _getWebVRViewMatrix(): Matrix {
         // Update the parent camera prior to using a child camera to avoid desynchronization
         let parentCamera: WebVRFreeCamera = this._cameraRigParams["parentCamera"];
         parentCamera._updateCache();
@@ -684,7 +689,8 @@ export class WebVRFreeCamera extends FreeCamera implements PoseControlled {
         return this._webvrViewMatrix;
     }
 
-    protected _getWebVRProjectionMatrix(): Matrix {
+    /** @hidden */
+    public _getWebVRProjectionMatrix(): Matrix {
 
         let parentCamera = <WebVRFreeCamera>this.parent;
 

src/Cameras/arcRotateCameraInputsManager.ts

@@ -1,5 +1,4 @@
 import { ArcRotateCamera } from "./arcRotateCamera";
-import { ArcRotateCameraVRDeviceOrientationInput } from "../Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput";
 import { ArcRotateCameraPointersInput } from "../Cameras/Inputs/arcRotateCameraPointersInput";
 import { ArcRotateCameraKeyboardMoveInput } from "../Cameras/Inputs/arcRotateCameraKeyboardMoveInput";
 import { ArcRotateCameraMouseWheelInput } from "../Cameras/Inputs/arcRotateCameraMouseWheelInput";
@@ -45,13 +44,4 @@ export class ArcRotateCameraInputsManager extends CameraInputsManager<ArcRotateC
         this.add(new ArcRotateCameraKeyboardMoveInput());
         return this;
     }
-
-    /**
-     * Add orientation input support to the input manager.
-     * @returns the current input manager
-     */
-    public addVRDeviceOrientation(): ArcRotateCameraInputsManager {
-        this.add(new ArcRotateCameraVRDeviceOrientationInput());
-        return this;
-    }
 }

src/Cameras/camera.ts

@@ -11,16 +11,12 @@ import { Mesh } from "../Meshes/mesh";
 import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Ray } from "../Culling/ray";
 import { ICullable } from "../Culling/boundingInfo";
-import { RenderTargetTexture } from "../Materials/Textures/renderTargetTexture";
-import { PostProcess } from "../PostProcesses/postProcess";
-import { PassPostProcess } from "../PostProcesses/passPostProcess";
-import { AnaglyphPostProcess } from "../PostProcesses/anaglyphPostProcess";
-import { StereoscopicInterlacePostProcess } from "../PostProcesses/stereoscopicInterlacePostProcess";
-import { VRDistortionCorrectionPostProcess } from "../PostProcesses/vrDistortionCorrectionPostProcess";
-import { Animation } from "../Animations/animation";
-import { VRCameraMetrics } from "../Cameras/VR/vrCameraMetrics";
 import { Logger } from "../Misc/logger";
 
+import { Animation } from "../Animations/animation";
+
+declare type PostProcess = import("../PostProcesses/postProcess").PostProcess;
+declare type RenderTargetTexture = import("../Materials/Textures/renderTargetTexture").RenderTargetTexture;
 declare type FreeCamera = import("./freeCamera").FreeCamera;
 declare type TargetCamera = import("./targetCamera").TargetCamera;
 
@@ -563,7 +559,7 @@ export class Camera extends Node {
 
             // for VR rig, there does not have to be a post process
             if (rigPostProcess) {
-                var isPass = rigPostProcess instanceof PassPostProcess;
+                var isPass = rigPostProcess.getEffectName() === "pass";
                 if (isPass) {
                     // any rig which has a PassPostProcess for rig[0], cannot be isIntermediate when there are also user postProcesses
                     cam.isIntermediate = this._postProcesses.length === 0;
@@ -629,7 +625,7 @@ export class Camera extends Node {
     }
 
     /** @hidden */
-    protected _getViewMatrix(): Matrix {
+    public _getViewMatrix(): Matrix {
         return Matrix.Identity();
     }
 
@@ -968,84 +964,47 @@ export class Camera extends Node {
 
         switch (this.cameraRigMode) {
             case Camera.RIG_MODE_STEREOSCOPIC_ANAGLYPH:
-                this._rigCameras[0]._rigPostProcess = new PassPostProcess(this.name + "_passthru", 1.0, this._rigCameras[0]);
-                this._rigCameras[1]._rigPostProcess = new AnaglyphPostProcess(this.name + "_anaglyph", 1.0, this._rigCameras);
+                Camera._setStereoscopicAnaglyphRigMode(this);
                 break;
-
             case Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL:
             case Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_CROSSEYED:
             case Camera.RIG_MODE_STEREOSCOPIC_OVERUNDER:
-                var isStereoscopicHoriz = this.cameraRigMode === Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_PARALLEL || this.cameraRigMode === Camera.RIG_MODE_STEREOSCOPIC_SIDEBYSIDE_CROSSEYED;
-
-                this._rigCameras[0]._rigPostProcess = new PassPostProcess(this.name + "_passthru", 1.0, this._rigCameras[0]);
-                this._rigCameras[1]._rigPostProcess = new StereoscopicInterlacePostProcess(this.name + "_stereoInterlace", this._rigCameras, isStereoscopicHoriz);
+                Camera._setStereoscopicRigMode(this);
                 break;
-
             case Camera.RIG_MODE_VR:
-                var metrics = rigParams.vrCameraMetrics || VRCameraMetrics.GetDefault();
-
-                this._rigCameras[0]._cameraRigParams.vrMetrics = metrics;
-                this._rigCameras[0].viewport = new Viewport(0, 0, 0.5, 1.0);
-                this._rigCameras[0]._cameraRigParams.vrWorkMatrix = new Matrix();
-                this._rigCameras[0]._cameraRigParams.vrHMatrix = metrics.leftHMatrix;
-                this._rigCameras[0]._cameraRigParams.vrPreViewMatrix = metrics.leftPreViewMatrix;
-                this._rigCameras[0].getProjectionMatrix = this._rigCameras[0]._getVRProjectionMatrix;
-
-                this._rigCameras[1]._cameraRigParams.vrMetrics = metrics;
-                this._rigCameras[1].viewport = new Viewport(0.5, 0, 0.5, 1.0);
-                this._rigCameras[1]._cameraRigParams.vrWorkMatrix = new Matrix();
-                this._rigCameras[1]._cameraRigParams.vrHMatrix = metrics.rightHMatrix;
-                this._rigCameras[1]._cameraRigParams.vrPreViewMatrix = metrics.rightPreViewMatrix;
-                this._rigCameras[1].getProjectionMatrix = this._rigCameras[1]._getVRProjectionMatrix;
-
-                if (metrics.compensateDistortion) {
-                    this._rigCameras[0]._rigPostProcess = new VRDistortionCorrectionPostProcess("VR_Distort_Compensation_Left", this._rigCameras[0], false, metrics);
-                    this._rigCameras[1]._rigPostProcess = new VRDistortionCorrectionPostProcess("VR_Distort_Compensation_Right", this._rigCameras[1], true, metrics);
-                }
+                Camera._setVRRigMode(this, rigParams);
                 break;
             case Camera.RIG_MODE_WEBVR:
-                if (rigParams.vrDisplay) {
-                    var leftEye = rigParams.vrDisplay.getEyeParameters('left');
-                    var rightEye = rigParams.vrDisplay.getEyeParameters('right');
-
-                    //Left eye
-                    this._rigCameras[0].viewport = new Viewport(0, 0, 0.5, 1.0);
-                    this._rigCameras[0].setCameraRigParameter("left", true);
-                    //leaving this for future reference
-                    this._rigCameras[0].setCameraRigParameter("specs", rigParams.specs);
-                    this._rigCameras[0].setCameraRigParameter("eyeParameters", leftEye);
-                    this._rigCameras[0].setCameraRigParameter("frameData", rigParams.frameData);
-                    this._rigCameras[0].setCameraRigParameter("parentCamera", rigParams.parentCamera);
-                    this._rigCameras[0]._cameraRigParams.vrWorkMatrix = new Matrix();
-                    this._rigCameras[0].getProjectionMatrix = this._getWebVRProjectionMatrix;
-                    this._rigCameras[0].parent = this;
-                    this._rigCameras[0]._getViewMatrix = this._getWebVRViewMatrix;
-
-                    //Right eye
-                    this._rigCameras[1].viewport = new Viewport(0.5, 0, 0.5, 1.0);
-                    this._rigCameras[1].setCameraRigParameter('eyeParameters', rightEye);
-                    this._rigCameras[1].setCameraRigParameter("specs", rigParams.specs);
-                    this._rigCameras[1].setCameraRigParameter("frameData", rigParams.frameData);
-                    this._rigCameras[1].setCameraRigParameter("parentCamera", rigParams.parentCamera);
-                    this._rigCameras[1]._cameraRigParams.vrWorkMatrix = new Matrix();
-                    this._rigCameras[1].getProjectionMatrix = this._getWebVRProjectionMatrix;
-                    this._rigCameras[1].parent = this;
-                    this._rigCameras[1]._getViewMatrix = this._getWebVRViewMatrix;
-
-                    if (Camera.UseAlternateWebVRRendering) {
-                        this._rigCameras[1]._skipRendering = true;
-                        this._rigCameras[0]._alternateCamera = this._rigCameras[1];
-                    }
-                }
+                Camera._setWebVRRigMode(this, rigParams);
                 break;
-
         }
 
         this._cascadePostProcessesToRigCams();
         this.update();
     }
 
-    private _getVRProjectionMatrix(): Matrix {
+    /** @hidden */
+    public static _setStereoscopicRigMode(camera: Camera) {
+        throw "Import Cameras/RigModes/stereoscopicRigMode before using stereoscopic rig mode";
+    }
+
+    /** @hidden */
+    public static _setStereoscopicAnaglyphRigMode(camera: Camera) {
+        throw "Import Cameras/RigModes/stereoscopicAnaglyphRigMode before using stereoscopic anaglyph rig mode";
+    }
+
+    /** @hidden */
+    public static _setVRRigMode(camera: Camera, rigParams: any) {
+        throw "Import Cameras/RigModes/vrRigMode before using VR rig mode";
+    }
+
+    /** @hidden */
+    public static _setWebVRRigMode(camera: Camera, rigParams: any) {
+        throw "Import Cameras/RigModes/WebVRRigMode before using Web VR rig mode";
+    }
+
+    /** @hidden */
+    public _getVRProjectionMatrix(): Matrix {
         Matrix.PerspectiveFovLHToRef(this._cameraRigParams.vrMetrics.aspectRatioFov, this._cameraRigParams.vrMetrics.aspectRatio, this.minZ, this.maxZ, this._cameraRigParams.vrWorkMatrix);
         this._cameraRigParams.vrWorkMatrix.multiplyToRef(this._cameraRigParams.vrHMatrix, this._projectionMatrix);
         return this._projectionMatrix;
@@ -1062,16 +1021,18 @@ export class Camera extends Node {
     /**
      * This function MUST be overwritten by the different WebVR cameras available.
      * The context in which it is running is the RIG camera. So 'this' is the TargetCamera, left or right.
+     * @hidden
      */
-    protected _getWebVRProjectionMatrix(): Matrix {
+    public _getWebVRProjectionMatrix(): Matrix {
         return Matrix.Identity();
     }
 
     /**
      * This function MUST be overwritten by the different WebVR cameras available.
      * The context in which it is running is the RIG camera. So 'this' is the TargetCamera, left or right.
+     * @hidden
      */
-    protected _getWebVRViewMatrix(): Matrix {
+    public _getWebVRViewMatrix(): Matrix {
         return Matrix.Identity();
     }
 

src/Cameras/deviceOrientationCamera.ts

@@ -3,6 +3,8 @@ import { Scene } from "../scene";
 import { Quaternion, Vector3, Axis } from "../Maths/math";
 import { Node } from "../node";
 
+import "./Inputs/freeCameraDeviceOrientationInput";
+
 Node.AddNodeConstructor("DeviceOrientationCamera", (name, scene) => {
     return () => new DeviceOrientationCamera(name, Vector3.Zero(), scene);
 });

src/Cameras/followCamera.ts

@@ -28,12 +28,42 @@ export class FollowCamera extends TargetCamera {
     public radius: number = 12;
 
     /**
+     * Minimum allowed distance of the camera to the axis of rotation
+     * (The camera can not get closer).
+     * This can help limiting how the Camera is able to move in the scene.
+     */
+    @serialize()
+    public lowerRadiusLimit: Nullable<number> = null;
+
+    /**
+     * Maximum allowed distance of the camera to the axis of rotation
+     * (The camera can not get further).
+     * This can help limiting how the Camera is able to move in the scene.
+     */
+    @serialize()
+    public upperRadiusLimit: Nullable<number> = null;
+
+    /**
      * Define a rotation offset between the camera and the object it follows
      */
     @serialize()
     public rotationOffset: number = 0;
 
     /**
+     * Minimum allowed angle to camera position relative to target object.
+     * This can help limiting how the Camera is able to move in the scene.
+     */
+    @serialize()
+    public lowerRotationOffsetLimit: Nullable<number> = null;
+
+    /**
+     * Maximum allowed angle to camera position relative to target object.
+     * This can help limiting how the Camera is able to move in the scene.
+     */
+    @serialize()
+    public upperRotationOffsetLimit: Nullable<number> = null;
+
+    /**
      * Define a height offset between the camera and the object it follows.
      * It can help following an object from the top (like a car chaing a plane)
      */
@@ -41,6 +71,20 @@ export class FollowCamera extends TargetCamera {
     public heightOffset: number = 4;
 
     /**
+     * Minimum allowed height of camera position relative to target object.
+     * This can help limiting how the Camera is able to move in the scene.
+     */
+    @serialize()
+    public lowerHeightOffsetLimit: Nullable<number> = null;
+
+    /**
+     * Maximum allowed height of camera position relative to target object.
+     * This can help limiting how the Camera is able to move in the scene.
+     */
+    @serialize()
+    public upperHeightOffsetLimit: Nullable<number> = null;
+
+    /**
      * Define how fast the camera can accelerate to follow it s target.
      */
     @serialize()
@@ -76,7 +120,7 @@ export class FollowCamera extends TargetCamera {
 
         this.lockedTarget = lockedTarget;
         this.inputs = new FollowCameraInputsManager(this);
-        this.inputs.addKeyboard();
+        this.inputs.addKeyboard().addMouseWheel();
         // Uncomment the following line when the relevant handlers have been implemented.
         // this.inputs.addKeyboard().addMouseWheel().addPointers().addVRDeviceOrientation();
     }
@@ -150,12 +194,40 @@ export class FollowCamera extends TargetCamera {
     /** @hidden */
     public _checkInputs(): void {
         this.inputs.checkInputs();
+        this._checkLimits();
         super._checkInputs();
         if (this.lockedTarget) {
             this._follow(this.lockedTarget);
         }
     }
 
+    private _checkLimits() {
+        if (this.lowerRadiusLimit !== null && this.radius < this.lowerRadiusLimit) {
+            this.radius = this.lowerRadiusLimit;
+        }
+        if (this.upperRadiusLimit !== null && this.radius > this.upperRadiusLimit) {
+            this.radius = this.upperRadiusLimit;
+        }
+
+        if (this.lowerHeightOffsetLimit !== null &&
+            this.heightOffset < this.lowerHeightOffsetLimit) {
+            this.heightOffset = this.lowerHeightOffsetLimit;
+        }
+        if (this.upperHeightOffsetLimit !== null &&
+            this.heightOffset > this.upperHeightOffsetLimit) {
+            this.heightOffset = this.upperHeightOffsetLimit;
+        }
+
+        if (this.lowerRotationOffsetLimit !== null &&
+            this.rotationOffset < this.lowerRotationOffsetLimit) {
+            this.rotationOffset = this.lowerRotationOffsetLimit;
+        }
+        if (this.upperRotationOffsetLimit !== null &&
+            this.rotationOffset > this.upperRotationOffsetLimit) {
+            this.rotationOffset = this.upperRotationOffsetLimit;
+        }
+    }
+
     /**
      * Gets the camera class name.
      * @returns the class name

src/Cameras/followCameraInputsManager.ts

@@ -1,6 +1,7 @@
 import { CameraInputsManager } from "./cameraInputsManager";
 import { FollowCamera } from "./followCamera";
 import { FollowCameraKeyboardMoveInput } from './Inputs/followCameraKeyboardMoveInput';
+import { FollowCameraMouseWheelInput } from './Inputs/followCameraMouseWheelInput';
 
 /**
  * Default Inputs manager for the FollowCamera.
@@ -30,7 +31,7 @@ export class FollowCameraInputsManager extends CameraInputsManager<FollowCamera>
      * @returns the current input manager
      */
     public addMouseWheel(): FollowCameraInputsManager {
-        console.warn("MouseWheel support not yet implemented for FollowCamera.");
+        this.add(new FollowCameraMouseWheelInput());
         return this;
     }
 

src/Cameras/freeCameraInputsManager.ts

@@ -2,9 +2,7 @@ import { FreeCamera } from "./freeCamera";
 import { CameraInputsManager } from "./cameraInputsManager";
 import { FreeCameraKeyboardMoveInput } from "../Cameras/Inputs/freeCameraKeyboardMoveInput";
 import { FreeCameraMouseInput } from "../Cameras/Inputs/freeCameraMouseInput";
-import { FreeCameraDeviceOrientationInput } from "../Cameras/Inputs/freeCameraDeviceOrientationInput";
 import { FreeCameraTouchInput } from "../Cameras/Inputs/freeCameraTouchInput";
-import { FreeCameraVirtualJoystickInput } from "../Cameras/Inputs/freeCameraVirtualJoystickInput";
 
 /**
  * Default Inputs manager for the FreeCamera.
@@ -40,15 +38,6 @@ export class FreeCameraInputsManager extends CameraInputsManager<FreeCamera> {
     }
 
     /**
-     * Add orientation input support to the input manager.
-     * @returns the current input manager
-     */
-    addDeviceOrientation(): FreeCameraInputsManager {
-        this.add(new FreeCameraDeviceOrientationInput());
-        return this;
-    }
-
-    /**
      * Add touch input support to the input manager.
      * @returns the current input manager
      */
@@ -56,13 +45,4 @@ export class FreeCameraInputsManager extends CameraInputsManager<FreeCamera> {
         this.add(new FreeCameraTouchInput());
         return this;
     }
-
-    /**
-     * Add virtual joystick input support to the input manager.
-     * @returns the current input manager
-     */
-    addVirtualJoystick(): FreeCameraInputsManager {
-        this.add(new FreeCameraVirtualJoystickInput());
-        return this;
-    }
 }

src/Cameras/index.ts

@@ -16,4 +16,5 @@ export * from "./Stereoscopic/index";
 export * from "./universalCamera";
 export * from "./virtualJoysticksCamera";
 export * from "./VR/index";
-export * from "./XR/index";
+export * from "./XR/index";
+export * from "./RigModes/index";

src/Cameras/virtualJoysticksCamera.ts

@@ -2,6 +2,9 @@ import { FreeCamera } from "./freeCamera";
 import { Scene } from "../scene";
 import { Vector3 } from "../Maths/math";
 import { Node } from "../node";
+
+import "./Inputs/freeCameraVirtualJoystickInput";
+
 Node.AddNodeConstructor("VirtualJoysticksCamera", (name, scene) => {
     return () => new VirtualJoysticksCamera(name, Vector3.Zero(), scene);
 });

src/Engines/engine.ts

@@ -490,7 +490,7 @@ export class Engine {
      * Returns the current version of the framework
      */
     public static get Version(): string {
-        return "4.0.0-alpha.17";
+        return "4.0.0-alpha.19";
     }
 
     /**

src/Events/clipboardEvents.ts

@@ -22,8 +22,8 @@ export class ClipboardEventTypes {
 export class ClipboardInfo {
     /**
      *Creates an instance of ClipboardInfo.
-     * @param {number} type
-     * @param {ClipboardEvent} event
+     * @param type Defines the type of event (BABYLON.ClipboardEventTypes)
+     * @param event Defines the related dom event
      */
     constructor(
         /**