@preference-sl/pref-viewer 2.10.0-beta.8 → 2.10.0

package/src/index.js

@@ -22,7 +22,7 @@
  *     style="width:800px; height:600px;">
  * </pref-viewer>
  * ```
- * 
+ *
  * Load scene a URL:
  * ```html
  * <pref-viewer
@@ -39,75 +39,107 @@
  * </pref-viewer>
  * ```
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName } from "@babylonjs/core";
+import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName, HDRCubeTexture, IblShadowsRenderPipeline } from "@babylonjs/core";
 import "@babylonjs/loaders";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
 import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
 import { initDb, loadModel } from "./gltf-storage.js";
 
+class PrefViewerTask {
+    static Types = Object.freeze({
+        Config: "config",
+        Environment: "environment",
+        Materials: "materials",
+        Model: "model",
+        Options: "options",
+    });
+
+    /**
+     * value: any payload for the task
+     * type: must match one of PrefViewerTask.Types values (case-insensitive)
+     */
+    constructor(value, type) {
+        this.value = value;
+
+        const t = typeof type === "string" ? type.toLowerCase() : String(type).toLowerCase();
+        const allowed = Object.values(PrefViewerTask.Types);
+        if (!allowed.includes(t)) {
+            throw new TypeError(
+                `PrefViewerTask: invalid type "${type}". Allowed types: ${allowed.join(", ")}`
+            );
+        }
+        this.type = t;
+
+        Object.freeze(this);
+    }
+}
+
 class PrefViewer extends HTMLElement {
-    #initialized = false;
+    initialized = false;
+    loaded = false;
+    loading = false;
+    #taskQueue = [];
 
     #data = {
         containers: {
             model: {
                 name: "model",
-                container: null,
+                assetContainer: null,
                 show: true,
                 storage: null,
                 visible: false,
                 size: null,
-                timestamp: null,
-                changed: false,
+                timeStamp: null,
+                changed: { pending: false, success: false },
             },
             environment: {
                 name: "environment",
-                container: null,
+                assetContainer: null,
                 show: true,
                 storage: null,
                 visible: false,
                 size: null,
-                timestamp: null,
-                changed: false,
+                timeStamp: null,
+                changed: { pending: false, success: false },
             },
             materials: {
                 name: "materials",
-                container: null,
+                assetContainer: null,
                 storage: null,
                 show: true,
                 visible: false,
                 size: null,
-                timestamp: null,
-                changed: false,
+                timeStamp: null,
+                changed: { pending: false, success: false },
             },
         },
         options: {
             camera: {
                 value: null,
                 locked: true,
-                changed: false,
+                changed: { pending: false, success: false },
             },
             materials: {
                 innerWall: {
                     value: null,
                     prefix: "innerWall",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 outerWall: {
                     value: null,
                     prefix: "outerWall",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 innerFloor: {
                     value: null,
                     prefix: "innerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
                 outerFloor: {
                     value: null,
                     prefix: "outerFloor",
-                    changed: false,
+                    changed: { pending: false, success: false },
                 },
             },
         },
@@ -160,9 +192,15 @@ class PrefViewer extends HTMLElement {
             case "scene":
                 this.loadScene(value);
                 break;
+            case "materials":
+                this.loadMaterials(value);
+                break;
+            case "options":
+                this.setOptions(value);
+                break;
             case "show-model":
                 data = value.toLowerCase?.() === "true";
-                if (this.#initialized) {
+                if (this.initialized) {
                     data ? this.showModel() : this.hideModel();
                 } else {
                     this.#data.containers.model.show = data;
@@ -170,7 +208,7 @@ class PrefViewer extends HTMLElement {
                 break;
             case "show-scene":
                 data = value.toLowerCase?.() === "true";
-                if (this.#initialized) {
+                if (this.initialized) {
                     data ? this.showScene() : this.hideScene();
                 } else {
                     this.#data.containers.environment.show = data;
@@ -184,18 +222,19 @@ class PrefViewer extends HTMLElement {
             const error = 'PrefViewer: provide "models" as array of model and environment';
             console.error(error);
             this.dispatchEvent(
-                new CustomEvent("model-error", {
-                    detail: { error: new Error(error) },
+                new CustomEvent("scene-error", {
                     bubbles: true,
+                    cancelable: false,
                     composed: true,
+                    detail: { error: new Error(error) },
                 })
             );
             return false;
         }
 
         this.#initializeBabylon();
-        this.#loadContainers(true, true, true);
-        this.#initialized = true;
+        this.initialized = true;
+        this.#processNextTask();
     }
 
     disconnectedCallback() {
@@ -225,14 +264,90 @@ class PrefViewer extends HTMLElement {
         this.shadowRoot.append(this.#wrapper);
     }
 
+    #setStatusLoading() {
+        this.loaded = false;
+        this.loading = true;
+        if (this.hasAttribute("loaded")) {
+            this.removeAttribute("loaded");
+        }
+        this.setAttribute("loading", "");
+        this.dispatchEvent(
+            new CustomEvent("scene-loading", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+            })
+        );
+        this.#engine.stopRenderLoop(this.#renderLoop);
+    }
+
+    async #setStatusLoaded() {
+        const toLoadDetail = {
+            container_model: !!this.#data.containers.model.changed.pending,
+            container_environment: !!this.#data.containers.environment.changed.pending,
+            container_materials: !!this.#data.containers.materials.changed.pending,
+            options_camera: !!this.#data.options.camera.changed.pending,
+            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
+            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
+            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
+            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
+        };
+        const loadedDetail = {
+            container_model: !!this.#data.containers.model.changed.success,
+            container_environment: !!this.#data.containers.environment.changed.success,
+            container_materials: !!this.#data.containers.materials.changed.success,
+            options_camera: !!this.#data.options.camera.changed.success,
+            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.success,
+            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.success,
+            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.success,
+            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.success,
+        };
+        const detail = {
+            tried: toLoadDetail,
+            success: loadedDetail,
+        };
+        
+        this.dispatchEvent(
+            new CustomEvent("scene-loaded", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+                detail: detail,
+            })
+        );
+
+        await this.#scene.whenReadyAsync();
+        this.#engine.runRenderLoop(this.#renderLoop);
+        
+        this.#resetChangedFlags();
+
+        if (this.hasAttribute("loading")) {
+            this.removeAttribute("loading");
+        }
+        this.setAttribute("loaded", "");
+
+        this.loaded = true;
+        this.loading = false;
+
+        this.#processNextTask();
+    }
+
     // Data
     #checkCameraChanged(options) {
         if (!options || !options.camera) {
             return false;
         }
-        this.#data.options.camera.changed = options.camera && options.camera !== this.#data.options.camera.value ? true : false;
-        this.#data.options.camera.value = this.#data.options.camera.changed ? options.camera : this.#data.options.camera.value;
-        return this.#data.options.camera.changed;
+        const prev = this.#data.options.camera.value;
+        const changed = options.camera !== prev;
+
+        this.#data.options.camera.changed.pending = changed;
+        this.#data.options.camera.changed.success = false;
+        if (changed) {
+            this.#data.options.camera.changed.value = prev;
+            this.#data.options.camera.changed.locked = this.#data.options.camera.locked;
+            this.#data.options.camera.value = options.camera;
+        }
+        return changed;
     }
 
     #checkMaterialsChanged(options) {
@@ -242,40 +357,61 @@ class PrefViewer extends HTMLElement {
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
-            this.#data.options.materials[material].changed = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
-            this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : this.#data.options.materials[material].value;
-            someChanged = someChanged || this.#data.options.materials[material].changed;
+            const state = this.#data.options.materials[material];
+            const prev = state.value;
+            const incoming = options[key];
+            const changed = !!incoming && incoming !== prev;
+
+            state.changed.pending = changed;
+            state.changed.success = false;
+            if (changed) {
+                state.changed.value = prev;
+                state.value = incoming;
+            }
+            someChanged = someChanged || changed;
         });
         return someChanged;
     }
 
-    #storeChangedFlagsForContainer(container) {
-        container.timestamp = container.changed.timestamp;
-        container.size = container.changed.size;
+    #storeChangedFlagsForContainer(container, success) {
+        if (success) {
+            container.timeStamp = container.changed.timeStamp;
+            container.size = container.changed.size;
+            container.changed.success = true;
+        } else {
+            container.changed.success = false;
+        }
     }
 
     #resetChangedFlags() {
-        Object.values(this.#data.containers).forEach((container) => (container.changed = false));
-        Object.values(this.#data.options.materials).forEach((material) => (material.changed = false));
-        this.#data.options.camera.changed = false;
+        const reset = (node) => {
+            node.changed = { pending: false, success: false };
+        };
+        Object.values(this.#data.containers).forEach(reset);
+        Object.values(this.#data.options.materials).forEach(reset);
+        reset(this.#data.options.camera);
     }
 
     // Babylon.js
     async #initializeBabylon() {
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
+        this.#engine.disableUniformBuffers = true;
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
         this.#createCamera();
         this.#createLights();
         this.#setupInteraction();
-
-        this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
-        this.#canvasResizeObserver.observe(this.#canvas);
-
         await this.#createXRExperience();
+        this.#engine.runRenderLoop(this.#renderLoop);
+        this.#canvasResizeObserver.observe(this.#canvas);
     }
 
-    addStylesToARButton() {
+    // If this function is defined as '#renderLoop() {}' it is not executed in 'this.#engine.runRenderLoop(this.#renderLoop)'
+    #renderLoop = () => {
+        this.#scene && this.#scene.render();
+    };
+
+    #addStylesToARButton() {
         const css = '.babylonVRicon { color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%222048%22%20height%3D%221152%22%20viewBox%3D%220%200%202048%201152%22%20version%3D%221.1%22%3E%3Cpath%20transform%3D%22rotate%28180%201024%2C576.0000000000001%29%22%20d%3D%22m1109%2C896q17%2C0%2030%2C-12t13%2C-30t-12.5%2C-30.5t-30.5%2C-12.5l-170%2C0q-18%2C0%20-30.5%2C12.5t-12.5%2C30.5t13%2C30t30%2C12l170%2C0zm-85%2C256q59%2C0%20132.5%2C-1.5t154.5%2C-5.5t164.5%2C-11.5t163%2C-20t150%2C-30t124.5%2C-41.5q23%2C-11%2042%2C-24t38%2C-30q27%2C-25%2041%2C-61.5t14%2C-72.5l0%2C-257q0%2C-123%20-47%2C-232t-128%2C-190t-190%2C-128t-232%2C-47l-81%2C0q-37%2C0%20-68.5%2C14t-60.5%2C34.5t-55.5%2C45t-53%2C45t-53%2C34.5t-55.5%2C14t-55.5%2C-14t-53%2C-34.5t-53%2C-45t-55.5%2C-45t-60.5%2C-34.5t-68.5%2C-14l-81%2C0q-123%2C0%20-232%2C47t-190%2C128t-128%2C190t-47%2C232l0%2C257q0%2C68%2038%2C115t97%2C73q54%2C24%20124.5%2C41.5t150%2C30t163%2C20t164.5%2C11.5t154.5%2C5.5t132.5%2C1.5zm939%2C-298q0%2C39%20-24.5%2C67t-58.5%2C42q-54%2C23%20-122%2C39.5t-143.5%2C28t-155.5%2C19t-157%2C11t-148.5%2C5t-129.5%2C1.5q-59%2C0%20-130%2C-1.5t-148%2C-5t-157%2C-11t-155.5%2C-19t-143.5%2C-28t-122%2C-39.5q-34%2C-14%20-58.5%2C-42t-24.5%2C-67l0%2C-257q0%2C-106%2040.5%2C-199t110%2C-162.5t162.5%2C-109.5t199%2C-40l81%2C0q27%2C0%2052%2C14t50%2C34.5t51%2C44.5t55.5%2C44.5t63.5%2C34.5t74%2C14t74%2C-14t63.5%2C-34.5t55.5%2C-44.5t51%2C-44.5t50%2C-34.5t52%2C-14l14%2C0q37%2C0%2070%2C0.5t64.5%2C4.5t63.5%2C12t68%2C23q71%2C30%20128.5%2C78.5t98.5%2C110t63.5%2C133.5t22.5%2C149l0%2C257z%22%20fill%3D%22white%22%20/%3E%3C/svg%3E%0A); background-size: 80%; background-repeat:no-repeat; background-position: center; border: none; outline: none; transition: transform 0.125s ease-out } .babylonVRicon:hover { transform: scale(1.05) } .babylonVRicon:active {background-color: rgba(51,51,51,1) } .babylonVRicon:focus {background-color: rgba(51,51,51,1) }.babylonVRicon.vrdisplaypresenting { background-image: none;} .vrdisplaypresenting::after { content: "EXIT"} .xr-error::after { content: "ERROR"}';
         const style = document.createElement("style");
         style.appendChild(document.createTextNode(css));
@@ -324,7 +460,7 @@ class PrefViewer extends HTMLElement {
                 this.#XRExperience.baseExperience.onInitialXRPoseSetObservable.notifyObservers(this.#XRExperience.baseExperience.camera);
             });
 
-            this.addStylesToARButton();
+            this.#addStylesToARButton();
         } catch (error) {
             console.warn("PrefViewer: failed to create WebXR experience", error);
             this.#XRExperience = null;
@@ -339,12 +475,18 @@ class PrefViewer extends HTMLElement {
         this.#camera.lowerBetaLimit = Math.PI * 0.25;
         this.#camera.lowerRadiusLimit = 5;
         this.#camera.upperRadiusLimit = 20;
-        this.#camera.metadata = { locked: false }
-        this.#camera = this.#camera;
+        this.#camera.metadata = { locked: false };
         this.#camera.attachControl(this.#canvas, true);
+        this.#scene.activeCamera = this.#camera;
     }
 
     #createLights() {
+        this.#initEnvironmentTexture();
+
+        if (this.#scene.environmentTexture) {
+            return true;
+        }
+
         // 1) Stronger ambient fill
         this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
         this.#hemiLight.intensity = 0.6;
@@ -354,7 +496,7 @@ class PrefViewer extends HTMLElement {
         this.#dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
         this.#dirLight.intensity = 0.6;
 
-        // 3) Soft shadows
+        // // 3) Soft shadows
         this.#shadowGen = new ShadowGenerator(1024, this.#dirLight);
         this.#shadowGen.useBlurExponentialShadowMap = true;
         this.#shadowGen.blurKernel = 16;
@@ -366,6 +508,94 @@ class PrefViewer extends HTMLElement {
         this.#cameraLight.intensity = 0.3;
     }
 
+    #initEnvironmentTexture() {
+        return false;
+        if (this.#scene.environmentTexture) {
+            return true;
+        }
+        const hdrTextureURI = "../src/environments/noon_grass.hdr";
+        const hdrTexture = new HDRCubeTexture(hdrTextureURI, this.#scene, 128);
+        hdrTexture.gammaSpace = true;
+        hdrTexture._noMipmap = false;
+        hdrTexture.level = 2.0;
+        this.#scene.environmentTexture = hdrTexture;
+    }
+
+    #initIBLShadows() {
+        if (!this.#scene.environmentTexture) {
+            return false;
+        }
+
+        let createIBLShadowPipeline = function (scene) {
+            const pipeline = new IblShadowsRenderPipeline(
+                "iblShadowsPipeline",
+                scene,
+                {
+                    resolutionExp: 7,
+                    sampleDirections: 2,
+                    ssShadowsEnabled: true,
+                    shadowRemanence: 0.8,
+                    triPlanarVoxelization: true,
+                    shadowOpacity: 0.8,
+                },
+                [scene.activeCamera]
+            );
+            pipeline.allowDebugPasses = false;
+            pipeline.gbufferDebugEnabled = true;
+            pipeline.importanceSamplingDebugEnabled = false;
+            pipeline.voxelDebugEnabled = false;
+            pipeline.voxelDebugDisplayMip = 1;
+            pipeline.voxelDebugAxis = 2;
+            pipeline.voxelTracingDebugEnabled = false;
+            pipeline.spatialBlurPassDebugEnabled = false;
+            pipeline.accumulationPassDebugEnabled = false;
+            return pipeline;
+        };
+
+        let iblShadowsPipeline = createIBLShadowPipeline(this.#scene);
+
+        this.#scene.meshes.forEach((mesh) => {
+            if (mesh.id.startsWith("__root__") || mesh.name === "hdri") {
+                return false;
+            }
+            iblShadowsPipeline.addShadowCastingMesh(mesh);
+            iblShadowsPipeline.updateSceneBounds();
+        });
+
+        this.#scene.materials.forEach((material) => {
+            iblShadowsPipeline.addShadowReceivingMaterial(material);
+        });
+    }
+
+    #initShadows() {
+        if (!this.#scene.environmentTexture) {
+            this.#initIBLShadows();
+            return true;
+        }
+
+        this.#scene.meshes.forEach((mesh) => {
+            if (mesh.id.startsWith("__root__")) {
+                return false;
+            }
+            mesh.receiveShadows = true;
+            if (!mesh.name === "hdri") {
+                this.#shadowGen.addShadowCaster(mesh, true);
+            }
+        });
+    }
+
+    #setMaxSimultaneousLights() {
+        let lightsNumber = 1; // Como mínimo una luz correspondiente a la textura de environmentTexture
+        this.#scene.lights.forEach((light) => {
+            if (light.isEnabled()) {
+                ++lightsNumber;
+            }
+        });
+        if (this.#scene.materials) {
+            this.#scene.materials.forEach((material) => (material.maxSimultaneousLights = lightsNumber));
+        }
+    }
+
     #setupInteraction() {
         this.#canvas.addEventListener("wheel", (event) => {
             if (!this.#scene || !this.#camera) {
@@ -397,14 +627,14 @@ class PrefViewer extends HTMLElement {
             xhr.onload = () => {
                 if (xhr.status === 200) {
                     const size = parseInt(xhr.getResponseHeader("Content-Length"));
-                    const timestamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
-                    resolve(size, timestamp);
+                    const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    resolve([size, timeStamp]);
                 } else {
-                    resolve(0, null);
+                    resolve([0, null]);
                 }
             };
             xhr.onerror = () => {
-                resolve(0, null);
+                resolve([0, null]);
             };
             xhr.send();
         });
@@ -432,7 +662,7 @@ class PrefViewer extends HTMLElement {
         try {
             JSON.parse(decoded);
             isJson = true;
-        } catch {}
+        } catch { }
         extension = isJson ? ".gltf" : ".glb";
         const type = isJson ? "model/gltf+json" : "model/gltf-binary";
         const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
@@ -468,10 +698,10 @@ class PrefViewer extends HTMLElement {
         }
 
         const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.assetContainer.changed || optionMaterial.changed)) {
+        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
             containers.push(this.#data.containers.model.assetContainer);
         }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.assetContainer.changed || optionMaterial.changed)) {
+        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
@@ -488,6 +718,13 @@ class PrefViewer extends HTMLElement {
                 })
         );
 
+        if (someSetted) {
+            optionMaterial.changed.success = true;
+        } else if (optionMaterial.changed.pending) {
+            optionMaterial.value = optionMaterial.changed.value;
+            optionMaterial.changed.success = false;
+        }
+
         return someSetted;
     }
 
@@ -501,46 +738,69 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsCamera() {
-        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
+        if (!this.#data.options.camera.value && !this.#data.options.camera.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
             return false;
         }
 
-        let camera = this.#data.containers.model.assetContainer?.cameras.find((cam) => cam.name === this.#data.options.camera.value) || null;
+        let camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || null;
         if (!camera) {
-            return false;
+            if (this.#data.options.camera.changed.value && this.#data.options.camera.changed.value !== this.#data.options.camera.value) {
+                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || null;
+            }
+            if (camera) {
+                camera.metadata = { locked: this.#data.options.camera.changed.locked };
+                this.#data.options.camera.value = this.#data.options.camera.changed.value;
+                this.#data.options.camera.locked = this.#data.options.camera.changed.locked;
+                this.#data.options.camera.changed.success = false;
+            } else {
+                camera = this.#camera;
+                this.#data.options.camera.value = null;
+                this.#data.options.camera.locked = this.#camera.metadata.locked;
+                this.#data.options.camera.changed.success = false;
+            }
+        } else {
+            camera.metadata = { locked: this.#data.options.camera.locked };
+            if (this.#data.options.camera.changed.pending) {
+                this.#data.options.camera.changed.success = true;
+            }
         }
-
-        camera.metadata = { locked: this.#data.options.camera.locked };
-        if (!this.#data.options.camera.locked) {
+        if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
             camera.attachControl(this.#canvas, true);
         }
         this.#scene.activeCamera = camera;
-
         return true;
     }
 
     #addContainer(container) {
-        if (container.assetContainer && !container.visible && container.show) {
-            container.assetContainer.addAllToScene();
-            container.visible = true;
+        if (!container.assetContainer || container.visible || !container.show) {
+            return false;
         }
+
+        container.assetContainer.addAllToScene();
+        container.visible = true;
+        return true;
     }
 
     #removeContainer(container) {
-        if (container.assetContainer && container.visible) {
-            container.assetContainer.removeAllFromScene();
-            container.visible = false;
+        if (!container.assetContainer || !container.visible) {
+            return false;
         }
+
+        container.assetContainer.removeAllFromScene();
+        container.visible = false;
+        return true;
     }
 
     #replaceContainer(container, newAssetContainer) {
-        this.#removeContainer(container);
+        if (container.assetContainer) {
+            this.#removeContainer(container);
+            container.assetContainer.dispose();
+            container.assetContainer = null;
+        }
+        this.#scene.getEngine().releaseEffects();
         container.assetContainer = newAssetContainer;
-        container.assetContainer.meshes.forEach((mesh) => {
-            mesh.receiveShadows = true;
-            this.#shadowGen.addShadowCaster(mesh, true);
-        });
         this.#addContainer(container);
+        return true;
     }
 
     async #loadAssetContainer(container) {
@@ -556,10 +816,11 @@ class PrefViewer extends HTMLElement {
             await this.#initStorage(storage.db, storage.table);
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
-            if (object.timestamp === container.timestamp) {
+            if (object.timeStamp === container.timeStamp) {
+                container.changed = { pending: false, success: false };
                 return false;
             } else {
-                container.changed = { timestamp: object.timestamp, size: object.size };
+                container.changed = { pending: true, size: object.size, success: false, timeStamp: object.timeStamp };
             }
         }
 
@@ -574,29 +835,34 @@ class PrefViewer extends HTMLElement {
             file = new File([blob], `${container.name}${extension}`, {
                 type: blob.type,
             });
-            if (!container.changed) {
-                if (container.timestamp === null && container.size === size) {
+            if (!container.changed.pending) {
+                if (container.timeStamp === null && container.size === size) {
+                    container.changed = { pending: false, success: false };
                     return false;
                 } else {
-                    container.changed = { timestamp: null, size: size };
+                    container.changed = { pending: true, size: size, success: false, timeStamp: null };
                 }
             }
         } else {
             const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
-            const { fileSize, fileTimestamp } = await this.#getServerFileDataHeader(source);
-            if (container.timestamp === fileTimestamp && container.size === fileSize) {
+            const [fileSize, fileTimeStamp] = await this.#getServerFileDataHeader(source);
+            if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
+                container.changed = { pending: false, success: false };
                 return false;
             } else {
-                container.changed = { timestamp: fileTimestamp, size: fileSize };
+                container.changed = { pending: true, size: fileSize, success: false, timeStamp: fileTimeStamp };
             }
         }
 
+        // https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions
         let options = {
             pluginExtension: extension,
             pluginOptions: {
                 gltf: {
+                    compileMaterials: true,
                     loadAllMaterials: true,
+                    loadOnlyMaterials: container.name === "materials",
                     preprocessUrlAsync: this.#transformUrl,
                 },
             },
@@ -606,75 +872,126 @@ class PrefViewer extends HTMLElement {
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
+        this.#engine.stopRenderLoop(this.#renderLoop);
+
         const promiseArray = [];
         promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
         promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
         promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
 
         Promise.allSettled(promiseArray)
-            .then(async (values) => {
+            .then((values) => {
                 const modelContainer = values[0];
                 const environmentContainer = values[1];
                 const materialsContainer = values[2];
 
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
+                    modelContainer.value.lights = [];
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
                 } else {
-                    this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
+                    if (this.#data.containers.model.assetContainer && this.#data.containers.model.show !== this.#data.containers.model.visible) {
+                        this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
+                    }
+                    this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
                 } else {
-                    this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
+                    if (this.#data.containers.environment.assetContainer && this.#data.containers.environment.show !== this.#data.containers.environment.visible) {
+                        this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
+                    }
+                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
                 }
 
                 if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
                     this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
+                } else {
+                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
                 }
 
                 this.#setOptionsMaterials();
                 this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
-
-                this.#resetChangedFlags();
-
-                this.dispatchEvent(
-                    new CustomEvent("model-loaded", {
-                        detail: { success: "" },
-                        bubbles: true,
-                        composed: true,
-                    })
-                );
             })
             .catch((error) => {
+                this.loaded = true;
                 console.error("PrefViewer: failed to load model", error);
                 this.dispatchEvent(
-                    new CustomEvent("model-error", {
-                        detail: { error: error },
+                    new CustomEvent("scene-error", {
                         bubbles: true,
+                        cancelable: false,
                         composed: true,
+                        detail: { error: error },
                     })
                 );
+            })
+            .finally(async () => {
+                this.#setMaxSimultaneousLights();
+                this.#initShadows();
+                await this.#setStatusLoaded();
             });
     }
 
-    // Public Methods
-    loadConfig(config) {
-        config = typeof config === "string" ? JSON.parse(config) : config;
-        if (!config) {
+    // Tasks
+    #addTaskToQueue(value, type) {
+        this.#taskQueue.push(new PrefViewerTask(value, type));
+        if (this.initialized && !this.loading) {
+            this.#processNextTask();
+        }
+    }
+
+    #processNextTask() {
+        if (!this.#taskQueue.length) {
             return false;
         }
+        const task = this.#taskQueue[0];
+        this.#taskQueue.shift();
+        switch (task.type) {
+            case PrefViewerTask.Types.Config:
+                this.#processConfig(task.value);
+                break;
+            case PrefViewerTask.Types.Model:
+                this.#processModel(task.value);
+                break;
+            case PrefViewerTask.Types.Environment:
+                this.#processEnvironment(task.value);
+                break;
+            case PrefViewerTask.Types.Materials:
+                this.#processMaterials(task.value);
+                break;
+            case PrefViewerTask.Types.Options:
+                this.#processOptions(task.value);
+                break;
+        }
+    }
+
+    #processConfig(config) {
+        this.#setStatusLoading();
 
         // Containers
-        this.#data.containers.model.storage = config.model?.storage || null;
+        const loadModel = !!config.model?.storage;
+        this.#data.containers.model.changed.pending = loadModel;
+        this.#data.containers.model.changed.success = false;
+        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
+        this.#data.containers.model.storage = loadModel ? config.model.storage : this.#data.containers.model.storage;
         this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
-        this.#data.containers.environment.storage = config.scene?.storage || null;
+
+        const loadEnvironment = !!config.scene?.storage;
+        this.#data.containers.environment.changed.pending = loadEnvironment;
+        this.#data.containers.environment.changed.success = false;
+        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
+        this.#data.containers.environment.storage = loadEnvironment ? config.scene.storage : this.#data.containers.environment.storage;
         this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
-        this.#data.containers.materials.storage = config.materials?.storage || null;
+
+        const loadMaterials = !!config.materials?.storage;
+        this.#data.containers.materials.changed.pending = loadMaterials;
+        this.#data.containers.materials.changed.success = false;
+        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
+        this.#data.containers.materials.storage = loadMaterials ? config.materials.storage : this.#data.containers.materials.storage;
 
         // Options
         if (config.options) {
@@ -682,13 +999,50 @@ class PrefViewer extends HTMLElement {
             this.#checkMaterialsChanged(config.options);
         }
 
-        this.#initialized && this.#loadContainers(true, true, true);
+        this.#loadContainers(loadModel, loadEnvironment, loadMaterials);
     }
 
-    setOptions(options) {
-        if (!options) {
-            return false;
-        }
+    #processModel(model) {
+        this.#setStatusLoading();
+
+        const loadModel = !!model.storage;
+        this.#data.containers.model.changed.pending = loadModel;
+        this.#data.containers.model.changed.success = false;
+        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
+        this.#data.containers.model.storage = loadModel ? model.storage : this.#data.containers.model.storage;
+        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
+
+        this.initialized && this.#loadContainers(loadModel, false, false);
+    }
+
+    #processEnvironment(environment) {
+        this.#setStatusLoading();
+
+        const loadEnvironment = !!environment.storage;
+        this.#data.containers.environment.changed.pending = loadEnvironment;
+        this.#data.containers.environment.changed.success = false;
+        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
+        this.#data.containers.environment.storage = loadEnvironment ? environment.storage : this.#data.containers.environment.storage;
+        this.#data.containers.environment.show = environment.visible !== undefined ? environment.visible : this.#data.containers.environment.show;
+
+        this.#loadContainers(false, loadEnvironment, false);
+    }
+
+    #processMaterials(materials) {
+        this.#setStatusLoading();
+
+        const loadMaterials = !!materials.storage;
+        this.#data.containers.materials.changed.pending = loadMaterials;
+        this.#data.containers.materials.changed.success = false;
+        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
+        this.#data.containers.materials.storage = loadMaterials ? materials.storage : this.#data.containers.materials.storage;
+
+        this.#loadContainers(false, false, loadMaterials);
+    }
+
+    async #processOptions(options) {
+        this.#setStatusLoading();
+
         let someSetted = false;
         if (this.#checkCameraChanged(options)) {
             someSetted = someSetted || this.#setOptionsCamera();
@@ -696,19 +1050,27 @@ class PrefViewer extends HTMLElement {
         if (this.#checkMaterialsChanged(options)) {
             someSetted = someSetted || this.#setOptionsMaterials();
         }
-        this.#resetChangedFlags();
-        debugger;
+        
+        await this.#setStatusLoaded();
+
         return someSetted;
     }
 
+    // Public Methods
+    loadConfig(config) {
+        config = typeof config === "string" ? JSON.parse(config) : config;
+        if (!config) {
+            return false;
+        }
+        this.#addTaskToQueue(config, "config");
+    }
+
     loadModel(model) {
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
             return false;
         }
-        this.#data.containers.model.storage = model.storage || null;
-        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
-        this.#initialized && this.#loadContainers(true, false, false);
+        this.#addTaskToQueue(model, "model");
     }
 
     loadScene(scene) {
@@ -716,9 +1078,23 @@ class PrefViewer extends HTMLElement {
         if (!scene) {
             return false;
         }
-        this.#data.containers.environment.storage = scene.storage || null;
-        this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
-        this.#initialized && this.#loadContainers(false, true, false);
+        this.#addTaskToQueue(scene, "environment");
+    }
+
+    loadMaterials(materials) {
+        materials = typeof materials === "string" ? JSON.parse(materials) : materials;
+        if (!materials) {
+            return false;
+        }
+        this.#addTaskToQueue(materials, "materials");
+    }
+
+    setOptions(options) {
+        options = typeof options === "string" ? JSON.parse(options) : options;
+        if (!options) {
+            return false;
+        }
+        this.#addTaskToQueue(options, "options");
     }
 
     showModel() {