Associated with #5415

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

@@ -70,6 +70,22 @@ declare module BABYLON.GUI {
                 */
             onControlPickedObservable: BABYLON.Observable<Control>;
             /**
+                * BABYLON.Observable event triggered before layout is evaluated
+                */
+            onBeginLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
+            /**
+                * BABYLON.Observable event triggered after the layout was evaluated
+                */
+            onEndLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
+            /**
+                * BABYLON.Observable event triggered before the texture is rendered
+                */
+            onBeginRenderObservable: BABYLON.Observable<AdvancedDynamicTexture>;
+            /**
+                * 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
                 */
             premulAlpha: boolean;
@@ -249,6 +265,47 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+        * This class can be used to get instrumentation data from a AdvancedDynamicTexture object
+        */
+    export class AdvancedDynamicTextureInstrumentation implements BABYLON.IDisposable {
+            /**
+                * Define the instrumented AdvancedDynamicTexture.
+                */
+            texture: AdvancedDynamicTexture;
+            /**
+                * Gets the perf counter used to capture render time
+                */
+            readonly renderTimeCounter: BABYLON.PerfCounter;
+            /**
+                * Gets the perf counter used to capture layout time
+                */
+            readonly layoutTimeCounter: BABYLON.PerfCounter;
+            /**
+                * Enable or disable the render time capture
+                */
+            captureRenderTime: boolean;
+            /**
+                * Enable or disable the layout time capture
+                */
+            captureLayoutTime: boolean;
+            /**
+                * Instantiates a new advanced dynamic texture instrumentation.
+                * This class can be used to get instrumentation data from an AdvancedDynamicTexture object
+                * @param texture Defines the AdvancedDynamicTexture to instrument
+                */
+            constructor(
+            /**
+                * Define the instrumented AdvancedDynamicTexture.
+                */
+            texture: AdvancedDynamicTexture);
+            /**
+                * Dispose and release associated resources.
+                */
+            dispose(): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
         * Class used to transport BABYLON.Vector2 information for pointer events
         */
     export class Vector2WithInfo extends BABYLON.Vector2 {

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

@@ -11,6 +11,7 @@ declare module 'babylonjs-gui' {
 declare module 'babylonjs-gui/2D' {
     export * from "babylonjs-gui/2D/controls";
     export * from "babylonjs-gui/2D/advancedDynamicTexture";
+    export * from "babylonjs-gui/2D/adtInstrumentation";
     export * from "babylonjs-gui/2D/math2D";
     export * from "babylonjs-gui/2D/measure";
     export * from "babylonjs-gui/2D/multiLinePoint";
@@ -116,6 +117,22 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
                 */
             onControlPickedObservable: Observable<Control>;
             /**
+                * Observable event triggered before layout is evaluated
+                */
+            onBeginLayoutObservable: Observable<AdvancedDynamicTexture>;
+            /**
+                * Observable event triggered after the layout was evaluated
+                */
+            onEndLayoutObservable: Observable<AdvancedDynamicTexture>;
+            /**
+                * Observable event triggered before the texture is rendered
+                */
+            onBeginRenderObservable: Observable<AdvancedDynamicTexture>;
+            /**
+                * Observable event triggered after the texture was rendered
+                */
+            onEndRenderObservable: Observable<AdvancedDynamicTexture>;
+            /**
                 * Gets or sets a boolean defining if alpha is stored as premultiplied
                 */
             premulAlpha: boolean;
@@ -294,6 +311,50 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
     }
 }
 
+declare module 'babylonjs-gui/2D/adtInstrumentation' {
+    import { IDisposable, PerfCounter } from "babylonjs";
+    import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
+    /**
+        * This class can be used to get instrumentation data from a AdvancedDynamicTexture object
+        */
+    export class AdvancedDynamicTextureInstrumentation implements IDisposable {
+            /**
+                * Define the instrumented AdvancedDynamicTexture.
+                */
+            texture: AdvancedDynamicTexture;
+            /**
+                * Gets the perf counter used to capture render time
+                */
+            readonly renderTimeCounter: PerfCounter;
+            /**
+                * Gets the perf counter used to capture layout time
+                */
+            readonly layoutTimeCounter: PerfCounter;
+            /**
+                * Enable or disable the render time capture
+                */
+            captureRenderTime: boolean;
+            /**
+                * Enable or disable the layout time capture
+                */
+            captureLayoutTime: boolean;
+            /**
+                * Instantiates a new advanced dynamic texture instrumentation.
+                * This class can be used to get instrumentation data from an AdvancedDynamicTexture object
+                * @param texture Defines the AdvancedDynamicTexture to instrument
+                */
+            constructor(
+            /**
+                * Define the instrumented AdvancedDynamicTexture.
+                */
+            texture: AdvancedDynamicTexture);
+            /**
+                * Dispose and release associated resources.
+                */
+            dispose(): void;
+    }
+}
+
 declare module 'babylonjs-gui/2D/math2D' {
     import { Vector2, Nullable } from "babylonjs";
     /**
@@ -3272,6 +3333,22 @@ declare module BABYLON.GUI {
                 */
             onControlPickedObservable: BABYLON.Observable<Control>;
             /**
+                * BABYLON.Observable event triggered before layout is evaluated
+                */
+            onBeginLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
+            /**
+                * BABYLON.Observable event triggered after the layout was evaluated
+                */
+            onEndLayoutObservable: BABYLON.Observable<AdvancedDynamicTexture>;
+            /**
+                * BABYLON.Observable event triggered before the texture is rendered
+                */
+            onBeginRenderObservable: BABYLON.Observable<AdvancedDynamicTexture>;
+            /**
+                * 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
                 */
             premulAlpha: boolean;
@@ -3451,6 +3528,47 @@ declare module BABYLON.GUI {
 }
 declare module BABYLON.GUI {
     /**
+        * This class can be used to get instrumentation data from a AdvancedDynamicTexture object
+        */
+    export class AdvancedDynamicTextureInstrumentation implements BABYLON.IDisposable {
+            /**
+                * Define the instrumented AdvancedDynamicTexture.
+                */
+            texture: AdvancedDynamicTexture;
+            /**
+                * Gets the perf counter used to capture render time
+                */
+            readonly renderTimeCounter: BABYLON.PerfCounter;
+            /**
+                * Gets the perf counter used to capture layout time
+                */
+            readonly layoutTimeCounter: BABYLON.PerfCounter;
+            /**
+                * Enable or disable the render time capture
+                */
+            captureRenderTime: boolean;
+            /**
+                * Enable or disable the layout time capture
+                */
+            captureLayoutTime: boolean;
+            /**
+                * Instantiates a new advanced dynamic texture instrumentation.
+                * This class can be used to get instrumentation data from an AdvancedDynamicTexture object
+                * @param texture Defines the AdvancedDynamicTexture to instrument
+                */
+            constructor(
+            /**
+                * Define the instrumented AdvancedDynamicTexture.
+                */
+            texture: AdvancedDynamicTexture);
+            /**
+                * Dispose and release associated resources.
+                */
+            dispose(): void;
+    }
+}
+declare module BABYLON.GUI {
+    /**
         * Class used to transport BABYLON.Vector2 information for pointer events
         */
     export class Vector2WithInfo extends BABYLON.Vector2 {

gui/src/2D/adtInstrumentation.ts

@@ -0,0 +1,122 @@
+import { IDisposable, PerfCounter, Nullable, Observer } from "babylonjs";
+import { AdvancedDynamicTexture } from "./advancedDynamicTexture";
+
+/**
+ * This class can be used to get instrumentation data from a AdvancedDynamicTexture object
+ */
+export class AdvancedDynamicTextureInstrumentation implements IDisposable {
+    private _captureRenderTime = false;
+    private _renderTime = new PerfCounter();
+
+    private _captureLayoutTime = false;
+    private _layoutTime = new PerfCounter();
+
+    // Observers
+    private _onBeginRenderObserver: Nullable<Observer<AdvancedDynamicTexture>> = null;
+    private _onEndRenderObserver: Nullable<Observer<AdvancedDynamicTexture>> = null;
+    private _onBeginLayoutObserver: Nullable<Observer<AdvancedDynamicTexture>> = null;
+    private _onEndLayoutObserver: Nullable<Observer<AdvancedDynamicTexture>> = null;
+
+    // Properties
+
+    /**
+     * Gets the perf counter used to capture render time
+     */
+    public get renderTimeCounter(): PerfCounter {
+        return this._renderTime;
+    }
+
+    /**
+     * Gets the perf counter used to capture layout time
+     */
+    public get layoutTimeCounter(): PerfCounter {
+        return this._layoutTime;
+    }
+
+    /**
+     * Enable or disable the render time capture
+     */
+    public get captureRenderTime(): boolean {
+        return this._captureRenderTime;
+    }
+
+    public set captureRenderTime(value: boolean) {
+        if (value === this._captureRenderTime) {
+            return;
+        }
+
+        this._captureRenderTime = value;
+
+        if (value) {
+            this._onBeginRenderObserver = this.texture.onBeginRenderObservable.add(() => {
+                this._renderTime.beginMonitoring();
+            });
+
+            this._onEndRenderObserver = this.texture.onEndRenderObservable.add(() => {
+                this._renderTime.endMonitoring(true);
+            });
+        } else {
+            this.texture.onBeginRenderObservable.remove(this._onBeginRenderObserver);
+            this._onBeginRenderObserver = null;
+            this.texture.onEndRenderObservable.remove(this._onEndRenderObserver);
+            this._onEndRenderObserver = null;
+        }
+    }
+
+    /**
+     * Enable or disable the layout time capture
+     */
+    public get captureLayoutTime(): boolean {
+        return this._captureLayoutTime;
+    }
+
+    public set captureLayoutTime(value: boolean) {
+        if (value === this._captureLayoutTime) {
+            return;
+        }
+
+        this._captureLayoutTime = value;
+
+        if (value) {
+            this._onBeginLayoutObserver = this.texture.onBeginLayoutObservable.add(() => {
+                this._layoutTime.beginMonitoring();
+            });
+
+            this._onEndLayoutObserver = this.texture.onEndLayoutObservable.add(() => {
+                this._layoutTime.endMonitoring(true);
+            });
+        } else {
+            this.texture.onBeginLayoutObservable.remove(this._onBeginLayoutObserver);
+            this._onBeginLayoutObserver = null;
+            this.texture.onEndLayoutObservable.remove(this._onEndLayoutObserver);
+            this._onEndLayoutObserver = null;
+        }
+    }
+    /**
+     * Instantiates a new advanced dynamic texture instrumentation.
+     * This class can be used to get instrumentation data from an AdvancedDynamicTexture object
+     * @param texture Defines the AdvancedDynamicTexture to instrument
+     */
+    public constructor(
+        /**
+         * Define the instrumented AdvancedDynamicTexture.
+         */
+        public texture: AdvancedDynamicTexture) {
+    }
+
+    /**
+     * Dispose and release associated resources.
+     */
+    public dispose() {
+        this.texture.onBeginRenderObservable.remove(this._onBeginRenderObserver);
+        this._onBeginRenderObserver = null;
+        this.texture.onEndRenderObservable.remove(this._onEndRenderObserver);
+        this._onEndRenderObserver = null;
+        this.texture.onBeginLayoutObservable.remove(this._onBeginLayoutObserver);
+        this._onBeginLayoutObserver = null;
+        this.texture.onEndLayoutObservable.remove(this._onEndLayoutObserver);
+        this._onEndLayoutObserver = null;
+
+        (<any>this.texture) = null;
+    }
+}

gui/src/2D/advancedDynamicTexture.ts

@@ -86,6 +86,26 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     public onControlPickedObservable = new Observable<Control>();
 
     /**
+     * Observable event triggered before layout is evaluated
+     */
+    public onBeginLayoutObservable = new Observable<AdvancedDynamicTexture>();
+
+    /**
+     * Observable event triggered after the layout was evaluated
+     */
+    public onEndLayoutObservable = new Observable<AdvancedDynamicTexture>();
+
+    /**
+     * Observable event triggered before the texture is rendered
+     */
+    public onBeginRenderObservable = new Observable<AdvancedDynamicTexture>();
+
+    /**
+     * Observable event triggered after the texture was rendered
+     */
+    public onEndRenderObservable = new Observable<AdvancedDynamicTexture>();
+
+    /**
      * Gets or sets a boolean defining if alpha is stored as premultiplied
      */
     public premulAlpha = false;
@@ -435,6 +455,10 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._rootContainer.dispose();
         this.onClipboardObservable.clear();
         this.onControlPickedObservable.clear();
+        this.onBeginRenderObservable.clear();
+        this.onEndRenderObservable.clear();
+        this.onBeginLayoutObservable.clear();
+        this.onEndLayoutObservable.clear();
 
         super.dispose();
     }
@@ -572,11 +596,17 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         // Render
         context.font = "18px Arial";
         context.strokeStyle = "white";
+
+        this.onBeginLayoutObservable.notifyObservers(this);
         var measure = new Measure(0, 0, renderWidth, renderHeight);
         this._rootContainer._layout(measure, context);
+        this.onEndLayoutObservable.notifyObservers(this);
+
         this._isDirty = false; // Restoring the dirty state that could have been set by controls during layout processing
 
+        this.onBeginRenderObservable.notifyObservers(this);
         this._rootContainer._render(context);
+        this.onEndRenderObservable.notifyObservers(this);
     }
 
     /** @hidden */

gui/src/2D/index.ts

@@ -1,6 +1,7 @@
 export * from "./controls";
 
 export * from "./advancedDynamicTexture";
+export * from "./adtInstrumentation";
 export * from "./math2D";
 export * from "./measure";
 export * from "./multiLinePoint";

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Texture, BaseTexture, CubeTexture, Observable } from "babylonjs";
+import { Texture, BaseTexture, CubeTexture, Observable, Nullable } from "babylonjs";
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
 import { LineContainerComponent } from "../../../lineContainerComponent";
 import { SliderLineComponent } from "../../../lines/sliderLineComponent";
@@ -10,6 +10,7 @@ import { FloatLineComponent } from "../../../lines/floatLineComponent";
 import { OptionsLineComponent } from "../../../lines/optionsLineComponent";
 import { FileButtonLineComponent } from "../../../lines/fileButtonLineComponent";
 import { LockObject } from "../lockObject";
+import { ValueLineComponent } from "../../../lines/valueLineComponent";
 
 interface ITexturePropertyGridComponentProps {
     texture: BaseTexture,
@@ -18,10 +19,34 @@ interface ITexturePropertyGridComponentProps {
 }
 
 export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
+
+    private _adtInstrumentation: Nullable<BABYLON.GUI.AdvancedDynamicTextureInstrumentation>;
+
     constructor(props: ITexturePropertyGridComponentProps) {
         super(props);
     }
 
+    componentWillMount() {
+        const texture = this.props.texture
+
+        if (!texture || !(texture as any).rootContainer) {
+            return;
+        }
+
+        const adt = texture as BABYLON.GUI.AdvancedDynamicTexture;
+
+        this._adtInstrumentation = new BABYLON.GUI.AdvancedDynamicTextureInstrumentation(adt);
+        this._adtInstrumentation.captureRenderTime = true;
+        this._adtInstrumentation.captureLayoutTime = true;
+    }
+
+    componentWillUnmount() {
+        if (this._adtInstrumentation) {
+            this._adtInstrumentation.dispose();
+            this._adtInstrumentation = null;
+        }
+    }
+
     updateTexture(file: File) {
         const texture = this.props.texture;
         BABYLON.Tools.ReadFile(file, (data) => {
@@ -76,6 +101,8 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                 {
                     (texture as any).rootContainer &&
                     <LineContainerComponent title="ADVANCED TEXTURE PROPERTIES">
+                        <ValueLineComponent label="Last layout time" value={this._adtInstrumentation!.renderTimeCounter.current} units="ms" />
+                        <ValueLineComponent label="Last render time" value={this._adtInstrumentation!.layoutTimeCounter.current} units="ms" />
                         <SliderLineComponent label="Render scale" minimum={0.1} maximum={5} step={0.1} target={texture} propertyName="renderScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                         <CheckBoxLineComponent label="Premultiply alpha" target={texture} propertyName="premulAlpha" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                         <FloatLineComponent lockObject={this.props.lockObject} label="Ideal width" target={texture} propertyName="idealWidth" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />