@preference-sl/pref-viewer 2.10.0-beta.20 → 2.10.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.20",
+  "version": "2.10.0-beta.21",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {

package/src/index.js

@@ -39,7 +39,23 @@
  * </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,
+} from "@babylonjs/core";
 import "@babylonjs/loaders";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
@@ -129,6 +145,38 @@ class PrefViewer extends HTMLElement {
     #shadowGen = null;
     #XRExperience = null;
 
+    // -------------------------
+    // Logger util + timers
+    // -------------------------
+    #LOG_LEVEL = (window?.PREFV_LOG_LEVEL ?? "debug"); // 'debug' | 'info' | 'warn' | 'error'
+    #timeMarks = new Map();
+
+    #log(level, msg, extra) {
+        const order = { debug: 0, info: 1, warn: 2, error: 3 };
+        const cur = order[this.#LOG_LEVEL] ?? 0;
+        const now = new Date().toISOString();
+        if ((order[level] ?? 0) < cur) return;
+        const line = `[PrefViewer][${level.toUpperCase()}][${now}] ${msg}`;
+        try {
+            if (extra !== undefined) console[level](line, extra);
+            else console[level](line);
+        } catch {
+            console.log(line, extra);
+        }
+    }
+    #timeStart(label) {
+        this.#timeMarks.set(label, performance.now());
+        this.#log("debug", `⏱️ start ${label}`);
+    }
+    #timeEnd(label) {
+        const t0 = this.#timeMarks.get(label);
+        if (t0 !== undefined) {
+            const dt = (performance.now() - t0).toFixed(1);
+            this.#log("debug", `⏱️ end   ${label} +${dt}ms`);
+            this.#timeMarks.delete(label);
+        }
+    }
+
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
@@ -151,6 +199,7 @@ class PrefViewer extends HTMLElement {
     }
 
     attributeChangedCallback(name, _old, value) {
+        this.#log("debug", `attributeChangedCallback: ${name}`, value);
         let data = null;
         switch (name) {
             case "config":
@@ -182,8 +231,10 @@ class PrefViewer extends HTMLElement {
     }
 
     connectedCallback() {
+        this.#log("info", "connectedCallback");
         if (!this.hasAttribute("config")) {
             const error = 'PrefViewer: provide "models" as array of model and environment';
+            this.#log("error", error);
             console.error(error);
             this.dispatchEvent(
                 new CustomEvent("scene-error", {
@@ -202,6 +253,7 @@ class PrefViewer extends HTMLElement {
     }
 
     disconnectedCallback() {
+        this.#log("info", "disconnectedCallback → dispose engine");
         this.#disposeEngine();
         this.#canvasResizeObserver.disconnect();
     }
@@ -235,6 +287,7 @@ class PrefViewer extends HTMLElement {
             this.removeAttribute("loaded");
         }
         this.setAttribute("loading", "");
+        this.#log("info", "Escena → loading");
         this.dispatchEvent(
             new CustomEvent("scene-loading", {
                 bubbles: true,
@@ -278,6 +331,7 @@ class PrefViewer extends HTMLElement {
             this.removeAttribute("loading");
         }
         this.setAttribute("loaded", "");
+        this.#log("info", "Escena → loaded", detail);
         this.dispatchEvent(
             new CustomEvent("scene-loaded", {
                 bubbles: true,
@@ -289,6 +343,7 @@ class PrefViewer extends HTMLElement {
     }
 
     #setStatusOptionsLoading() {
+        this.#log("info", "Opciones → loading");
         this.dispatchEvent(
             new CustomEvent("options-loading", {
                 bubbles: true,
@@ -317,6 +372,7 @@ class PrefViewer extends HTMLElement {
             success: loadedDetail,
         };
 
+        this.#log("info", "Opciones → loaded", detail);
         this.dispatchEvent(
             new CustomEvent("options-loaded", {
                 bubbles: true,
@@ -332,26 +388,31 @@ class PrefViewer extends HTMLElement {
         if (!options || !options.camera) {
             return false;
         }
-
         const changed = options.camera !== this.#data.options.camera.value;
-        this.#data.options.camera.changed = changed ? { oldValue: this.#data.options.camera.value, oldLocked: this.#data.options.camera.locked, success: false } : false;
+        this.#data.options.camera.changed = changed
+            ? { oldValue: this.#data.options.camera.value, oldLocked: this.#data.options.camera.locked, success: false }
+            : false;
         if (changed) this.#data.options.camera.value = options.camera;
-
+        this.#log("debug", `#checkCameraChanged → ${changed}`, {
+            new: this.#data.options.camera.value,
+            old: this.#data.options.camera.changed?.oldValue ?? null,
+        });
         return changed;
     }
 
     #checkMaterialsChanged(options) {
-        if (!options) {
-            return false;
-        }
+        if (!options) return false;
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
             const materialChanged = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
-            this.#data.options.materials[material].changed = materialChanged ? { oldValue: this.#data.options.materials[material].value, success: false } : false;
+            this.#data.options.materials[material].changed = materialChanged
+                ? { oldValue: this.#data.options.materials[material].value, success: false }
+                : false;
             this.#data.options.materials[material].value = materialChanged ? options[key] : this.#data.options.materials[material].value;
             someChanged = someChanged || this.#data.options.materials[material].changed;
         });
+        this.#log("debug", `#checkMaterialsChanged → ${!!someChanged}`);
         return someChanged;
     }
 
@@ -369,41 +430,47 @@ class PrefViewer extends HTMLElement {
 
     // Babylon.js
     async #initializeBabylon() {
+        this.#timeStart("initializeBabylon");
         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
-
+        this.#engine.disableUniformBuffers = true; // evita GL_MAX_*_UNIFORM_BUFFERS (workaround)
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
         this.#createCamera();
-        this.#createLights();
+        this.#createLights(); // luces desactivadas
         this.#setupInteraction();
 
+        this.#log("info", "Engine y Scene creados", {
+            webgl: this.#engine.webGLVersion,
+            disableUBO: this.#engine.disableUniformBuffers,
+        });
+
         this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
         this.#canvasResizeObserver.observe(this.#canvas);
 
         await this.#createXRExperience();
+        this.#timeEnd("initializeBabylon");
     }
 
     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 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));
         this.#wrapper.appendChild(style);
     }
 
     async #createXRExperience() {
-        if (this.#XRExperience) {
-            return true;
-        }
+        if (this.#XRExperience) return true;
 
         const sessionMode = "immersive-ar";
         const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
         if (!sessionSupported) {
-            console.info("PrefViewer: WebXR in mode AR is not supported");
+            this.#log("info", `WebXR no soportado para ${sessionMode}`);
             return false;
         }
 
         try {
+            this.#log("debug", "Creando XR DefaultExperience…");
             const ground = MeshBuilder.CreateGround("ground", { width: 1000, height: 1000 }, this.#scene);
             ground.isVisible = false;
 
@@ -418,6 +485,7 @@ class PrefViewer extends HTMLElement {
             };
 
             this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
+            this.#log("info", "XR DefaultExperience creado");
 
             const featuresManager = this.#XRExperience.baseExperience.featuresManager;
             featuresManager.enableFeature(WebXRFeatureName.TELEPORTATION, "stable", {
@@ -428,14 +496,19 @@ class PrefViewer extends HTMLElement {
 
             this.#XRExperience.baseExperience.sessionManager.onXRReady.add(() => {
                 // 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.#log("debug", "XR Ready → copiando pose inicial a xrCamera");
+                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.#XRExperience.baseExperience.onInitialXRPoseSetObservable.notifyObservers(
+                    this.#XRExperience.baseExperience.camera
+                );
             });
 
             this.addStylesToARButton();
         } catch (error) {
-            console.warn("PrefViewer: failed to create WebXR experience", error);
+            this.#log("warn", "Falló la creación de la experiencia WebXR", error);
             this.#XRExperience = null;
         }
     }
@@ -448,42 +521,30 @@ 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.metadata = { locked: false };
         this.#camera.attachControl(this.#canvas, true);
         this.#scene.activeCamera = this.#camera;
+        this.#log("debug", "Cámara creada y asignada como activa", {
+            name: this.#camera.name,
+            locked: this.#camera.metadata.locked,
+        });
     }
 
+    // [LIGHTS OFF] — sin luces del componente
     #createLights() {
-        // 1) Stronger ambient fill
-        this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#hemiLight.intensity = 0.6;
-
-        // 2) Directional light from the front-right, angled slightly down
-        this.#dirLight = new DirectionalLight("dirLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
-        this.#dirLight.intensity = 0.6;
-
-        // 3) Soft shadows
-        this.#shadowGen = new ShadowGenerator(1024, this.#dirLight);
-        this.#shadowGen.useBlurExponentialShadowMap = true;
-        this.#shadowGen.blurKernel = 16;
-        this.#shadowGen.darkness = 0.5;
-
-        // 4) Camera‐attached headlight
-        this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
-        this.#cameraLight.parent = this.#camera;
-        this.#cameraLight.intensity = 0.3;
+        this.#hemiLight = null;
+        this.#dirLight = null;
+        this.#cameraLight = null;
+        this.#shadowGen = null;
+        this.#log("info", "Luces internas desactivadas (#createLights). No se crean sombras.");
     }
 
     #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 || !this.#camera) return false;
             if (!this.#scene.activeCamera.metadata?.locked) {
-                this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
+                this.#scene.activeCamera.inertialRadiusOffset -=
+                    event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
             }
             event.preventDefault();
         });
@@ -492,15 +553,17 @@ class PrefViewer extends HTMLElement {
     #disposeEngine() {
         if (!this.#engine) return;
         this.#shadowGen?.dispose();
-        this.#scene?.lights?.slice().forEach(l => l.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;
         this.#shadowGen = null;
+        this.#log("info", "Engine y recursos Babylon eliminados");
     }
 
     // Utility methods for loading gltf/glb
     async #getServerFileDataHeader(uri) {
+        this.#log("debug", `HEAD ${uri}`);
         return new Promise((resolve) => {
             const xhr = new XMLHttpRequest();
             xhr.open("HEAD", uri, true);
@@ -509,12 +572,15 @@ class PrefViewer extends HTMLElement {
                 if (xhr.status === 200) {
                     const size = parseInt(xhr.getResponseHeader("Content-Length"));
                     const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    this.#log("debug", "HEAD ok", { size, timeStamp });
                     resolve([size, timeStamp]);
                 } else {
+                    this.#log("warn", "HEAD non-200", { status: xhr.status });
                     resolve([0, null]);
                 }
             };
             xhr.onerror = () => {
+                this.#log("warn", "HEAD error");
                 resolve([0, null]);
             };
             xhr.send();
@@ -528,6 +594,7 @@ class PrefViewer extends HTMLElement {
     }
 
     #decodeBase64(base64) {
+        this.#log("debug", "Decodificando Base64…");
         const [, payload] = base64.split(",");
         const raw = payload || base64;
         let decoded = "";
@@ -537,17 +604,19 @@ class PrefViewer extends HTMLElement {
         try {
             decoded = atob(raw);
         } catch {
+            this.#log("warn", "Base64 inválido (atob falló)");
             return { blob, extension, size };
         }
         let isJson = false;
         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));
         blob = new Blob([array], { type });
+        this.#log("debug", "Base64 decodificado", { extension, size });
         return { blob, extension, size };
     }
 
@@ -556,6 +625,7 @@ class PrefViewer extends HTMLElement {
             return true;
         }
         await initDb(db, table);
+        this.#log("debug", "IndexedDB inicializado/abierto", { db, table });
     }
 
     // Methods for managing Asset Containers
@@ -565,7 +635,11 @@ class PrefViewer extends HTMLElement {
         }
         show = show !== undefined ? show : this.#data.containers.environment.visible;
         const prefixes = Object.values(this.#data.options.materials).map((material) => material.prefix);
-        this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) => prefixes.some((prefix) => meshToFilter.name.startsWith(prefix))).forEach((mesh) => mesh.setEnabled(show));
+        const meshes = this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) =>
+            prefixes.some((prefix) => meshToFilter.name.startsWith(prefix))
+        );
+        meshes.forEach((mesh) => mesh.setEnabled(show));
+        this.#log("debug", "setVisibilityOfWallAndFloorInModel", { show, count: meshes.length });
     }
 
     #setOptionsMaterial(optionMaterial) {
@@ -573,16 +647,27 @@ class PrefViewer extends HTMLElement {
             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) {
+            this.#log("warn", "Material no encontrado en contenedor 'materials'", { name: optionMaterial.value });
             return false;
         }
 
         const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
+        if (
+            this.#data.containers.model.assetContainer &&
+            (this.#data.containers.model.changed || this.#data.containers.materials.changed || optionMaterial.changed)
+        ) {
             containers.push(this.#data.containers.model.assetContainer);
         }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed || this.#data.containers.materials.changed || optionMaterial.changed)) {
+        if (
+            this.#data.containers.environment.assetContainer &&
+            (this.#data.containers.environment.changed ||
+                this.#data.containers.materials.changed ||
+                optionMaterial.changed)
+        ) {
             containers.push(this.#data.containers.environment.assetContainer);
         }
         if (containers.length === 0) {
@@ -600,9 +685,10 @@ class PrefViewer extends HTMLElement {
         );
 
         if (someSetted) {
-            optionMaterial.changed.success = true;
+            optionMaterial.changed && (optionMaterial.changed.success = true);
+            this.#log("debug", "Material aplicado", { prefix: optionMaterial.prefix, name: optionMaterial.value });
         } else {
-            optionMaterial.value = optionMaterial.changed.oldValue;
+            optionMaterial.value = optionMaterial.changed?.oldValue ?? optionMaterial.value;
         }
 
         return someSetted;
@@ -618,14 +704,34 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsCamera() {
-        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.changed && !this.#data.containers.environment.changed)) {
+        if (
+            !this.#data.options.camera.value &&
+            !this.#data.options.camera.changed &&
+            !this.#data.containers.model.changed &&
+            !this.#data.containers.environment.changed
+        ) {
             return false;
         }
 
-        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;
+        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) {
             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;
+                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 };
@@ -636,14 +742,19 @@ class PrefViewer extends HTMLElement {
                 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 && (this.#data.options.camera.changed.success = false);
         } else {
             camera.metadata = { locked: 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;
+        this.#log("debug", "Cámara actualizada", {
+            active: this.#scene?.activeCamera?.name ?? null,
+            locked: this.#scene?.activeCamera?.metadata?.locked ?? null,
+        });
         return true;
     }
 
@@ -651,6 +762,7 @@ class PrefViewer extends HTMLElement {
         if (container.assetContainer && !container.visible && container.show) {
             container.assetContainer.addAllToScene();
             container.visible = true;
+            this.#log("debug", `Añadido a escena: ${container.name}`);
         }
     }
 
@@ -658,6 +770,7 @@ class PrefViewer extends HTMLElement {
         if (container.assetContainer && container.visible) {
             container.assetContainer.removeAllFromScene();
             container.visible = false;
+            this.#log("debug", `Eliminado de escena: ${container.name}`);
         }
     }
 
@@ -665,24 +778,26 @@ class PrefViewer extends HTMLElement {
         // 1) quita y destruye el anterior si existía
         const old = container.assetContainer;
         if (old) {
-            if (container.visible) { old.removeAllFromScene(); }
-            old.dispose(); // <- importante
+            if (container.visible) {
+                old.removeAllFromScene();
+            }
+            old.dispose();
         }
 
         // 2) asigna el nuevo y prepara
         container.assetContainer = newAssetContainer;
 
-        // Opcional: limitar luces por material para ganar margen
-        container.assetContainer.materials?.forEach(m => {
+        // Limitar luces por material (no usamos luces, poner 0 asegura shaders más simples)
+        container.assetContainer.materials?.forEach((m) => {
             if ("maxSimultaneousLights" in m) {
-                m.maxSimultaneousLights = 2; // 2–3 suele ir bien
+                m.maxSimultaneousLights = 0; // [LIGHTS OFF]
             }
         });
 
-        // 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);
+        // 3) sombras sólo si existe generador (con luces OFF es null)
+        container.assetContainer.meshes.forEach((mesh) => {
+            mesh.receiveShadows = !!this.#shadowGen;
+            if (this.#shadowGen) this.#shadowGen.addShadowCaster(mesh, true);
         });
 
         // 4) añade a escena
@@ -690,29 +805,46 @@ class PrefViewer extends HTMLElement {
 
         // 5) fuerza recompilación con defines correctos del nuevo estado
         this.#scene.getEngine().releaseEffects();
+
+        this.#log("debug", `Container reemplazado: ${container.name}`, {
+            meshes: container.assetContainer.meshes?.length ?? 0,
+            materials: container.assetContainer.materials?.length ?? 0,
+        });
     }
 
     async #loadAssetContainer(container) {
-        let storage = container?.storage;
+        const storage = container?.storage;
 
         if (!storage) {
+            this.#log("debug", `Sin storage para "${container?.name}"`);
             return false;
         }
 
+        this.#timeStart(`load:${container.name}`);
         let source = storage.url || null;
 
         if (storage.db && storage.table && storage.id) {
+            this.#log("info", `Cargando ${container.name} desde IndexedDB`, {
+                db: storage.db,
+                table: storage.table,
+                id: storage.id,
+            });
             await this.#initStorage(storage.db, storage.table);
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
             if (object.timeStamp === container.timeStamp) {
+                this.#log("debug", `${container.name}: sin cambios en IndexedDB`);
+                this.#timeEnd(`load:${container.name}`);
                 return false;
             } else {
                 container.changed = { timeStamp: object.timeStamp, size: object.size, success: false };
+                this.#log("debug", `${container.name}: cambios detectados`, container.changed);
             }
         }
 
         if (!source) {
+            this.#log("warn", `${container.name}: no hay source`);
+            this.#timeEnd(`load:${container.name}`);
             return false;
         }
 
@@ -725,6 +857,8 @@ class PrefViewer extends HTMLElement {
             });
             if (!container.changed) {
                 if (container.timeStamp === null && container.size === size) {
+                    this.#log("debug", `${container.name}: Base64 sin cambios`);
+                    this.#timeEnd(`load:${container.name}`);
                     return false;
                 } else {
                     container.changed = { timeStamp: null, size: size, success: false };
@@ -735,6 +869,8 @@ class PrefViewer extends HTMLElement {
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
             const [fileSize, fileTimeStamp] = await this.#getServerFileDataHeader(source);
             if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
+                this.#log("debug", `${container.name}: URL sin cambios`);
+                this.#timeEnd(`load:${container.name}`);
                 return false;
             } else {
                 container.changed = { timeStamp: fileTimeStamp, size: fileSize, success: false };
@@ -750,11 +886,21 @@ class PrefViewer extends HTMLElement {
                 },
             },
         };
+        this.#log("info", `LoadAssetContainerAsync ${container.name}`, { extension, changed: container.changed });
 
-        return LoadAssetContainerAsync(file || source, this.#scene, options);
+        try {
+            const result = await LoadAssetContainerAsync(file || source, this.#scene, options);
+            this.#timeEnd(`load:${container.name}`);
+            return result;
+        } catch (e) {
+            this.#timeEnd(`load:${container.name}`);
+            this.#log("error", `LoadAssetContainerAsync falló para ${container.name}`, e);
+            throw e;
+        }
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
+        this.#log("info", "loadContainers()", { loadModel, loadEnvironment, loadMaterials });
         const promiseArray = [];
         promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
         promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
@@ -768,12 +914,20 @@ class PrefViewer extends HTMLElement {
                 const environmentContainer = values[1];
                 const materialsContainer = values[2];
 
+                this.#log(
+                    "debug",
+                    "Resultados Promise.allSettled",
+                    values.map((v) => ({ status: v.status, hasValue: !!v.value }))
+                );
+
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
                     this.#stripImportedLights(modelContainer.value);
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.model);
                 } else {
-                    this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
+                    this.#data.containers.model.show
+                        ? this.#addContainer(this.#data.containers.model)
+                        : this.#removeContainer(this.#data.containers.model);
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
@@ -781,7 +935,9 @@ class PrefViewer extends HTMLElement {
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.environment);
                 } else {
-                    this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
+                    this.#data.containers.environment.show
+                        ? this.#addContainer(this.#data.containers.environment)
+                        : this.#removeContainer(this.#data.containers.environment);
                 }
 
                 if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
@@ -795,10 +951,11 @@ class PrefViewer extends HTMLElement {
                 this.#setVisibilityOfWallAndFloorInModel();
                 this.#setStatusSceneLoaded();
                 this.#resetChangedFlags();
+                this.#log("info", "Escena cargada");
             })
             .catch((error) => {
                 this.loaded = true;
-                console.error("PrefViewer: failed to load model", error);
+                this.#log("error", "Failed to load containers", error);
                 this.dispatchEvent(
                     new CustomEvent("scene-error", {
                         bubbles: true,
@@ -811,25 +968,27 @@ class PrefViewer extends HTMLElement {
     }
 
     #stripImportedLights(container) {
-        // 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());
-        }
+        const n = container?.lights?.length ?? 0;
+        if (n) container.lights.slice().forEach((l) => l.dispose());
+        this.#log("debug", `stripImportedLights(): ${n} → 0`);
     }
 
     // Public Methods
     loadConfig(config) {
+        this.#log("info", "loadConfig()", typeof config === "string" ? "[string]" : config);
         config = typeof config === "string" ? JSON.parse(config) : config;
         if (!config) {
+            this.#log("warn", "loadConfig() → config vacío/nulo");
             return false;
         }
 
         // Containers
         this.#data.containers.model.storage = config.model?.storage || null;
-        this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
+        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;
-        this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
+        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;
 
         // Options
@@ -842,6 +1001,7 @@ class PrefViewer extends HTMLElement {
     }
 
     setOptions(options) {
+        this.#log("info", "setOptions()", options);
         if (!options) {
             return false;
         }
@@ -863,22 +1023,28 @@ class PrefViewer extends HTMLElement {
     }
 
     loadModel(model) {
+        this.#log("info", "loadModel()", typeof model === "string" ? "[string]" : model);
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
+            this.#log("warn", "loadModel() → model vacío/nulo");
             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.#data.containers.model.show =
+            model.visible !== undefined ? model.visible : this.#data.containers.model.show;
         this.initialized && this.#loadContainers(true, false, false);
     }
 
     loadScene(scene) {
+        this.#log("info", "loadScene()", typeof scene === "string" ? "[string]" : scene);
         scene = typeof scene === "string" ? JSON.parse(scene) : scene;
         if (!scene) {
+            this.#log("warn", "loadScene() → scene vacío/nulo");
             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.#data.containers.environment.show =
+            scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
         this.initialized && this.#loadContainers(false, true, false);
     }
 
@@ -906,7 +1072,9 @@ class PrefViewer extends HTMLElement {
 
     downloadModelGLB() {
         const fileName = "model";
-        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, {
+            exportWithoutWaitingForScene: true,
+        }).then((glb) => glb.downloadFiles());
     }
 
     downloadModelUSDZ() {
@@ -929,7 +1097,9 @@ class PrefViewer extends HTMLElement {
 
     downloadModelAndSceneGLB() {
         const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) =>
+            glb.downloadFiles()
+        );
     }
 }