Merge

dist/preview release/babylon.max.js

@@ -12985,7 +12985,7 @@ var BABYLON;
              * Returns the current version of the framework
              */
             get: function () {
-                return "4.0.0-alpha.14";
+                return "4.0.0-alpha.15";
             },
             enumerable: true,
             configurable: true
@@ -79104,18 +79104,20 @@ var BABYLON;
                 name = BABYLON.Tools.GetFilename(rootUrl);
                 rootUrl = BABYLON.Tools.GetFolderPath(rootUrl);
             }
-            else if (sceneFilename instanceof File) {
-                url = rootUrl + sceneFilename.name;
-                name = sceneFilename.name;
-                file = sceneFilename;
+            else if (sceneFilename.lastModified) {
+                var sceneFile = sceneFilename;
+                url = rootUrl + sceneFile.name;
+                name = sceneFile.name;
+                file = sceneFile;
             }
             else {
-                if (sceneFilename.substr(0, 1) === "/") {
+                var filename = sceneFilename;
+                if (filename.substr(0, 1) === "/") {
                     BABYLON.Tools.Error("Wrong sceneFilename parameter");
                     return null;
                 }
-                url = rootUrl + sceneFilename;
-                name = sceneFilename;
+                url = rootUrl + filename;
+                name = filename;
             }
             return {
                 url: url,
@@ -103478,6 +103480,10 @@ var BABYLON;
              * If set, the drag plane/axis will be rotated based on the attached mesh's world rotation (Default: true)
              */
             this.useObjectOrienationForDragging = true;
+            /**
+             * Predicate to determine if it is valid to move the object to a new position when it is moved
+             */
+            this.validateDrag = function (targetPosition) { return true; };
             this._tmpVector = new BABYLON.Vector3(0, 0, 0);
             this._alternatePickedPoint = new BABYLON.Vector3(0, 0, 0);
             this._worldDragAxis = new BABYLON.Vector3(0, 0, 0);
@@ -103593,7 +103599,9 @@ var BABYLON;
                     _this._targetPosition.subtractToRef((_this._attachedNode).absolutePosition, _this._tmpVector);
                     _this._tmpVector.scaleInPlace(_this.dragDeltaRatio);
                     (_this._attachedNode).getAbsolutePosition().addToRef(_this._tmpVector, _this._tmpVector);
-                    (_this._attachedNode).setAbsolutePosition(_this._tmpVector);
+                    if (_this.validateDrag(_this._tmpVector)) {
+                        (_this._attachedNode).setAbsolutePosition(_this._tmpVector);
+                    }
                     BABYLON.BoundingBoxGizmo._RestorePivotPoint(_this._attachedNode);
                 }
             });
@@ -106646,6 +106654,16 @@ var BABYLON;
             }
         };
         /**
+         * Remove an element from the octree
+         * @param entry defines the element to remove
+         */
+        Octree.prototype.removeMesh = function (entry) {
+            for (var index = 0; index < this.blocks.length; index++) {
+                var block = this.blocks[index];
+                block.removeEntry(entry);
+            }
+        };
+        /**
          * Selects an array of meshes within the frustum
          * @param frustumPlanes The frustum planes to use which will select all meshes within it
          * @param allowDuplicate If duplicate objects are allowed in the resulting object array
@@ -106837,6 +106855,23 @@ var BABYLON;
             }
         };
         /**
+         * Remove an element from this block
+         * @param entry defines the element to remove
+         */
+        OctreeBlock.prototype.removeEntry = function (entry) {
+            if (this.blocks) {
+                for (var index = 0; index < this.blocks.length; index++) {
+                    var block = this.blocks[index];
+                    block.removeEntry(entry);
+                }
+                return;
+            }
+            var entryIndex = this.entries.indexOf(entry);
+            if (entryIndex > -1) {
+                this.entries.splice(entryIndex, 1);
+            }
+        };
+        /**
          * Add an array of elements to this block
          * @param entries defines the array of elements to add
          */
@@ -108914,6 +108949,10 @@ var BABYLON;
              * If the gaze trackers scale should be updated to be constant size when pointing at near/far meshes
              */
             this.updateGazeTrackerScale = true;
