@babylonjs/core 7.45.0 → 7.46.0

package/Lights/rectAreaLight.d.ts

@@ -0,0 +1,61 @@
+import { Vector3 } from "../Maths/math.vector";
+import type { Effect } from "../Materials/effect.js";
+import type { Scene } from "../scene.js";
+import { AreaLight } from "./areaLight";
+/**
+ * A rectangular area light defined by an unique point in world space, a width and a height.
+ * The light is emitted from the rectangular area in the -Z direction.
+ */
+export declare class RectAreaLight extends AreaLight {
+    private readonly _width;
+    private readonly _height;
+    protected readonly _pointTransformedPosition: Vector3;
+    protected readonly _pointTransformedWidth: Vector3;
+    protected readonly _pointTransformedHeight: Vector3;
+    /**
+     * Rect Area Light width.
+     */
+    get width(): number;
+    /**
+     * Rect Area Light width.
+     */
+    set width(value: number);
+    /**
+     * Rect Area Light height.
+     */
+    get height(): number;
+    /**
+     * Rect Area Light height.
+     */
+    set height(value: number);
+    /**
+     * Creates a rectangular area light object.
+     * Documentation : https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction
+     * @param name The friendly name of the light
+     * @param position The position of the area light.
+     * @param width The width of the area light.
+     * @param height The height of the area light.
+     * @param scene The scene the light belongs to
+     */
+    constructor(name: string, position: Vector3, width: number, height: number, scene?: Scene);
+    /**
+     * Returns the string "RectAreaLight"
+     * @returns the class name
+     */
+    getClassName(): string;
+    /**
+     * Returns the integer 4.
+     * @returns The light Type id as a constant defines in Light.LIGHTTYPEID_x
+     */
+    getTypeID(): number;
+    protected _buildUniformLayout(): void;
+    protected _computeTransformedInformation(): boolean;
+    /**
+     * Sets the passed Effect "effect" with the PointLight transformed position (or position, if none) and passed name (string).
+     * @param effect The effect to update
+     * @param lightIndex The index of the light in the effect to update
+     * @returns The point light
+     */
+    transferToEffect(effect: Effect, lightIndex: string): RectAreaLight;
+    transferToNodeMaterialEffect(effect: Effect, lightDataUniformName: string): this;
+}

package/Lights/rectAreaLight.js

