@preference-sl/pref-viewer 2.10.0-beta.25 → 2.10.0-beta.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.25",
+  "version": "2.10.0-beta.27",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -34,10 +34,10 @@
     "index.d.ts"
   ],
   "dependencies": {
-    "@babylonjs/core": "^8.28.2",
-    "@babylonjs/loaders": "^8.28.2",
-    "@babylonjs/serializers": "^8.28.2",
-    "babylonjs-gltf2interface": "^8.28.2"
+    "@babylonjs/core": "^8.31.3",
+    "@babylonjs/loaders": "^8.31.3",
+    "@babylonjs/serializers": "^8.31.3",
+    "babylonjs-gltf2interface": "^8.31.3"
   },
   "devDependencies": {
     "esbuild": "^0.25.10",

package/src/index.js

@@ -39,7 +39,7 @@
  * </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";
@@ -88,28 +88,28 @@ class PrefViewer extends HTMLElement {
             camera: {
                 value: null,
                 locked: true,
-                changed: { pending: false, success: false },
+                changed: { pending: false, success: false, oldValue: null, oldLocked: true },
             },
             materials: {
                 innerWall: {
                     value: null,
                     prefix: "innerWall",
-                    changed: { pending: false, success: false },
+                    changed: { pending: false, success: false, oldValue: null },
                 },
                 outerWall: {
                     value: null,
                     prefix: "outerWall",
-                    changed: { pending: false, success: false },
+                    changed: { pending: false, success: false, oldValue: null },
                 },
                 innerFloor: {
                     value: null,
                     prefix: "innerFloor",
-                    changed: { pending: false, success: false },
+                    changed: { pending: false, success: false, oldValue: null },
                 },
                 outerFloor: {
                     value: null,
                     prefix: "outerFloor",
-                    changed: { pending: false, success: false },
+                    changed: { pending: false, success: false, oldValue: null },
                 },
             },
         },
@@ -131,13 +131,11 @@ class PrefViewer extends HTMLElement {
 
     constructor() {
         super();
-        console.log("PrefViewer: constructor()");
         this.attachShadow({ mode: "open" });
         this.#createCanvas();
         this.#wrapCanvas();
         // Point to whichever version you packaged or want to use:
         const DRACO_BASE = "https://www.gstatic.com/draco/versioned/decoders/1.5.7";
-        console.log("PrefViewer: DRACO config base =", DRACO_BASE);
         DracoCompression.Configuration.decoder = {
             // loader for the “wrapper” that pulls in the real WASM
             wasmUrl: `${DRACO_BASE}/draco_wasm_wrapper_gltf.js`,
@@ -153,7 +151,6 @@ class PrefViewer extends HTMLElement {
     }
 
     attributeChangedCallback(name, _old, value) {
-        console.log("PrefViewer: attributeChangedCallback()", { name, old: _old, value });
         let data = null;
         switch (name) {
             case "config":
@@ -168,7 +165,6 @@ class PrefViewer extends HTMLElement {
             case "show-model":
                 data = value.toLowerCase?.() === "true";
                 if (this.initialized) {
-                    console.log("PrefViewer: toggling model visibility (attr)", data);
                     data ? this.showModel() : this.hideModel();
                 } else {
                     this.#data.containers.model.show = data;
@@ -177,7 +173,6 @@ class PrefViewer extends HTMLElement {
             case "show-scene":
                 data = value.toLowerCase?.() === "true";
                 if (this.initialized) {
-                    console.log("PrefViewer: toggling scene visibility (attr)", data);
                     data ? this.showScene() : this.hideScene();
                 } else {
                     this.#data.containers.environment.show = data;
@@ -187,7 +182,6 @@ class PrefViewer extends HTMLElement {
     }
 
     connectedCallback() {
-        console.log("PrefViewer: connectedCallback()");
         if (!this.hasAttribute("config")) {
             const error = 'PrefViewer: provide "models" as array of model and environment';
             console.error(error);
@@ -204,19 +198,16 @@ class PrefViewer extends HTMLElement {
 
         this.#initializeBabylon();
         this.initialized = true;
-        console.log("PrefViewer: initialized = true, loading containers…");
         this.#loadContainers(true, true, true);
     }
 
     disconnectedCallback() {
-        console.log("PrefViewer: disconnectedCallback()");
         this.#disposeEngine();
         this.#canvasResizeObserver.disconnect();
     }
 
     // Web Component
     #createCanvas() {
-        console.log("PrefViewer: #createCanvas()");
         this.#canvas = document.createElement("canvas");
         Object.assign(this.#canvas.style, {
             width: "100%",
@@ -227,7 +218,6 @@ class PrefViewer extends HTMLElement {
     }
 
     #wrapCanvas() {
-        console.log("PrefViewer: #wrapCanvas()");
         this.#wrapper = document.createElement("div");
         Object.assign(this.#wrapper.style, {
             width: "100%",
@@ -239,7 +229,6 @@ class PrefViewer extends HTMLElement {
     }
 
     #setStatusSceneLoading() {
-        console.log("PrefViewer: #setStatusSceneLoading()");
         this.loaded = false;
         this.loading = true;
         if (this.hasAttribute("loaded")) {
@@ -256,7 +245,6 @@ class PrefViewer extends HTMLElement {
     }
 
     #setStatusSceneLoaded() {
-        console.log("PrefViewer: #setStatusSceneLoaded()");
         this.loaded = true;
         this.loading = false;
 
@@ -298,11 +286,10 @@ class PrefViewer extends HTMLElement {
                 detail: detail,
             })
         );
-        console.log("PrefViewer: scene-loaded detail =", detail);
+        this.#resetChangedFlags();
     }
 
     #setStatusOptionsLoading() {
-        console.log("PrefViewer: #setStatusOptionsLoading()");
         this.dispatchEvent(
             new CustomEvent("options-loading", {
                 bubbles: true,
@@ -313,14 +300,15 @@ class PrefViewer extends HTMLElement {
     }
 
     #setStatusOptionsLoaded() {
-        console.log("PrefViewer: #setStatusOptionsLoaded()");
         const toLoadDetail = {
+            camera: !!this.#data.options.camera.changed.pending,
             innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
             outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
             innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
             outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
         };
         const loadedDetail = {
+            camera: !!this.#data.options.camera.changed.success,
             innerWallMaterial: !!this.#data.options.materials.innerWall.changed.success,
             outerWallMaterial: !!this.#data.options.materials.outerWall.changed.success,
             innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.success,
@@ -340,7 +328,7 @@ class PrefViewer extends HTMLElement {
                 detail: detail,
             })
         );
-        console.log("PrefViewer: options-loaded detail =", detail);
+        this.#resetChangedFlags();
     }
 
     // Data
@@ -348,17 +336,16 @@ class PrefViewer extends HTMLElement {
         if (!options || !options.camera) {
             return false;
         }
-        const changed = options.camera !== this.#data.options.camera.value;
-        console.log("PrefViewer: #checkCameraChanged()", { incoming: options.camera, previous: this.#data.options.camera.value, changed });
-        this.#data.options.camera.changed = {
-            ...this.#data.options.camera.changed,
-            pending: changed,
-            success: false,
-            oldValue: changed ? this.#data.options.camera.value : this.#data.options.camera.changed.oldValue,
-            oldLocked: changed ? this.#data.options.camera.locked : this.#data.options.camera.changed.oldLocked,
-        };
-        if (changed) this.#data.options.camera.value = options.camera;
-
+        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.oldValue = prev;
+            this.#data.options.camera.changed.oldLocked = this.#data.options.camera.locked;
+            this.#data.options.camera.value = options.camera;
+        }
         return changed;
     }
 
@@ -369,36 +356,39 @@ class PrefViewer extends HTMLElement {
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
-            const materialState = this.#data.options.materials[material];
-            const prev = materialState.value;
+            const state = this.#data.options.materials[material];
+            const prev = state.value;
             const incoming = options[key];
             const materialChanged = !!incoming && incoming !== prev;
-            console.log("PrefViewer: #checkMaterialsChanged()", { key, incoming, previous: prev, materialChanged });
-            materialState.changed = {
-                ...materialState.changed,
-                pending: materialChanged,
-                success: false,
-                oldValue: materialChanged ? prev : materialState.changed.oldValue,
-            };
-            materialState.value = materialChanged ? incoming : prev;
+
+            state.changed.pending = materialChanged;
+            state.changed.success = false;
+            if (materialChanged) {
+                state.changed.oldValue = prev;
+                state.value = incoming;
+            }
             someChanged = someChanged || materialChanged;
         });
         return someChanged;
     }
 
-    #storeChangedFlagsForContainer(container) {
-        console.log("PrefViewer: #storeChangedFlagsForContainer()", { name: container.name, changed: container.changed });
-        container.timeStamp = container.changed.timeStamp;
-        container.size = container.changed.size;
-        container.changed.success = true;
-        container.changed.pending = false;
+    #storeChangedFlagsForContainer(container, success) {
+        if (success) {
+            container.timeStamp = container.changed.timeStamp;
+            container.size = container.changed.size;
+            container.changed.success = true;
+            container.changed.pending = false;
+        } else {
+            container.changed.success = false;
+            container.changed.pending = false;
+        }
     }
 
     #resetChangedFlags() {
-        console.log("PrefViewer: #resetChangedFlags()");
         const reset = (node) => {
-            node.changed.success = false;
+            if (!node.changed) node.changed = {};
             node.changed.pending = false;
+            node.changed.success = false;
         };
         Object.values(this.#data.containers).forEach(reset);
         Object.values(this.#data.options.materials).forEach(reset);
@@ -407,30 +397,24 @@ class PrefViewer extends HTMLElement {
 
     // Babylon.js
     async #initializeBabylon() {
-        console.log("PrefViewer: #initializeBabylon() START");
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
-        this.#engine.disableUniformBuffers = true; // <- evita el límite de GL_MAX_*_UNIFORM_BUFFERS  // PROVISIONAL, YA QUE ESTO ES UN POCO OVERKILL
-        console.log("PrefViewer: Engine created", { disableUBO: this.#engine.disableUniformBuffers });
-
+        this.#engine.disableUniformBuffers = true;
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
-        console.log("PrefViewer: Scene created, clearColor set to white");
-
         this.#createCamera();
         this.#createLights();
         this.#setupInteraction();
-
-        this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
-        console.log("PrefViewer: runRenderLoop started");
-        this.#canvasResizeObserver.observe(this.#canvas);
-        console.log("PrefViewer: ResizeObserver attached");
-
         await this.#createXRExperience();
-        console.log("PrefViewer: #initializeBabylon() END");
+        this.#engine.runRenderLoop(this.#renderLoop);
+        this.#canvasResizeObserver.observe(this.#canvas);
     }
 
-    addStylesToARButton() {
-        console.log("PrefViewer: 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));
@@ -438,15 +422,12 @@ class PrefViewer extends HTMLElement {
     }
 
     async #createXRExperience() {
-        console.log("PrefViewer: #createXRExperience() START");
         if (this.#XRExperience) {
-            console.log("PrefViewer: XR already exists, skipping.");
             return true;
         }
 
         const sessionMode = "immersive-ar";
         const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
-        console.log("PrefViewer: WebXR session supported =", sessionSupported);
         if (!sessionSupported) {
             console.info("PrefViewer: WebXR in mode AR is not supported");
             return false;
@@ -467,7 +448,6 @@ class PrefViewer extends HTMLElement {
             };
 
             this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
-            console.log("PrefViewer: XR experience created");
 
             const featuresManager = this.#XRExperience.baseExperience.featuresManager;
             featuresManager.enableFeature(WebXRFeatureName.TELEPORTATION, "stable", {
@@ -477,43 +457,39 @@ class PrefViewer extends HTMLElement {
             });
 
             this.#XRExperience.baseExperience.sessionManager.onXRReady.add(() => {
-                console.log("PrefViewer: onXRReady - syncing camera pose");
                 // Set the initial position of xrCamera: use nonVRCamera, which contains a copy of the original this.#scene.activeCamera before entering XR
                 this.#XRExperience.baseExperience.camera.setTransformationFromNonVRCamera(this.#XRExperience.baseExperience._nonVRCamera);
                 this.#XRExperience.baseExperience.camera.setTarget(Vector3.Zero());
                 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;
         }
-        console.log("PrefViewer: #createXRExperience() END");
     }
 
     #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
 
     #createCamera() {
-        console.log("PrefViewer: #createCamera()");
         this.#camera = new ArcRotateCamera("camera", (3 * Math.PI) / 2, Math.PI * 0.47, 10, Vector3.Zero(), this.#scene);
         this.#camera.upperBetaLimit = Math.PI * 0.48;
         this.#camera.lowerBetaLimit = Math.PI * 0.25;
         this.#camera.lowerRadiusLimit = 5;
         this.#camera.upperRadiusLimit = 20;
-        this.#camera.metadata = { locked: false }
+        this.#camera.metadata = { locked: false };
         this.#camera.attachControl(this.#canvas, true);
         this.#scene.activeCamera = this.#camera;
-        console.log("PrefViewer: camera configured", {
-            upperBetaLimit: this.#camera.upperBetaLimit,
-            lowerBetaLimit: this.#camera.lowerBetaLimit,
-            lowerRadiusLimit: this.#camera.lowerRadiusLimit,
-            upperRadiusLimit: this.#camera.upperRadiusLimit
-        });
     }
 
     #createLights() {
-        console.log("PrefViewer: #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;
@@ -523,7 +499,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;
@@ -533,21 +509,103 @@ class PrefViewer extends HTMLElement {
         this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
         this.#cameraLight.parent = this.#camera;
         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);
+            }
+        });
+    }
 
-        console.log("PrefViewer: lights created", {
-            hemiIntensity: this.#hemiLight.intensity,
-            dirIntensity: this.#dirLight.intensity,
-            shadowMapSize: 1024,
-            pointIntensity: this.#cameraLight.intensity
+    #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() {
-        console.log("PrefViewer: #setupInteraction()");
         this.#canvas.addEventListener("wheel", (event) => {
             if (!this.#scene || !this.#camera) {
                 return false;
             }
+            //const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
+            //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
             if (!this.#scene.activeCamera.metadata?.locked) {
                 this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
             }
@@ -556,10 +614,7 @@ class PrefViewer extends HTMLElement {
     }
 
     #disposeEngine() {
-        console.log("PrefViewer: #disposeEngine()");
         if (!this.#engine) return;
-        this.#shadowGen?.dispose();
-        this.#scene?.lights?.slice().forEach(l => l.dispose());
         this.#engine.dispose();
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
@@ -568,7 +623,6 @@ class PrefViewer extends HTMLElement {
 
     // Utility methods for loading gltf/glb
     async #getServerFileDataHeader(uri) {
-        console.log("PrefViewer: #getServerFileDataHeader()", uri);
         return new Promise((resolve) => {
             const xhr = new XMLHttpRequest();
             xhr.open("HEAD", uri, true);
@@ -577,15 +631,12 @@ class PrefViewer extends HTMLElement {
                 if (xhr.status === 200) {
                     const size = parseInt(xhr.getResponseHeader("Content-Length"));
                     const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
-                    console.log("PrefViewer: HEAD ok", { size, timeStamp });
                     resolve([size, timeStamp]);
                 } else {
-                    console.warn("PrefViewer: HEAD failed", xhr.status);
                     resolve([0, null]);
                 }
             };
             xhr.onerror = () => {
-                console.warn("PrefViewer: HEAD network error");
                 resolve([0, null]);
             };
             xhr.send();
@@ -594,14 +645,11 @@ class PrefViewer extends HTMLElement {
 
     #transformUrl(url) {
         return new Promise((resolve) => {
-            const transformed = url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/");
-            console.log("PrefViewer: #transformUrl()", { in: url, out: transformed });
-            resolve(transformed);
+            resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
         });
     }
 
     #decodeBase64(base64) {
-        console.log("PrefViewer: #decodeBase64() START");
         const [, payload] = base64.split(",");
         const raw = payload || base64;
         let decoded = "";
@@ -611,7 +659,6 @@ class PrefViewer extends HTMLElement {
         try {
             decoded = atob(raw);
         } catch {
-            console.warn("PrefViewer: base64 decode failed (not base64?)");
             return { blob, extension, size };
         }
         let isJson = false;
@@ -623,61 +670,44 @@ class PrefViewer extends HTMLElement {
         const type = isJson ? "model/gltf+json" : "model/gltf-binary";
         const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
         blob = new Blob([array], { type });
-        console.log("PrefViewer: #decodeBase64() END", { extension, size, type });
         return { blob, extension, size };
     }
 
     async #initStorage(db, table) {
-        console.log("PrefViewer: #initStorage()", { db, table });
         if (window.gltfDB && window.gltfDB.name === db && window.gltfDB.objectStoreNames.contains(table)) {
-            console.log("PrefViewer: existing DB connection reused");
             return true;
         }
         await initDb(db, table);
-        console.log("PrefViewer: DB initialized");
     }
 
     // Methods for managing Asset Containers
     #setVisibilityOfWallAndFloorInModel(show) {
-        console.log("PrefViewer: #setVisibilityOfWallAndFloorInModel()", { incomingShow: show });
         if (!this.#data.containers.model.assetContainer || !this.#data.containers.model.visible) {
-            console.log("PrefViewer: no model assetContainer or not visible, skip visibility set");
             return false;
         }
         show = show !== undefined ? show : this.#data.containers.environment.visible;
         const prefixes = Object.values(this.#data.options.materials).map((material) => material.prefix);
-        console.log("PrefViewer: toggling meshes with prefixes", prefixes, "->", show);
         this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) => prefixes.some((prefix) => meshToFilter.name.startsWith(prefix))).forEach((mesh) => mesh.setEnabled(show));
     }
 
     #setOptionsMaterial(optionMaterial) {
-        console.log("PrefViewer: #setOptionsMaterial()", { optionMaterial });
         if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
-            console.log("PrefViewer: optionMaterial incomplete, skipping");
             return false;
         }
 
-        const material = this.#data.containers.materials.assetContainer?.materials
-            .find((mat) => mat.name === optionMaterial.value) || null;
-
+        const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
         if (!material) {
-            console.warn("PrefViewer: material not found", optionMaterial.value);
             return false;
         }
 
-        const hadExplicitChange = !!optionMaterial.changed.pending;
-
         const containers = [];
-        if (this.#data.containers.model.assetContainer &&
-            (this.#data.containers.model.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
+        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.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
+        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) {
-            console.log("PrefViewer: no containers require material update");
             return false;
         }
 
@@ -691,156 +721,97 @@ class PrefViewer extends HTMLElement {
                 })
         );
 
-        console.log("PrefViewer: material assignment result", {
-            prefix: optionMaterial.prefix, material: optionMaterial.value, someSetted
-        });
-
         if (someSetted) {
             optionMaterial.changed.success = true;
             optionMaterial.changed.pending = false;
-        } else if (hadExplicitChange) {
-            // Solo revertimos si el usuario pidió el cambio y falló
+        } else if (optionMaterial.changed.pending) {
             optionMaterial.value = optionMaterial.changed.oldValue;
+            optionMaterial.changed.success = false;
+            optionMaterial.changed.pending = false;
         }
 
         return someSetted;
     }
 
     #setOptionsMaterials() {
-        console.log("PrefViewer: #setOptionsMaterials() START");
         let someSetted = false;
         Object.values(this.#data.options.materials).forEach((material) => {
             let settedMaterial = this.#setOptionsMaterial(material);
             someSetted = someSetted || settedMaterial;
         });
-        console.log("PrefViewer: #setOptionsMaterials() END", { someSetted });
         return someSetted;
     }
 
     #setOptionsCamera() {
-        console.log("PrefViewer: #setOptionsCamera()", {
-            requested: this.#data.options.camera.value,
-            changed: this.#data.options.camera.changed,
-            modelChanged: this.#data.containers.model.changed,
-            envChanged: this.#data.containers.environment.changed
-        });
-
-        const camState = this.#data.options.camera;
-
-        if (!camState.value && !camState.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
+        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;
         }
 
-        const hadExplicitChange = !!camState.changed.pending;
-
-        let camera =
-            this.#data.containers.model.assetContainer?.cameras.find(c => c.name === camState.value) ||
-            this.#data.containers.environment.assetContainer?.cameras.find(c => c.name === camState.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) {
-            // Si falló la cámara solicitada y hubo cambio explícito, intentamos volver a la anterior
-            if (hadExplicitChange && camState.changed.oldValue && camState.changed.oldValue !== camState.value) {
-                camera =
-                    this.#data.containers.model.assetContainer?.cameras.find(c => c.name === camState.changed.oldValue) ||
-                    this.#data.containers.environment.assetContainer?.cameras.find(c => c.name === camState.changed.oldValue) ||
-                    null;
-
-                if (camera) {
-                    camera.metadata = { locked: camState.changed.oldLocked };
-                    camState.value = camState.changed.oldValue;
-                    camState.locked = camState.changed.oldLocked;
-                    camState.changed.success = false;
-                    camState.changed.pending = false;
-                } else {
-                    // Fallback a la cámara por defecto del componente
-                    camera = this.#camera;
-                    camState.value = null;
-                    camState.locked = this.#camera.metadata.locked;
-                    camState.changed.success = false;
-                    camState.changed.pending = false;
-                }
+            if (this.#data.options.camera.changed?.oldValue && this.#data.options.camera.changed?.oldValue !== this.#data.options.camera.value) {
+                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || null;
+            }
+            if (camera) {
+                camera.metadata = { locked: this.#data.options.camera.changed.oldLocked };
+                this.#data.options.camera.value = this.#data.options.camera.changed.oldValue;
+                this.#data.options.camera.locked = this.#data.options.camera.changed.oldLocked;
+                this.#data.options.camera.changed.success = false;
+                this.#data.options.camera.changed.pending = false;
             } else {
-                // No hubo cambio explícito: usa fallback sin tocar changed
                 camera = this.#camera;
-                camState.value = null;
-                camState.locked = this.#camera.metadata.locked;
+                this.#data.options.camera.value = null;
+                this.#data.options.camera.locked = this.#camera.metadata.locked;
+                this.#data.options.camera.changed.success = false;
+                this.#data.options.camera.changed.pending = false;
             }
         } else {
-            camera.metadata = { locked: camState.locked };
-            // Marca success si hubo cambio explícito
-            if (hadExplicitChange) {
-                camState.changed.success = true;
-                camState.changed.pending = false;
+            camera.metadata = { locked: this.#data.options.camera.locked };
+            if (this.#data.options.camera.changed.pending) {
+                this.#data.options.camera.changed.success = true;
+                this.#data.options.camera.changed.pending = false;
             }
         }
-
-        if (!camState.locked && camState.value !== null) {
+        if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
             camera.attachControl(this.#canvas, true);
         }
         this.#scene.activeCamera = camera;
-        console.log("PrefViewer: active camera set", { name: camera.name, locked: camera.metadata?.locked });
         return true;
     }
 
     #addContainer(container) {
-        console.log("PrefViewer: #addContainer()", { name: container.name, hasContainer: !!container.assetContainer, visible: container.visible, show: container.show });
         if (container.assetContainer && !container.visible && container.show) {
             container.assetContainer.addAllToScene();
             container.visible = true;
-            console.log("PrefViewer: container added to scene", container.name);
         }
     }
 
     #removeContainer(container) {
-        console.log("PrefViewer: #removeContainer()", { name: container.name, hasContainer: !!container.assetContainer, visible: container.visible });
         if (container.assetContainer && container.visible) {
             container.assetContainer.removeAllFromScene();
             container.visible = false;
-            console.log("PrefViewer: container removed from scene", container.name);
         }
     }
 
     #replaceContainer(container, newAssetContainer) {
-        console.log("PrefViewer: #replaceContainer()", { name: container.name, hadContainer: !!container.assetContainer });
-        // 1) quita y destruye el anterior si existía
-        const old = container.assetContainer;
-        if (old) {
-            if (container.visible) { old.removeAllFromScene(); }
-            old.dispose(); // <- importante
-            console.log("PrefViewer: old container disposed", container.name);
+        if (container.assetContainer) {
+            container.assetContainer.dispose();
+            container.assetContainer = null;
         }
-
-        // 2) asigna el nuevo y prepara
+        this.#scene.getEngine().releaseEffects();
         container.assetContainer = newAssetContainer;
-
-        // Opcional: limitar luces por material para ganar margen
-        container.assetContainer.materials?.forEach(m => {
-            if ("maxSimultaneousLights" in m) {
-                m.maxSimultaneousLights = 2; // 2–3 suele ir bien
-            }
-        });
-
-        // 3) sombras solo para los meshes que te interesen (mejor que todos)
-        container.assetContainer.meshes.forEach(mesh => {
-            mesh.receiveShadows = true;
-            this.#shadowGen.addShadowCaster(mesh, true);
-        });
-
-        // 4) añade a escena
         this.#addContainer(container);
-
-        // 5) fuerza recompilación con defines correctos del nuevo estado
-        this.#scene.getEngine().releaseEffects();
-        console.log("PrefViewer: container replaced and effects released", container.name);
     }
 
     async #loadAssetContainer(container) {
-        console.log("PrefViewer: #loadAssetContainer() START", { name: container?.name, storage: container?.storage });
         let storage = container?.storage;
 
         if (!storage) {
-            console.log("PrefViewer: no storage, skipping", container?.name);
             return false;
         }
 
@@ -851,22 +822,15 @@ class PrefViewer extends HTMLElement {
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
             if (object.timeStamp === container.timeStamp) {
-                console.log("PrefViewer: DB entry unchanged, skipping", container.name);
+                container.changed.pending = false;
+                container.changed.success = false;
                 return false;
             } else {
-                container.changed = {
-                    ...container.changed,
-                    pending: true,
-                    success: false,
-                    timeStamp: object.timeStamp,
-                    size: object.size,
-                };
-                console.log("PrefViewer: DB entry changed", container.changed);
+                Object.assign(container.changed, { timeStamp: object.timeStamp, size: object.size, success: false, pending: true });
             }
         }
 
         if (!source) {
-            console.log("PrefViewer: no source after storage resolution", container.name);
             return false;
         }
 
@@ -879,38 +843,27 @@ class PrefViewer extends HTMLElement {
             });
             if (!container.changed.pending) {
                 if (container.timeStamp === null && container.size === size) {
-                    console.log("PrefViewer: same base64 size and null timestamp, skipping", container.name);
+                    container.changed.pending = false;
+                    container.changed.success = false;
                     return false;
                 } else {
-                    container.changed = {
-                        ...container.changed,
-                        pending: true,
-                        success: false,
-                        timeStamp: null,
-                        size: size,
-                    };
+                    Object.assign(container.changed, { timeStamp: null, size: size, success: false, pending: true });
                 }
             }
-            console.log("PrefViewer: prepared File from base64", { name: file.name, size: file.size, type: file.type });
         } else {
             const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
             const [fileSize, fileTimeStamp] = await this.#getServerFileDataHeader(source);
             if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
-                console.log("PrefViewer: remote file unchanged, skipping", container.name);
+                container.changed.pending = false;
+                container.changed.success = false;
                 return false;
             } else {
-                container.changed = {
-                    ...container.changed,
-                    pending: true,
-                    success: false,
-                    timeStamp: fileTimeStamp,
-                    size: fileSize,
-                };
-                console.log("PrefViewer: remote file changed", container.changed);
+                Object.assign(container.changed, { timeStamp: fileTimeStamp, size: fileSize, success: false, pending: true });
             }
         }
 
+        // https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions
         let options = {
             pluginExtension: extension,
             pluginOptions: {
@@ -921,58 +874,56 @@ class PrefViewer extends HTMLElement {
             },
         };
 
-        console.log("PrefViewer: calling LoadAssetContainerAsync()", { extension });
         return LoadAssetContainerAsync(file || source, this.#scene, options);
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
-        console.log("PrefViewer: #loadContainers()", { loadModel, loadEnvironment, loadMaterials });
+        this.#setStatusSceneLoading();
+        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);
 
-        this.#setStatusSceneLoading();
-
         Promise.allSettled(promiseArray)
             .then(async (values) => {
-                console.log("PrefViewer: Promise.allSettled results", values);
                 const modelContainer = values[0];
                 const environmentContainer = values[1];
                 const materialsContainer = values[2];
 
+                this.#removeContainer(this.#data.containers.model);
+                this.#removeContainer(this.#data.containers.environment);
+                this.#removeContainer(this.#data.containers.materials);
+
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
-                    console.log("PrefViewer: model container fulfilled, applying");
-                    this.#stripImportedLights(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 {
-                    console.log("PrefViewer: model container not fulfilled or unchanged; ensuring visibility state");
-                    this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
+                    this.#addContainer(this.#data.containers.model);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
-                    console.log("PrefViewer: environment container fulfilled, applying");
-                    this.#stripImportedLights(environmentContainer.value);
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
                 } else {
-                    console.log("PrefViewer: environment container not fulfilled or unchanged; ensuring visibility state");
-                    this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
+                    this.#addContainer(this.#data.containers.environment);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
                 }
 
                 if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
-                    console.log("PrefViewer: materials container fulfilled, applying");
-                    this.#stripImportedLights(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.#addContainer(this.#data.containers.materials);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
                 }
 
                 this.#setOptionsMaterials();
                 this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
-                this.#setStatusSceneLoaded();
-                this.#resetChangedFlags();
             })
             .catch((error) => {
                 this.loaded = true;
@@ -985,34 +936,43 @@ class PrefViewer extends HTMLElement {
                         detail: { error: error },
                     })
                 );
+            })
+            .finally(() => {
+                this.#setMaxSimultaneousLights();
+                this.#initShadows();
+                this.#setStatusSceneLoaded();
+                this.#engine.runRenderLoop(this.#renderLoop);
             });
     }
 
-    #stripImportedLights(container) {
-        console.log("PrefViewer: #stripImportedLights()", { lights: container?.lights?.length || 0 });
-        // El glTF puede traer KHR_lights_punctual: bórralas antes de añadir a la escena
-        if (container?.lights?.length) {
-            // Clonar para no mutar mientras iteras
-            container.lights.slice().forEach(l => l.dispose());
-            console.log("PrefViewer: stripped punctual lights from imported asset");
-        }
-    }
-
     // Public Methods
     loadConfig(config) {
-        console.log("PrefViewer: loadConfig()", config);
         config = typeof config === "string" ? JSON.parse(config) : config;
         if (!config) {
-            console.warn("PrefViewer: loadConfig() no config provided");
             return false;
         }
 
         // Containers
-        this.#data.containers.model.storage = config.model?.storage || null;
+        const loadModel = !!config.model?.storage;
+        // CHANGED: marcar pending, no boolean
+        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) {
@@ -1020,11 +980,10 @@ class PrefViewer extends HTMLElement {
             this.#checkMaterialsChanged(config.options);
         }
 
-        this.initialized && this.#loadContainers(true, true, true);
+        this.initialized && this.#loadContainers(loadModel, loadEnvironment, loadMaterials);
     }
 
     setOptions(options) {
-        console.log("PrefViewer: setOptions()", options);
         if (!options) {
             return false;
         }
@@ -1040,69 +999,79 @@ class PrefViewer extends HTMLElement {
         }
 
         this.#setStatusOptionsLoaded();
-        this.#resetChangedFlags();
 
         return someSetted;
     }
 
     loadModel(model) {
-        console.log("PrefViewer: loadModel()", model);
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
-            console.warn("PrefViewer: loadModel() no model provided");
             return false;
         }
-        this.#data.containers.model.storage = model.storage || null;
+        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(true, false, false);
+        this.initialized && this.#loadContainers(loadModel, false, false);
     }
 
     loadScene(scene) {
-        console.log("PrefViewer: loadScene()", scene);
         scene = typeof scene === "string" ? JSON.parse(scene) : scene;
         if (!scene) {
-            console.warn("PrefViewer: loadScene() no scene provided");
             return false;
         }
-        this.#data.containers.environment.storage = scene.storage || null;
+        const loadEnvironment = !!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 ? scene.storage : this.#data.containers.environment.storage;
         this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
-        this.initialized && this.#loadContainers(false, true, false);
+        this.initialized && this.#loadContainers(false, loadEnvironment, false);
+    }
+
+    loadMaterials(materials) {
+        materials = typeof materials === "string" ? JSON.parse(materials) : materials;
+        if (!materials) {
+            return false;
+        }
+        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.initialized && this.#loadContainers(false, false, loadMaterials);
     }
 
     showModel() {
-        console.log("PrefViewer: showModel()");
         this.#data.containers.model.show = true;
         this.#addContainer(this.#data.containers.model);
     }
 
     hideModel() {
-        console.log("PrefViewer: hideModel()");
         this.#data.containers.model.show = false;
         this.#removeContainer(this.#data.containers.model);
     }
 
     showScene() {
-        console.log("PrefViewer: showScene()");
         this.#data.containers.environment.show = true;
         this.#addContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
     }
 
     hideScene() {
-        console.log("PrefViewer: hideScene()");
         this.#data.containers.environment.show = false;
         this.#removeContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
     }
 
     downloadModelGLB() {
-        console.log("PrefViewer: downloadModelGLB()");
         const fileName = "model";
         GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
     }
 
     downloadModelUSDZ() {
-        console.log("PrefViewer: downloadModelUSDZ()");
         const fileName = "model";
         USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
             if (response) {
@@ -1112,7 +1081,6 @@ class PrefViewer extends HTMLElement {
     }
 
     downloadModelAndSceneUSDZ() {
-        console.log("PrefViewer: downloadModelAndSceneUSDZ()");
         const fileName = "scene";
         USDZExportAsync(this.#scene).then((response) => {
             if (response) {
@@ -1122,7 +1090,6 @@ class PrefViewer extends HTMLElement {
     }
 
     downloadModelAndSceneGLB() {
-        console.log("PrefViewer: downloadModelAndSceneGLB()");
         const fileName = "scene";
         GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
     }