@preference-sl/pref-viewer 2.10.0-beta.11 → 2.10.0-beta.12

package/package.json

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

package/src/index.js

@@ -1,6 +1,6 @@
 /**
  * =============================================================================
- * PrefViewer Web Component (JavaScript)
+ * PrefViewer Web Component (JavaScript) — con logging opcional por atributo
  * =============================================================================
  *
  * Overview
@@ -49,6 +49,76 @@ import { initDb, loadModel } from "./gltf-storage.js";
 class PrefViewer extends HTMLElement {
     #initialized = false;
 
+    // --- Logging -------------------------------------------------------------
+    #debugEnabled = false;
+    #logPrefix = "PrefViewer";
+    #timers = new Map();
+    #log = {
+        debug: () => {},
+        info: () => {},
+        warn: () => {},
+        error: () => {},
+        time: () => {},
+        timeEnd: () => {},
+        group: () => {},
+        groupEnd: () => {},
+    };
+
+    #enableDebug(enable) {
+        const on = !!enable;
+        this.#debugEnabled = on;
+        if (!on) {
+            this.#log = {
+                debug: () => {},
+                info: () => {},
+                warn: () => {},
+                error: () => {},
+                time: () => {},
+                timeEnd: () => {},
+                group: () => {},
+                groupEnd: () => {},
+            };
+            return;
+        }
+        const tag = (lvl, args) => {
+            if (!args || !args.length) return [`${this.#logPrefix}:`];
+            const [first, ...rest] = args;
+            if (typeof first === "string") return [`${this.#logPrefix} [${lvl}] ${first}`, ...rest];
+            return [`${this.#logPrefix} [${lvl}]`, first, ...rest];
+        };
+        this.#log = {
+            debug: (...a) => console.debug(...tag("debug", a)),
+            info: (...a) => console.info(...tag("info", a)),
+            warn: (...a) => console.warn(...tag("warn", a)),
+            error: (...a) => console.error(...tag("error", a)),
+            time: (label) => {
+                const key = `${label}`;
+                this.#timers.set(key, performance.now());
+                console.debug(`${this.#logPrefix} [time] ${key} start`);
+            },
+            timeEnd: (label) => {
+                const key = `${label}`;
+                if (this.#timers.has(key)) {
+                    const delta = (performance.now() - this.#timers.get(key)).toFixed(2);
+                    console.debug(`${this.#logPrefix} [time] ${key} ${delta}ms`);
+                    this.#timers.delete(key);
+                } else {
+                    console.debug(`${this.#logPrefix} [time] ${key} (no start)`);
+                }
+            },
+            group: (title) => console.group?.(`${this.#logPrefix} ${title}`),
+            groupEnd: () => console.groupEnd?.(),
+        };
+    }
+
+    #readDebugAttribute() {
+        const v = (this.getAttribute("debug") || "").trim().toLowerCase();
+        // true/1/yes/on
+        const enabled = v === "true" || v === "1" || v === "yes" || v === "on" || v === "debug";
+        this.#enableDebug(enabled);
+    }
+    // ------------------------------------------------------------------------
+
     #data = {
         containers: {
             model: {
@@ -130,6 +200,8 @@ class PrefViewer extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
+        this.#readDebugAttribute();
+        this.#log.info("constructor()");
         this.#createCanvas();
         this.#wrapCanvas();
         // Point to whichever version you packaged or want to use:
@@ -142,13 +214,24 @@ class PrefViewer extends HTMLElement {
             // JS fallback if WASM isn’t available
             fallbackUrl: `${DRACO_BASE}/draco_decoder_gltf.js`,
         };
+        this.#log.debug("Draco decoder configured", DracoCompression.Configuration.decoder);
     }
 
     static get observedAttributes() {
-        return ["config", "model", "scene", "show-model", "show-scene"];
+        // Añadimos "debug" como atributo observable
+        return ["config", "model", "scene", "show-model", "show-scene", "debug"];
     }
 
     attributeChangedCallback(name, _old, value) {
+        // Nota: el cambio de "debug" debe ocurrir antes de loguear otras cosas.
+        if (name === "debug") {
+            this.#enableDebug((value || "").toLowerCase() === "true" || value === "1" || value === "yes" || value === "on" || value === "debug");
+            this.#log.info(`attributeChanged: debug -> ${this.#debugEnabled}`);
+            return;
+        }
+
+        this.#log.debug("attributeChangedCallback()", { name, oldValue: _old, value });
+
         let data = null;
         switch (name) {
             case "config":
@@ -163,6 +246,7 @@ class PrefViewer extends HTMLElement {
             case "show-model":
                 data = value.toLowerCase?.() === "true";
                 if (this.#initialized) {
+                    this.#log.info(`attr show-model -> ${data}`);
                     data ? this.showModel() : this.hideModel();
                 } else {
                     this.#data.containers.model.show = data;
@@ -171,6 +255,7 @@ class PrefViewer extends HTMLElement {
             case "show-scene":
                 data = value.toLowerCase?.() === "true";
                 if (this.#initialized) {
+                    this.#log.info(`attr show-scene -> ${data}`);
                     data ? this.showScene() : this.hideScene();
                 } else {
                     this.#data.containers.environment.show = data;
@@ -180,6 +265,7 @@ class PrefViewer extends HTMLElement {
     }
 
     connectedCallback() {
+        this.#log.info("connectedCallback()");
         if (!this.hasAttribute("config")) {
             const error = 'PrefViewer: provide "models" as array of model and environment';
             console.error(error);
@@ -196,15 +282,18 @@ class PrefViewer extends HTMLElement {
         this.#initializeBabylon();
         this.#loadContainers(true, true, true);
         this.#initialized = true;
+        this.#log.info("initialized = true");
     }
 
     disconnectedCallback() {
+        this.#log.info("disconnectedCallback()");
         this.#disposeEngine();
         this.#canvasResizeObserver.disconnect();
     }
 
     // Web Component
     #createCanvas() {
+        this.#log.debug("#createCanvas()");
         this.#canvas = document.createElement("canvas");
         Object.assign(this.#canvas.style, {
             width: "100%",
@@ -215,6 +304,7 @@ class PrefViewer extends HTMLElement {
     }
 
     #wrapCanvas() {
+        this.#log.debug("#wrapCanvas()");
         this.#wrapper = document.createElement("div");
         Object.assign(this.#wrapper.style, {
             width: "100%",
@@ -230,8 +320,10 @@ class PrefViewer extends HTMLElement {
         if (!options || !options.camera) {
             return false;
         }
-        this.#data.options.camera.changed = options.camera && options.camera !== this.#data.options.camera.value ? true : false;
-        this.#data.options.camera.value = this.#data.options.camera.changed ? options.camera : this.#data.options.camera.value;
+        const prev = this.#data.options.camera.value;
+        this.#data.options.camera.changed = options.camera && options.camera !== prev ? true : false;
+        this.#data.options.camera.value = this.#data.options.camera.changed ? options.camera : prev;
+        this.#log.debug("#checkCameraChanged()", { prev, next: this.#data.options.camera.value, changed: this.#data.options.camera.changed });
         return this.#data.options.camera.changed;
     }
 
@@ -242,19 +334,23 @@ class PrefViewer extends HTMLElement {
         let someChanged = false;
         Object.keys(this.#data.options.materials).forEach((material) => {
             const key = `${material}Material`;
-            this.#data.options.materials[material].changed = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
-            this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : this.#data.options.materials[material].value;
+            const prev = this.#data.options.materials[material].value;
+            this.#data.options.materials[material].changed = options[key] && options[key] !== prev ? true : false;
+            this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : prev;
             someChanged = someChanged || this.#data.options.materials[material].changed;
         });
+        this.#log.debug("#checkMaterialsChanged()", { someChanged, values: this.#data.options.materials });
         return someChanged;
     }
 
     #storeChangedFlagsForContainer(container) {
+        this.#log.debug("#storeChangedFlagsForContainer()", { name: container.name, changed: container.changed });
         container.timestamp = container.changed.timestamp;
         container.size = container.changed.size;
     }
 
     #resetChangedFlags() {
+        this.#log.debug("#resetChangedFlags()");
         Object.values(this.#data.containers).forEach((container) => (container.changed = false));
         Object.values(this.#data.options.materials).forEach((material) => (material.changed = false));
         this.#data.options.camera.changed = false;
@@ -262,6 +358,8 @@ class PrefViewer extends HTMLElement {
 
     // Babylon.js
     async #initializeBabylon() {
+        this.#log.group("#initializeBabylon()");
+        this.#log.time("babylon:init");
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
@@ -273,9 +371,12 @@ class PrefViewer extends HTMLElement {
         this.#canvasResizeObserver.observe(this.#canvas);
 
         await this.#createXRExperience();
+        this.#log.timeEnd("babylon:init");
+        this.#log.groupEnd();
     }
 
     addStylesToARButton() {
+        this.#log.debug("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));
@@ -288,6 +389,7 @@ class PrefViewer extends HTMLElement {
         }
 
         const sessionMode = "immersive-ar";
+        this.#log.info("#createXRExperience()", { sessionMode });
         const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
         if (!sessionSupported) {
             console.info("PrefViewer: WebXR in mode AR is not supported");
@@ -295,6 +397,7 @@ class PrefViewer extends HTMLElement {
         }
 
         try {
+            this.#log.time("xr:create");
             const ground = MeshBuilder.CreateGround("ground", { width: 1000, height: 1000 }, this.#scene);
             ground.isVisible = false;
 
@@ -318,6 +421,7 @@ class PrefViewer extends HTMLElement {
             });
 
             this.#XRExperience.baseExperience.sessionManager.onXRReady.add(() => {
+                this.#log.info("XR onXRReady");
                 // 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());
@@ -325,15 +429,21 @@ class PrefViewer extends HTMLElement {
             });
 
             this.addStylesToARButton();
+            this.#log.timeEnd("xr:create");
         } catch (error) {
             console.warn("PrefViewer: failed to create WebXR experience", error);
+            this.#log.error("XR creation failed", error);
             this.#XRExperience = null;
         }
     }
 
-    #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
+    #canvasResizeObserver = new ResizeObserver(() => {
+        this.#log.debug("ResizeObserver -> engine.resize()");
+        this.#engine && this.#engine.resize();
+    });
 
     #createCamera() {
+        this.#log.debug("#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;
@@ -345,6 +455,7 @@ class PrefViewer extends HTMLElement {
     }
 
     #createLights() {
+        this.#log.debug("#createLights()");
         // 1) Stronger ambient fill
         this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
         this.#hemiLight.intensity = 0.6;
@@ -367,12 +478,11 @@ class PrefViewer extends HTMLElement {
     }
 
     #setupInteraction() {
+        this.#log.debug("#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;
             }
@@ -382,6 +492,7 @@ class PrefViewer extends HTMLElement {
 
     #disposeEngine() {
         if (!this.#engine) return;
+        this.#log.info("#disposeEngine()");
         this.#engine.dispose();
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
@@ -390,6 +501,7 @@ class PrefViewer extends HTMLElement {
 
     // Utility methods for loading gltf/glb
     async #getServerFileDataHeader(uri) {
+        this.#log.debug("#getServerFileDataHeader()", { uri });
         return new Promise((resolve) => {
             const xhr = new XMLHttpRequest();
             xhr.open("HEAD", uri, true);
@@ -398,12 +510,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 failed", { status: xhr.status });
                     resolve(0, null);
                 }
             };
             xhr.onerror = () => {
+                this.#log.error("HEAD network error");
                 resolve(0, null);
             };
             xhr.send();
@@ -411,12 +526,14 @@ class PrefViewer extends HTMLElement {
     }
 
     #transformUrl(url) {
+        this.#log.debug("#transformUrl()", { url });
         return new Promise((resolve) => {
             resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
         });
     }
 
     #decodeBase64(base64) {
+        this.#log.debug("#decodeBase64()", { length: (base64 || "").length });
         const [, payload] = base64.split(",");
         const raw = payload || base64;
         let decoded = "";
@@ -426,6 +543,7 @@ class PrefViewer extends HTMLElement {
         try {
             decoded = atob(raw);
         } catch {
+            this.#log.warn("atob failed (not base64?)");
             return { blob, extension, size };
         }
         let isJson = false;
@@ -441,6 +559,7 @@ class PrefViewer extends HTMLElement {
     }
 
     async #initStorage(db, table) {
+        this.#log.debug("#initStorage()", { db, table });
         if (window.gltfDB && window.gltfDB.name === db && window.gltfDB.objectStoreNames.contains(table)) {
             return true;
         }
@@ -449,6 +568,7 @@ class PrefViewer extends HTMLElement {
 
     // Methods for managing Asset Containers
     #setVisibilityOfWallAndFloorInModel(show) {
+        this.#log.debug("#setVisibilityOfWallAndFloorInModel()", { show });
         if (!this.#data.containers.model.assetContainer || !this.#data.containers.model.visible) {
             return false;
         }
@@ -461,9 +581,11 @@ class PrefViewer extends HTMLElement {
         if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
             return false;
         }
+        this.#log.debug("#setOptionsMaterial()", optionMaterial);
 
         const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
         if (!material) {
+            this.#log.warn("material not found", { wanted: optionMaterial.value });
             return false;
         }
 
@@ -492,6 +614,7 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsMaterials() {
+        this.#log.debug("#setOptionsMaterials()");
         let someSetted = false;
         Object.values(this.#data.options.materials).forEach((material) => {
             let settedMaterial = this.#setOptionsMaterial(material);
@@ -501,12 +624,14 @@ class PrefViewer extends HTMLElement {
     }
 
     #setOptionsCamera() {
+        this.#log.debug("#setOptionsCamera()", this.#data.options.camera);
         if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
             return false;
         }
 
         let camera = this.#data.containers.model.assetContainer?.cameras.find((cam) => cam.name === this.#data.options.camera.value) || null;
         if (!camera) {
+            this.#log.warn("camera not found", { wanted: this.#data.options.camera.value });
             return false;
         }
 
@@ -521,6 +646,7 @@ class PrefViewer extends HTMLElement {
 
     #addContainer(container) {
         if (container.assetContainer && !container.visible && container.show) {
+            this.#log.debug("#addContainer()", { name: container.name });
             container.assetContainer.addAllToScene();
             container.visible = true;
         }
@@ -528,12 +654,14 @@ class PrefViewer extends HTMLElement {
 
     #removeContainer(container) {
         if (container.assetContainer && container.visible) {
+            this.#log.debug("#removeContainer()", { name: container.name });
             container.assetContainer.removeAllFromScene();
             container.visible = false;
         }
     }
 
     #replaceContainer(container, newAssetContainer) {
+        this.#log.debug("#replaceContainer()", { name: container.name });
         this.#removeContainer(container);
         container.assetContainer = newAssetContainer;
         container.assetContainer.meshes.forEach((mesh) => {
@@ -544,9 +672,12 @@ class PrefViewer extends HTMLElement {
     }
 
     async #loadAssetContainer(container) {
+        this.#log.group(`#loadAssetContainer(${container?.name})`);
         let storage = container?.storage;
 
         if (!storage) {
+            this.#log.warn("no storage provided");
+            this.#log.groupEnd();
             return false;
         }
 
@@ -557,6 +688,8 @@ class PrefViewer extends HTMLElement {
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
             if (object.timestamp === container.timestamp) {
+                this.#log.info("no change from IndexedDB (timestamp match)");
+                this.#log.groupEnd();
                 return false;
             } else {
                 container.changed = { timestamp: object.timestamp, size: object.size };
@@ -564,6 +697,8 @@ class PrefViewer extends HTMLElement {
         }
 
         if (!source) {
+            this.#log.warn("no source URL or data");
+            this.#log.groupEnd();
             return false;
         }
 
@@ -571,11 +706,14 @@ class PrefViewer extends HTMLElement {
 
         let { blob, extension, size } = this.#decodeBase64(source);
         if (blob && extension) {
+            this.#log.debug("source is base64", { extension, size });
             file = new File([blob], `${container.name}${extension}`, {
                 type: blob.type,
             });
             if (!container.changed) {
                 if (container.timestamp === null && container.size === size) {
+                    this.#log.info("no change (base64 size match)");
+                    this.#log.groupEnd();
                     return false;
                 } else {
                     container.changed = { timestamp: null, size: size };
@@ -586,6 +724,8 @@ class PrefViewer extends HTMLElement {
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
             const { fileSize, fileTimestamp } = await this.#getServerFileDataHeader(source);
             if (container.timestamp === fileTimestamp && container.size === fileSize) {
+                this.#log.info("no change (remote HEAD match)");
+                this.#log.groupEnd();
                 return false;
             } else {
                 container.changed = { timestamp: fileTimestamp, size: fileSize };
@@ -602,10 +742,15 @@ class PrefViewer extends HTMLElement {
             },
         };
 
-        return LoadAssetContainerAsync(file || source, this.#scene, options);
+        this.#log.time(`babylon:LoadAssetContainerAsync:${container.name}`);
+        const res = LoadAssetContainerAsync(file || source, this.#scene, options);
+        this.#log.groupEnd();
+        return res;
     }
 
     async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
+        this.#log.group("#loadContainers()");
+        this.#log.debug("flags", { 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);
@@ -618,22 +763,29 @@ class PrefViewer extends HTMLElement {
                 const materialsContainer = values[2];
 
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
+                    this.#log.timeEnd(`babylon:LoadAssetContainerAsync:model`);
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.model);
                 } else {
+                    this.#log.debug("model container unchanged / not loaded");
                     this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
+                    this.#log.timeEnd(`babylon:LoadAssetContainerAsync:environment`);
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.environment);
                 } else {
+                    this.#log.debug("environment container unchanged / not loaded");
                     this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
                 }
 
                 if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
+                    this.#log.timeEnd(`babylon:LoadAssetContainerAsync:materials`);
                     this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.materials);
+                } else if (loadMaterials) {
+                    this.#log.debug("materials container unchanged / not loaded");
                 }
 
                 this.#setOptionsMaterials();
@@ -642,6 +794,7 @@ class PrefViewer extends HTMLElement {
 
                 this.#resetChangedFlags();
 
+                this.#log.info("dispatch: model-loaded");
                 this.dispatchEvent(
                     new CustomEvent("model-loaded", {
                         detail: { success: "" },
@@ -649,9 +802,11 @@ class PrefViewer extends HTMLElement {
                         composed: true,
                     })
                 );
+                this.#log.groupEnd();
             })
             .catch((error) => {
                 console.error("PrefViewer: failed to load model", error);
+                this.#log.error("failed to load model", error);
                 this.dispatchEvent(
                     new CustomEvent("model-error", {
                         detail: { error: error },
@@ -659,13 +814,17 @@ class PrefViewer extends HTMLElement {
                         composed: true,
                     })
                 );
+                this.#log.groupEnd();
             });
     }
 
     // Public Methods
     loadConfig(config) {
+        this.#log.group("loadConfig()");
         config = typeof config === "string" ? JSON.parse(config) : config;
         if (!config) {
+            this.#log.warn("no config");
+            this.#log.groupEnd();
             return false;
         }
 
@@ -682,11 +841,16 @@ class PrefViewer extends HTMLElement {
             this.#checkMaterialsChanged(config.options);
         }
 
+        this.#log.debug("config applied", { containers: this.#data.containers, options: this.#data.options });
         this.#initialized && this.#loadContainers(true, true, true);
+        this.#log.groupEnd();
     }
 
     setOptions(options) {
+        this.#log.group("setOptions()");
         if (!options) {
+            this.#log.warn("no options");
+            this.#log.groupEnd();
             return false;
         }
         let someSetted = false;
@@ -698,57 +862,73 @@ class PrefViewer extends HTMLElement {
         }
         this.#resetChangedFlags();
         debugger;
+        this.#log.debug("setOptions result", { someSetted });
+        this.#log.groupEnd();
         return someSetted;
     }
 
     loadModel(model) {
+        this.#log.group("loadModel()");
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
+            this.#log.warn("no model");
+            this.#log.groupEnd();
             return false;
         }
         this.#data.containers.model.storage = model.storage || null;
         this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
         this.#initialized && this.#loadContainers(true, false, false);
+        this.#log.groupEnd();
     }
 
     loadScene(scene) {
+        this.#log.group("loadScene()");
         scene = typeof scene === "string" ? JSON.parse(scene) : scene;
         if (!scene) {
+            this.#log.warn("no scene");
+            this.#log.groupEnd();
             return false;
         }
         this.#data.containers.environment.storage = scene.storage || null;
         this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
         this.#initialized && this.#loadContainers(false, true, false);
+        this.#log.groupEnd();
     }
 
     showModel() {
+        this.#log.info("showModel()");
         this.#data.containers.model.show = true;
         this.#addContainer(this.#data.containers.model);
     }
 
     hideModel() {
+        this.#log.info("hideModel()");
         this.#data.containers.model.show = false;
         this.#removeContainer(this.#data.containers.model);
     }
 
     showScene() {
+        this.#log.info("showScene()");
         this.#data.containers.environment.show = true;
         this.#addContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
     }
 
     hideScene() {
+        this.#log.info("hideScene()");
         this.#data.containers.environment.show = false;
         this.#removeContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
     }
 
     downloadModelGLB() {
+        this.#log.info("downloadModelGLB()");
         const fileName = "model";
         GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
     }
 
     downloadModelUSDZ() {
+        this.#log.info("downloadModelUSDZ()");
         const fileName = "model";
         USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
             if (response) {
@@ -758,6 +938,7 @@ class PrefViewer extends HTMLElement {
     }
 
     downloadModelAndSceneUSDZ() {
+        this.#log.info("downloadModelAndSceneUSDZ()");
         const fileName = "scene";
         USDZExportAsync(this.#scene).then((response) => {
             if (response) {
@@ -767,6 +948,7 @@ class PrefViewer extends HTMLElement {
     }
 
     downloadModelAndSceneGLB() {
+        this.#log.info("downloadModelAndSceneGLB()");
         const fileName = "scene";
         GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
     }