@@ -0,0 +1,127 @@
+import { __decorate } from "../tslib.es6.js";
+import { Vector3 } from "../Maths/math.vector.js";
+import { Node } from "../node.js";
+import { Light } from "./light.js";
+import { RegisterClass } from "../Misc/typeStore.js";
+import { serialize } from "../Misc/decorators.js";
+import { AreaLight } from "./areaLight.js";
+Node.AddNodeConstructor("Light_Type_4", (name, scene) => {
+    return () => new RectAreaLight(name, Vector3.Zero(), 1, 1, scene);
+});
+/**
+ * A rectangular area light defined by an unique point in world space, a width and a height.
+ * The light is emitted from the rectangular area in the -Z direction.
+ */
+export class RectAreaLight extends AreaLight {
+    /**
+     * Rect Area Light width.
+     */
+    get width() {
+        return this._width.x;
+    }
+    /**
+     * Rect Area Light width.
+     */
+    set width(value) {
+        this._width.x = value;
+    }
+    /**
+     * Rect Area Light height.
+     */
+    get height() {
+        return this._height.y;
+    }
+    /**
+     * Rect Area Light height.
+     */
+    set height(value) {
+        this._height.y = value;
+    }
+    /**
+     * Creates a rectangular area light object.
+     * Documentation : https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction
+     * @param name The friendly name of the light
+     * @param position The position of the area light.
+     * @param width The width of the area light.
+     * @param height The height of the area light.
+     * @param scene The scene the light belongs to
+     */
+    constructor(name, position, width, height, scene) {
+        super(name, position, scene);
+        this._width = new Vector3(width, 0, 0);
+        this._height = new Vector3(0, height, 0);
+        this._pointTransformedPosition = Vector3.Zero();
+        this._pointTransformedWidth = Vector3.Zero();
+        this._pointTransformedHeight = Vector3.Zero();
+    }
+    /**
+     * Returns the string "RectAreaLight"
+     * @returns the class name
+     */
+    getClassName() {
+        return "RectAreaLight";
+    }
+    /**
+     * Returns the integer 4.
+     * @returns The light Type id as a constant defines in Light.LIGHTTYPEID_x
+     */
+    getTypeID() {
+        return Light.LIGHTTYPEID_RECT_AREALIGHT;
+    }
+    _buildUniformLayout() {
+        this._uniformBuffer.addUniform("vLightData", 4);
+        this._uniformBuffer.addUniform("vLightDiffuse", 4);
+        this._uniformBuffer.addUniform("vLightSpecular", 4);
+        this._uniformBuffer.addUniform("vLightWidth", 4);
+        this._uniformBuffer.addUniform("vLightHeight", 4);
+        this._uniformBuffer.addUniform("shadowsInfo", 3);
+        this._uniformBuffer.addUniform("depthValues", 2);
+        this._uniformBuffer.create();
+    }
+    _computeTransformedInformation() {
+        if (this.parent && this.parent.getWorldMatrix) {
+            Vector3.TransformCoordinatesToRef(this.position, this.parent.getWorldMatrix(), this._pointTransformedPosition);
+            Vector3.TransformNormalToRef(this._width, this.parent.getWorldMatrix(), this._pointTransformedWidth);
+            Vector3.TransformNormalToRef(this._height, this.parent.getWorldMatrix(), this._pointTransformedHeight);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Sets the passed Effect "effect" with the PointLight transformed position (or position, if none) and passed name (string).
+     * @param effect The effect to update
+     * @param lightIndex The index of the light in the effect to update
+     * @returns The point light
+     */
+    transferToEffect(effect, lightIndex) {
+        if (this._computeTransformedInformation()) {
+            this._uniformBuffer.updateFloat4("vLightData", this._pointTransformedPosition.x, this._pointTransformedPosition.y, this._pointTransformedPosition.z, 0, lightIndex);
+            this._uniformBuffer.updateFloat4("vLightWidth", this._pointTransformedWidth.x / 2, this._pointTransformedWidth.y / 2, this._pointTransformedWidth.z / 2, 0, lightIndex);
+            this._uniformBuffer.updateFloat4("vLightHeight", this._pointTransformedHeight.x / 2, this._pointTransformedHeight.y / 2, this._pointTransformedHeight.z / 2, 0, lightIndex);
+        }
+        else {
+            this._uniformBuffer.updateFloat4("vLightData", this.position.x, this.position.y, this.position.z, 0, lightIndex);
+            this._uniformBuffer.updateFloat4("vLightWidth", this._width.x / 2, this._width.y / 2, this._width.z / 2, 0.0, lightIndex);
+            this._uniformBuffer.updateFloat4("vLightHeight", this._height.x / 2, this._height.y / 2, this._height.z / 2, 0.0, lightIndex);
+        }
+        return this;
+    }
+    transferToNodeMaterialEffect(effect, lightDataUniformName) {
+        if (this._computeTransformedInformation()) {
+            effect.setFloat3(lightDataUniformName, this._pointTransformedPosition.x, this._pointTransformedPosition.y, this._pointTransformedPosition.z);
+        }
+        else {
+            effect.setFloat3(lightDataUniformName, this.position.x, this.position.y, this.position.z);
+        }
+        return this;
+    }
+}
+__decorate([
+    serialize()
+], RectAreaLight.prototype, "width", null);
+__decorate([
+    serialize()
+], RectAreaLight.prototype, "height", null);
+// Register Class Name
+RegisterClass("BABYLON.RectAreaLight", RectAreaLight);
+//# sourceMappingURL=rectAreaLight.js.map

package/Lights/rectAreaLight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectAreaLight.js","sourceRoot":"","sources":["../../../../dev/core/src/Lights/rectAreaLight.ts"],"names":[],"mappings":"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","sourcesContent":["import { Vector3 } from \"../Maths/math.vector\";\nimport { Node } from \"../node\";\nimport { Light } from \"./light\";\nimport type { Effect } from \"core/Materials/effect\";\nimport { RegisterClass } from \"core/Misc/typeStore\";\nimport { serialize } from \"../Misc/decorators\";\nimport type { Scene } from \"core/scene\";\nimport { AreaLight } from \"./areaLight\";\n\nNode.AddNodeConstructor(\"Light_Type_4\", (name, scene) => {\n    return () => new RectAreaLight(name, Vector3.Zero(), 1, 1, scene);\n});\n\n/**\n * A rectangular area light defined by an unique point in world space, a width and a height.\n * The light is emitted from the rectangular area in the -Z direction.\n */\nexport class RectAreaLight extends AreaLight {\n    private readonly _width: Vector3;\n    private readonly _height: Vector3;\n    protected readonly _pointTransformedPosition: Vector3;\n    protected readonly _pointTransformedWidth: Vector3;\n    protected readonly _pointTransformedHeight: Vector3;\n\n    /**\n     * Rect Area Light width.\n     */\n    @serialize()\n    public get width(): number {\n        return this._width.x;\n    }\n    /**\n     * Rect Area Light width.\n     */\n    public set width(value: number) {\n        this._width.x = value;\n    }\n\n    /**\n     * Rect Area Light height.\n     */\n    @serialize()\n    public get height(): number {\n        return this._height.y;\n    }\n    /**\n     * Rect Area Light height.\n     */\n    public set height(value: number) {\n        this._height.y = value;\n    }\n\n    /**\n     * Creates a rectangular area light object.\n     * Documentation : https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction\n     * @param name The friendly name of the light\n     * @param position The position of the area light.\n     * @param width The width of the area light.\n     * @param height The height of the area light.\n     * @param scene The scene the light belongs to\n     */\n    constructor(name: string, position: Vector3, width: number, height: number, scene?: Scene) {\n        super(name, position, scene);\n        this._width = new Vector3(width, 0, 0);\n        this._height = new Vector3(0, height, 0);\n        this._pointTransformedPosition = Vector3.Zero();\n        this._pointTransformedWidth = Vector3.Zero();\n        this._pointTransformedHeight = Vector3.Zero();\n    }\n\n    /**\n     * Returns the string \"RectAreaLight\"\n     * @returns the class name\n     */\n    public override getClassName(): string {\n        return \"RectAreaLight\";\n    }\n\n    /**\n     * Returns the integer 4.\n     * @returns The light Type id as a constant defines in Light.LIGHTTYPEID_x\n     */\n    public override getTypeID(): number {\n        return Light.LIGHTTYPEID_RECT_AREALIGHT;\n    }\n\n    protected _buildUniformLayout(): void {\n        this._uniformBuffer.addUniform(\"vLightData\", 4);\n        this._uniformBuffer.addUniform(\"vLightDiffuse\", 4);\n        this._uniformBuffer.addUniform(\"vLightSpecular\", 4);\n        this._uniformBuffer.addUniform(\"vLightWidth\", 4);\n        this._uniformBuffer.addUniform(\"vLightHeight\", 4);\n        this._uniformBuffer.addUniform(\"shadowsInfo\", 3);\n        this._uniformBuffer.addUniform(\"depthValues\", 2);\n        this._uniformBuffer.create();\n    }\n\n    protected _computeTransformedInformation(): boolean {\n        if (this.parent && this.parent.getWorldMatrix) {\n            Vector3.TransformCoordinatesToRef(this.position, this.parent.getWorldMatrix(), this._pointTransformedPosition);\n            Vector3.TransformNormalToRef(this._width, this.parent.getWorldMatrix(), this._pointTransformedWidth);\n            Vector3.TransformNormalToRef(this._height, this.parent.getWorldMatrix(), this._pointTransformedHeight);\n            return true;\n        }\n\n        return false;\n    }\n\n    /**\n     * Sets the passed Effect \"effect\" with the PointLight transformed position (or position, if none) and passed name (string).\n     * @param effect The effect to update\n     * @param lightIndex The index of the light in the effect to update\n     * @returns The point light\n     */\n    public transferToEffect(effect: Effect, lightIndex: string): RectAreaLight {\n        if (this._computeTransformedInformation()) {\n            this._uniformBuffer.updateFloat4(\"vLightData\", this._pointTransformedPosition.x, this._pointTransformedPosition.y, this._pointTransformedPosition.z, 0, lightIndex);\n            this._uniformBuffer.updateFloat4(\"vLightWidth\", this._pointTransformedWidth.x / 2, this._pointTransformedWidth.y / 2, this._pointTransformedWidth.z / 2, 0, lightIndex);\n            this._uniformBuffer.updateFloat4(\n                \"vLightHeight\",\n                this._pointTransformedHeight.x / 2,\n                this._pointTransformedHeight.y / 2,\n                this._pointTransformedHeight.z / 2,\n                0,\n                lightIndex\n            );\n        } else {\n            this._uniformBuffer.updateFloat4(\"vLightData\", this.position.x, this.position.y, this.position.z, 0, lightIndex);\n            this._uniformBuffer.updateFloat4(\"vLightWidth\", this._width.x / 2, this._width.y / 2, this._width.z / 2, 0.0, lightIndex);\n            this._uniformBuffer.updateFloat4(\"vLightHeight\", this._height.x / 2, this._height.y / 2, this._height.z / 2, 0.0, lightIndex);\n        }\n        return this;\n    }\n\n    public transferToNodeMaterialEffect(effect: Effect, lightDataUniformName: string) {\n        if (this._computeTransformedInformation()) {\n            effect.setFloat3(lightDataUniformName, this._pointTransformedPosition.x, this._pointTransformedPosition.y, this._pointTransformedPosition.z);\n        } else {\n            effect.setFloat3(lightDataUniformName, this.position.x, this.position.y, this.position.z);\n        }\n        return this;\n    }\n}\n\n// Register Class Name\nRegisterClass(\"BABYLON.RectAreaLight\", RectAreaLight);\n"]}

package/Loading/loadingScreen.d.ts