+            /**
+             * If the gaze trackers color should be updated when selecting meshes
+             */
+            this.updateGazeTrackerColor = true;
             this._onResize = function () {
                 _this.moveButtonToBottomRight();
                 if (_this._fullscreenVRpresenting && _this._webVRready) {
@@ -110334,6 +110373,9 @@ var BABYLON;
          * @param color new color for the ray.
          */
         VRExperienceHelper.prototype.changeGazeColor = function (color) {
+            if (!this.updateGazeTrackerColor) {
+                return;
+            }
             if (!this._cameraGazer._gazeTracker.material) {
                 return;
             }

dist/preview release/glTF2Interface/package.json

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

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

@@ -1,7 +1,6 @@
 /*Babylon.js GUI*/
 // Dependencies for this module:
 //   ../../../../Tools/Gulp/babylonjs
-//   ../../../../Tools/Gulp/2D
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
@@ -12,8 +11,8 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
-        * Interface used to define a control that can receive focus
-        */
+     * Interface used to define a control that can receive focus
+     */
     export interface IFocusableControl {
             /**
                 * Function called when the control receives the focus
@@ -29,15 +28,15 @@ declare module BABYLON.GUI {
                 */
             processKeyboard(evt: KeyboardEvent): void;
             /**
-                * Function called to get the list of controls that should not steal the focus from this control
-                * @returns an array of controls
-                */
+             * Function called to get the list of controls that should not steal the focus from this control
+             * @returns an array of controls
+             */
             keepsFocusWith(): BABYLON.Nullable<Control[]>;
     }
     /**
-        * Class used to create texture to support 2D GUI elements
-        * @see http://doc.babylonjs.com/how_to/gui
-        */
+     * Class used to create texture to support 2D GUI elements
+     * @see http://doc.babylonjs.com/how_to/gui
+     */
     export class AdvancedDynamicTexture extends BABYLON.DynamicTexture {
             /** @hidden */
             _rootContainer: Container;
@@ -62,150 +61,158 @@ declare module BABYLON.GUI {
             /** @hidden */
             _linkedControls: Control[];
             /**
-                * BABYLON.Observable event triggered each time an clipboard event is received from the rendering canvas
-                */
+             * BABYLON.Observable event triggered each time an clipboard event is received from the rendering canvas
+             */
             onClipboardObservable: BABYLON.Observable<BABYLON.ClipboardInfo>;
             /**
-                * BABYLON.Observable event triggered each time a pointer down is intercepted by a control
-                */
+             * BABYLON.Observable event triggered each time a pointer down is intercepted by a control
+             */
             onControlPickedObservable: BABYLON.Observable<Control>;
             /**
-                * BABYLON.Observable event triggered before layout is evaluated
-                */
+             * BABYLON.Observable event triggered before layout is evaluated
+             */
             onBeginLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * BABYLON.Observable event triggered after the layout was evaluated
-                */
+             * BABYLON.Observable event triggered after the layout was evaluated
+             */
             onEndLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * BABYLON.Observable event triggered before the texture is rendered
-                */
+             * BABYLON.Observable event triggered before the texture is rendered
+             */
             onBeginRenderObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * BABYLON.Observable event triggered after the texture was rendered
-                */
+             * BABYLON.Observable event triggered after the texture was rendered
+             */
             onEndRenderObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * Gets or sets a boolean defining if alpha is stored as premultiplied
-                */
+             * Gets or sets a boolean defining if alpha is stored as premultiplied
+             */
             premulAlpha: boolean;
             /**
-                * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
-                * Useful when you want more antialiasing
-                */
+             * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
+             * Useful when you want more antialiasing
+             */
             renderScale: number;
             /** Gets or sets the background color */
             background: string;
             /**
-                * Gets or sets the ideal width used to design controls.
-                * The GUI will then rescale everything accordingly
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets the ideal width used to design controls.
+             * The GUI will then rescale everything accordingly
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             idealWidth: number;
             /**
-                * Gets or sets the ideal height used to design controls.
-                * The GUI will then rescale everything accordingly
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets the ideal height used to design controls.
+             * The GUI will then rescale everything accordingly
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             idealHeight: number;
             /**
-                * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             useSmallestIdeal: boolean;
             /**
-                * Gets or sets a boolean indicating if adaptive scaling must be used
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets a boolean indicating if adaptive scaling must be used
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             renderAtIdealSize: boolean;
             /**
-                * Gets the underlying layer used to render the texture when in fullscreen mode
-                */
+             * Gets the underlying layer used to render the texture when in fullscreen mode
+             */
             readonly layer: BABYLON.Nullable<BABYLON.Layer>;
             /**
-                * Gets the root container control
-                */
+             * Gets the root container control
+             */
             readonly rootContainer: Container;
             /**
-                * Returns an array containing the root container.
-                * This is mostly used to let the Inspector introspects the ADT
-                * @returns an array containing the rootContainer
-                */
+             * Returns an array containing the root container.
+             * This is mostly used to let the Inspector introspects the ADT
+             * @returns an array containing the rootContainer
+             */
             getChildren(): Array<Container>;
             /**
-                * Will return all controls that are inside this texture
-                * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
-                * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
-                * @return all child controls
-                */
+             * Will return all controls that are inside this texture
+             * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
+             * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
+             * @return all child controls
+             */
             getDescendants(directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): Control[];
             /**
-                * Gets or sets the current focused control
-                */
+             * Gets or sets the current focused control
+             */
             focusedControl: BABYLON.Nullable<IFocusableControl>;
             /**
-                * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
-                */
+             * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
+             */
             isForeground: boolean;
             /**
-                * Gets or set information about clipboardData
-                */
+             * Gets or set information about clipboardData
+             */
             clipboardData: string;
             /**
-             * Creates a new AdvancedDynamicTexture
-             * @param name defines the name of the texture
-             * @param width defines the width of the texture
-             * @param height defines the height of the texture
-             * @param scene defines the hosting scene
-             * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
-             * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
-             */
+            * Creates a new AdvancedDynamicTexture
+            * @param name defines the name of the texture
+            * @param width defines the width of the texture
+            * @param height defines the height of the texture
+            * @param scene defines the hosting scene
+            * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
+            * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
+            */
             constructor(name: string, width: number | undefined, height: number | undefined, scene: BABYLON.Nullable<BABYLON.Scene>, generateMipMaps?: boolean, samplingMode?: number);
             /**
-                * Get the current class name of the texture useful for serialization or dynamic coding.
-                * @returns "AdvancedDynamicTexture"
-                */
+             * Get the current class name of the texture useful for serialization or dynamic coding.
+             * @returns "AdvancedDynamicTexture"
+             */
             getClassName(): string;
             /**
-                * Function used to execute a function on all controls
-                * @param func defines the function to execute
-                * @param container defines the container where controls belong. If null the root container will be used
-                */
+             * Function used to execute a function on all controls
+             * @param func defines the function to execute
+             * @param container defines the container where controls belong. If null the root container will be used
+             */
             executeOnAllControls(func: (control: Control) => void, container?: Container): void;
             /**
-                * Marks the texture as dirty forcing a complete update
+                * Invalidates a rectangle area on the gui texture
+                * @param minX left most position of the rectangle to invalidate in pixels
+                * @param minY top most position of the rectangle to invalidate in pixels
+                * @param maxX right most position of the rectangle to invalidate in pixels
+                * @param maxY bottom most position of the rectangle to invalidate in pixels
                 */
+            invalidateRect(minX: number, minY: number, maxX: number, maxY: number): void;
+            /**
+             * Marks the texture as dirty forcing a complete update
+             */
             markAsDirty(): void;
             /**
-                * Helper function used to create a new style
-                * @returns a new style
-                * @see http://doc.babylonjs.com/how_to/gui#styles
-                */
+             * Helper function used to create a new style
+             * @returns a new style
+             * @see http://doc.babylonjs.com/how_to/gui#styles
+             */
             createStyle(): Style;
             /**
-                * Adds a new control to the root container
-                * @param control defines the control to add
-                * @returns the current texture
-                */
+             * Adds a new control to the root container
+             * @param control defines the control to add
+             * @returns the current texture
+             */
             addControl(control: Control): AdvancedDynamicTexture;
             /**
-                * Removes a control from the root container
-                * @param control defines the control to remove
-                * @returns the current texture
-                */
+             * Removes a control from the root container
+             * @param control defines the control to remove
+             * @returns the current texture
+             */
             removeControl(control: Control): AdvancedDynamicTexture;
             /**
-                * Release all resources
-                */
+             * Release all resources
+             */
             dispose(): void;
             /** @hidden */
             _getGlobalViewport(scene: BABYLON.Scene): BABYLON.Viewport;
             /**
-                * Get screen coordinates for a vector3
-                * @param position defines the position to project
-                * @param worldMatrix defines the world matrix to use
-                * @returns the projected position
-                */
+             * Get screen coordinates for a vector3
+             * @param position defines the position to project
+             * @param worldMatrix defines the world matrix to use
+             * @returns the projected position
+             */
             getProjectedPosition(position: BABYLON.Vector3, worldMatrix: BABYLON.Matrix): BABYLON.Vector2;
             /** @hidden */
             _changeCursor(cursor: string): void;
@@ -220,23 +227,23 @@ declare module BABYLON.GUI {
             /** Attach to all scene events required to support pointer events */
             attach(): void;
             /**
-                * Register the clipboard Events onto the canvas
-                */
+             * Register the clipboard Events onto the canvas
+             */
             registerClipboardEvents(): void;
             /**
                 * Unregister the clipboard Events from the canvas
                 */
             unRegisterClipboardEvents(): void;
             /**
-                * Connect the texture to a hosting mesh to enable interactions
-                * @param mesh defines the mesh to attach to
-                * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
-                */
+             * Connect the texture to a hosting mesh to enable interactions
+             * @param mesh defines the mesh to attach to
+             * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
+             */
             attachToMesh(mesh: BABYLON.AbstractMesh, supportPointerMove?: boolean): void;
             /**
-                * Move the focus to a specific control
-                * @param control defines the control which will receive the focus
-                */
+             * Move the focus to a specific control
+             * @param control defines the control which will receive the focus
+             */
             moveFocusToControl(control: IFocusableControl): void;
             /**
                 * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
@@ -249,17 +256,17 @@ declare module BABYLON.GUI {
                 */
             static CreateForMesh(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean): AdvancedDynamicTexture;
             /**
-                * Creates a new AdvancedDynamicTexture in fullscreen mode.
-                * In this mode the texture will rely on a layer for its rendering.
-                * This allows it to be treated like any other layer.
-                * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
-                * LayerMask is set through advancedTexture.layer.layerMask
-                * @param name defines name for the texture
-                * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
-                * @param scene defines the hsoting scene
-                * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
-                * @returns a new AdvancedDynamicTexture
-                */
+             * Creates a new AdvancedDynamicTexture in fullscreen mode.
+             * In this mode the texture will rely on a layer for its rendering.
+             * This allows it to be treated like any other layer.
+             * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
+             * LayerMask is set through advancedTexture.layer.layerMask
+             * @param name defines name for the texture
+             * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
+             * @param scene defines the hsoting scene
+             * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
+             * @returns a new AdvancedDynamicTexture
+             */
             static CreateFullscreenUI(name: string, foreground?: boolean, scene?: BABYLON.Nullable<BABYLON.Scene>, sampling?: number): AdvancedDynamicTexture;
     }
 }
@@ -910,16 +917,16 @@ declare module BABYLON.GUI {
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
-            protected _localDraw(context: CanvasRenderingContext2D): void;
+            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
             protected _beforeLayout(): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
             protected _postMeasure(): void;
             /** @hidden */
-            _draw(context: CanvasRenderingContext2D): void;
+            _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             /** @hidden */
             _getDescendants(results: Control[], directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): void;
             /** @hidden */
@@ -1324,13 +1331,17 @@ declare module BABYLON.GUI {
             /** @hidden */
             _flagDescendantsAsMatrixDirty(): void;
             /** @hidden */
+            _intersectsRect(rect: Measure): boolean;
+            /** @hidden */
+            protected invalidateRect(): void;
+            /** @hidden */
             _markAsDirty(force?: boolean): void;
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
-            protected _transform(context: CanvasRenderingContext2D): void;
+            protected _transform(context?: CanvasRenderingContext2D): void;
             /** @hidden */
             _renderHighlight(context: CanvasRenderingContext2D): void;
             /** @hidden */
@@ -1338,7 +1349,7 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _applyStates(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
             /** @hidden */
             protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             /** @hidden */
@@ -1352,9 +1363,9 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _render(context: CanvasRenderingContext2D): boolean;
+            _render(context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
             /** @hidden */
-            _draw(context: CanvasRenderingContext2D): void;
+            _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): void;
             /**
                 * Tests if a given coordinates belong to the current control
                 * @param x defines x coordinate to test
@@ -2362,7 +2373,7 @@ declare module BABYLON.GUI {
                 */
             constructor(name?: string | undefined);
             protected _getTypeName(): string;
-            protected _localDraw(context: CanvasRenderingContext2D): void;
+            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
     }

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

@@ -1,7 +1,6 @@
 /*Babylon.js GUI*/
 // Dependencies for this module:
 //   ../../../../Tools/Gulp/babylonjs
-//   ../../../../Tools/Gulp/2D
 
 declare module 'babylonjs-gui' {
     export * from "babylonjs-gui/2D";
@@ -59,8 +58,8 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Style } from "babylonjs-gui/2D/style";
     /**
-        * Interface used to define a control that can receive focus
-        */
+     * Interface used to define a control that can receive focus
+     */
     export interface IFocusableControl {
             /**
                 * Function called when the control receives the focus
@@ -76,15 +75,15 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
                 */
             processKeyboard(evt: KeyboardEvent): void;
             /**
-                * Function called to get the list of controls that should not steal the focus from this control
-                * @returns an array of controls
-                */
+             * Function called to get the list of controls that should not steal the focus from this control
+             * @returns an array of controls
+             */
             keepsFocusWith(): Nullable<Control[]>;
     }
     /**
-        * Class used to create texture to support 2D GUI elements
-        * @see http://doc.babylonjs.com/how_to/gui
-        */
+     * Class used to create texture to support 2D GUI elements
+     * @see http://doc.babylonjs.com/how_to/gui
+     */
     export class AdvancedDynamicTexture extends DynamicTexture {
             /** @hidden */
             _rootContainer: Container;
@@ -109,150 +108,158 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
             /** @hidden */
             _linkedControls: Control[];
             /**
-                * Observable event triggered each time an clipboard event is received from the rendering canvas
-                */
+             * Observable event triggered each time an clipboard event is received from the rendering canvas
+             */
             onClipboardObservable: Observable<ClipboardInfo>;
             /**
-                * Observable event triggered each time a pointer down is intercepted by a control
-                */
+             * Observable event triggered each time a pointer down is intercepted by a control
+             */
             onControlPickedObservable: Observable<Control>;
             /**
-                * Observable event triggered before layout is evaluated
-                */
+             * Observable event triggered before layout is evaluated
+             */
             onBeginLayoutObservable: Observable<AdvancedDynamicTexture>;
             /**
-                * Observable event triggered after the layout was evaluated
-                */
+             * Observable event triggered after the layout was evaluated
+             */
             onEndLayoutObservable: Observable<AdvancedDynamicTexture>;
             /**
-                * Observable event triggered before the texture is rendered
-                */
+             * Observable event triggered before the texture is rendered
+             */
             onBeginRenderObservable: Observable<AdvancedDynamicTexture>;
             /**
-                * Observable event triggered after the texture was rendered
-                */
+             * Observable event triggered after the texture was rendered
+             */
             onEndRenderObservable: Observable<AdvancedDynamicTexture>;
             /**
-                * Gets or sets a boolean defining if alpha is stored as premultiplied
-                */
+             * Gets or sets a boolean defining if alpha is stored as premultiplied
+             */
             premulAlpha: boolean;
             /**
-                * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
-                * Useful when you want more antialiasing
-                */
+             * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
+             * Useful when you want more antialiasing
+             */
             renderScale: number;
             /** Gets or sets the background color */
             background: string;
             /**
-                * Gets or sets the ideal width used to design controls.
-                * The GUI will then rescale everything accordingly
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets the ideal width used to design controls.
+             * The GUI will then rescale everything accordingly
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             idealWidth: number;
             /**
-                * Gets or sets the ideal height used to design controls.
-                * The GUI will then rescale everything accordingly
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets the ideal height used to design controls.
+             * The GUI will then rescale everything accordingly
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             idealHeight: number;
             /**
-                * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             useSmallestIdeal: boolean;
             /**
-                * Gets or sets a boolean indicating if adaptive scaling must be used
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets a boolean indicating if adaptive scaling must be used
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             renderAtIdealSize: boolean;
             /**
-                * Gets the underlying layer used to render the texture when in fullscreen mode
-                */
+             * Gets the underlying layer used to render the texture when in fullscreen mode
+             */
             readonly layer: Nullable<Layer>;
             /**
-                * Gets the root container control
-                */
+             * Gets the root container control
+             */
             readonly rootContainer: Container;
             /**
-                * Returns an array containing the root container.
-                * This is mostly used to let the Inspector introspects the ADT
-                * @returns an array containing the rootContainer
-                */
+             * Returns an array containing the root container.
+             * This is mostly used to let the Inspector introspects the ADT
+             * @returns an array containing the rootContainer
+             */
             getChildren(): Array<Container>;
             /**
-                * Will return all controls that are inside this texture
-                * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
-                * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
-                * @return all child controls
-                */
+             * Will return all controls that are inside this texture
+             * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
+             * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
+             * @return all child controls
+             */
             getDescendants(directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): Control[];
             /**
-                * Gets or sets the current focused control
-                */
+             * Gets or sets the current focused control
+             */
             focusedControl: Nullable<IFocusableControl>;
             /**
-                * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
-                */
+             * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
+             */
             isForeground: boolean;
             /**
-                * Gets or set information about clipboardData
-                */
+             * Gets or set information about clipboardData
+             */
             clipboardData: string;
             /**
-             * Creates a new AdvancedDynamicTexture
-             * @param name defines the name of the texture
-             * @param width defines the width of the texture
-             * @param height defines the height of the texture
-             * @param scene defines the hosting scene
-             * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
-             * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
-             */
+            * Creates a new AdvancedDynamicTexture
+            * @param name defines the name of the texture
+            * @param width defines the width of the texture
+            * @param height defines the height of the texture
+            * @param scene defines the hosting scene
+            * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
+            * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
+            */
             constructor(name: string, width: number | undefined, height: number | undefined, scene: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number);
             /**
-                * Get the current class name of the texture useful for serialization or dynamic coding.
-                * @returns "AdvancedDynamicTexture"
-                */
+             * Get the current class name of the texture useful for serialization or dynamic coding.
+             * @returns "AdvancedDynamicTexture"
+             */
             getClassName(): string;
             /**
-                * Function used to execute a function on all controls
-                * @param func defines the function to execute
-                * @param container defines the container where controls belong. If null the root container will be used
-                */
+             * Function used to execute a function on all controls
+             * @param func defines the function to execute
+             * @param container defines the container where controls belong. If null the root container will be used
+             */
             executeOnAllControls(func: (control: Control) => void, container?: Container): void;
             /**
-                * Marks the texture as dirty forcing a complete update
+                * Invalidates a rectangle area on the gui texture
+                * @param minX left most position of the rectangle to invalidate in pixels
+                * @param minY top most position of the rectangle to invalidate in pixels
+                * @param maxX right most position of the rectangle to invalidate in pixels
+                * @param maxY bottom most position of the rectangle to invalidate in pixels
                 */
+            invalidateRect(minX: number, minY: number, maxX: number, maxY: number): void;
+            /**
+             * Marks the texture as dirty forcing a complete update
+             */
             markAsDirty(): void;
             /**
-                * Helper function used to create a new style
-                * @returns a new style
-                * @see http://doc.babylonjs.com/how_to/gui#styles
-                */
+             * Helper function used to create a new style
+             * @returns a new style
+             * @see http://doc.babylonjs.com/how_to/gui#styles
+             */
             createStyle(): Style;
             /**
-                * Adds a new control to the root container
-                * @param control defines the control to add
-                * @returns the current texture
-                */
+             * Adds a new control to the root container
+             * @param control defines the control to add
+             * @returns the current texture
+             */
             addControl(control: Control): AdvancedDynamicTexture;
             /**
-                * Removes a control from the root container
-                * @param control defines the control to remove
-                * @returns the current texture
-                */
+             * Removes a control from the root container
+             * @param control defines the control to remove
+             * @returns the current texture
+             */
             removeControl(control: Control): AdvancedDynamicTexture;
             /**
-                * Release all resources
-                */
+             * Release all resources
+             */
             dispose(): void;
             /** @hidden */
             _getGlobalViewport(scene: Scene): Viewport;
             /**
-                * Get screen coordinates for a vector3
-                * @param position defines the position to project
-                * @param worldMatrix defines the world matrix to use
-                * @returns the projected position
-                */
+             * Get screen coordinates for a vector3
+             * @param position defines the position to project
+             * @param worldMatrix defines the world matrix to use
+             * @returns the projected position
+             */
             getProjectedPosition(position: Vector3, worldMatrix: Matrix): Vector2;
             /** @hidden */
             _changeCursor(cursor: string): void;
@@ -267,23 +274,23 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
             /** Attach to all scene events required to support pointer events */
             attach(): void;
             /**
-                * Register the clipboard Events onto the canvas
-                */
+             * Register the clipboard Events onto the canvas
+             */
             registerClipboardEvents(): void;
             /**
                 * Unregister the clipboard Events from the canvas
                 */
             unRegisterClipboardEvents(): void;
             /**
-                * Connect the texture to a hosting mesh to enable interactions
-                * @param mesh defines the mesh to attach to
-                * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
-                */
+             * Connect the texture to a hosting mesh to enable interactions
+             * @param mesh defines the mesh to attach to
+             * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
+             */
             attachToMesh(mesh: AbstractMesh, supportPointerMove?: boolean): void;
             /**
-                * Move the focus to a specific control
-                * @param control defines the control which will receive the focus
-                */
+             * Move the focus to a specific control
+             * @param control defines the control which will receive the focus
+             */
             moveFocusToControl(control: IFocusableControl): void;
             /**
                 * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
@@ -296,17 +303,17 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
                 */
             static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean): AdvancedDynamicTexture;
             /**
-                * Creates a new AdvancedDynamicTexture in fullscreen mode.
-                * In this mode the texture will rely on a layer for its rendering.
-                * This allows it to be treated like any other layer.
-                * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
-                * LayerMask is set through advancedTexture.layer.layerMask
-                * @param name defines name for the texture
-                * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
-                * @param scene defines the hsoting scene
-                * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
-                * @returns a new AdvancedDynamicTexture
-                */
+             * Creates a new AdvancedDynamicTexture in fullscreen mode.
+             * In this mode the texture will rely on a layer for its rendering.
+             * This allows it to be treated like any other layer.
+             * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
+             * LayerMask is set through advancedTexture.layer.layerMask
+             * @param name defines name for the texture
+             * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
+             * @param scene defines the hsoting scene
+             * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
+             * @returns a new AdvancedDynamicTexture
+             */
             static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Nullable<Scene>, sampling?: number): AdvancedDynamicTexture;
     }
 }
@@ -1013,16 +1020,16 @@ declare module 'babylonjs-gui/2D/controls/container' {
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
-            protected _localDraw(context: CanvasRenderingContext2D): void;
+            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
             protected _beforeLayout(): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean;
             protected _postMeasure(): void;
             /** @hidden */
-            _draw(context: CanvasRenderingContext2D): void;
+            _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             /** @hidden */
             _getDescendants(results: Control[], directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): void;
             /** @hidden */
@@ -1435,13 +1442,17 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             _flagDescendantsAsMatrixDirty(): void;
             /** @hidden */
+            _intersectsRect(rect: Measure): boolean;
+            /** @hidden */
+            protected invalidateRect(): void;
+            /** @hidden */
             _markAsDirty(force?: boolean): void;
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
-            protected _transform(context: CanvasRenderingContext2D): void;
+            protected _transform(context?: CanvasRenderingContext2D): void;
             /** @hidden */
             _renderHighlight(context: CanvasRenderingContext2D): void;
             /** @hidden */
@@ -1449,7 +1460,7 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             protected _applyStates(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean;
             /** @hidden */
             protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             /** @hidden */
@@ -1463,9 +1474,9 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _render(context: CanvasRenderingContext2D): boolean;
+            _render(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean;
             /** @hidden */
-            _draw(context: CanvasRenderingContext2D): void;
+            _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): void;
             /**
                 * Tests if a given coordinates belong to the current control
                 * @param x defines x coordinate to test
@@ -1668,7 +1679,7 @@ declare module 'babylonjs-gui/2D/controls/grid' {
 declare module 'babylonjs-gui/2D/controls/image' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Nullable, Observable } from "babylonjs";
-    import { Measure } from "2D";
+    import { Measure } from "babylonjs-gui/2D/measure";
     /**
         * Class used to create 2D images
         */
@@ -2262,7 +2273,8 @@ declare module 'babylonjs-gui/2D/controls/scrollViewers/scrollViewer' {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Container } from "babylonjs-gui/2D/controls/container";
     import { Nullable } from "babylonjs";
-    import { AdvancedDynamicTexture, Measure } from "2D";
+    import { Measure } from "babylonjs-gui/2D/measure";
+    import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
     import { ScrollBar } from "babylonjs-gui/2D/controls/sliders/scrollBar";
     /**
         * Class used to hold a viewer window and sliders in a grid
@@ -2530,7 +2542,7 @@ declare module 'babylonjs-gui/2D/controls/rectangle' {
                 */
             constructor(name?: string | undefined);
             protected _getTypeName(): string;
-            protected _localDraw(context: CanvasRenderingContext2D): void;
+            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
     }
@@ -3300,7 +3312,6 @@ declare module 'babylonjs-gui/2D/controls/sliders/scrollBar' {
 /*Babylon.js GUI*/
 // Dependencies for this module:
 //   ../../../../Tools/Gulp/babylonjs
-//   ../../../../Tools/Gulp/2D
 declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
@@ -3311,8 +3322,8 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
-        * Interface used to define a control that can receive focus
-        */
+     * Interface used to define a control that can receive focus
+     */
     export interface IFocusableControl {
             /**
                 * Function called when the control receives the focus
@@ -3328,15 +3339,15 @@ declare module BABYLON.GUI {
                 */
             processKeyboard(evt: KeyboardEvent): void;
             /**
-                * Function called to get the list of controls that should not steal the focus from this control
-                * @returns an array of controls
-                */
+             * Function called to get the list of controls that should not steal the focus from this control
+             * @returns an array of controls
+             */
             keepsFocusWith(): BABYLON.Nullable<Control[]>;
     }
     /**
-        * Class used to create texture to support 2D GUI elements
-        * @see http://doc.babylonjs.com/how_to/gui
-        */
+     * Class used to create texture to support 2D GUI elements
+     * @see http://doc.babylonjs.com/how_to/gui
+     */
     export class AdvancedDynamicTexture extends BABYLON.DynamicTexture {
             /** @hidden */
             _rootContainer: Container;
@@ -3361,150 +3372,158 @@ declare module BABYLON.GUI {
             /** @hidden */
             _linkedControls: Control[];
             /**
-                * BABYLON.Observable event triggered each time an clipboard event is received from the rendering canvas
-                */
+             * BABYLON.Observable event triggered each time an clipboard event is received from the rendering canvas
+             */
             onClipboardObservable: BABYLON.Observable<BABYLON.ClipboardInfo>;
             /**
-                * BABYLON.Observable event triggered each time a pointer down is intercepted by a control
-                */
+             * BABYLON.Observable event triggered each time a pointer down is intercepted by a control
+             */
             onControlPickedObservable: BABYLON.Observable<Control>;
             /**
-                * BABYLON.Observable event triggered before layout is evaluated
-                */
+             * BABYLON.Observable event triggered before layout is evaluated
+             */
             onBeginLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * BABYLON.Observable event triggered after the layout was evaluated
-                */
+             * BABYLON.Observable event triggered after the layout was evaluated
+             */
             onEndLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * BABYLON.Observable event triggered before the texture is rendered
-                */
+             * BABYLON.Observable event triggered before the texture is rendered
+             */
             onBeginRenderObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * BABYLON.Observable event triggered after the texture was rendered
-                */
+             * BABYLON.Observable event triggered after the texture was rendered
+             */
             onEndRenderObservable: BABYLON.Observable<AdvancedDynamicTexture>;
             /**
-                * Gets or sets a boolean defining if alpha is stored as premultiplied
-                */
+             * Gets or sets a boolean defining if alpha is stored as premultiplied
+             */
             premulAlpha: boolean;
             /**
-                * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
-                * Useful when you want more antialiasing
-                */
+             * Gets or sets a number used to scale rendering size (2 means that the texture will be twice bigger).
+             * Useful when you want more antialiasing
+             */
             renderScale: number;
             /** Gets or sets the background color */
             background: string;
             /**
-                * Gets or sets the ideal width used to design controls.
-                * The GUI will then rescale everything accordingly
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets the ideal width used to design controls.
+             * The GUI will then rescale everything accordingly
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             idealWidth: number;
             /**
-                * Gets or sets the ideal height used to design controls.
-                * The GUI will then rescale everything accordingly
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets the ideal height used to design controls.
+             * The GUI will then rescale everything accordingly
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             idealHeight: number;
             /**
-                * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets a boolean indicating if the smallest ideal value must be used if idealWidth and idealHeight are both set
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             useSmallestIdeal: boolean;
             /**
-                * Gets or sets a boolean indicating if adaptive scaling must be used
-                * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
-                */
+             * Gets or sets a boolean indicating if adaptive scaling must be used
+             * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+             */
             renderAtIdealSize: boolean;
             /**
-                * Gets the underlying layer used to render the texture when in fullscreen mode
-                */
+             * Gets the underlying layer used to render the texture when in fullscreen mode
+             */
             readonly layer: BABYLON.Nullable<BABYLON.Layer>;
             /**
-                * Gets the root container control
-                */
+             * Gets the root container control
+             */
             readonly rootContainer: Container;
             /**
-                * Returns an array containing the root container.
-                * This is mostly used to let the Inspector introspects the ADT
-                * @returns an array containing the rootContainer
-                */
+             * Returns an array containing the root container.
+             * This is mostly used to let the Inspector introspects the ADT
+             * @returns an array containing the rootContainer
+             */
             getChildren(): Array<Container>;
             /**
-                * Will return all controls that are inside this texture
-                * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
-                * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
-                * @return all child controls
-                */
+             * Will return all controls that are inside this texture
+             * @param directDescendantsOnly defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered
+             * @param predicate defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored
+             * @return all child controls
+             */
             getDescendants(directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): Control[];
             /**
-                * Gets or sets the current focused control
-                */
+             * Gets or sets the current focused control
+             */
             focusedControl: BABYLON.Nullable<IFocusableControl>;
             /**
-                * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
-                */
+             * Gets or sets a boolean indicating if the texture must be rendered in background or foreground when in fullscreen mode
+             */
             isForeground: boolean;
             /**
-                * Gets or set information about clipboardData
-                */
+             * Gets or set information about clipboardData
+             */
             clipboardData: string;
             /**
-             * Creates a new AdvancedDynamicTexture
-             * @param name defines the name of the texture
-             * @param width defines the width of the texture
-             * @param height defines the height of the texture
-             * @param scene defines the hosting scene
-             * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
-             * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
-             */
+            * Creates a new AdvancedDynamicTexture
+            * @param name defines the name of the texture
+            * @param width defines the width of the texture
+            * @param height defines the height of the texture
+            * @param scene defines the hosting scene
+            * @param generateMipMaps defines a boolean indicating if mipmaps must be generated (false by default)
+            * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
+            */
             constructor(name: string, width: number | undefined, height: number | undefined, scene: BABYLON.Nullable<BABYLON.Scene>, generateMipMaps?: boolean, samplingMode?: number);
             /**
-                * Get the current class name of the texture useful for serialization or dynamic coding.
-                * @returns "AdvancedDynamicTexture"
-                */
+             * Get the current class name of the texture useful for serialization or dynamic coding.
+             * @returns "AdvancedDynamicTexture"
+             */
             getClassName(): string;
             /**
-                * Function used to execute a function on all controls
-                * @param func defines the function to execute
-                * @param container defines the container where controls belong. If null the root container will be used
-                */
+             * Function used to execute a function on all controls
+             * @param func defines the function to execute
+             * @param container defines the container where controls belong. If null the root container will be used
+             */
             executeOnAllControls(func: (control: Control) => void, container?: Container): void;
             /**
-                * Marks the texture as dirty forcing a complete update
+                * Invalidates a rectangle area on the gui texture
+                * @param minX left most position of the rectangle to invalidate in pixels
+                * @param minY top most position of the rectangle to invalidate in pixels
+                * @param maxX right most position of the rectangle to invalidate in pixels
+                * @param maxY bottom most position of the rectangle to invalidate in pixels
                 */
+            invalidateRect(minX: number, minY: number, maxX: number, maxY: number): void;
+            /**
+             * Marks the texture as dirty forcing a complete update
+             */
             markAsDirty(): void;
             /**
-                * Helper function used to create a new style
-                * @returns a new style
-                * @see http://doc.babylonjs.com/how_to/gui#styles
-                */
+             * Helper function used to create a new style
+             * @returns a new style
+             * @see http://doc.babylonjs.com/how_to/gui#styles
+             */
             createStyle(): Style;
             /**
-                * Adds a new control to the root container
-                * @param control defines the control to add
-                * @returns the current texture
-                */
+             * Adds a new control to the root container
+             * @param control defines the control to add
+             * @returns the current texture
+             */
             addControl(control: Control): AdvancedDynamicTexture;
             /**
-                * Removes a control from the root container
-                * @param control defines the control to remove
-                * @returns the current texture
-                */
+             * Removes a control from the root container
+             * @param control defines the control to remove
+             * @returns the current texture
+             */
             removeControl(control: Control): AdvancedDynamicTexture;
             /**
-                * Release all resources
-                */
+             * Release all resources
+             */
             dispose(): void;
             /** @hidden */
             _getGlobalViewport(scene: BABYLON.Scene): BABYLON.Viewport;
             /**
-                * Get screen coordinates for a vector3
-                * @param position defines the position to project
-                * @param worldMatrix defines the world matrix to use
-                * @returns the projected position
-                */
+             * Get screen coordinates for a vector3
+             * @param position defines the position to project
+             * @param worldMatrix defines the world matrix to use
+             * @returns the projected position
+             */
             getProjectedPosition(position: BABYLON.Vector3, worldMatrix: BABYLON.Matrix): BABYLON.Vector2;
             /** @hidden */
             _changeCursor(cursor: string): void;
@@ -3519,23 +3538,23 @@ declare module BABYLON.GUI {
             /** Attach to all scene events required to support pointer events */
             attach(): void;
             /**
-                * Register the clipboard Events onto the canvas
-                */
+             * Register the clipboard Events onto the canvas
+             */
             registerClipboardEvents(): void;
             /**
                 * Unregister the clipboard Events from the canvas
                 */
             unRegisterClipboardEvents(): void;
             /**
-                * Connect the texture to a hosting mesh to enable interactions
-                * @param mesh defines the mesh to attach to
-                * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
-                */
+             * Connect the texture to a hosting mesh to enable interactions
+             * @param mesh defines the mesh to attach to
+             * @param supportPointerMove defines a boolean indicating if pointer move events must be catched as well
+             */
             attachToMesh(mesh: BABYLON.AbstractMesh, supportPointerMove?: boolean): void;
             /**
-                * Move the focus to a specific control
-                * @param control defines the control which will receive the focus
-                */
+             * Move the focus to a specific control
+             * @param control defines the control which will receive the focus
+             */
             moveFocusToControl(control: IFocusableControl): void;
             /**
                 * Creates a new AdvancedDynamicTexture in projected mode (ie. attached to a mesh)
@@ -3548,17 +3567,17 @@ declare module BABYLON.GUI {
                 */
             static CreateForMesh(mesh: BABYLON.AbstractMesh, width?: number, height?: number, supportPointerMove?: boolean, onlyAlphaTesting?: boolean): AdvancedDynamicTexture;
             /**
-                * Creates a new AdvancedDynamicTexture in fullscreen mode.
-                * In this mode the texture will rely on a layer for its rendering.
-                * This allows it to be treated like any other layer.
-                * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
-                * LayerMask is set through advancedTexture.layer.layerMask
-                * @param name defines name for the texture
-                * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
-                * @param scene defines the hsoting scene
-                * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
-                * @returns a new AdvancedDynamicTexture
-                */
+             * Creates a new AdvancedDynamicTexture in fullscreen mode.
+             * In this mode the texture will rely on a layer for its rendering.
+             * This allows it to be treated like any other layer.
+             * As such, if you have a multi camera setup, you can set the layerMask on the GUI as well.
+             * LayerMask is set through advancedTexture.layer.layerMask
+             * @param name defines name for the texture
+             * @param foreground defines a boolean indicating if the texture must be rendered in foreground (default is true)
+             * @param scene defines the hsoting scene
+             * @param sampling defines the texture sampling mode (Texture.BILINEAR_SAMPLINGMODE by default)
+             * @returns a new AdvancedDynamicTexture
+             */
             static CreateFullscreenUI(name: string, foreground?: boolean, scene?: BABYLON.Nullable<BABYLON.Scene>, sampling?: number): AdvancedDynamicTexture;
     }
 }
@@ -4209,16 +4228,16 @@ declare module BABYLON.GUI {
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
-            protected _localDraw(context: CanvasRenderingContext2D): void;
+            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
             protected _beforeLayout(): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
             protected _postMeasure(): void;
             /** @hidden */
-            _draw(context: CanvasRenderingContext2D): void;
+            _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             /** @hidden */
             _getDescendants(results: Control[], directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): void;
             /** @hidden */
@@ -4623,13 +4642,17 @@ declare module BABYLON.GUI {
             /** @hidden */
             _flagDescendantsAsMatrixDirty(): void;
             /** @hidden */
+            _intersectsRect(rect: Measure): boolean;
+            /** @hidden */
+            protected invalidateRect(): void;
+            /** @hidden */
             _markAsDirty(force?: boolean): void;
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
-            protected _transform(context: CanvasRenderingContext2D): void;
+            protected _transform(context?: CanvasRenderingContext2D): void;
             /** @hidden */
             _renderHighlight(context: CanvasRenderingContext2D): void;
             /** @hidden */
@@ -4637,7 +4660,7 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _applyStates(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
             /** @hidden */
             protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             /** @hidden */
@@ -4651,9 +4674,9 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _render(context: CanvasRenderingContext2D): boolean;
+            _render(context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
             /** @hidden */
-            _draw(context: CanvasRenderingContext2D): void;
+            _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): void;
             /**
                 * Tests if a given coordinates belong to the current control
                 * @param x defines x coordinate to test
@@ -5661,7 +5684,7 @@ declare module BABYLON.GUI {
                 */
             constructor(name?: string | undefined);
             protected _getTypeName(): string;
-            protected _localDraw(context: CanvasRenderingContext2D): void;
+            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
             protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
     }

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "4.0.0-alpha.14",
+    "version": "4.0.0-alpha.15",
     "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.14"
+        "babylonjs": "4.0.0-alpha.15"
     },
     "engines": {
         "node": "*"

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

@@ -3,13 +3,15 @@
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static readonly IsVisible: boolean;
-    static EarlyAttachToLoader(): void;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
-    static Hide(): void;
+declare module INSPECTOR {
+    export class Inspector {
+        static OnSelectionChangeObservable: BABYLON.Observable<string>;
+        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static EarlyAttachToLoader(): void;
+        static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
+        static Hide(): void;
+    }
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

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

@@ -6,15 +6,17 @@ declare module 'babylonjs-inspector' {
     export * from "babylonjs-inspector/inspector";
 }
 
-import { Scene, Observable, IInspectorOptions } from "babylonjs";
-import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
-export declare class Inspector {
-    static OnSelectionChangeObservable: Observable<string>;
-    static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
-    static readonly IsVisible: boolean;
-    static EarlyAttachToLoader(): void;
-    static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
-    static Hide(): void;
+declare module 'babylonjs-inspector/inspector' {
+    import { Scene, Observable, IInspectorOptions } from "babylonjs";
+    import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
+    export class Inspector {
+        static OnSelectionChangeObservable: Observable<string>;
+        static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static EarlyAttachToLoader(): void;
+        static Show(scene: Scene, userOptions: Partial<IInspectorOptions>): void;
+        static Hide(): void;
+    }
 }
 
 declare module 'babylonjs-inspector/components/propertyChangedEvent' {
@@ -32,13 +34,15 @@ declare module 'babylonjs-inspector/components/propertyChangedEvent' {
 //   ../../../../Tools/Gulp/babylonjs
 declare module INSPECTOR {
 }
-export declare class Inspector {
-    static OnSelectionChangeObservable: BABYLON.Observable<string>;
-    static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
-    static readonly IsVisible: boolean;
-    static EarlyAttachToLoader(): void;
-    static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
-    static Hide(): void;
+declare module INSPECTOR {
+    export class Inspector {
+        static OnSelectionChangeObservable: BABYLON.Observable<string>;
+        static OnPropertyChangedObservable: BABYLON.Observable<PropertyChangedEvent>;
+        static readonly IsVisible: boolean;
+        static EarlyAttachToLoader(): void;
+        static Show(scene: BABYLON.Scene, userOptions: Partial<BABYLON.IInspectorOptions>): void;
+        static Hide(): void;
+    }
 }
 declare module INSPECTOR {
     export class PropertyChangedEvent {

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.0.0-alpha.14",
+    "version": "4.0.0-alpha.15",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,10 +29,10 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "4.0.0-alpha.14",
-        "babylonjs-gui": "4.0.0-alpha.14",
-        "babylonjs-loaders": "4.0.0-alpha.14",
-        "babylonjs-serializers": "4.0.0-alpha.14"
+        "babylonjs": "4.0.0-alpha.15",
+        "babylonjs-gui": "4.0.0-alpha.15",
+        "babylonjs-loaders": "4.0.0-alpha.15",
+        "babylonjs-serializers": "4.0.0-alpha.15"
     },
     "engines": {
         "node": "*"

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.14",
+    "version": "4.0.0-alpha.15",
     "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.14",
-        "babylonjs": "4.0.0-alpha.14"
+        "babylonjs-gltf2interface": "4.0.0-alpha.15",
+        "babylonjs": "4.0.0-alpha.15"
     },
     "engines": {
         "node": "*"

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.14",
+    "version": "4.0.0-alpha.15",
     "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.14"
+        "babylonjs": "4.0.0-alpha.15"
     },
     "engines": {
         "node": "*"

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.14",
+    "version": "4.0.0-alpha.15",
     "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.14"
+        "babylonjs": "4.0.0-alpha.15"
     },
     "engines": {
         "node": "*"

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.14",
+    "version": "4.0.0-alpha.15",
     "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.14"
+        "babylonjs": "4.0.0-alpha.15"
     },
     "engines": {
         "node": "*"

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.14",
+    "version": "4.0.0-alpha.15",
     "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.14",
-        "babylonjs-gltf2interface": "4.0.0-alpha.14"
+        "babylonjs": "4.0.0-alpha.15",
+        "babylonjs-gltf2interface": "4.0.0-alpha.15"
     },
     "engines": {
         "node": "*"

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

@@ -924,7 +924,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1558,20 +1558,6 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {

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

@@ -985,14 +985,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1663,22 +1662,6 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';

dist/preview release/what's new.md

@@ -23,6 +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))
 
 ## Updates
 
@@ -149,6 +150,8 @@
 - Do not clone mesh observables ([Sebavan](https://github.com/Sebavan))
 - Fixed Inspector resolution with AMD loader ([Sebavan](https://github.com/Sebavan))
 - Fix a bug when a call to `updateIndices` leads to changing the size of the index buffer by recreating the subMeshes in that case ([barroij](https://github.com/barroij))
+- Add option to disable gazeTracker color changes in vrExperienceHelper ([TrevorDev](https://github.com/TrevorDev))
+- PointerDragBehavior validateDrag predicate to stop dragging to specific points ([TrevorDev](https://github.com/TrevorDev))
 
 ### Viewer
 

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

@@ -243,7 +243,7 @@ export class Container extends Control {
     }
 
     /** @hidden */
-    protected _localDraw(context: CanvasRenderingContext2D): void {
+    protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void {
         if (this._background) {
             context.save();
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -274,7 +274,7 @@ export class Container extends Control {
     }
 
     /** @hidden */
-    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean {
+    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean {
         if (!this.isVisible || this.notRenderable) {
             return false;
         }
@@ -295,9 +295,15 @@ export class Container extends Control {
 
             if (!this._isClipped) {
                 for (var child of this._children) {
+                    // Only redraw parts of the screen that are invalidated
+                    if (invalidatedRectangle) {
+                        if (!child._intersectsRect(invalidatedRectangle)) {
+                            continue;
+                        }
+                    }
                     child._tempParentMeasure.copyFrom(this._measureForChildren);
 
-                    if (child._layout(this._measureForChildren, context)) {
+                    if (child._layout(this._measureForChildren, context, invalidatedRectangle)) {
 
                         if (this.adaptWidthToChildren && child._width.isPixel) {
                             computedWidth = Math.max(computedWidth, child._currentMeasure.width);
@@ -343,16 +349,22 @@ export class Container extends Control {
     }
 
     /** @hidden */
-    public _draw(context: CanvasRenderingContext2D): void {
+    public _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void {
 
-        this._localDraw(context);
+        this._localDraw(context, invalidatedRectangle);
 
         if (this.clipChildren) {
             this._clipForChildren(context);
         }
 
         for (var child of this._children) {
-            child._render(context);
+            // Only redraw parts of the screen that are invalidated
+            if (invalidatedRectangle) {
+                if (!child._intersectsRect(invalidatedRectangle)) {
+                    continue;
+                }
+            }
+            child._render(context, invalidatedRectangle);
         }
     }
 

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

@@ -307,6 +307,7 @@ export class Control {
         }
 
         this._scaleX = value;
+        this._transform();
         this._markAsDirty();
         this._markMatrixAsDirty();
     }
@@ -324,6 +325,7 @@ export class Control {
         }
 
         this._scaleY = value;
+        this._transform();
         this._markAsDirty();
         this._markMatrixAsDirty();
     }
@@ -1045,6 +1047,7 @@ export class Control {
 
         this._left.ignoreAdaptiveScaling = true;
         this._top.ignoreAdaptiveScaling = true;
+        this._markAsDirty();
     }
 
     /** @hidden */
@@ -1071,6 +1074,42 @@ export class Control {
     }
 
     /** @hidden */
+    public _intersectsRect(rect: Measure) {
+        var hit = !(this._currentMeasure.left > rect.left + rect.width ||
+            this._currentMeasure.left + this._currentMeasure.width < rect.left ||
+            this._currentMeasure.top > rect.top + rect.height ||
+            this._currentMeasure.top + this._currentMeasure.height < rect.top
+        );
+        return hit;
+    }
+
+    /** @hidden */
+    protected invalidateRect() {
+        if (this.host) {
+            // Compute aabb of rotated container box (eg. to handle rotation)
+            var rectanglePoints = BABYLON.Polygon.Rectangle(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.left + this._currentMeasure.width, this._currentMeasure.top + this._currentMeasure.height);
+            var min = new Vector2(Number.MAX_VALUE, Number.MAX_VALUE);
+            var max = new Vector2(0, 0);
+            this._invertTransformMatrix.invertToRef(this._invertTransformMatrix);
+            for (var i = 0; i < 4; i++) {
+                this._invertTransformMatrix.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._invertTransformMatrix.invertToRef(this._invertTransformMatrix);
+
+            this.host.invalidateRect(
+                min.x,
+                min.y,
+                max.x,
+                max.y
+            );
+        }
+    }
+
+    /** @hidden */
     public _markAsDirty(force = false): void {
         if (!this._isVisible && !force) {
             return;
@@ -1078,10 +1117,11 @@ export class Control {
 
         this._isDirty = true;
 
-        if (!this._host) {
-            return; // Not yet connected
+        // Redraw only this rectangle
+        if (this._host) {
+            this._host.markAsDirty();
+            this.invalidateRect();
         }
-        this._host.markAsDirty();
     }
 
     /** @hidden */
@@ -1102,7 +1142,7 @@ export class Control {
     }
 
     /** @hidden */
-    protected _transform(context: CanvasRenderingContext2D): void {
+    protected _transform(context?: CanvasRenderingContext2D): void {
         if (!this._isMatrixDirty && this._scaleX === 1 && this._scaleY === 1 && this._rotation === 0) {
             return;
         }
@@ -1110,17 +1150,18 @@ export class Control {
         // postTranslate
         var offsetX = this._currentMeasure.width * this._transformCenterX + this._currentMeasure.left;
         var offsetY = this._currentMeasure.height * this._transformCenterY + this._currentMeasure.top;
-        context.translate(offsetX, offsetY);
+        if (context) {
+            context.translate(offsetX, offsetY);
 
-        // rotate
-        context.rotate(this._rotation);
+            // rotate
+            context.rotate(this._rotation);
 
-        // scale
-        context.scale(this._scaleX, this._scaleY);
-
-        // preTranslate
-        context.translate(-offsetX, -offsetY);
+            // scale
+            context.scale(this._scaleX, this._scaleY);
 
+            // preTranslate
+            context.translate(-offsetX, -offsetY);
+        }
         // Need to update matrices?
         if (this._isMatrixDirty || this._cachedOffsetX !== offsetX || this._cachedOffsetY !== offsetY) {
             this._cachedOffsetX = offsetX;
@@ -1180,7 +1221,7 @@ export class Control {
     }
 
     /** @hidden */
-    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean {
+    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean {
         if (!this.isVisible || this.notRenderable) {
             return false;
         }
@@ -1372,8 +1413,18 @@ export class Control {
         // DO nothing
     }
 
-    private _clip(context: CanvasRenderingContext2D) {
+    private static _ClipMeasure = new Measure(0, 0, 0, 0);
+    private _clip(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>) {
         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;
+        }
 
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
             var shadowOffsetX = this.shadowOffsetX;
@@ -1385,19 +1436,21 @@ export class Control {
             var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
             var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
 
-            context.rect(this._currentMeasure.left + leftShadowOffset,
-                this._currentMeasure.top + topShadowOffset,
-                this._currentMeasure.width + rightShadowOffset - leftShadowOffset,
-                this._currentMeasure.height + bottomShadowOffset - topShadowOffset);
+            context.rect(
+                Control._ClipMeasure.left + leftShadowOffset,
+                Control._ClipMeasure.top + topShadowOffset,
+                Control._ClipMeasure.width + rightShadowOffset - leftShadowOffset,
+                Control._ClipMeasure.height + bottomShadowOffset - topShadowOffset
+            );
         } else {
-            context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            context.rect(Control._ClipMeasure.left, Control._ClipMeasure.top, Control._ClipMeasure.width, Control._ClipMeasure.height);
         }
 
         context.clip();
     }
 
     /** @hidden */
-    public _render(context: CanvasRenderingContext2D): boolean {
+    public _render(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean {
         if (!this.isVisible || this.notRenderable || this._isClipped) {
             this._isDirty = false;
             return false;
@@ -1411,7 +1464,7 @@ export class Control {
 
         // Clip
         if (this.clipChildren) {
-            this._clip(context);
+            this._clip(context, invalidatedRectangle);
         }
 
         if (this.onBeforeDrawObservable.hasObservers()) {
@@ -1421,7 +1474,7 @@ export class Control {
         if (this.useBitmapCache && !this._wasDirty && this._cacheData) {
             context.putImageData(this._cacheData, this._currentMeasure.left, this._currentMeasure.top);
         } else {
-            this._draw(context);
+            this._draw(context, invalidatedRectangle);
         }
 
         if (this.useBitmapCache && this._wasDirty) {
@@ -1440,7 +1493,7 @@ export class Control {
     }
 
     /** @hidden */
-    public _draw(context: CanvasRenderingContext2D): void {
+    public _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): void {
         // Do nothing
     }
 

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

@@ -1,6 +1,6 @@
 import { Control } from "./control";
 import { Nullable, Tools, Observable } from "babylonjs";
-import { Measure } from "2D";
+import { Measure } from "../measure";
 
 /**
  * Class used to create 2D images

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

@@ -50,7 +50,7 @@ export class Rectangle extends Container {
         return "Rectangle";
     }
 
-    protected _localDraw(context: CanvasRenderingContext2D): void {
+    protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void {
         context.save();
 
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {

gui/src/2D/controls/scrollViewers/scrollViewer.ts

@@ -2,8 +2,9 @@ import { Rectangle } from "../rectangle";
 import { Grid } from "../grid";
 import { Control } from "../control";
 import { Container } from "../container";
-import { PointerInfo, Observer, Nullable, PointerEventTypes } from "babylonjs";
-import { AdvancedDynamicTexture, Measure } from "2D";
+import { PointerInfo, Observer, Nullable } from "babylonjs";
+import { Measure } from "../../measure";
+import { AdvancedDynamicTexture } from "../../advancedDynamicTexture";
 import { _ScrollViewerWindow } from "./scrollViewerWindow";
 import { ScrollBar } from "../sliders/scrollBar";
 

inspector/src/components/globalState.ts

@@ -1,4 +1,4 @@
-import { Observable, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observer, Nullable } from "babylonjs";
+import { Observable, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observer, Nullable, Scene } from "babylonjs";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { IGLTFLoaderExtension, GLTFFileLoader } from "babylonjs-loaders";
 import { } from "babylonjs-gltf2interface";
@@ -6,6 +6,7 @@ import { } from "babylonjs-gltf2interface";
 export class GlobalState {
     public onSelectionChangedObservable: Observable<string>;
     public onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    public onInspectorClosedObservable = new Observable<Scene>();
     public onTabChangedObservable = new Observable<number>();
     public onPluginActivatedObserver: Nullable<Observer<ISceneLoaderPlugin | ISceneLoaderPluginAsync>>;
 

inspector/src/components/sceneExplorer/entities/lightTreeItemComponent.tsx

@@ -5,11 +5,13 @@ import { faLightbulb as faLightbubRegular } from '@fortawesome/free-regular-svg-
 import { TreeItemLabelComponent } from "../treeItemLabelComponent";
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
+import { GlobalState } from "../../globalState";
 
 interface ILightTreeItemComponentProps {
     light: Light,
     extensibilityGroups?: IExplorerExtensibilityGroup[]
-    onClick: () => void
+    onClick: () => void,
+    globalState: GlobalState
 }
 
 export class LightTreeItemComponent extends React.Component<ILightTreeItemComponentProps, { isEnabled: boolean }> {

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -202,16 +202,16 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
             <div id="tree">
                 <SceneExplorerFilterComponent onFilter={(filter) => this.filterContent(filter)} />
                 <SceneTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} scene={scene} onRefresh={() => this.forceUpdate()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
-                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.rootNodes} label="Nodes" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
-                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.materials} label="Materials" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
-                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={textures} label="Textures" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
+                <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.rootNodes} label="Nodes" offset={1} filter={this.state.filter} />
+                <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.materials} label="Materials" offset={1} filter={this.state.filter} />
+                <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={textures} label="Textures" offset={1} filter={this.state.filter} />
                 {
                     guiElements && guiElements.length > 0 &&
-                    <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
+                    <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} filter={this.state.filter} />
                 }
                 {
                     scene.animationGroups.length > 0 &&
-                    <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.animationGroups} label="Animation groups" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
+                    <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.animationGroups} label="Animation groups" offset={1} filter={this.state.filter} />
                 }
             </div>
         );

inspector/src/components/sceneExplorer/treeItemComponent.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
-import { Nullable, Observable, IExplorerExtensibilityGroup } from "babylonjs";
+import { Nullable, IExplorerExtensibilityGroup } from "babylonjs";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus, faMinus, faBan, faExpandArrowsAlt, faCompress } from '@fortawesome/free-solid-svg-icons';
 import { TreeItemSelectableComponent } from "./treeItemSelectableComponent";
 import { Tools } from "../../tools";
+import { GlobalState } from "../globalState";
 
 interface ITreeItemExpandableHeaderComponentProps {
     isExpanded: boolean,
@@ -73,13 +74,12 @@ export interface ITreeItemComponentProps {
     label: string,
     offset: number,
     filter: Nullable<string>,
-    onSelectionChangedObservable?: Observable<any>,
+    globalState: GlobalState,
     entity?: any,
     selectedEntity: any,
     extensibilityGroups?: IExplorerExtensibilityGroup[]
 }
 
-
 export class TreeItemComponent extends React.Component<ITreeItemComponentProps, { isExpanded: boolean, mustExpand: boolean }> {
     constructor(props: ITreeItemComponentProps) {
         super(props);
@@ -159,7 +159,9 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
                 {
                     sortedItems.map(item => {
                         return (
-                            <TreeItemSelectableComponent mustExpand={this.state.mustExpand} extensibilityGroups={this.props.extensibilityGroups} key={item.uniqueId} offset={this.props.offset + 1} selectedEntity={this.props.selectedEntity} entity={item} onSelectionChangedObservable={this.props.onSelectionChangedObservable} filter={this.props.filter} />
+                            <TreeItemSelectableComponent mustExpand={this.state.mustExpand} extensibilityGroups={this.props.extensibilityGroups} key={item.uniqueId}
+                                offset={this.props.offset + 1} selectedEntity={this.props.selectedEntity} entity={item}
+                                globalState={this.props.globalState} filter={this.props.filter} />
                         );
                     })
                 }

inspector/src/components/sceneExplorer/treeItemSelectableComponent.tsx

@@ -1,18 +1,19 @@
 import { TreeItemSpecializedComponent } from "./treeItemSpecializedComponent";
-import { Observable, Nullable, IExplorerExtensibilityGroup } from "babylonjs";
+import { Nullable, IExplorerExtensibilityGroup } from "babylonjs";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { Tools } from "../../tools";
 import * as ReactDOM from "react-dom";
 import * as React from "react";
+import { GlobalState } from "../globalState";
 
 export interface ITreeItemSelectableComponentProps {
     entity: any,
     selectedEntity?: any,
     mustExpand?: boolean,
     offset: number,
+    globalState: GlobalState,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangedObservable?: Observable<any>,
     filter: Nullable<string>
 }
 
@@ -73,12 +74,12 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
     }
 
     onSelect() {
-        if (!this.props.onSelectionChangedObservable) {
+        if (!this.props.globalState.onSelectionChangedObservable) {
             return;
         }
         this._wasSelected = true;
         const entity = this.props.entity;
-        this.props.onSelectionChangedObservable.notifyObservers(entity);
+        this.props.globalState.onSelectionChangedObservable.notifyObservers(entity);
     }
 
     renderChildren() {
@@ -92,7 +93,7 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
             children.map(item => {
 
                 return (
-                    <TreeItemSelectableComponent mustExpand={this.props.mustExpand} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.props.selectedEntity} key={item.uniqueId} offset={this.props.offset + 2} entity={item} onSelectionChangedObservable={this.props.onSelectionChangedObservable} filter={this.props.filter} />
+                    <TreeItemSelectableComponent globalState={this.props.globalState} mustExpand={this.props.mustExpand} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.props.selectedEntity} key={item.uniqueId} offset={this.props.offset + 2} entity={item} filter={this.props.filter} />
                 );
             })
         )
@@ -144,7 +145,7 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
                             {chevron}
                         </div>
                     }
-                    <TreeItemSpecializedComponent extensibilityGroups={this.props.extensibilityGroups} label={entity.name} entity={entity} onClick={() => this.onSelect()} onSelectionChangedObservable={this.props.onSelectionChangedObservable} />
+                    <TreeItemSpecializedComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} label={entity.name} entity={entity} onClick={() => this.onSelect()} />
                 </div>
                 {
                     this.renderChildren()

inspector/src/components/sceneExplorer/treeItemSpecializedComponent.tsx

@@ -1,4 +1,4 @@
-import { AbstractMesh, Camera, Light, Material, Texture, TransformNode, IExplorerExtensibilityGroup, Observable, AnimationGroup } from "babylonjs";
+import { AbstractMesh, Camera, Light, Material, Texture, TransformNode, IExplorerExtensibilityGroup, AnimationGroup } from "babylonjs";
 import { MeshTreeItemComponent } from "./entities/meshTreeItemComponent";
 import { CameraTreeItemComponent } from "./entities/cameraTreeItemComponent";
 import { LightTreeItemComponent } from "./entities/lightTreeItemComponent";
@@ -12,13 +12,14 @@ import { ControlTreeItemComponent } from "./entities/gui/controlTreeItemComponen
 import { Control, AdvancedDynamicTexture } from "babylonjs-gui";
 import { AdvancedDynamicTextureTreeItemComponent } from "./entities/gui/advancedDynamicTextureTreeItemComponent";
 import { AnimationGroupItemComponent } from "./entities/animationGroupTreeItemComponent";
+import { GlobalState } from "../globalState";
 
 interface ITreeItemSpecializedComponentProps {
-    label: string;
-    entity?: any;
-    extensibilityGroups?: IExplorerExtensibilityGroup[];
-    onSelectionChangedObservable?: Observable<any>;
-    onClick?: () => void;
+    label: string,
+    entity?: any,
+    extensibilityGroups?: IExplorerExtensibilityGroup[],
+    globalState: GlobalState,
+    onClick?: () => void
 }
 
 export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpecializedComponentProps> {
@@ -58,7 +59,7 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
             }
 
             if (className.indexOf("Light") !== -1) {
-                return (<LightTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} light={entity as Light} onClick={() => this.onClick()} />);
+                return (<LightTreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} light={entity as Light} onClick={() => this.onClick()} />);
             }
 
             if (className.indexOf("Material") !== -1) {
@@ -66,7 +67,7 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
             }
 
             if (className === "AdvancedDynamicTexture") {
-                return (<AdvancedDynamicTextureTreeItemComponent onSelectionChangedObservable={this.props.onSelectionChangedObservable} extensibilityGroups={this.props.extensibilityGroups} texture={entity as AdvancedDynamicTexture} onClick={() => this.onClick()} />);
+                return (<AdvancedDynamicTextureTreeItemComponent onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} extensibilityGroups={this.props.extensibilityGroups} texture={entity as AdvancedDynamicTexture} onClick={() => this.onClick()} />);
             }
 
             if (className === "AnimationGroup") {

inspector/src/inspector.ts

@@ -69,7 +69,7 @@ export class Inspector {
                 embedMode: options.embedMode,
                 handleResize: options.handleResize,
                 enablePopup: options.enablePopup,
-                enableClose: options.enablePopup,
+                enableClose: options.enableClose,
                 explorerExtensibility: options.explorerExtensibility
             };
         }
@@ -433,16 +433,22 @@ export class Inspector {
     }
 
     private static _Cleanup() {
+        if (Inspector._OpenedPane !== 0) {
+            return;
+        }
+
         if (this._NewCanvasContainer) {
             this._DestroyCanvasContainer();
         }
 
-        if (Inspector._OpenedPane === 0 && this._OnBeforeRenderObserver && this._Scene) {
+        if (this._OnBeforeRenderObserver && this._Scene) {
             this._Scene.onBeforeRenderObservable.remove(this._OnBeforeRenderObserver);
             this._OnBeforeRenderObserver = null;
 
             this._Scene.getEngine().resize();
         }
+
+        this._GlobalState.onInspectorClosedObservable.notifyObservers(this._Scene);
     }
 
     private static _RemoveElementFromDOM(element: Nullable<HTMLElement>) {

package.json

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

src/Behaviors/Meshes/pointerDragBehavior.ts

@@ -107,6 +107,11 @@ import { Ray } from "../../Culling/ray";
         }
 
         /**
+         * Predicate to determine if it is valid to move the object to a new position when it is moved
+         */
+        public validateDrag = (targetPosition: Vector3) => {return true; };
+
+        /**
          *  The name of the behavior
          */
         public get name(): string {
@@ -202,7 +207,9 @@ import { Ray } from "../../Culling/ray";
                     this._targetPosition.subtractToRef((this._attachedNode).absolutePosition, this._tmpVector);
                     this._tmpVector.scaleInPlace(this.dragDeltaRatio);
                     (this._attachedNode).getAbsolutePosition().addToRef(this._tmpVector, this._tmpVector);
-                    (this._attachedNode).setAbsolutePosition(this._tmpVector);
+                    if (this.validateDrag(this._tmpVector)) {
+                        (this._attachedNode).setAbsolutePosition(this._tmpVector);
+                    }
                     BoundingBoxGizmo._RestorePivotPoint(this._attachedNode);
                 }
             });

src/Cameras/VR/vrExperienceHelper.ts

@@ -472,6 +472,10 @@ import { Animation } from "../../Animations/animation";
          * If the gaze trackers scale should be updated to be constant size when pointing at near/far meshes
          */
         public updateGazeTrackerScale = true;
+        /**
+         * If the gaze trackers color should be updated when selecting meshes
+         */
+        public updateGazeTrackerColor = true;
 
         /**
          * The gaze tracking mesh corresponding to the left controller
@@ -1925,6 +1929,9 @@ import { Animation } from "../../Animations/animation";
          * @param color new color for the ray.
          */
         public changeGazeColor(color: Color3) {
+            if (!this.updateGazeTrackerColor) {
+                return;
+            }
             if (!(<StandardMaterial>this._cameraGazer._gazeTracker.material)) {
                 return;
             }

src/Culling/Octrees/octree.ts

@@ -74,6 +74,17 @@ import { OctreeBlock } from "./octreeBlock";
         }
 
         /**
+         * Remove an element from the octree
+         * @param entry defines the element to remove
+         */
+        public removeMesh(entry: T): void {
+            for (var index = 0; index < this.blocks.length; index++) {
+                var block = this.blocks[index];
+                block.removeEntry(entry);
+            }
+        }
+
+        /**
          * Selects an array of meshes within the frustum
          * @param frustumPlanes The frustum planes to use which will select all meshes within it
          * @param allowDuplicate If duplicate objects are allowed in the resulting object array

src/Culling/Octrees/octreeBlock.ts

@@ -112,6 +112,26 @@ import { Octree } from "./octree";
         }
 
         /**
+         * Remove an element from this block
+         * @param entry defines the element to remove
+         */
+        public removeEntry(entry: T): void {
+            if (this.blocks) {
+                for (var index = 0; index < this.blocks.length; index++) {
+                    var block = this.blocks[index];
+                    block.removeEntry(entry);
+                }
+                return;
+            }
+
+            const entryIndex = this.entries.indexOf(entry);
+
+            if (entryIndex > -1) {
+                this.entries.splice(entryIndex, 1);
+            }
+        }
+
+        /**
          * Add an array of elements to this block
          * @param entries defines the array of elements to add
          */

src/Engines/engine.ts

@@ -516,7 +516,7 @@ declare type RenderTargetTexture = import("Materials/Textures/renderTargetTextur
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "4.0.0-alpha.14";
+            return "4.0.0-alpha.15";
         }
 
         /**

src/Loading/sceneLoader.ts

@@ -468,19 +468,21 @@ import { Logger } from "../Misc/logger";
                 name = Tools.GetFilename(rootUrl);
                 rootUrl = Tools.GetFolderPath(rootUrl);
             }
-            else if (sceneFilename instanceof File) {
-                url = rootUrl + sceneFilename.name;
-                name = sceneFilename.name;
-                file = sceneFilename;
+            else if ((sceneFilename as File).lastModified) {
+                const sceneFile = sceneFilename as File;
+                url = rootUrl + sceneFile.name;
+                name = sceneFile.name;
+                file = sceneFile;
             }
             else {
-                if (sceneFilename.substr(0, 1) === "/") {
-                    Logger.Error("Wrong sceneFilename parameter");
+                const filename = sceneFilename as string;
+                if (filename.substr(0, 1) === "/") {
+                    Tools.Error("Wrong sceneFilename parameter");
                     return null;
                 }
 
-                url = rootUrl + sceneFilename;
-                name = sceneFilename;
+                url = rootUrl + filename;
+                name = filename;
             }
 
             return {

src/Materials/Textures/texture.ts

@@ -286,7 +286,7 @@ declare type RenderTargetTexture = import ("Materials/Textures/renderTargetTextu
 
             let load = () => {
                 if (this._texture && this._texture._invertVScale) {
-                    this.vScale *= -1;
+                    this.vScale = -1;
                 }
                 if (this.onLoadObservable.hasObservers()) {
                     this.onLoadObservable.notifyObservers(this);

tests/nullEngine/app.js

@@ -1,5 +1,5 @@
 var BABYLON = require("../../dist/preview release/babylon.max");
-// var LOADERS = require("../../dist/preview release/loaders/babylonjs.loaders");
+var LOADERS = require("../../dist/preview release/loaders/babylonjs.loaders");
 global.XMLHttpRequest = require('xhr2').XMLHttpRequest;
 
 var engine = new BABYLON.NullEngine();
@@ -32,7 +32,7 @@ var engine = new BABYLON.NullEngine();
 //         scene.render();
 //     })
 // });
-    
+
 // Setup environment
 // var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene);
 // camera.lowerBetaLimit = 0.1;
@@ -100,29 +100,29 @@ var engine = new BABYLON.NullEngine();
 // });
 // 	//Adding a light
 // 	var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
-    
+
 //         //Adding an Arc Rotate Camera
 //         var camera = new BABYLON.ArcRotateCamera("Camera", -0.5, 2.2, 100, BABYLON.Vector3.Zero(), scene);
-    
+
 //         // The first parameter can be used to specify which mesh to import. Here we import all meshes
 //         BABYLON.SceneLoader.ImportMesh("", "https://www.babylonjs-playground.com/scenes/", "skull.babylon", scene, function (newMeshes) {
 //             // Set the target of the camera to the first imported mesh
 //             camera.target = newMeshes[0];
-    
+
 //             newMeshes[0].material = new BABYLON.StandardMaterial("skull", scene);
 //             newMeshes[0].material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
 //         });
-    
+
 //         // Create the "God Rays" effect (volumetric light scattering)
 //         var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays', 1.0, camera, null, 100, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false);
-    
+
 //         // By default it uses a billboard to render the sun, just apply the desired texture
 //         // position and scale
 //         godrays.mesh.material.diffuseTexture = new BABYLON.Texture('https://www.babylonjs-playground.com/textures/sun.png', scene, true, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
 //         godrays.mesh.material.diffuseTexture.hasAlpha = true;
 //         godrays.mesh.position = new BABYLON.Vector3(-150, 150, 150);
 //         godrays.mesh.scaling = new BABYLON.Vector3(350, 350, 350);
-    
+
 //         light.position = godrays.mesh.position;
 
 // engine.runRenderLoop(function() {
@@ -140,7 +140,7 @@ var engine = new BABYLON.NullEngine();
 //    // engine.runRenderLoop(function() {
 //      //   scene.render();
 //     //});
-  
+
 //   }, progress => {}, (scene, err) => console.error('error:', err));
 // var scene = new BABYLON.Scene(engine);
 // var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);
@@ -222,95 +222,122 @@ var engine = new BABYLON.NullEngine();
 
 // assetsManager.load();
 
-var scene = new BABYLON.Scene(engine);
-var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 1,  Math.PI / 1, 5, BABYLON.Vector3.Zero(), scene);
-camera.setPosition(new BABYLON.Vector3(-800,1200,-2000));
-camera.setTarget(BABYLON.Vector3.Zero());
-var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
-light.intensity = 1;
+// var scene = new BABYLON.Scene(engine);
+// var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 1,  Math.PI / 1, 5, BABYLON.Vector3.Zero(), scene);
+// camera.setPosition(new BABYLON.Vector3(-800,1200,-2000));
+// camera.setTarget(BABYLON.Vector3.Zero());
+// var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
+// light.intensity = 1;
 
 
-function createPart(name,opt,parent){
+// function createPart(name,opt,parent){
 
-    var part = BABYLON.MeshBuilder.CreateBox(name, opt.size, scene);
-    part.position = new BABYLON.Vector3(opt.pos.x, opt.pos.y, opt.pos.z);
+//     var part = BABYLON.MeshBuilder.CreateBox(name, opt.size, scene);
+//     part.position = new BABYLON.Vector3(opt.pos.x, opt.pos.y, opt.pos.z);
 
-    let mate = new BABYLON.StandardMaterial('mat-'+name, scene);
+//     let mate = new BABYLON.StandardMaterial('mat-'+name, scene);
 
-    if(parent) {
-        mate.specularPower = 200;
-        mate.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-        mate.diffuseTexture = new BABYLON.Texture(opt.mat.url,scene);
-        mate.diffuseTexture.wAng = opt.mat.grain*Math.PI/180;
-        part.parent = parent;
-    }else{
-        mate.alpha = 0;
-    }
+//     if(parent) {
+//         mate.specularPower = 200;
+//         mate.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+//         mate.diffuseTexture = new BABYLON.Texture(opt.mat.url,scene);
+//         mate.diffuseTexture.wAng = opt.mat.grain*Math.PI/180;
+//         part.parent = parent;
+//     }else{
+//         mate.alpha = 0;
+//     }
 
-    part.material = mate;
-
-    return part;
-}
-
-
-
-var parent;
-
-function createUnit(x,y,z,b){
-
-    var item = {
-        size:{width:x,depth:y,height:z},
-        pos:{x:0,y:0,z:0},
-        mat:{url:false,grain:0},
-        child:{
-            left:{
-                size:{width:b,depth:y,height:z},
-                pos:{x:-(x-b)/2,y:0,z:0},
-                mat:{url:"/playground/textures/crate.png",grain:90}
-            },
-            right:{
-                size:{width:b,depth:y,height:z},
-                pos:{x:(x-b)/2,y:0,z:0},
-                mat:{url:"/playground/textures/crate.png",grain:90}
-            },
-            top:{
-                size:{width:x-(b*2),depth:y,height:b},
-                pos:{x:0,y:(z-b-1)/2,z:0},
-                mat:{url:"/playground/textures/albedo.png",grain:0}
-            },
-            bottom:{
-                size:{width:x-(b*2),depth:y,height:b},
-                pos:{x:0,y:-(z-b-1)/2,z:0},
-                mat:{url:"/playground/textures/albedo.png",grain:0}
-            },
-            back:{
-                size:{width:x-(b*2),depth:b,height:z-(b*2)-1},
-                pos:{x:0,y:0,z:(y-b)/2-20},
-                mat:{url:"/playground/textures/albedo.png",grain:0}
-            },
-            shelf:{
-                size:{width:x-(b*2)-1,depth:y-b-30,height:b},
-                pos:{x:0,y:0,z:-((b+20)/2)+5},
-                mat:{url:"textures/crate.png",grain:45}
-            }
-        }
-    };
+//     part.material = mate;
+
+//     return part;
+// }
+
+
+
+// var parent;
+
+// function createUnit(x,y,z,b){
+
+//     var item = {
+//         size:{width:x,depth:y,height:z},
+//         pos:{x:0,y:0,z:0},
+//         mat:{url:false,grain:0},
+//         child:{
+//             left:{
+//                 size:{width:b,depth:y,height:z},
+//                 pos:{x:-(x-b)/2,y:0,z:0},
+//                 mat:{url:"/playground/textures/crate.png",grain:90}
+//             },
+//             right:{
+//                 size:{width:b,depth:y,height:z},
+//                 pos:{x:(x-b)/2,y:0,z:0},
+//                 mat:{url:"/playground/textures/crate.png",grain:90}
+//             },
+//             top:{
+//                 size:{width:x-(b*2),depth:y,height:b},
+//                 pos:{x:0,y:(z-b-1)/2,z:0},
+//                 mat:{url:"/playground/textures/albedo.png",grain:0}
+//             },
+//             bottom:{
+//                 size:{width:x-(b*2),depth:y,height:b},
+//                 pos:{x:0,y:-(z-b-1)/2,z:0},
+//                 mat:{url:"/playground/textures/albedo.png",grain:0}
+//             },
+//             back:{
+//                 size:{width:x-(b*2),depth:b,height:z-(b*2)-1},
+//                 pos:{x:0,y:0,z:(y-b)/2-20},
+//                 mat:{url:"/playground/textures/albedo.png",grain:0}
+//             },
+//             shelf:{
+//                 size:{width:x-(b*2)-1,depth:y-b-30,height:b},
+//                 pos:{x:0,y:0,z:-((b+20)/2)+5},
+//                 mat:{url:"textures/crate.png",grain:45}
+//             }
+//         }
+//     };
 
-    if(parent){
-        parent.dispose();
-    }
-    
-    parent = createPart("Unit",item,false);
+//     if(parent){
+//         parent.dispose();
+//     }
 
-    Object.keys(item.child).forEach(function(key) {
-        createPart(key,item.child[key],parent);
-    });
+//     parent = createPart("Unit",item,false);
+
+//     Object.keys(item.child).forEach(function(key) {
+//         createPart(key,item.child[key],parent);
+//     });
 
-    return item;
-}
+//     return item;
+// }
 
-createUnit(600,300,900,18);
+// createUnit(600,300,900,18);
+
+
+// var serialized = BABYLON.SceneSerializer.SerializeMesh(parent, true, true);
+// console.log(serialized);
+
+var scene = new BABYLON.Scene(engine);
 
+var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
+
+var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
+
+BABYLON.SceneLoader.ImportMesh("", "https://playground.babylonjs.com/scenes/", "skull.babylon", scene, function(newMeshes) {
+    camera.target = newMeshes[0];
+
+    console.log("Meshes loaded from babylon file: " + newMeshes.length);
+    for (var index = 0; index < newMeshes.length; index++) {
+        console.log(newMeshes[index].toString());
+    }
+
+    BABYLON.SceneLoader.ImportMesh("", "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function(meshes) {
+        console.log("Meshes loaded from gltf file: " + meshes.length);
+        for (var index = 0; index < meshes.length; index++) {
+            console.log(meshes[index].toString());
+        }
+    });
 
-var serialized = BABYLON.SceneSerializer.SerializeMesh(parent, true, true);
-console.log(serialized);
+    console.log("render started")
+    engine.runRenderLoop(function() {
+        scene.render();
+    })
+});

tests/validation/config.json

@@ -246,7 +246,7 @@
     },
     {
       "title": "Advanced shadows",
-      "renderCount": 2,
+      "renderCount": 20,
       "scriptToRun": "/Demos/AdvancedShadows/advancedShadows.js",
       "functionToCall": "CreateAdvancedShadowsTestScene",
       "referenceImage": "advancedShadows.png",