Nightly

dist/preview release/babylon.max.js

@@ -13794,23 +13794,29 @@ var BABYLON;
          * @param clearColor defines the clear color
          */
         Engine.prototype.scissorClear = function (x, y, width, height, clearColor) {
+            this.enableScissor(x, y, width, height);
+            this.clear(clearColor, true, true, true);
+            this.disableScissor();
+        };
+        /**
+         * Enable scissor test on a specific rectangle (ie. render will only be executed on a specific portion of the screen)
+         * @param x defines the x-coordinate of the top left corner of the clear rectangle
+         * @param y defines the y-coordinate of the corner of the clear rectangle
+         * @param width defines the width of the clear rectangle
+         * @param height defines the height of the clear rectangle
+         */
+        Engine.prototype.enableScissor = function (x, y, width, height) {
             var gl = this._gl;
-            // Save state
-            var curScissor = gl.getParameter(gl.SCISSOR_TEST);
-            var curScissorBox = gl.getParameter(gl.SCISSOR_BOX);
             // Change state
             gl.enable(gl.SCISSOR_TEST);
             gl.scissor(x, y, width, height);
-            // Clear
-            this.clear(clearColor, true, true, true);
-            // Restore state
-            gl.scissor(curScissorBox[0], curScissorBox[1], curScissorBox[2], curScissorBox[3]);
-            if (curScissor === true) {
-                gl.enable(gl.SCISSOR_TEST);
-            }
-            else {
-                gl.disable(gl.SCISSOR_TEST);
-            }
+        };
+        /**
+         * Disable previously set scissor test rectangle
+         */
+        Engine.prototype.disableScissor = function () {
+            var gl = this._gl;
+            gl.disable(gl.SCISSOR_TEST);
         };
         /** @hidden */
         Engine.prototype._viewport = function (x, y, width, height) {

dist/preview release/babylon.no-module.max.js

@@ -13761,23 +13761,29 @@ var BABYLON;
          * @param clearColor defines the clear color
          */
         Engine.prototype.scissorClear = function (x, y, width, height, clearColor) {
+            this.enableScissor(x, y, width, height);
+            this.clear(clearColor, true, true, true);
+            this.disableScissor();
+        };
+        /**
+         * Enable scissor test on a specific rectangle (ie. render will only be executed on a specific portion of the screen)
+         * @param x defines the x-coordinate of the top left corner of the clear rectangle
+         * @param y defines the y-coordinate of the corner of the clear rectangle
+         * @param width defines the width of the clear rectangle
+         * @param height defines the height of the clear rectangle
+         */
+        Engine.prototype.enableScissor = function (x, y, width, height) {
             var gl = this._gl;
-            // Save state
-            var curScissor = gl.getParameter(gl.SCISSOR_TEST);
-            var curScissorBox = gl.getParameter(gl.SCISSOR_BOX);
             // Change state
             gl.enable(gl.SCISSOR_TEST);
             gl.scissor(x, y, width, height);
-            // Clear
-            this.clear(clearColor, true, true, true);
-            // Restore state
-            gl.scissor(curScissorBox[0], curScissorBox[1], curScissorBox[2], curScissorBox[3]);
-            if (curScissor === true) {
-                gl.enable(gl.SCISSOR_TEST);
-            }
-            else {
-                gl.disable(gl.SCISSOR_TEST);
-            }
+        };
+        /**
+         * Disable previously set scissor test rectangle
+         */
+        Engine.prototype.disableScissor = function () {
+            var gl = this._gl;
+            gl.disable(gl.SCISSOR_TEST);
         };
         /** @hidden */
         Engine.prototype._viewport = function (x, y, width, height) {

dist/preview release/es6.js

@@ -13761,23 +13761,29 @@ var BABYLON;
          * @param clearColor defines the clear color
          */
         Engine.prototype.scissorClear = function (x, y, width, height, clearColor) {
+            this.enableScissor(x, y, width, height);
+            this.clear(clearColor, true, true, true);
+            this.disableScissor();
+        };
+        /**
+         * Enable scissor test on a specific rectangle (ie. render will only be executed on a specific portion of the screen)
+         * @param x defines the x-coordinate of the top left corner of the clear rectangle
+         * @param y defines the y-coordinate of the corner of the clear rectangle
+         * @param width defines the width of the clear rectangle
+         * @param height defines the height of the clear rectangle
+         */
+        Engine.prototype.enableScissor = function (x, y, width, height) {
             var gl = this._gl;
-            // Save state
-            var curScissor = gl.getParameter(gl.SCISSOR_TEST);
-            var curScissorBox = gl.getParameter(gl.SCISSOR_BOX);
             // Change state
             gl.enable(gl.SCISSOR_TEST);
             gl.scissor(x, y, width, height);
-            // Clear
-            this.clear(clearColor, true, true, true);
-            // Restore state
-            gl.scissor(curScissorBox[0], curScissorBox[1], curScissorBox[2], curScissorBox[3]);
-            if (curScissor === true) {
-                gl.enable(gl.SCISSOR_TEST);
-            }
-            else {
-                gl.disable(gl.SCISSOR_TEST);
-            }
+        };
+        /**
+         * Disable previously set scissor test rectangle
+         */
+        Engine.prototype.disableScissor = function () {
+            var gl = this._gl;
+            gl.disable(gl.SCISSOR_TEST);
         };
         /** @hidden */
         Engine.prototype._viewport = function (x, y, width, height) {

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

@@ -793,8 +793,6 @@ declare module BABYLON.GUI {
             protected _adaptWidthToChildren: boolean;
             /** @hidden */
             protected _adaptHeightToChildren: boolean;
-            /** @hidden */
-            protected _rebuildLayout: boolean;
             /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
             adaptHeightToChildren: boolean;
             /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
@@ -926,6 +924,8 @@ declare module BABYLON.GUI {
             protected _isEnabled: boolean;
             protected _disabledColor: string;
             /** @hidden */
+            protected _rebuildLayout: boolean;
+            /** @hidden */
             _isClipped: boolean;
             /** @hidden */
             _tag: any;
@@ -1642,6 +1642,7 @@ declare module BABYLON.GUI {
             processKeyboard(evt: KeyboardEvent): void;
             _draw(context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            _onPointerMove(target: Control, coordinates: BABYLON.Vector2): void;
             _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
             protected _beforeRenderText(text: string): string;
             dispose(): void;
@@ -2045,8 +2046,6 @@ declare module BABYLON.GUI {
             barColor: string;
             /** Gets or sets the size of the bar */
             barSize: number;
-            /** Gets or sets the bar color */
-            barBorderColor: string;
             /** Gets or sets the bar background */
             barBackground: string;
             _link(host: AdvancedDynamicTexture): void;

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

@@ -892,8 +892,6 @@ declare module 'babylonjs-gui/2D/controls/container' {
             protected _adaptWidthToChildren: boolean;
             /** @hidden */
             protected _adaptHeightToChildren: boolean;
-            /** @hidden */
-            protected _rebuildLayout: boolean;
             /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
             adaptHeightToChildren: boolean;
             /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
@@ -1033,6 +1031,8 @@ declare module 'babylonjs-gui/2D/controls/control' {
             protected _isEnabled: boolean;
             protected _disabledColor: string;
             /** @hidden */
+            protected _rebuildLayout: boolean;
+            /** @hidden */
             _isClipped: boolean;
             /** @hidden */
             _tag: any;
@@ -1767,6 +1767,7 @@ declare module 'babylonjs-gui/2D/controls/inputText' {
             processKeyboard(evt: KeyboardEvent): void;
             _draw(context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
+            _onPointerMove(target: Control, coordinates: Vector2): void;
             _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
             protected _beforeRenderText(text: string): string;
             dispose(): void;
@@ -2197,8 +2198,6 @@ declare module 'babylonjs-gui/2D/controls/scrollViewers/scrollViewer' {
             barColor: string;
             /** Gets or sets the size of the bar */
             barSize: number;
-            /** Gets or sets the bar color */
-            barBorderColor: string;
             /** Gets or sets the bar background */
             barBackground: string;
             _link(host: AdvancedDynamicTexture): void;
@@ -3954,8 +3953,6 @@ declare module BABYLON.GUI {
             protected _adaptWidthToChildren: boolean;
             /** @hidden */
             protected _adaptHeightToChildren: boolean;
-            /** @hidden */
-            protected _rebuildLayout: boolean;
             /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
             adaptHeightToChildren: boolean;
             /** Gets or sets a boolean indicating if the container should try to adapt to its children width */
@@ -4087,6 +4084,8 @@ declare module BABYLON.GUI {
             protected _isEnabled: boolean;
             protected _disabledColor: string;
             /** @hidden */
+            protected _rebuildLayout: boolean;
+            /** @hidden */
             _isClipped: boolean;
             /** @hidden */
             _tag: any;
@@ -4803,6 +4802,7 @@ declare module BABYLON.GUI {
             processKeyboard(evt: KeyboardEvent): void;
             _draw(context: CanvasRenderingContext2D): void;
             _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+            _onPointerMove(target: Control, coordinates: BABYLON.Vector2): void;
             _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
             protected _beforeRenderText(text: string): string;
             dispose(): void;
@@ -5206,8 +5206,6 @@ declare module BABYLON.GUI {
             barColor: string;
             /** Gets or sets the size of the bar */
             barSize: number;
-            /** Gets or sets the bar color */
-            barBorderColor: string;
             /** Gets or sets the bar background */
             barBackground: string;
             _link(host: AdvancedDynamicTexture): void;

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

@@ -168,11 +168,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -189,11 +189,11 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -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

@@ -200,11 +200,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -221,11 +221,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -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

@@ -37,6 +37,7 @@
 
 ### Core Engine
 
+- Added support for Scissor testing ([Deltakosh](https://github.com/deltakosh))
 - Added `Engine.onNewSceneAddedObservable` ([Deltakosh](https://github.com/deltakosh))
 - Added new `PassCubePostProcess` to render cube map content ([Deltakosh](https://github.com/deltakosh))
 - Added support for utility layer for SkeletonViewer ([Deltakosh](https://github.com/deltakosh))

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

@@ -18,8 +18,6 @@ export class Container extends Control {
     protected _adaptWidthToChildren = false;
     /** @hidden */
     protected _adaptHeightToChildren = false;
-    /** @hidden */
-    protected _rebuildLayout = false;
 
     /** Gets or sets a boolean indicating if the container should try to adapt to its children height */
     public get adaptHeightToChildren(): boolean {

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

@@ -82,6 +82,8 @@ export class Control {
     private _downPointerIds: { [id: number]: boolean } = {};
     protected _isEnabled = true;
     protected _disabledColor = "#9a9a9a";
+    /** @hidden */
+    protected _rebuildLayout = false;
 
     /** @hidden */
     public _isClipped = false;
@@ -1170,7 +1172,17 @@ export class Control {
 
         this._applyStates(context);
 
-        this._processMeasures(parentMeasure, context);
+        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 uniqueId=${this.uniqueId})`);
+        }
 
         context.restore();
 

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

@@ -252,14 +252,14 @@ export class TextBlock extends Control {
                 let newWidth = this.paddingLeftInPixels + this.paddingRightInPixels + maxLineWidth;
                 if (newWidth !== this._width.internalValue) {
                     this._width.updateInPlace(newWidth, ValueAndUnit.UNITMODE_PIXEL);
-                    this._isDirty = true;
+                    this._rebuildLayout = true;
                 }
             }
             let newHeight = this.paddingTopInPixels + this.paddingBottomInPixels + this._fontOffset.height * this._lines.length;
 
             if (newHeight !== this._height.internalValue) {
                 this._height.updateInPlace(newHeight, ValueAndUnit.UNITMODE_PIXEL);
-                this._isDirty = true;
+                this._rebuildLayout = true;
             }
         }
     }

src/Engine/babylon.engine.ts

@@ -1994,27 +1994,33 @@ module BABYLON {
          * @param clearColor defines the clear color
          */
         public scissorClear(x: number, y: number, width: number, height: number, clearColor: Color4): void {
-            let gl = this._gl;
+            this.enableScissor(x, y, width, height);
+            this.clear(clearColor, true, true, true);
+            this.disableScissor();
+        }
 
-            // Save state
-            var curScissor = gl.getParameter(gl.SCISSOR_TEST);
-            var curScissorBox = gl.getParameter(gl.SCISSOR_BOX);
+        /**
+         * Enable scissor test on a specific rectangle (ie. render will only be executed on a specific portion of the screen)
+         * @param x defines the x-coordinate of the top left corner of the clear rectangle
+         * @param y defines the y-coordinate of the corner of the clear rectangle
+         * @param width defines the width of the clear rectangle
+         * @param height defines the height of the clear rectangle
+         */
+        public enableScissor(x: number, y: number, width: number, height: number): void {
+            let gl = this._gl;
 
             // Change state
             gl.enable(gl.SCISSOR_TEST);
             gl.scissor(x, y, width, height);
+        }
 
-            // Clear
-            this.clear(clearColor, true, true, true);
-
-            // Restore state
-            gl.scissor(curScissorBox[0], curScissorBox[1], curScissorBox[2], curScissorBox[3]);
+        /**
+         * Disable previously set scissor test rectangle
+         */
+        public disableScissor() {
+            let gl = this._gl;
 
-            if (curScissor === true) {
-                gl.enable(gl.SCISSOR_TEST);
-            } else {
-                gl.disable(gl.SCISSOR_TEST);
-            }
+            gl.disable(gl.SCISSOR_TEST);
         }
 
         private _viewportCached = new BABYLON.Vector4(0, 0, 0, 0);