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.15";
+                return "4.0.0-alpha.16";
             },
             enumerable: true,
             configurable: true
@@ -32618,7 +32618,7 @@ var BABYLON;
             scene.getEngine().onBeforeTextureInitObservable.notifyObservers(_this);
             var load = function () {
                 if (_this._texture && _this._texture._invertVScale) {
-                    _this.vScale *= -1;
+                    _this.vScale = -1;
                 }
                 if (_this.onLoadObservable.hasObservers()) {
                     _this.onLoadObservable.notifyObservers(_this);

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.15",
+    "version": "4.0.0-alpha.16",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

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

@@ -172,13 +172,21 @@ declare module BABYLON.GUI {
              */
             executeOnAllControls(func: (control: Control) => void, container?: Container): void;
             /**
+                * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
+                */
+            useInvalidateRectOptimization: boolean;
+            /**
                 * 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
+                * @param clearMinX left most position of the rectangle to clear in the texture
+                * @param clearMinY top most position of the rectangle to clear in the texture
+                * @param clearMaxX right most position of the rectangle to clear in the texture
+                * @param clearMaxY bottom most position of the rectangle to clear in the texture
+                * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
                 */
-            invalidateRect(minX: number, minY: number, maxX: number, maxY: number): void;
+            invalidateRect(clearMinX: number, clearMinY: number, clearMaxX: number, clearMaxY: number, minX: number, minY: number, maxX: number, maxY: number): void;
             /**
              * Marks the texture as dirty forcing a complete update
              */
@@ -917,13 +925,15 @@ declare module BABYLON.GUI {
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
-            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
+            protected _localDraw(context: CanvasRenderingContext2D): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
             protected _beforeLayout(): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
+            protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+            /** @hidden */
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
             protected _postMeasure(): void;
             /** @hidden */
             _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
@@ -976,6 +986,8 @@ declare module BABYLON.GUI {
             /** @hidden */
             _tempParentMeasure: Measure;
             /** @hidden */
+            _tempCurrentMeasure: Measure;
+            /** @hidden */
             protected _cachedParentMeasure: Measure;
             /** @hidden */
             _left: ValueAndUnit;
@@ -1333,7 +1345,7 @@ declare module BABYLON.GUI {
             /** @hidden */
             _intersectsRect(rect: Measure): boolean;
             /** @hidden */
-            protected invalidateRect(): void;
+            protected invalidateRect(left: number, top: number, right: number, bottom: number): void;
             /** @hidden */
             _markAsDirty(force?: boolean): void;
             /** @hidden */
@@ -1349,9 +1361,10 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _applyStates(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
             /** @hidden */
             protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+            protected _evaluateClippingState(parentMeasure: Measure): void;
             /** @hidden */
             _measure(): void;
             /** @hidden */
@@ -2373,7 +2386,7 @@ declare module BABYLON.GUI {
                 */
             constructor(name?: string | undefined);
             protected _getTypeName(): string;
-            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
+            protected _localDraw(context: CanvasRenderingContext2D): void;
             protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
     }

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

@@ -219,13 +219,21 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
              */
             executeOnAllControls(func: (control: Control) => void, container?: Container): void;
             /**
+                * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
+                */
+            useInvalidateRectOptimization: boolean;
+            /**
                 * 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
+                * @param clearMinX left most position of the rectangle to clear in the texture
+                * @param clearMinY top most position of the rectangle to clear in the texture
+                * @param clearMaxX right most position of the rectangle to clear in the texture
+                * @param clearMaxY bottom most position of the rectangle to clear in the texture
+                * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
                 */
-            invalidateRect(minX: number, minY: number, maxX: number, maxY: number): void;
+            invalidateRect(clearMinX: number, clearMinY: number, clearMaxX: number, clearMaxY: number, minX: number, minY: number, maxX: number, maxY: number): void;
             /**
              * Marks the texture as dirty forcing a complete update
              */
@@ -1020,13 +1028,15 @@ declare module 'babylonjs-gui/2D/controls/container' {
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
-            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
+            protected _localDraw(context: CanvasRenderingContext2D): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
             protected _beforeLayout(): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean;
+            protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+            /** @hidden */
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
             protected _postMeasure(): void;
             /** @hidden */
             _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
@@ -1087,6 +1097,8 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             _tempParentMeasure: Measure;
             /** @hidden */
+            _tempCurrentMeasure: Measure;
+            /** @hidden */
             protected _cachedParentMeasure: Measure;
             /** @hidden */
             _left: ValueAndUnit;
@@ -1444,7 +1456,7 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             _intersectsRect(rect: Measure): boolean;
             /** @hidden */
-            protected invalidateRect(): void;
+            protected invalidateRect(left: number, top: number, right: number, bottom: number): void;
             /** @hidden */
             _markAsDirty(force?: boolean): void;
             /** @hidden */
@@ -1460,9 +1472,10 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             protected _applyStates(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
             /** @hidden */
             protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+            protected _evaluateClippingState(parentMeasure: Measure): void;
             /** @hidden */
             _measure(): void;
             /** @hidden */
@@ -2542,7 +2555,7 @@ declare module 'babylonjs-gui/2D/controls/rectangle' {
                 */
             constructor(name?: string | undefined);
             protected _getTypeName(): string;
-            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
+            protected _localDraw(context: CanvasRenderingContext2D): void;
             protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
             protected _clipForChildren(context: CanvasRenderingContext2D): void;
     }
@@ -3483,13 +3496,21 @@ declare module BABYLON.GUI {
              */
             executeOnAllControls(func: (control: Control) => void, container?: Container): void;
             /**
+                * Gets or sets a boolean indicating if the InvalidateRect optimization should be turned on
+                */
+            useInvalidateRectOptimization: boolean;
+            /**
                 * 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
+                * @param clearMinX left most position of the rectangle to clear in the texture
+                * @param clearMinY top most position of the rectangle to clear in the texture
+                * @param clearMaxX right most position of the rectangle to clear in the texture
+                * @param clearMaxY bottom most position of the rectangle to clear in the texture
+                * @param minX left most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param minY top most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param maxX right most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
+                * @param maxY bottom most position of the rectangle to invalidate in absolute coordinates (not taking in account local transformation)
                 */
-            invalidateRect(minX: number, minY: number, maxX: number, maxY: number): void;
+            invalidateRect(clearMinX: number, clearMinY: number, clearMaxX: number, clearMaxY: number, minX: number, minY: number, maxX: number, maxY: number): void;
             /**
              * Marks the texture as dirty forcing a complete update
              */
@@ -4228,13 +4249,15 @@ declare module BABYLON.GUI {
             /** @hidden */
             _markAllAsDirty(): void;
             /** @hidden */
-            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
+            protected _localDraw(context: CanvasRenderingContext2D): void;
             /** @hidden */
             _link(host: AdvancedDynamicTexture): void;
             /** @hidden */
             protected _beforeLayout(): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
+            protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+            /** @hidden */
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
             protected _postMeasure(): void;
             /** @hidden */
             _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
@@ -4287,6 +4310,8 @@ declare module BABYLON.GUI {
             /** @hidden */
             _tempParentMeasure: Measure;
             /** @hidden */
+            _tempCurrentMeasure: Measure;
+            /** @hidden */
             protected _cachedParentMeasure: Measure;
             /** @hidden */
             _left: ValueAndUnit;
@@ -4644,7 +4669,7 @@ declare module BABYLON.GUI {
             /** @hidden */
             _intersectsRect(rect: Measure): boolean;
             /** @hidden */
-            protected invalidateRect(): void;
+            protected invalidateRect(left: number, top: number, right: number, bottom: number): void;
             /** @hidden */
             _markAsDirty(force?: boolean): void;
             /** @hidden */
@@ -4660,9 +4685,10 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _applyStates(context: CanvasRenderingContext2D): void;
             /** @hidden */
-            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: BABYLON.Nullable<Measure>): boolean;
+            _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean;
             /** @hidden */
             protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+            protected _evaluateClippingState(parentMeasure: Measure): void;
             /** @hidden */
             _measure(): void;
             /** @hidden */
@@ -5684,7 +5710,7 @@ declare module BABYLON.GUI {
                 */
             constructor(name?: string | undefined);
             protected _getTypeName(): string;
-            protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void;
+            protected _localDraw(context: CanvasRenderingContext2D): 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.15",
+    "version": "4.0.0-alpha.16",
     "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.15"
+        "babylonjs": "4.0.0-alpha.16"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "4.0.0-alpha.15",
+    "version": "4.0.0-alpha.16",
     "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.15",
-        "babylonjs-gui": "4.0.0-alpha.15",
-        "babylonjs-loaders": "4.0.0-alpha.15",
-        "babylonjs-serializers": "4.0.0-alpha.15"
+        "babylonjs": "4.0.0-alpha.16",
+        "babylonjs-gui": "4.0.0-alpha.16",
+        "babylonjs-loaders": "4.0.0-alpha.16",
+        "babylonjs-serializers": "4.0.0-alpha.16"
     },
     "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.15",
+    "version": "4.0.0-alpha.16",
     "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.15",
-        "babylonjs": "4.0.0-alpha.15"
+        "babylonjs-gltf2interface": "4.0.0-alpha.16",
+        "babylonjs": "4.0.0-alpha.16"
     },
     "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.15",
+    "version": "4.0.0-alpha.16",
     "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.15"
+        "babylonjs": "4.0.0-alpha.16"
     },
     "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.15",
+    "version": "4.0.0-alpha.16",
     "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.15"
+        "babylonjs": "4.0.0-alpha.16"
     },
     "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.15",
+    "version": "4.0.0-alpha.16",
     "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.15"
+        "babylonjs": "4.0.0-alpha.16"
     },
     "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.15",
+    "version": "4.0.0-alpha.16",
     "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.15",
-        "babylonjs-gltf2interface": "4.0.0-alpha.15"
+        "babylonjs": "4.0.0-alpha.16",
+        "babylonjs-gltf2interface": "4.0.0-alpha.16"
     },
     "engines": {
         "node": "*"

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

@@ -437,49 +437,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    /**
-        * The data structure of a telemetry event.
-        */
-    export interface TelemetryData {
-            event: string;
-            session: string;
-            date: Date;
-            now: number;
-            viewerId?: string;
-            detail: any;
-    }
-    /**
-        * Receives Telemetry events and raises events to the API
-        */
-    export class TelemetryManager {
-            onEventBroadcastedObservable: BABYLON.Observable<TelemetryData>;
-            /**
-                * Receives a telemetry event
-                * @param event The name of the Telemetry event
-                * @param details An additional value, or an object containing a list of property/value pairs
-                */
-            readonly broadcast: (event: string, viewerId?: string | undefined, details?: any) => void;
-            /**
-                * Log a Telemetry event for errors raised on the WebGL context.
-                * @param engine The Babylon engine with the WebGL context.
-                */
-            flushWebGLErrors(engine: BABYLON.Engine, viewerId?: string): void;
-            /**
-                * Enable or disable telemetry events
-                * @param enabled Boolan, true if events are enabled
-                */
-            enable: boolean;
-            /**
-                * Returns the current session ID or creates one if it doesn't exixt
-                * @return The current session ID
-                */
-            readonly session: string;
-            /**
-                * Disposes the telemetry manager
-                */
-            dispose(): void;
-    }
-    export const telemetryManager: TelemetryManager;
 }
 declare module BabylonViewer {
     /**

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

@@ -480,50 +480,7 @@ declare module 'babylonjs-viewer/viewer/viewer' {
 }
 
 declare module 'babylonjs-viewer/managers/telemetryManager' {
-    import { Engine, Observable } from "babylonjs";
-    /**
-        * The data structure of a telemetry event.
-        */
-    export interface TelemetryData {
-            event: string;
-            session: string;
-            date: Date;
-            now: number;
-            viewerId?: string;
-            detail: any;
-    }
-    /**
-        * Receives Telemetry events and raises events to the API
-        */
-    export class TelemetryManager {
-            onEventBroadcastedObservable: Observable<TelemetryData>;
-            /**
-                * Receives a telemetry event
-                * @param event The name of the Telemetry event
-                * @param details An additional value, or an object containing a list of property/value pairs
-                */
-            readonly broadcast: (event: string, viewerId?: string | undefined, details?: any) => void;
-            /**
-                * Log a Telemetry event for errors raised on the WebGL context.
-                * @param engine The Babylon engine with the WebGL context.
-                */
-            flushWebGLErrors(engine: Engine, viewerId?: string): void;
-            /**
-                * Enable or disable telemetry events
-                * @param enabled Boolan, true if events are enabled
-                */
-            enable: boolean;
-            /**
-                * Returns the current session ID or creates one if it doesn't exixt
-                * @return The current session ID
-                */
-            readonly session: string;
-            /**
-                * Disposes the telemetry manager
-                */
-            dispose(): void;
-    }
-    export const telemetryManager: TelemetryManager;
+    
 }
 
 declare module 'babylonjs-viewer/loader/modelLoader' {

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

@@ -243,7 +243,7 @@ export class Container extends Control {
     }
 
     /** @hidden */
-    protected _localDraw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void {
+    protected _localDraw(context: CanvasRenderingContext2D): void {
         if (this._background) {
             context.save();
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -274,11 +274,23 @@ export class Container extends Control {
     }
 
     /** @hidden */
-    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean {
+    protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+        if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
+            super._processMeasures(parentMeasure, context);
+            this._evaluateClippingState(parentMeasure);
+        }
+    }
+
+    /** @hidden */
+    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean {
         if (!this.isVisible || this.notRenderable) {
             return false;
         }
 
+        if (this._isDirty) {
+            this._tempCurrentMeasure.copyFrom(this._currentMeasure);
+        }
+
         let rebuildCount = 0;
 
         context.save();
@@ -295,15 +307,9 @@ 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, invalidatedRectangle)) {
+                    if (child._layout(this._measureForChildren, context)) {
 
                         if (this.adaptWidthToChildren && child._width.isPixel) {
                             computedWidth = Math.max(computedWidth, child._currentMeasure.width);
@@ -334,12 +340,21 @@ export class Container extends Control {
         while (this._rebuildLayout && rebuildCount < 3);
 
         if (rebuildCount >= 3) {
-            Logger.Error(`Layout cycle detected in GUI (Container uniqueId=${this.uniqueId})`);
+            BABYLON.Tools.Error(`Layout cycle detected in GUI (Container name=${this.name}, uniqueId=${this.uniqueId})`);
         }
 
         context.restore();
 
-        this._isDirty = false;
+        if (this._isDirty) {
+            this.invalidateRect(
+                Math.min(this._currentMeasure.left, this._tempCurrentMeasure.left),
+                Math.min(this._currentMeasure.top, this._tempCurrentMeasure.top),
+                Math.max(this._currentMeasure.left + this._currentMeasure.width, this._tempCurrentMeasure.left + this._tempCurrentMeasure.width) - 1,
+                Math.max(this._currentMeasure.top + this._currentMeasure.height, this._tempCurrentMeasure.top + this._tempCurrentMeasure.height) - 1
+            );
+
+            this._isDirty = false;
+        }
 
         return true;
     }
@@ -351,7 +366,7 @@ export class Container extends Control {
     /** @hidden */
     public _draw(context: CanvasRenderingContext2D, invalidatedRectangle?: Measure): void {
 
-        this._localDraw(context, invalidatedRectangle);
+        this._localDraw(context);
 
         if (this.clipChildren) {
             this._clipForChildren(context);
@@ -361,7 +376,7 @@ export class Container extends Control {
             // Only redraw parts of the screen that are invalidated
             if (invalidatedRectangle) {
                 if (!child._intersectsRect(invalidatedRectangle)) {
-                    continue;
+                    // continue;
                 }
             }
             child._render(context, invalidatedRectangle);

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

@@ -50,6 +50,8 @@ export class Control {
     /** @hidden */
     public _tempParentMeasure = Measure.Empty();
     /** @hidden */
+    public _tempCurrentMeasure = Measure.Empty();
+    /** @hidden */
     protected _cachedParentMeasure = Measure.Empty();
     private _paddingLeft = new ValueAndUnit(0);
     private _paddingRight = new ValueAndUnit(0);
@@ -1075,36 +1077,49 @@ 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;
+        if (this._currentMeasure.left >= rect.left + rect.width) {
+            return false;
+        }
+
+        if (this._currentMeasure.top >= rect.top + rect.height) {
+            return false;
+        }
+
+        if (this._currentMeasure.left + this._currentMeasure.width <= rect.left) {
+            return false;
+        }
+
+        if (this._currentMeasure.top + this._currentMeasure.height <= rect.top) {
+            return false;
+        }
+
+        return true;
     }
 
     /** @hidden */
-    protected invalidateRect() {
-        if (this.host) {
-            // Compute aabb of rotated container box (eg. to handle rotation)
-            var rectanglePoints = Polygon.Rectangle(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.left + this._currentMeasure.width, this._currentMeasure.top + this._currentMeasure.height);
+    protected invalidateRect(left: number, top: number, right: number, bottom: number) {
+        if (this.host && this.host.useInvalidateRectOptimization) {
+            // Compute AABB of transformed container box (eg. to handle rotation and scaling)
+            var rectanglePoints = BABYLON.Polygon.Rectangle(left, top, right, bottom);
             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]);
+                this._transformMatrix.transformCoordinates(rectanglePoints[i].x, rectanglePoints[i].y, rectanglePoints[i]);
                 min.x = Math.min(min.x, rectanglePoints[i].x);
                 min.y = Math.min(min.y, rectanglePoints[i].y);
                 max.x = Math.max(max.x, rectanglePoints[i].x);
                 max.y = Math.max(max.y, rectanglePoints[i].y);
             }
-            this._invertTransformMatrix.invertToRef(this._invertTransformMatrix);
 
             this.host.invalidateRect(
                 min.x,
                 min.y,
                 max.x,
-                max.y
+                max.y,
+                left,
+                top,
+                right,
+                bottom
             );
         }
     }
@@ -1120,7 +1135,6 @@ export class Control {
         // Redraw only this rectangle
         if (this._host) {
             this._host.markAsDirty();
-            this.invalidateRect();
         }
     }
 
@@ -1221,27 +1235,39 @@ export class Control {
     }
 
     /** @hidden */
-    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D, invalidatedRectangle?: Nullable<Measure>): boolean {
+    public _layout(parentMeasure: Measure, context: CanvasRenderingContext2D): boolean {
         if (!this.isVisible || this.notRenderable) {
             return false;
         }
-        context.save();
 
-        this._applyStates(context);
+        if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
+            this._tempCurrentMeasure.copyFrom(this._currentMeasure);
 
-        let rebuildCount = 0;
-        do {
-            this._rebuildLayout = false;
-            this._processMeasures(parentMeasure, context);
-            rebuildCount++;
-        }
-        while (this._rebuildLayout && rebuildCount < 3);
+            context.save();
 
-        if (rebuildCount >= 3) {
-            Logger.Error(`Layout cycle detected in GUI (Control uniqueId=${this.uniqueId})`);
-        }
+            this._applyStates(context);
 
-        context.restore();
+            let rebuildCount = 0;
+            do {
+                this._rebuildLayout = false;
+                this._processMeasures(parentMeasure, context);
+                rebuildCount++;
+            }
+            while (this._rebuildLayout && rebuildCount < 3);
+
+            if (rebuildCount >= 3) {
+                BABYLON.Tools.Error(`Layout cycle detected in GUI (Control name=${this.name}, uniqueId=${this.uniqueId})`);
+            }
+
+            context.restore();
+            this.invalidateRect(
+                Math.min(this._currentMeasure.left, this._tempCurrentMeasure.left),
+                Math.min(this._currentMeasure.top, this._tempCurrentMeasure.top),
+                Math.max(this._currentMeasure.left + this._currentMeasure.width, this._tempCurrentMeasure.left + this._tempCurrentMeasure.width),
+                Math.max(this._currentMeasure.top + this._currentMeasure.height, this._tempCurrentMeasure.top + this._tempCurrentMeasure.height)
+            );
+            this._evaluateClippingState(parentMeasure);
+        }
 
         this._wasDirty = this._isDirty;
         this._isDirty = false;
@@ -1251,31 +1277,31 @@ export class Control {
 
     /** @hidden */
     protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-        if (this._isDirty || !this._cachedParentMeasure.isEqualsTo(parentMeasure)) {
-            this._currentMeasure.copyFrom(parentMeasure);
+        this._currentMeasure.copyFrom(parentMeasure);
 
-            // Let children take some pre-measurement actions
-            this._preMeasure(parentMeasure, context);
+        // Let children take some pre-measurement actions
+        this._preMeasure(parentMeasure, context);
 
-            this._measure();
-            this._computeAlignment(parentMeasure, context);
+        this._measure();
+        this._computeAlignment(parentMeasure, context);
 
-            // Convert to int values
-            this._currentMeasure.left = this._currentMeasure.left | 0;
-            this._currentMeasure.top = this._currentMeasure.top | 0;
-            this._currentMeasure.width = this._currentMeasure.width | 0;
-            this._currentMeasure.height = this._currentMeasure.height | 0;
+        // Convert to int values
+        this._currentMeasure.left = this._currentMeasure.left | 0;
+        this._currentMeasure.top = this._currentMeasure.top | 0;
+        this._currentMeasure.width = this._currentMeasure.width | 0;
+        this._currentMeasure.height = this._currentMeasure.height | 0;
 
-            // Let children add more features
-            this._additionalProcessing(parentMeasure, context);
+        // Let children add more features
+        this._additionalProcessing(parentMeasure, context);
 
-            this._cachedParentMeasure.copyFrom(parentMeasure);
+        this._cachedParentMeasure.copyFrom(parentMeasure);
 
-            if (this.onDirtyObservable.hasObservers()) {
-                this.onDirtyObservable.notifyObservers(this);
-            }
+        if (this.onDirtyObservable.hasObservers()) {
+            this.onDirtyObservable.notifyObservers(this);
         }
+    }
 
+    protected _evaluateClippingState(parentMeasure: Measure) {
         if (this.parent && this.parent.clipChildren) {
             // Early clip
             if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
@@ -1416,6 +1442,7 @@ export class Control {
     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);

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

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

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

@@ -1,6 +1,7 @@
 import { Container } from "./container";
 import { Measure } from "../measure";
 import { Control } from "./control";
+import { Tools } from "babylonjs";
 
 /**
  * Class used to create a 2D stack panel container
@@ -126,7 +127,11 @@ export class StackPanel extends Container {
                     child._top.ignoreAdaptiveScaling = true;
                 }
 
-                stackHeight += child._currentMeasure.height + child.paddingTopInPixels + child.paddingBottomInPixels;
+                if (child._height.isPercentage) {
+                    Tools.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using height in percentage mode inside a vertical StackPanel`);
+                } else {
+                    stackHeight += child._currentMeasure.height + child.paddingTopInPixels + child.paddingBottomInPixels;
+                }
             } else {
                 if (child.left !== stackWidth + "px") {
                     child.left = stackWidth + "px";
@@ -134,7 +139,11 @@ export class StackPanel extends Container {
                     child._left.ignoreAdaptiveScaling = true;
                 }
 
-                stackWidth += child._currentMeasure.width + child.paddingLeftInPixels + child.paddingRightInPixels;
+                if (child._width.isPercentage) {
+                    Tools.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using width in percentage mode inside a horizontal StackPanel`);
+                } else {
+                    stackWidth += child._currentMeasure.width + child.paddingLeftInPixels + child.paddingRightInPixels;
+                }
             }
         }
 

inspector/src/components/actionTabs/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx

@@ -65,6 +65,7 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
             <div>
                 <LineContainerComponent title="GENERAL">
                     <TextLineComponent label="Class" value={control.getClassName()} />
+                    <TextLineComponent label="Unique ID" value={control.uniqueId.toString()} />
                     <SliderLineComponent label="Alpha" target={control} propertyName="alpha" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         (control as any).color !== undefined &&

inspector/src/components/actionTabs/tabs/propertyGrids/gui/ellipsePropertyGridComponent.tsx

@@ -6,6 +6,7 @@ import { LockObject } from "../lockObject";
 import { Ellipse } from "babylonjs-gui";
 import { LineContainerComponent } from "../../../lineContainerComponent";
 import { FloatLineComponent } from "../../../lines/floatLineComponent";
+import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
 
 interface IEllipsePropertyGridComponentProps {
     ellipse: Ellipse,
@@ -25,6 +26,7 @@ export class EllipsePropertyGridComponent extends React.Component<IEllipseProper
             <div className="pane">
                 <CommonControlPropertyGridComponent lockObject={this.props.lockObject} control={ellipse} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 <LineContainerComponent title="ELLIPSE">
+                    <CheckBoxLineComponent label="Clip children" target={ellipse} propertyName="clipChildren" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Thickness" target={ellipse} propertyName="thickness" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
             </div>

inspector/src/components/actionTabs/tabs/propertyGrids/gui/rectanglePropertyGridComponent.tsx

@@ -6,6 +6,7 @@ import { LockObject } from "../lockObject";
 import { Rectangle } from "babylonjs-gui";
 import { LineContainerComponent } from "../../../lineContainerComponent";
 import { FloatLineComponent } from "../../../lines/floatLineComponent";
+import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
 
 interface IRectanglePropertyGridComponentProps {
     rectangle: Rectangle,
@@ -25,6 +26,7 @@ export class RectanglePropertyGridComponent extends React.Component<IRectanglePr
             <div className="pane">
                 <CommonControlPropertyGridComponent lockObject={this.props.lockObject} control={rectangle} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 <LineContainerComponent title="RECTANGLE">
+                    <CheckBoxLineComponent label="Clip children" target={rectangle} propertyName="clipChildren" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Thickness" target={rectangle} propertyName="thickness" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Corner radius" target={rectangle} propertyName="cornerRadius" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>

inspector/src/components/actionTabs/tabs/propertyGrids/gui/stackPanelPropertyGridComponent.tsx

@@ -25,6 +25,7 @@ export class StackPanelPropertyGridComponent extends React.Component<IStackPanel
             <div className="pane">
                 <CommonControlPropertyGridComponent lockObject={this.props.lockObject} control={stackPanel} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 <LineContainerComponent title="STACKPANEL">
+                    <CheckBoxLineComponent label="Clip children" target={stackPanel} propertyName="clipChildren" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Vertical" target={stackPanel} propertyName="isVertical" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
             </div>

inspector/src/components/actionTabs/tabs/propertyGrids/materials/texturePropertyGridComponent.tsx

@@ -113,6 +113,7 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                         <FloatLineComponent lockObject={this.props.lockObject} label="Ideal height" target={texture} propertyName="idealHeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                         <CheckBoxLineComponent label="Use smallest ideal" target={texture} propertyName="useSmallestIdeal" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                         <CheckBoxLineComponent label="Render at ideal size" target={texture} propertyName="renderAtIdealSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <CheckBoxLineComponent label="Invalidate Rect optimization" target={texture} propertyName="useInvalidateRectOptimization" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     </LineContainerComponent>
                 }
                 <LineContainerComponent title="TRANSFORM">

inspector/src/components/actionTabs/tabs/toolsTabComponent.tsx

@@ -125,7 +125,10 @@ export class ToolsTabComponent extends PaneComponent {
                         <ButtonLineComponent label="Generate .env texture" onClick={() => this.createEnvTexture()} />
                     }
                 </LineContainerComponent>
-                <GLTFComponent scene={scene} globalState={this.props.globalState!} />
+                {
+                    (BABYLON as any).GLTFFileLoader &&
+                    <GLTFComponent scene={scene} globalState={this.props.globalState!} />
+                }
             </div>
         );
     }

package.json

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

src/Engines/engine.ts

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