@@ -28,7 +28,14 @@ export declare class DefaultLoadingScreen implements ILoadingScreen {
     private _renderingCanvas;
     private _loadingText;
     private _loadingDivBackgroundColor;
-    private _loadingDiv;
+    private _engine;
+    private _resizeObserver;
+    private _isLoading;
+    /**
+     * Maps a loading `HTMLDivElement` to a tuple containing the associated `HTMLCanvasElement`
+     * and its `DOMRect` (or `null` if not yet available).
+     */
+    private _loadingDivToRenderingCanvasMap;
     private _loadingTextDiv;
     private _style;
     /** Gets or sets the logo url to use for the default loading screen */
@@ -60,5 +67,18 @@ export declare class DefaultLoadingScreen implements ILoadingScreen {
      */
     get loadingUIBackgroundColor(): string;
     set loadingUIBackgroundColor(color: string);
+    /**
+     * Checks if the layout of the canvas has changed by comparing the current layout
+     * rectangle with the previous one.
+     *
+     * This function compares of the two `DOMRect` objects to determine if any of the layout dimensions have changed.
+     * If the layout has changed or if there is no previous layout (i.e., `previousCanvasRect` is `null`),
+     * it returns `true`. Otherwise, it returns `false`.
+     *
+     * @param previousCanvasRect defines the previously recorded `DOMRect` of the canvas, or `null` if no previous state exists.
+     * @param currentCanvasRect defines the current `DOMRect` of the canvas to compare against the previous layout.
+     * @returns `true` if the layout has changed, otherwise `false`.
+     */
+    private _isCanvasLayoutChanged;
     private _resizeLoadingUI;
 }

package/Loading/loadingScreen.js

@@ -1,4 +1,5 @@
 import { AbstractEngine } from "../Engines/abstractEngine.js";
+import { EngineStore } from "../Engines/engineStore.js";
 /**
  * Class used for the default loading screen
  * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen
@@ -14,38 +15,51 @@ export class DefaultLoadingScreen {
         this._renderingCanvas = _renderingCanvas;
         this._loadingText = _loadingText;
         this._loadingDivBackgroundColor = _loadingDivBackgroundColor;
+        /**
+         * Maps a loading `HTMLDivElement` to a tuple containing the associated `HTMLCanvasElement`
+         * and its `DOMRect` (or `null` if not yet available).
+         */
+        this._loadingDivToRenderingCanvasMap = new Map();
         // Resize
         this._resizeLoadingUI = () => {
-            const canvasRect = this._renderingCanvas.getBoundingClientRect();
-            const canvasPositioning = window.getComputedStyle(this._renderingCanvas).position;
-            if (!this._loadingDiv) {
+            if (!this._isLoading) {
                 return;
             }
-            this._loadingDiv.style.position = canvasPositioning === "fixed" ? "fixed" : "absolute";
-            this._loadingDiv.style.left = canvasRect.left + "px";
-            this._loadingDiv.style.top = canvasRect.top + "px";
-            this._loadingDiv.style.width = canvasRect.width + "px";
-            this._loadingDiv.style.height = canvasRect.height + "px";
+            this._loadingDivToRenderingCanvasMap.forEach(([canvas, previousCanvasRect], loadingDiv) => {
+                const currentCanvasRect = canvas.getBoundingClientRect();
+                if (this._isCanvasLayoutChanged(previousCanvasRect, currentCanvasRect)) {
+                    const canvasPositioning = window.getComputedStyle(canvas).position;
+                    loadingDiv.style.position = canvasPositioning === "fixed" ? "fixed" : "absolute";
+                    loadingDiv.style.left = currentCanvasRect.left + "px";
+                    loadingDiv.style.top = currentCanvasRect.top + "px";
+                    loadingDiv.style.width = currentCanvasRect.width + "px";
+                    loadingDiv.style.height = currentCanvasRect.height + "px";
+                    this._loadingDivToRenderingCanvasMap.set(loadingDiv, [canvas, currentCanvasRect]);
+                }
+            });
         };
     }
     /**
      * Function called to display the loading screen
      */
     displayLoadingUI() {
-        if (this._loadingDiv) {
-            // Do not add a loading screen if there is already one
+        if (this._isLoading) {
+            // Do not add a loading screen if it is already loading
             return;
         }
-        this._loadingDiv = document.createElement("div");
-        this._loadingDiv.id = "babylonjsLoadingDiv";
-        this._loadingDiv.style.opacity = "0";
-        this._loadingDiv.style.transition = "opacity 1.5s ease";
-        this._loadingDiv.style.pointerEvents = "none";
-        this._loadingDiv.style.display = "grid";
-        this._loadingDiv.style.gridTemplateRows = "100%";
-        this._loadingDiv.style.gridTemplateColumns = "100%";
-        this._loadingDiv.style.justifyItems = "center";
-        this._loadingDiv.style.alignItems = "center";
+        this._isLoading = true;
+        // get current engine by rendering canvas
+        this._engine = EngineStore.Instances.find((engine) => engine.getRenderingCanvas() === this._renderingCanvas);
+        const loadingDiv = document.createElement("div");
+        loadingDiv.id = "babylonjsLoadingDiv";
+        loadingDiv.style.opacity = "0";
+        loadingDiv.style.transition = "opacity 1.5s ease";
+        loadingDiv.style.pointerEvents = "none";
+        loadingDiv.style.display = "grid";
+        loadingDiv.style.gridTemplateRows = "100%";
+        loadingDiv.style.gridTemplateColumns = "100%";
+        loadingDiv.style.justifyItems = "center";
+        loadingDiv.style.alignItems = "center";
         // Loading text
         this._loadingTextDiv = document.createElement("div");
         this._loadingTextDiv.style.position = "absolute";
@@ -60,20 +74,20 @@ export class DefaultLoadingScreen {
         this._loadingTextDiv.style.textAlign = "center";
         this._loadingTextDiv.style.zIndex = "1";
         this._loadingTextDiv.innerHTML = "Loading";
-        this._loadingDiv.appendChild(this._loadingTextDiv);
+        loadingDiv.appendChild(this._loadingTextDiv);
         //set the predefined text
         this._loadingTextDiv.innerHTML = this._loadingText;
         // Generating keyframes
         this._style = document.createElement("style");
         this._style.type = "text/css";
         const keyFrames = `@-webkit-keyframes spin1 {\
-                    0% { -webkit-transform: rotate(0deg);}
-                    100% { -webkit-transform: rotate(360deg);}
-                }\
-                @keyframes spin1 {\
-                    0% { transform: rotate(0deg);}
-                    100% { transform: rotate(360deg);}
-                }`;
+                            0% { -webkit-transform: rotate(0deg);}
+                            100% { -webkit-transform: rotate(360deg);}
+                        }\
+                        @keyframes spin1 {\
+                            0% { transform: rotate(0deg);}
+                            100% { transform: rotate(360deg);}
+                        }`;
         this._style.innerHTML = keyFrames;
         document.getElementsByTagName("head")[0].appendChild(this._style);
         const svgSupport = !!window.SVGSVGElement;
@@ -128,38 +142,72 @@ export class DefaultLoadingScreen {
             imgSpinner.style.top = `calc(50% - ${loadingSize.h / 2}vh)`;
         }
         imageSpinnerContainer.appendChild(imgSpinner);
-        this._loadingDiv.appendChild(imgBack);
-        this._loadingDiv.appendChild(imageSpinnerContainer);
+        loadingDiv.appendChild(imgBack);
+        loadingDiv.appendChild(imageSpinnerContainer);
+        loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;
+        loadingDiv.style.opacity = "1";
+        const canvases = [];
+        const views = this._engine.views;
+        if (views?.length) {
+            for (const view of views) {
+                if (view.enabled) {
+                    canvases.push(view.target);
+                }
+            }
+        }
+        else {
+            canvases.push(this._renderingCanvas);
+        }
+        canvases.forEach((canvas, index) => {
+            const clonedLoadingDiv = loadingDiv.cloneNode(true);
+            clonedLoadingDiv.id += `-${index}`;
+            this._loadingDivToRenderingCanvasMap.set(clonedLoadingDiv, [canvas, null]);
+        });
         this._resizeLoadingUI();
-        window.addEventListener("resize", this._resizeLoadingUI);
-        this._loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;
-        document.body.appendChild(this._loadingDiv);
-        this._loadingDiv.style.opacity = "1";
+        this._resizeObserver = this._engine.onResizeObservable.add(() => {
+            this._resizeLoadingUI();
+        });
+        this._loadingDivToRenderingCanvasMap.forEach((_, loadingDiv) => {
+            document.body.appendChild(loadingDiv);
+        });
     }
     /**
      * Function called to hide the loading screen
      */
     hideLoadingUI() {
-        if (!this._loadingDiv) {
+        if (!this._isLoading) {
             return;
         }
-        const onTransitionEnd = () => {
-            if (this._loadingTextDiv) {
-                this._loadingTextDiv.remove();
-                this._loadingTextDiv = null;
-            }
-            if (this._loadingDiv) {
-                this._loadingDiv.remove();
-                this._loadingDiv = null;
+        let completedTransitions = 0;
+        const onTransitionEnd = (event) => {
+            const loadingDiv = event.target;
+            // ensure that ending transition event is generated by one of the current loadingDivs
+            const isTransitionEndOnLoadingDiv = this._loadingDivToRenderingCanvasMap.has(loadingDiv);
+            if (isTransitionEndOnLoadingDiv) {
+                completedTransitions++;
+                loadingDiv.remove();
+                const allTransitionsCompleted = completedTransitions === this._loadingDivToRenderingCanvasMap.size;
+                if (allTransitionsCompleted) {
+                    if (this._loadingTextDiv) {
+                        this._loadingTextDiv.remove();
+                        this._loadingTextDiv = null;
+                    }
+                    if (this._style) {
+                        this._style.remove();
+                        this._style = null;
+                    }
+                    window.removeEventListener("transitionend", onTransitionEnd);
+                    this._engine.onResizeObservable.remove(this._resizeObserver);
+                    this._loadingDivToRenderingCanvasMap.clear();
+                    this._engine = null;
+                    this._isLoading = false;
+                }
             }
-            if (this._style) {
-                this._style.remove();
-                this._style = null;
-            }
-            window.removeEventListener("resize", this._resizeLoadingUI);
         };
-        this._loadingDiv.style.opacity = "0";
-        this._loadingDiv.addEventListener("transitionend", onTransitionEnd);
+        this._loadingDivToRenderingCanvasMap.forEach((_, loadingDiv) => {
+            loadingDiv.style.opacity = "0";
+        });
+        window.addEventListener("transitionend", onTransitionEnd);
     }
     /**
      * Gets or sets the text to display while loading
@@ -181,10 +229,35 @@ export class DefaultLoadingScreen {
     }
     set loadingUIBackgroundColor(color) {
         this._loadingDivBackgroundColor = color;
-        if (!this._loadingDiv) {
+        if (!this._isLoading) {
             return;
         }
-        this._loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;
+        this._loadingDivToRenderingCanvasMap.forEach((_, loadingDiv) => {
+            loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;
+        });
+    }
+    /**
+     * Checks if the layout of the canvas has changed by comparing the current layout
+     * rectangle with the previous one.
+     *
+     * This function compares of the two `DOMRect` objects to determine if any of the layout dimensions have changed.
+     * If the layout has changed or if there is no previous layout (i.e., `previousCanvasRect` is `null`),
+     * it returns `true`. Otherwise, it returns `false`.
+     *
+     * @param previousCanvasRect defines the previously recorded `DOMRect` of the canvas, or `null` if no previous state exists.
+     * @param currentCanvasRect defines the current `DOMRect` of the canvas to compare against the previous layout.
+     * @returns `true` if the layout has changed, otherwise `false`.
+     */
+    _isCanvasLayoutChanged(previousCanvasRect, currentCanvasRect) {
+        return (!previousCanvasRect ||
+            previousCanvasRect.left !== currentCanvasRect.left ||
+            previousCanvasRect.top !== currentCanvasRect.top ||
+            previousCanvasRect.right !== currentCanvasRect.right ||
+            previousCanvasRect.bottom !== currentCanvasRect.bottom ||
+            previousCanvasRect.width !== currentCanvasRect.width ||
+            previousCanvasRect.height !== currentCanvasRect.height ||
+            previousCanvasRect.x !== currentCanvasRect.x ||
+            previousCanvasRect.y !== currentCanvasRect.y);
     }
 }
 /** Gets or sets the logo url to use for the default loading screen */

package/Loading/loadingScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"loadingScreen.js","sourceRoot":"","sources":["../../../../dev/core/src/Loading/loadingScreen.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"../types\";\r\nimport { AbstractEngine } from \"../Engines/abstractEngine\";\r\n/**\r\n * Interface used to present a loading screen while loading a scene\r\n * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen\r\n */\r\nexport interface ILoadingScreen {\r\n    /**\r\n     * Function called to display the loading screen\r\n     */\r\n    displayLoadingUI: () => void;\r\n    /**\r\n     * Function called to hide the loading screen\r\n     */\r\n    hideLoadingUI: () => void;\r\n    /**\r\n     * Gets or sets the color to use for the background\r\n     */\r\n    loadingUIBackgroundColor: string;\r\n    /**\r\n     * Gets or sets the text to display while loading\r\n     */\r\n    loadingUIText: string;\r\n}\r\n\r\n/**\r\n * Class used for the default loading screen\r\n * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen\r\n */\r\nexport class DefaultLoadingScreen implements ILoadingScreen {\r\n    private _loadingDiv: Nullable<HTMLDivElement>;\r\n    private _loadingTextDiv: Nullable<HTMLDivElement>;\r\n    private _style: Nullable<HTMLStyleElement>;\r\n\r\n    /** Gets or sets the logo url to use for the default loading screen */\r\n    public static DefaultLogoUrl = \"\";\r\n\r\n    /** Gets or sets the spinner url to use for the default loading screen */\r\n    public static DefaultSpinnerUrl = \"\";\r\n\r\n    /**\r\n     * Creates a new default loading screen\r\n     * @param _renderingCanvas defines the canvas used to render the scene\r\n     * @param _loadingText defines the default text to display\r\n     * @param _loadingDivBackgroundColor defines the default background color\r\n     */\r\n    constructor(\r\n        private _renderingCanvas: HTMLCanvasElement,\r\n        private _loadingText = \"\",\r\n        private _loadingDivBackgroundColor = \"black\"\r\n    ) {}\r\n\r\n    /**\r\n     * Function called to display the loading screen\r\n     */\r\n    public displayLoadingUI(): void {\r\n        if (this._loadingDiv) {\r\n            // Do not add a loading screen if there is already one\r\n            return;\r\n        }\r\n\r\n        this._loadingDiv = document.createElement(\"div\");\r\n\r\n        this._loadingDiv.id = \"babylonjsLoadingDiv\";\r\n        this._loadingDiv.style.opacity = \"0\";\r\n        this._loadingDiv.style.transition = \"opacity 1.5s ease\";\r\n        this._loadingDiv.style.pointerEvents = \"none\";\r\n        this._loadingDiv.style.display = \"grid\";\r\n        this._loadingDiv.style.gridTemplateRows = \"100%\";\r\n        this._loadingDiv.style.gridTemplateColumns = \"100%\";\r\n        this._loadingDiv.style.justifyItems = \"center\";\r\n        this._loadingDiv.style.alignItems = \"center\";\r\n\r\n        // Loading text\r\n        this._loadingTextDiv = document.createElement(\"div\");\r\n        this._loadingTextDiv.style.position = \"absolute\";\r\n        this._loadingTextDiv.style.left = \"0\";\r\n        this._loadingTextDiv.style.top = \"50%\";\r\n        this._loadingTextDiv.style.marginTop = \"80px\";\r\n        this._loadingTextDiv.style.width = \"100%\";\r\n        this._loadingTextDiv.style.height = \"20px\";\r\n        this._loadingTextDiv.style.fontFamily = \"Arial\";\r\n        this._loadingTextDiv.style.fontSize = \"14px\";\r\n        this._loadingTextDiv.style.color = \"white\";\r\n        this._loadingTextDiv.style.textAlign = \"center\";\r\n        this._loadingTextDiv.style.zIndex = \"1\";\r\n        this._loadingTextDiv.innerHTML = \"Loading\";\r\n\r\n        this._loadingDiv.appendChild(this._loadingTextDiv);\r\n\r\n        //set the predefined text\r\n        this._loadingTextDiv.innerHTML = this._loadingText;\r\n\r\n        // Generating keyframes\r\n        this._style = document.createElement(\"style\");\r\n        this._style.type = \"text/css\";\r\n        const keyFrames = `@-webkit-keyframes spin1 {\\\r\n                    0% { -webkit-transform: rotate(0deg);}\r\n                    100% { -webkit-transform: rotate(360deg);}\r\n                }\\\r\n                @keyframes spin1 {\\\r\n                    0% { transform: rotate(0deg);}\r\n                    100% { transform: rotate(360deg);}\r\n                }`;\r\n        this._style.innerHTML = keyFrames;\r\n        document.getElementsByTagName(\"head\")[0].appendChild(this._style);\r\n\r\n        const svgSupport = !!window.SVGSVGElement;\r\n        // Loading img\r\n        const imgBack = new Image();\r\n        if (!DefaultLoadingScreen.DefaultLogoUrl) {\r\n            imgBack.src = !svgSupport\r\n                ? \"https://cdn.babylonjs.com/Assets/babylonLogo.png\"\r\n                : `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAuMTcgMjA4LjA0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6I2UwNjg0Yjt9LmNscy0ze2ZpbGw6I2JiNDY0Yjt9LmNscy00e2ZpbGw6I2UwZGVkODt9LmNscy01e2ZpbGw6I2Q1ZDJjYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkJhYnlsb25Mb2dvPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iUGFnZV9FbGVtZW50cyIgZGF0YS1uYW1lPSJQYWdlIEVsZW1lbnRzIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik05MC4wOSwwLDAsNTJWMTU2bDkwLjA5LDUyLDkwLjA4LTUyVjUyWiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxODAuMTcgNTIuMDEgMTUxLjk3IDM1LjczIDEyNC44NSA1MS4zOSAxNTMuMDUgNjcuNjcgMTgwLjE3IDUyLjAxIi8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjI3LjEyIDY3LjY3IDExNy4yMSAxNS42NiA5MC4wOCAwIDAgNTIuMDEgMjcuMTIgNjcuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNjEuODkgMTIwLjMgOTAuMDggMTM2LjU4IDExOC4yOCAxMjAuMyA5MC4wOCAxMDQuMDIgNjEuODkgMTIwLjMiLz48cG9seWdvbiBjbGFzcz0iY2xzLTMiIHBvaW50cz0iMTUzLjA1IDY3LjY3IDE1My4wNSAxNDAuMzcgOTAuMDggMTc2LjcyIDI3LjEyIDE0MC4zNyAyNy4xMiA2Ny42NyAwIDUyLjAxIDAgMTU2LjAzIDkwLjA4IDIwOC4wNCAxODAuMTcgMTU2LjAzIDE4MC4xNyA1Mi4wMSAxNTMuMDUgNjcuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTMiIHBvaW50cz0iOTAuMDggNzEuNDYgNjEuODkgODcuNzQgNjEuODkgMTIwLjMgOTAuMDggMTA0LjAyIDExOC4yOCAxMjAuMyAxMTguMjggODcuNzQgOTAuMDggNzEuNDYiLz48cG9seWdvbiBjbGFzcz0iY2xzLTQiIHBvaW50cz0iMTUzLjA1IDY3LjY3IDExOC4yOCA4Ny43NCAxMTguMjggMTIwLjMgOTAuMDggMTM2LjU4IDkwLjA4IDE3Ni43MiAxNTMuMDUgMTQwLjM3IDE1My4wNSA2Ny42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNSIgcG9pbnRzPSIyNy4xMiA2Ny42NyA2MS44OSA4Ny43NCA2MS44OSAxMjAuMyA5MC4wOCAxMzYuNTggOTAuMDggMTc2LjcyIDI3LjEyIDE0MC4zNyAyNy4xMiA2Ny42NyIvPjwvZz48L2c+PC9zdmc+`;\r\n        } else {\r\n            imgBack.src = DefaultLoadingScreen.DefaultLogoUrl;\r\n        }\r\n\r\n        imgBack.style.width = \"150px\";\r\n        imgBack.style.gridColumn = \"1\";\r\n        imgBack.style.gridRow = \"1\";\r\n        imgBack.style.top = \"50%\";\r\n        imgBack.style.left = \"50%\";\r\n        imgBack.style.transform = \"translate(-50%, -50%)\";\r\n        imgBack.style.position = \"absolute\";\r\n\r\n        const imageSpinnerContainer = document.createElement(\"div\");\r\n        imageSpinnerContainer.style.width = \"300px\";\r\n        imageSpinnerContainer.style.gridColumn = \"1\";\r\n        imageSpinnerContainer.style.gridRow = \"1\";\r\n        imageSpinnerContainer.style.top = \"50%\";\r\n        imageSpinnerContainer.style.left = \"50%\";\r\n        imageSpinnerContainer.style.transform = \"translate(-50%, -50%)\";\r\n        imageSpinnerContainer.style.position = \"absolute\";\r\n\r\n        // Loading spinner\r\n        const imgSpinner = new Image();\r\n\r\n        if (!DefaultLoadingScreen.DefaultSpinnerUrl) {\r\n            imgSpinner.src = !svgSupport\r\n                ? \"https://cdn.babylonjs.com/Assets/loadingIcon.png\"\r\n                : `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIgMzkyIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwNjg0Yjt9LmNscy0ye2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlNwaW5uZXJJY29uPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iU3Bpbm5lciI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDAuMjEsMTI2LjQzYzMuNy03LjMxLDcuNjctMTQuNDQsMTItMjEuMzJsMy4zNi01LjEsMy41Mi01YzEuMjMtMS42MywyLjQxLTMuMjksMy42NS00LjkxczIuNTMtMy4yMSwzLjgyLTQuNzlBMTg1LjIsMTg1LjIsMCwwLDEsODMuNCw2Ny40M2EyMDgsMjA4LDAsMCwxLDE5LTE1LjY2YzMuMzUtMi40MSw2Ljc0LTQuNzgsMTAuMjUtN3M3LjExLTQuMjgsMTAuNzUtNi4zMmM3LjI5LTQsMTQuNzMtOCwyMi41My0xMS40OSwzLjktMS43Miw3Ljg4LTMuMywxMi00LjY0YTEwNC4yMiwxMDQuMjIsMCwwLDEsMTIuNDQtMy4yMyw2Mi40NCw2Mi40NCwwLDAsMSwxMi43OC0xLjM5QTI1LjkyLDI1LjkyLDAsMCwxLDE5NiwyMS40NGE2LjU1LDYuNTUsMCwwLDEsMi4wNSw5LDYuNjYsNi42NiwwLDAsMS0xLjY0LDEuNzhsLS40MS4yOWEyMi4wNywyMi4wNywwLDAsMS01Ljc4LDMsMzAuNDIsMzAuNDIsMCwwLDEtNS42NywxLjYyLDM3LjgyLDM3LjgyLDAsMCwxLTUuNjkuNzFjLTEsMC0xLjkuMTgtMi44NS4yNmwtMi44NS4yNHEtNS43Mi41MS0xMS40OCwxLjFjLTMuODQuNC03LjcxLjgyLTExLjU4LDEuNGExMTIuMzQsMTEyLjM0LDAsMCwwLTIyLjk0LDUuNjFjLTMuNzIsMS4zNS03LjM0LDMtMTAuOTQsNC42NHMtNy4xNCwzLjUxLTEwLjYsNS41MUExNTEuNiwxNTEuNiwwLDAsMCw2OC41Niw4N0M2Ny4yMyw4OC40OCw2Niw5MCw2NC42NCw5MS41NnMtMi41MSwzLjE1LTMuNzUsNC43M2wtMy41NCw0LjljLTEuMTMsMS42Ni0yLjIzLDMuMzUtMy4zMyw1YTEyNywxMjcsMCwwLDAtMTAuOTMsMjEuNDksMS41OCwxLjU4LDAsMSwxLTMtMS4xNVM0MC4xOSwxMjYuNDcsNDAuMjEsMTI2LjQzWiIvPjxyZWN0IGNsYXNzPSJjbHMtMiIgd2lkdGg9IjM5MiIgaGVpZ2h0PSIzOTIiLz48L2c+PC9nPjwvc3ZnPg==`;\r\n        } else {\r\n            imgSpinner.src = DefaultLoadingScreen.DefaultSpinnerUrl;\r\n        }\r\n\r\n        imgSpinner.style.animation = \"spin1 0.75s infinite linear\";\r\n        imgSpinner.style.transformOrigin = \"50% 50%\";\r\n\r\n        if (!svgSupport) {\r\n            const logoSize = { w: 16, h: 18.5 };\r\n            const loadingSize = { w: 30, h: 30 };\r\n            // set styling correctly\r\n            imgBack.style.width = `${logoSize.w}vh`;\r\n            imgBack.style.height = `${logoSize.h}vh`;\r\n            imgBack.style.left = `calc(50% - ${logoSize.w / 2}vh)`;\r\n            imgBack.style.top = `calc(50% - ${logoSize.h / 2}vh)`;\r\n\r\n            imgSpinner.style.width = `${loadingSize.w}vh`;\r\n            imgSpinner.style.height = `${loadingSize.h}vh`;\r\n            imgSpinner.style.left = `calc(50% - ${loadingSize.w / 2}vh)`;\r\n            imgSpinner.style.top = `calc(50% - ${loadingSize.h / 2}vh)`;\r\n        }\r\n\r\n        imageSpinnerContainer.appendChild(imgSpinner);\r\n\r\n        this._loadingDiv.appendChild(imgBack);\r\n        this._loadingDiv.appendChild(imageSpinnerContainer);\r\n\r\n        this._resizeLoadingUI();\r\n\r\n        window.addEventListener(\"resize\", this._resizeLoadingUI);\r\n\r\n        this._loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;\r\n        document.body.appendChild(this._loadingDiv);\r\n\r\n        this._loadingDiv.style.opacity = \"1\";\r\n    }\r\n\r\n    /**\r\n     * Function called to hide the loading screen\r\n     */\r\n    public hideLoadingUI(): void {\r\n        if (!this._loadingDiv) {\r\n            return;\r\n        }\r\n\r\n        const onTransitionEnd = () => {\r\n            if (this._loadingTextDiv) {\r\n                this._loadingTextDiv.remove();\r\n                this._loadingTextDiv = null;\r\n            }\r\n            if (this._loadingDiv) {\r\n                this._loadingDiv.remove();\r\n                this._loadingDiv = null;\r\n            }\r\n            if (this._style) {\r\n                this._style.remove();\r\n                this._style = null;\r\n            }\r\n            window.removeEventListener(\"resize\", this._resizeLoadingUI);\r\n        };\r\n\r\n        this._loadingDiv.style.opacity = \"0\";\r\n        this._loadingDiv.addEventListener(\"transitionend\", onTransitionEnd);\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the text to display while loading\r\n     */\r\n    public set loadingUIText(text: string) {\r\n        this._loadingText = text;\r\n\r\n        if (this._loadingTextDiv) {\r\n            this._loadingTextDiv.innerHTML = this._loadingText;\r\n        }\r\n    }\r\n\r\n    public get loadingUIText(): string {\r\n        return this._loadingText;\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the color to use for the background\r\n     */\r\n    public get loadingUIBackgroundColor(): string {\r\n        return this._loadingDivBackgroundColor;\r\n    }\r\n\r\n    public set loadingUIBackgroundColor(color: string) {\r\n        this._loadingDivBackgroundColor = color;\r\n\r\n        if (!this._loadingDiv) {\r\n            return;\r\n        }\r\n\r\n        this._loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;\r\n    }\r\n\r\n    // Resize\r\n    private _resizeLoadingUI = () => {\r\n        const canvasRect = this._renderingCanvas.getBoundingClientRect();\r\n        const canvasPositioning = window.getComputedStyle(this._renderingCanvas).position;\r\n\r\n        if (!this._loadingDiv) {\r\n            return;\r\n        }\r\n\r\n        this._loadingDiv.style.position = canvasPositioning === \"fixed\" ? \"fixed\" : \"absolute\";\r\n        this._loadingDiv.style.left = canvasRect.left + \"px\";\r\n        this._loadingDiv.style.top = canvasRect.top + \"px\";\r\n        this._loadingDiv.style.width = canvasRect.width + \"px\";\r\n        this._loadingDiv.style.height = canvasRect.height + \"px\";\r\n    };\r\n}\r\n\r\nAbstractEngine.DefaultLoadingScreenFactory = (canvas: HTMLCanvasElement) => {\r\n    return new DefaultLoadingScreen(canvas);\r\n};\r\n"]}
+{"version":3,"file":"loadingScreen.js","sourceRoot":"","sources":["../../../../dev/core/src/Loading/loadingScreen.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"../types\";\r\nimport { AbstractEngine } from \"../Engines/abstractEngine\";\r\nimport { EngineStore } from \"../Engines/engineStore\";\r\nimport type { Observer } from \"../Misc/observable\";\r\n/**\r\n * Interface used to present a loading screen while loading a scene\r\n * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen\r\n */\r\nexport interface ILoadingScreen {\r\n    /**\r\n     * Function called to display the loading screen\r\n     */\r\n    displayLoadingUI: () => void;\r\n    /**\r\n     * Function called to hide the loading screen\r\n     */\r\n    hideLoadingUI: () => void;\r\n    /**\r\n     * Gets or sets the color to use for the background\r\n     */\r\n    loadingUIBackgroundColor: string;\r\n    /**\r\n     * Gets or sets the text to display while loading\r\n     */\r\n    loadingUIText: string;\r\n}\r\n\r\n/**\r\n * Class used for the default loading screen\r\n * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/customLoadingScreen\r\n */\r\nexport class DefaultLoadingScreen implements ILoadingScreen {\r\n    private _engine: Nullable<AbstractEngine>;\r\n    private _resizeObserver: Nullable<Observer<AbstractEngine>>;\r\n    private _isLoading: boolean;\r\n    /**\r\n     * Maps a loading `HTMLDivElement` to a tuple containing the associated `HTMLCanvasElement`\r\n     * and its `DOMRect` (or `null` if not yet available).\r\n     */\r\n    private _loadingDivToRenderingCanvasMap: Map<HTMLDivElement, [HTMLCanvasElement, DOMRect | null]> = new Map();\r\n    private _loadingTextDiv: Nullable<HTMLDivElement>;\r\n    private _style: Nullable<HTMLStyleElement>;\r\n\r\n    /** Gets or sets the logo url to use for the default loading screen */\r\n    public static DefaultLogoUrl = \"\";\r\n\r\n    /** Gets or sets the spinner url to use for the default loading screen */\r\n    public static DefaultSpinnerUrl = \"\";\r\n\r\n    /**\r\n     * Creates a new default loading screen\r\n     * @param _renderingCanvas defines the canvas used to render the scene\r\n     * @param _loadingText defines the default text to display\r\n     * @param _loadingDivBackgroundColor defines the default background color\r\n     */\r\n    constructor(\r\n        private _renderingCanvas: HTMLCanvasElement,\r\n        private _loadingText = \"\",\r\n        private _loadingDivBackgroundColor = \"black\"\r\n    ) {}\r\n\r\n    /**\r\n     * Function called to display the loading screen\r\n     */\r\n    public displayLoadingUI(): void {\r\n        if (this._isLoading) {\r\n            // Do not add a loading screen if it is already loading\r\n            return;\r\n        }\r\n\r\n        this._isLoading = true;\r\n        // get current engine by rendering canvas\r\n        this._engine = EngineStore.Instances.find((engine) => engine.getRenderingCanvas() === this._renderingCanvas) as AbstractEngine;\r\n\r\n        const loadingDiv = document.createElement(\"div\");\r\n\r\n        loadingDiv.id = \"babylonjsLoadingDiv\";\r\n        loadingDiv.style.opacity = \"0\";\r\n        loadingDiv.style.transition = \"opacity 1.5s ease\";\r\n        loadingDiv.style.pointerEvents = \"none\";\r\n        loadingDiv.style.display = \"grid\";\r\n        loadingDiv.style.gridTemplateRows = \"100%\";\r\n        loadingDiv.style.gridTemplateColumns = \"100%\";\r\n        loadingDiv.style.justifyItems = \"center\";\r\n        loadingDiv.style.alignItems = \"center\";\r\n\r\n        // Loading text\r\n        this._loadingTextDiv = document.createElement(\"div\");\r\n        this._loadingTextDiv.style.position = \"absolute\";\r\n        this._loadingTextDiv.style.left = \"0\";\r\n        this._loadingTextDiv.style.top = \"50%\";\r\n        this._loadingTextDiv.style.marginTop = \"80px\";\r\n        this._loadingTextDiv.style.width = \"100%\";\r\n        this._loadingTextDiv.style.height = \"20px\";\r\n        this._loadingTextDiv.style.fontFamily = \"Arial\";\r\n        this._loadingTextDiv.style.fontSize = \"14px\";\r\n        this._loadingTextDiv.style.color = \"white\";\r\n        this._loadingTextDiv.style.textAlign = \"center\";\r\n        this._loadingTextDiv.style.zIndex = \"1\";\r\n        this._loadingTextDiv.innerHTML = \"Loading\";\r\n\r\n        loadingDiv.appendChild(this._loadingTextDiv);\r\n\r\n        //set the predefined text\r\n        this._loadingTextDiv.innerHTML = this._loadingText;\r\n\r\n        // Generating keyframes\r\n        this._style = document.createElement(\"style\");\r\n        this._style.type = \"text/css\";\r\n        const keyFrames = `@-webkit-keyframes spin1 {\\\r\n                            0% { -webkit-transform: rotate(0deg);}\r\n                            100% { -webkit-transform: rotate(360deg);}\r\n                        }\\\r\n                        @keyframes spin1 {\\\r\n                            0% { transform: rotate(0deg);}\r\n                            100% { transform: rotate(360deg);}\r\n                        }`;\r\n        this._style.innerHTML = keyFrames;\r\n        document.getElementsByTagName(\"head\")[0].appendChild(this._style);\r\n\r\n        const svgSupport = !!window.SVGSVGElement;\r\n        // Loading img\r\n        const imgBack = new Image();\r\n        if (!DefaultLoadingScreen.DefaultLogoUrl) {\r\n            imgBack.src = !svgSupport\r\n                ? \"https://cdn.babylonjs.com/Assets/babylonLogo.png\"\r\n                : `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAuMTcgMjA4LjA0Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6I2UwNjg0Yjt9LmNscy0ze2ZpbGw6I2JiNDY0Yjt9LmNscy00e2ZpbGw6I2UwZGVkODt9LmNscy01e2ZpbGw6I2Q1ZDJjYTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkJhYnlsb25Mb2dvPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iUGFnZV9FbGVtZW50cyIgZGF0YS1uYW1lPSJQYWdlIEVsZW1lbnRzIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik05MC4wOSwwLDAsNTJWMTU2bDkwLjA5LDUyLDkwLjA4LTUyVjUyWiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxODAuMTcgNTIuMDEgMTUxLjk3IDM1LjczIDEyNC44NSA1MS4zOSAxNTMuMDUgNjcuNjcgMTgwLjE3IDUyLjAxIi8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjI3LjEyIDY3LjY3IDExNy4yMSAxNS42NiA5MC4wOCAwIDAgNTIuMDEgMjcuMTIgNjcuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNjEuODkgMTIwLjMgOTAuMDggMTM2LjU4IDExOC4yOCAxMjAuMyA5MC4wOCAxMDQuMDIgNjEuODkgMTIwLjMiLz48cG9seWdvbiBjbGFzcz0iY2xzLTMiIHBvaW50cz0iMTUzLjA1IDY3LjY3IDE1My4wNSAxNDAuMzcgOTAuMDggMTc2LjcyIDI3LjEyIDE0MC4zNyAyNy4xMiA2Ny42NyAwIDUyLjAxIDAgMTU2LjAzIDkwLjA4IDIwOC4wNCAxODAuMTcgMTU2LjAzIDE4MC4xNyA1Mi4wMSAxNTMuMDUgNjcuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTMiIHBvaW50cz0iOTAuMDggNzEuNDYgNjEuODkgODcuNzQgNjEuODkgMTIwLjMgOTAuMDggMTA0LjAyIDExOC4yOCAxMjAuMyAxMTguMjggODcuNzQgOTAuMDggNzEuNDYiLz48cG9seWdvbiBjbGFzcz0iY2xzLTQiIHBvaW50cz0iMTUzLjA1IDY3LjY3IDExOC4yOCA4Ny43NCAxMTguMjggMTIwLjMgOTAuMDggMTM2LjU4IDkwLjA4IDE3Ni43MiAxNTMuMDUgMTQwLjM3IDE1My4wNSA2Ny42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNSIgcG9pbnRzPSIyNy4xMiA2Ny42NyA2MS44OSA4Ny43NCA2MS44OSAxMjAuMyA5MC4wOCAxMzYuNTggOTAuMDggMTc2LjcyIDI3LjEyIDE0MC4zNyAyNy4xMiA2Ny42NyIvPjwvZz48L2c+PC9zdmc+`;\r\n        } else {\r\n            imgBack.src = DefaultLoadingScreen.DefaultLogoUrl;\r\n        }\r\n\r\n        imgBack.style.width = \"150px\";\r\n        imgBack.style.gridColumn = \"1\";\r\n        imgBack.style.gridRow = \"1\";\r\n        imgBack.style.top = \"50%\";\r\n        imgBack.style.left = \"50%\";\r\n        imgBack.style.transform = \"translate(-50%, -50%)\";\r\n        imgBack.style.position = \"absolute\";\r\n\r\n        const imageSpinnerContainer = document.createElement(\"div\");\r\n        imageSpinnerContainer.style.width = \"300px\";\r\n        imageSpinnerContainer.style.gridColumn = \"1\";\r\n        imageSpinnerContainer.style.gridRow = \"1\";\r\n        imageSpinnerContainer.style.top = \"50%\";\r\n        imageSpinnerContainer.style.left = \"50%\";\r\n        imageSpinnerContainer.style.transform = \"translate(-50%, -50%)\";\r\n        imageSpinnerContainer.style.position = \"absolute\";\r\n\r\n        // Loading spinner\r\n        const imgSpinner = new Image();\r\n\r\n        if (!DefaultLoadingScreen.DefaultSpinnerUrl) {\r\n            imgSpinner.src = !svgSupport\r\n                ? \"https://cdn.babylonjs.com/Assets/loadingIcon.png\"\r\n                : `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOTIgMzkyIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2UwNjg0Yjt9LmNscy0ye2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlNwaW5uZXJJY29uPC90aXRsZT48ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj48ZyBpZD0iU3Bpbm5lciI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDAuMjEsMTI2LjQzYzMuNy03LjMxLDcuNjctMTQuNDQsMTItMjEuMzJsMy4zNi01LjEsMy41Mi01YzEuMjMtMS42MywyLjQxLTMuMjksMy42NS00LjkxczIuNTMtMy4yMSwzLjgyLTQuNzlBMTg1LjIsMTg1LjIsMCwwLDEsODMuNCw2Ny40M2EyMDgsMjA4LDAsMCwxLDE5LTE1LjY2YzMuMzUtMi40MSw2Ljc0LTQuNzgsMTAuMjUtN3M3LjExLTQuMjgsMTAuNzUtNi4zMmM3LjI5LTQsMTQuNzMtOCwyMi41My0xMS40OSwzLjktMS43Miw3Ljg4LTMuMywxMi00LjY0YTEwNC4yMiwxMDQuMjIsMCwwLDEsMTIuNDQtMy4yMyw2Mi40NCw2Mi40NCwwLDAsMSwxMi43OC0xLjM5QTI1LjkyLDI1LjkyLDAsMCwxLDE5NiwyMS40NGE2LjU1LDYuNTUsMCwwLDEsMi4wNSw5LDYuNjYsNi42NiwwLDAsMS0xLjY0LDEuNzhsLS40MS4yOWEyMi4wNywyMi4wNywwLDAsMS01Ljc4LDMsMzAuNDIsMzAuNDIsMCwwLDEtNS42NywxLjYyLDM3LjgyLDM3LjgyLDAsMCwxLTUuNjkuNzFjLTEsMC0xLjkuMTgtMi44NS4yNmwtMi44NS4yNHEtNS43Mi41MS0xMS40OCwxLjFjLTMuODQuNC03LjcxLjgyLTExLjU4LDEuNGExMTIuMzQsMTEyLjM0LDAsMCwwLTIyLjk0LDUuNjFjLTMuNzIsMS4zNS03LjM0LDMtMTAuOTQsNC42NHMtNy4xNCwzLjUxLTEwLjYsNS41MUExNTEuNiwxNTEuNiwwLDAsMCw2OC41Niw4N0M2Ny4yMyw4OC40OCw2Niw5MCw2NC42NCw5MS41NnMtMi41MSwzLjE1LTMuNzUsNC43M2wtMy41NCw0LjljLTEuMTMsMS42Ni0yLjIzLDMuMzUtMy4zMyw1YTEyNywxMjcsMCwwLDAtMTAuOTMsMjEuNDksMS41OCwxLjU4LDAsMSwxLTMtMS4xNVM0MC4xOSwxMjYuNDcsNDAuMjEsMTI2LjQzWiIvPjxyZWN0IGNsYXNzPSJjbHMtMiIgd2lkdGg9IjM5MiIgaGVpZ2h0PSIzOTIiLz48L2c+PC9nPjwvc3ZnPg==`;\r\n        } else {\r\n            imgSpinner.src = DefaultLoadingScreen.DefaultSpinnerUrl;\r\n        }\r\n\r\n        imgSpinner.style.animation = \"spin1 0.75s infinite linear\";\r\n        imgSpinner.style.transformOrigin = \"50% 50%\";\r\n\r\n        if (!svgSupport) {\r\n            const logoSize = { w: 16, h: 18.5 };\r\n            const loadingSize = { w: 30, h: 30 };\r\n            // set styling correctly\r\n            imgBack.style.width = `${logoSize.w}vh`;\r\n            imgBack.style.height = `${logoSize.h}vh`;\r\n            imgBack.style.left = `calc(50% - ${logoSize.w / 2}vh)`;\r\n            imgBack.style.top = `calc(50% - ${logoSize.h / 2}vh)`;\r\n\r\n            imgSpinner.style.width = `${loadingSize.w}vh`;\r\n            imgSpinner.style.height = `${loadingSize.h}vh`;\r\n            imgSpinner.style.left = `calc(50% - ${loadingSize.w / 2}vh)`;\r\n            imgSpinner.style.top = `calc(50% - ${loadingSize.h / 2}vh)`;\r\n        }\r\n\r\n        imageSpinnerContainer.appendChild(imgSpinner);\r\n\r\n        loadingDiv.appendChild(imgBack);\r\n        loadingDiv.appendChild(imageSpinnerContainer);\r\n        loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;\r\n        loadingDiv.style.opacity = \"1\";\r\n\r\n        const canvases: Array<HTMLCanvasElement> = [];\r\n        const views = this._engine.views;\r\n        if (views?.length) {\r\n            for (const view of views) {\r\n                if (view.enabled) {\r\n                    canvases.push(view.target);\r\n                }\r\n            }\r\n        } else {\r\n            canvases.push(this._renderingCanvas);\r\n        }\r\n        canvases.forEach((canvas, index) => {\r\n            const clonedLoadingDiv = loadingDiv!.cloneNode(true) as HTMLDivElement;\r\n            clonedLoadingDiv.id += `-${index}`;\r\n            this._loadingDivToRenderingCanvasMap.set(clonedLoadingDiv, [canvas, null]);\r\n        });\r\n\r\n        this._resizeLoadingUI();\r\n\r\n        this._resizeObserver = this._engine.onResizeObservable.add(() => {\r\n            this._resizeLoadingUI();\r\n        });\r\n\r\n        this._loadingDivToRenderingCanvasMap.forEach((_, loadingDiv) => {\r\n            document.body.appendChild(loadingDiv);\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Function called to hide the loading screen\r\n     */\r\n    public hideLoadingUI(): void {\r\n        if (!this._isLoading) {\r\n            return;\r\n        }\r\n\r\n        let completedTransitions = 0;\r\n\r\n        const onTransitionEnd = (event: TransitionEvent) => {\r\n            const loadingDiv = event.target as HTMLDivElement;\r\n            // ensure that ending transition event is generated by one of the current loadingDivs\r\n            const isTransitionEndOnLoadingDiv = this._loadingDivToRenderingCanvasMap.has(loadingDiv);\r\n\r\n            if (isTransitionEndOnLoadingDiv) {\r\n                completedTransitions++;\r\n                loadingDiv.remove();\r\n\r\n                const allTransitionsCompleted = completedTransitions === this._loadingDivToRenderingCanvasMap.size;\r\n                if (allTransitionsCompleted) {\r\n                    if (this._loadingTextDiv) {\r\n                        this._loadingTextDiv.remove();\r\n                        this._loadingTextDiv = null;\r\n                    }\r\n                    if (this._style) {\r\n                        this._style.remove();\r\n                        this._style = null;\r\n                    }\r\n\r\n                    window.removeEventListener(\"transitionend\", onTransitionEnd);\r\n                    this._engine!.onResizeObservable.remove(this._resizeObserver);\r\n                    this._loadingDivToRenderingCanvasMap.clear();\r\n                    this._engine = null;\r\n                    this._isLoading = false;\r\n                }\r\n            }\r\n        };\r\n\r\n        this._loadingDivToRenderingCanvasMap.forEach((_, loadingDiv) => {\r\n            loadingDiv.style.opacity = \"0\";\r\n        });\r\n\r\n        window.addEventListener(\"transitionend\", onTransitionEnd);\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the text to display while loading\r\n     */\r\n    public set loadingUIText(text: string) {\r\n        this._loadingText = text;\r\n\r\n        if (this._loadingTextDiv) {\r\n            this._loadingTextDiv.innerHTML = this._loadingText;\r\n        }\r\n    }\r\n\r\n    public get loadingUIText(): string {\r\n        return this._loadingText;\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the color to use for the background\r\n     */\r\n    public get loadingUIBackgroundColor(): string {\r\n        return this._loadingDivBackgroundColor;\r\n    }\r\n\r\n    public set loadingUIBackgroundColor(color: string) {\r\n        this._loadingDivBackgroundColor = color;\r\n\r\n        if (!this._isLoading) {\r\n            return;\r\n        }\r\n\r\n        this._loadingDivToRenderingCanvasMap.forEach((_, loadingDiv) => {\r\n            loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Checks if the layout of the canvas has changed by comparing the current layout\r\n     * rectangle with the previous one.\r\n     *\r\n     * This function compares of the two `DOMRect` objects to determine if any of the layout dimensions have changed.\r\n     * If the layout has changed or if there is no previous layout (i.e., `previousCanvasRect` is `null`),\r\n     * it returns `true`. Otherwise, it returns `false`.\r\n     *\r\n     * @param previousCanvasRect defines the previously recorded `DOMRect` of the canvas, or `null` if no previous state exists.\r\n     * @param currentCanvasRect defines the current `DOMRect` of the canvas to compare against the previous layout.\r\n     * @returns `true` if the layout has changed, otherwise `false`.\r\n     */\r\n    private _isCanvasLayoutChanged(previousCanvasRect: DOMRect | null, currentCanvasRect: DOMRect) {\r\n        return (\r\n            !previousCanvasRect ||\r\n            previousCanvasRect.left !== currentCanvasRect.left ||\r\n            previousCanvasRect.top !== currentCanvasRect.top ||\r\n            previousCanvasRect.right !== currentCanvasRect.right ||\r\n            previousCanvasRect.bottom !== currentCanvasRect.bottom ||\r\n            previousCanvasRect.width !== currentCanvasRect.width ||\r\n            previousCanvasRect.height !== currentCanvasRect.height ||\r\n            previousCanvasRect.x !== currentCanvasRect.x ||\r\n            previousCanvasRect.y !== currentCanvasRect.y\r\n        );\r\n    }\r\n\r\n    // Resize\r\n    private _resizeLoadingUI = () => {\r\n        if (!this._isLoading) {\r\n            return;\r\n        }\r\n\r\n        this._loadingDivToRenderingCanvasMap.forEach(([canvas, previousCanvasRect], loadingDiv) => {\r\n            const currentCanvasRect = canvas.getBoundingClientRect();\r\n            if (this._isCanvasLayoutChanged(previousCanvasRect, currentCanvasRect)) {\r\n                const canvasPositioning = window.getComputedStyle(canvas).position;\r\n\r\n                loadingDiv.style.position = canvasPositioning === \"fixed\" ? \"fixed\" : \"absolute\";\r\n                loadingDiv.style.left = currentCanvasRect.left + \"px\";\r\n                loadingDiv.style.top = currentCanvasRect.top + \"px\";\r\n                loadingDiv.style.width = currentCanvasRect.width + \"px\";\r\n                loadingDiv.style.height = currentCanvasRect.height + \"px\";\r\n\r\n                this._loadingDivToRenderingCanvasMap.set(loadingDiv, [canvas, currentCanvasRect]);\r\n            }\r\n        });\r\n    };\r\n}\r\n\r\nAbstractEngine.DefaultLoadingScreenFactory = (canvas: HTMLCanvasElement) => {\r\n    return new DefaultLoadingScreen(canvas);\r\n};\r\n"]}

package/Materials/Node/Blocks/Dual/lightBlock.js

@@ -186,6 +186,8 @@ export class LightBlock extends NodeMaterialBlock {
         }
     }
     updateUniformsAndSamples(state, nodeMaterial, defines, uniformBuffers) {
+        state.samplers.push("areaLightsLTC1Sampler");
+        state.samplers.push("areaLightsLTC2Sampler");
         for (let lightIndex = 0; lightIndex < nodeMaterial.maxSimultaneousLights; lightIndex++) {
             if (!defines["LIGHT" + lightIndex]) {
                 break;