@preference-sl/pref-viewer 2.10.0-beta.0 → 2.10.0-beta.10

package/package.json

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

package/src/index.js

@@ -6,30 +6,40 @@
  * Overview
  * --------
  * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Renders glTF or GLB models in a <canvas> inside its shadow DOM.
- *   • Supports loading via remote URLs (`model` attribute) or Base64 data URIs (`model-data` attribute).
+ *   • Renders the glTF or GLB model of the product ('model') and merges it with the glTF or GLB model of environment ('scene') into a <canvas> inside its shadow DOM.
+ *   • Supports loading via remote URL (storage.url), Base64 data URI (storage.url), or from a Base64 stored entry in IndexedDB (storage.db, storage.table, storage.id).
+ *   • The data for loading both models is provided via the 'config' (both model and scene), 'model' and 'scene' attributes. The 'config' attribute can carry more initial configurations than just the models.
+ *   • Exposes methods for making changes to the scene that replicate what the attribute observables do: 'loadConfig', 'loadModel', 'loadScene'.
  *   • Automatically handles scene creation (engine, camera, lighting) and resource cleanup.
- *   • Emits `model-loaded` and `model-error` events for integration.
+ *   • Emits 'model-loaded' and 'model-error' events for integration.
  *
  * Usage
  * -----
- * Load from a URL:
+ * Load model from IndexedDB:
  * ```html
  * <pref-viewer
- *   model="https://example.com/models/myModel.glb"
- *   style="width:800px; height:600px;">
+ *     model='{ "storage": { "db": "PrefConfiguratorDB", "table": "gltfModels", "id": "1234-1234-1234-1234-1234" }, "visible": true" }'
+ *     style="width:800px; height:600px;">
+ * </pref-viewer>
+ * ```
+ * 
+ * Load scene a URL:
+ * ```html
+ * <pref-viewer
+ *     scene='{ "storage": { "url" : "https://example.com/scenes/scene1.gltf" }, "visible": true" }'
+ *     style="width:800px; height:600px;">
  * </pref-viewer>
  * ```
  *
- * Load from Base64 data:
+ * Load model from Base64 data:
  * ```html
  * <pref-viewer
- *   model-data="data:application/gltf+json;base64,UEsDB..."
- *   style="width:800px; height:600px;">
+ *     model='{ "storage": { "url" : "data:model/gltf+json;base64,UEsDB..." }, "visible": true" }'
+ *     style="width:800px; height:600px;">
  * </pref-viewer>
  * ```
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools } 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";
@@ -37,22 +47,141 @@ import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompre
 import { initDb, loadModel } from "./gltf-storage.js";
 
 class PrefViewer extends HTMLElement {
+    static LOG_PREFIX = "[PrefViewer]";
+    static LOG_LEVELS = { none: 0, error: 1, warn: 2, info: 3, debug: 4 };
+    // Por defecto NO loggear: control únicamente vía atributo `log-level`
+    static DEFAULT_LOG_LEVEL = "none";
+
     #initialized = false;
+    #logLevel = PrefViewer.DEFAULT_LOG_LEVEL;
 
-    #model = {
-        container: null,
-        show: true,
-        storage: null,
-        visible: false,
+    #data = {
+        containers: {
+            model: {
+                name: "model",
+                container: null,
+                show: true,
+                storage: null,
+                visible: false,
+                size: null,
+                timestamp: null,
+                changed: false,
+            },
+            environment: {
+                name: "environment",
+                container: null,
+                show: true,
+                storage: null,
+                visible: false,
+                size: null,
+                timestamp: null,
+                changed: false,
+            },
+            materials: {
+                name: "materials",
+                container: null,
+                storage: null,
+                show: true,
+                visible: false,
+                size: null,
+                timestamp: null,
+                changed: false,
+            },
+        },
+        options: {
+            camera: {
+                value: null,
+                locked: true,
+                changed: false,
+            },
+            materials: {
+                innerWall: {
+                    value: null,
+                    prefix: "innerWall",
+                    changed: false,
+                },
+                outerWall: {
+                    value: null,
+                    prefix: "outerWall",
+                    changed: false,
+                },
+                innerFloor: {
+                    value: null,
+                    prefix: "innerFloor",
+                    changed: false,
+                },
+                outerFloor: {
+                    value: null,
+                    prefix: "outerFloor",
+                    changed: false,
+                },
+            },
+        },
     };
 
-    #environment = {
-        container: null,
-        show: true,
-        storage: null,
-        visible: false,
-    };
+    #log(level, message, context) {
+        const levels = PrefViewer.LOG_LEVELS;
+        const current = levels[this.#logLevel] ?? levels[PrefViewer.DEFAULT_LOG_LEVEL];
+        const incoming = levels[level] ?? levels.info;
+        if (incoming > current || current === levels.none) return;
+
+        const logger = console[level] ?? console.log;
+        if (context !== undefined) {
+            logger(`${PrefViewer.LOG_PREFIX}: ${message}`, context);
+        } else {
+            logger(`${PrefViewer.LOG_PREFIX}: ${message}`);
+        }
+    }
+
+    #setLogLevel(level) {
+        const value = String(level || "").toLowerCase();
+        this.#logLevel = (value in PrefViewer.LOG_LEVELS) ? value : PrefViewer.DEFAULT_LOG_LEVEL;
+        this.#logInfo("Log level set", { level: this.#logLevel });
+    }
+
+    #logDebug(message, context) {
+        this.#log("debug", message, context);
+    }
+
+    #logInfo(message, context) {
+        this.#log("info", message, context);
+    }
+
+    #logWarn(message, context) {
+        this.#log("warn", message, context);
+    }
+
+    #logError(message, context) {
+        this.#log("error", message, context);
+    }
+
+    #summarizeValue(value) {
+        if (typeof value === "string" && value.length > 150) {
+            return `${value.slice(0, 150)}… (${value.length} chars)`;
+        }
+        return value;
+    }
+
+    #describeStorage(storage) {
+        if (!storage) {
+            return "none";
+        }
+        if (storage.db && storage.table && storage.id) {
+            return `IndexedDB(${storage.db}/${storage.table}#${storage.id})`;
+        }
+        if (typeof storage.url === "string") {
+            return storage.url.startsWith("data:") ? "data-url" : storage.url;
+        }
+        return "unknown";
+    }
+
+    static get observedAttributes() {
+        // Añadimos "log-level" para controlar logs fuera del objeto config
+        return ["config", "model", "scene", "show-model", "show-scene", "log-level"];
+    }
 
+    // DOM elements
+    #wrapper = null;
     #canvas = null;
 
     // Babylon.js core objects
@@ -63,9 +192,11 @@ class PrefViewer extends HTMLElement {
     #dirLight = null;
     #cameraLight = null;
     #shadowGen = null;
+    #XRExperience = null;
 
     constructor() {
         super();
+        this.#logDebug("Constructing PrefViewer instance");
         this.attachShadow({ mode: "open" });
         this.#createCanvas();
         this.#wrapCanvas();
@@ -81,56 +212,40 @@ class PrefViewer extends HTMLElement {
         };
     }
 
-    static get observedAttributes() {
-        return ["config", "model", "scene", "show-model", "show-scene"];
-    }
-
     attributeChangedCallback(name, _old, value) {
+        if (name === "log-level") {
+            this.#setLogLevel(value);
+            return;
+        }
+
+        this.#logDebug("Attribute change detected", { name, value: this.#summarizeValue(value) });
         let data = null;
         switch (name) {
             case "config":
-                data = JSON.parse(value);
-                if (!data) {
-                    return false;
-                }
-                this.#model.storage = data.model?.storage || null;
-                this.#model.show = data.model?.visible || true;
-                this.#environment.storage = data.scene?.storage || null;
-                this.#environment.show = data.scene?.visible || true;
-                this.#initialized && this.#loadContainers(true, true);
+                this.loadConfig(value);
                 break;
             case "model":
-                data = JSON.parse(value);
-                if (!data) {
-                    return false;
-                }
-                this.#model.storage = data.model?.storage || null;
-                this.#model.show = data.model?.visible || true;
-                this.#initialized && this.#loadContainers(true, false);
+                this.loadModel(value);
                 break;
             case "scene":
-                data = JSON.parse(value);
-                if (!data) {
-                    return false;
-                }
-                this.#environment.storage = data.scene?.storage || null;
-                this.#environment.show = data.scene?.visible || true;
-                this.#initialized && this.#loadContainers(false, true);
+                this.loadScene(value);
                 break;
             case "show-model":
                 data = value.toLowerCase?.() === "true";
+                this.#logDebug("Toggling model visibility from attribute", { visible: data, initialized: this.#initialized });
                 if (this.#initialized) {
                     data ? this.showModel() : this.hideModel();
                 } else {
-                    this.#model.show = data;
+                    this.#data.containers.model.show = data;
                 }
                 break;
             case "show-scene":
                 data = value.toLowerCase?.() === "true";
+                this.#logDebug("Toggling scene visibility from attribute", { visible: data, initialized: this.#initialized });
                 if (this.#initialized) {
                     data ? this.showScene() : this.hideScene();
                 } else {
-                    this.#environment.show = data;
+                    this.#data.containers.environment.show = data;
                 }
                 break;
         }
@@ -139,7 +254,7 @@ class PrefViewer extends HTMLElement {
     connectedCallback() {
         if (!this.hasAttribute("config")) {
             const error = 'PrefViewer: provide "models" as array of model and environment';
-            console.error(error);
+            this.#logError("Missing required config attribute", { error });
             this.dispatchEvent(
                 new CustomEvent("model-error", {
                     detail: { error: new Error(error) },
@@ -150,18 +265,22 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
+        this.#logDebug("Connected to DOM, initializing Babylon");
         this.#initializeBabylon();
-        this.#loadContainers(true, true);
+        this.#loadContainers(true, true, true);
         this.#initialized = true;
+        this.#logInfo("Initialization completed", { initialized: this.#initialized });
     }
 
     disconnectedCallback() {
+        this.#logDebug("Disconnected from DOM, disposing resources");
         this.#disposeEngine();
-        window.removeEventListener("resize", this.#onWindowResize);
+        this.#canvasResizeObserver.disconnect();
     }
 
     // Web Component
     #createCanvas() {
+        this.#logDebug("Creating rendering canvas");
         this.#canvas = document.createElement("canvas");
         Object.assign(this.#canvas.style, {
             width: "100%",
@@ -169,21 +288,72 @@ class PrefViewer extends HTMLElement {
             display: "block",
             outline: "none",
         });
+        this.#logDebug("Canvas element created and styled");
     }
 
     #wrapCanvas() {
-        const wrapper = document.createElement("div");
-        Object.assign(wrapper.style, {
+        this.#logDebug("Wrapping canvas inside container div");
+        this.#wrapper = document.createElement("div");
+        Object.assign(this.#wrapper.style, {
             width: "100%",
             height: "100%",
             position: "relative",
         });
-        wrapper.appendChild(this.#canvas);
-        this.shadowRoot.append(wrapper);
+        this.#wrapper.appendChild(this.#canvas);
+        this.shadowRoot.append(this.#wrapper);
+        this.#logDebug("Canvas wrapper appended to shadow DOM");
+    }
+
+    // Data
+    #checkCameraChanged(options) {
+        if (!options || !options.camera) {
+            this.#logDebug("Camera options not provided or unchanged");
+            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;
+        this.#logDebug("Camera option processed", { changed: this.#data.options.camera.changed, value: this.#data.options.camera.value });
+        return this.#data.options.camera.changed;
+    }
+
+    #checkMaterialsChanged(options) {
+        if (!options) {
+            this.#logDebug("Material options not provided");
+            return false;
+        }
+        let someChanged = false;
+        Object.keys(this.#data.options.materials).forEach((material) => {
+            const key = `${material}Material`;
+            this.#data.options.materials[material].changed = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
+            this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : this.#data.options.materials[material].value;
+            someChanged = someChanged || this.#data.options.materials[material].changed;
+        });
+        this.#logDebug("Material options processed", {
+            changed: someChanged,
+            values: Object.entries(this.#data.options.materials).reduce((acc, [key, entry]) => {
+                acc[key] = { value: entry.value, changed: entry.changed };
+                return acc;
+            }, {}),
+        });
+        return someChanged;
+    }
+
+    #storeChangedFlagsForContainer(container) {
+        container.timestamp = container.changed.timestamp;
+        container.size = container.changed.size;
+        this.#logDebug("Stored change flags for container", { name: container.name, timestamp: container.timestamp, size: container.size });
+    }
+
+    #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;
+        this.#logDebug("Reset change flags across containers and options");
     }
 
-    // Bbylon.js
-    #initializeBabylon() {
+    // Babylon.js
+    async #initializeBabylon() {
+        this.#logInfo("Initializing Babylon engine and scene");
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
@@ -192,19 +362,103 @@ class PrefViewer extends HTMLElement {
         this.#setupInteraction();
 
         this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
-        window.addEventListener("resize", this.#onWindowResize);
+        this.#canvasResizeObserver.observe(this.#canvas);
+        this.#logDebug("Engine render loop started and resize observer attached");
+
+        await this.#createXRExperience();
+        this.#logInfo("Babylon initialization finished", { xrEnabled: !!this.#XRExperience });
+    }
+
+    addStylesToARButton() {
+        this.#logDebug("Adding styles to AR button");
+        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);
+        this.#logDebug("AR button styles applied");
     }
 
-    #onWindowResize() {
-        this.#engine && this.#engine.resize();
+    async #createXRExperience() {
+        if (this.#XRExperience) {
+            this.#logDebug("XR experience already created, skipping");
+            return true;
+        }
+
+        this.#logDebug("Attempting to create XR experience");
+        const sessionMode = "immersive-ar";
+        const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
+        if (!sessionSupported) {
+            this.#logInfo("WebXR session mode not supported", { sessionMode });
+            return false;
+        }
+
+        try {
+            const ground = MeshBuilder.CreateGround("ground", { width: 1000, height: 1000 }, this.#scene);
+            ground.isVisible = false;
+
+            const options = {
+                floorMeshes: [ground],
+                uiOptions: {
+                    sessionMode: sessionMode,
+                    renderTarget: "xrLayer",
+                    referenceSpaceType: "local",
+                },
+                optionalFeatures: true,
+            };
+
+            this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
+            this.#logInfo("XR experience created successfully", { sessionMode });
+
+            const featuresManager = this.#XRExperience.baseExperience.featuresManager;
+            featuresManager.enableFeature(WebXRFeatureName.TELEPORTATION, "stable", {
+                xrInput: this.#XRExperience.input,
+                floorMeshes: [ground],
+                timeToTeleport: 1500,
+            });
+            this.#logDebug("XR teleportation feature enabled");
+
+            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.#XRExperience.baseExperience.camera.setTarget(Vector3.Zero());
+                this.#XRExperience.baseExperience.onInitialXRPoseSetObservable.notifyObservers(this.#XRExperience.baseExperience.camera);
+                this.#logDebug("XR session ready and camera transformed");
+            });
+
+            this.addStylesToARButton();
+        } catch (error) {
+            this.#logWarn("Failed to create XR experience", { error });
+            this.#XRExperience = null;
+        }
     }
 
+    #canvasResizeObserver = new ResizeObserver(() => {
+        if (this.#engine) {
+            this.#logDebug("Resize observer triggered");
+            this.#engine.resize();
+        }
+    });
+
     #createCamera() {
-        this.#camera = new ArcRotateCamera("camera", Math.PI / 2, Math.PI / 3, 10, Vector3.Zero(), this.#scene);
+        this.#logDebug("Creating default camera");
+        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 = this.#camera;
         this.#camera.attachControl(this.#canvas, true);
+        this.#logDebug("Camera created", {
+            upperBetaLimit: this.#camera.upperBetaLimit,
+            lowerBetaLimit: this.#camera.lowerBetaLimit,
+            lowerRadiusLimit: this.#camera.lowerRadiusLimit,
+            upperRadiusLimit: this.#camera.upperRadiusLimit,
+        });
     }
 
     #createLights() {
+        this.#logDebug("Creating scene lights");
         // 1) Stronger ambient fill
         this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
         this.#hemiLight.intensity = 0.6;
@@ -224,162 +478,408 @@ class PrefViewer extends HTMLElement {
         this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
         this.#cameraLight.parent = this.#camera;
         this.#cameraLight.intensity = 0.3;
+        this.#logDebug("Scene lights configured", {
+            hemiIntensity: this.#hemiLight.intensity,
+            dirIntensity: this.#dirLight.intensity,
+            pointIntensity: this.#cameraLight.intensity,
+            shadowKernel: this.#shadowGen.blurKernel,
+        });
     }
 
     #setupInteraction() {
+        this.#logDebug("Setting up canvas interaction listeners");
         this.#canvas.addEventListener("wheel", (event) => {
-            if (!this.#scene || !this.#camera) return;
-            const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
-            this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
-            this.#camera.inertialRadiusOffset += event.deltaY * this.#camera.wheelPrecision * 0.01;
+            if (!this.#scene || !this.#camera) {
+                this.#logWarn("Wheel interaction ignored; scene or camera missing");
+                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;
+                this.#logDebug("Processed wheel interaction", {
+                    deltaY: event.deltaY,
+                    inertialRadiusOffset: this.#scene.activeCamera.inertialRadiusOffset,
+                });
+            } else {
+                this.#logDebug("Wheel interaction ignored because camera is locked");
+            }
             event.preventDefault();
         });
     }
 
     #disposeEngine() {
-        if (!this.#engine) return;
+        if (!this.#engine) {
+            this.#logDebug("Dispose engine called but engine already null");
+            return;
+        }
+        this.#logDebug("Disposing Babylon resources");
         this.#engine.dispose();
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
         this.#shadowGen = null;
+        this.#logDebug("Babylon resources disposed");
     }
 
     // Utility methods for loading gltf/glb
+    async #getServerFileDataHeader(uri) {
+        this.#logDebug("Requesting server file header", { uri });
+        return new Promise((resolve) => {
+            const xhr = new XMLHttpRequest();
+            xhr.open("HEAD", uri, true);
+            xhr.responseType = "blob";
+            xhr.onload = () => {
+                if (xhr.status === 200) {
+                    const size = parseInt(xhr.getResponseHeader("Content-Length"));
+                    const timestamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    this.#logDebug("Received server file header", { uri, size, timestamp });
+                    resolve(size, timestamp);
+                } else {
+                    this.#logWarn("Failed to retrieve server file header", { uri, status: xhr.status });
+                    resolve(0, null);
+                }
+            };
+            xhr.onerror = () => {
+                this.#logError("Error requesting server file header", { uri });
+                resolve(0, null);
+            };
+            xhr.send();
+        });
+    }
+
     #transformUrl(url) {
         return new Promise((resolve) => {
-            resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
+            const transformed = url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/");
+            this.#logDebug("Transformed URL", { original: url, transformed });
+            resolve(transformed);
         });
     }
 
     #decodeBase64(base64) {
+        this.#logDebug("Decoding Base64 payload", { length: base64 ? base64.length : 0 });
         const [, payload] = base64.split(",");
         const raw = payload || base64;
         let decoded = "";
         let blob = null;
         let extension = null;
+        let size = raw.length;
         try {
             decoded = atob(raw);
         } catch {
-            return { blob, extension };
+            this.#logWarn("Failed to decode Base64 string");
+            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 });
-        return { blob, extension };
+        this.#logDebug("Decoded Base64 payload", { isJson, size, extension });
+        return { blob, extension, size };
     }
 
     async #initStorage(db, table) {
+        this.#logDebug("Initializing storage access", { db, table });
         if (window.gltfDB && window.gltfDB.name === db && window.gltfDB.objectStoreNames.contains(table)) {
+            this.#logDebug("Reusing existing IndexedDB connection", { db, table });
             return true;
         }
         await initDb(db, table);
+        this.#logDebug("IndexedDB initialized", { db, table });
     }
 
     // Methods for managing Asset Containers
     #setVisibilityOfWallAndFloorInModel(show) {
-        if (this.#model.container && this.#model.visible) {
-            const names = ["outer_0", "inner_1", "outerFloor", "innerFloor"];
-            const nodes = this.#model.container.getNodes();
-            this.#model.container
-                .getNodes()
-                .filter((filter) => names.includes(filter.name))
-                .forEach((node) => node.setEnabled(show !== undefined ? show : this.#environment.show));
+        if (!this.#data.containers.model.assetContainer || !this.#data.containers.model.visible) {
+            this.#logDebug("Skipping wall/floor visibility update", {
+                hasModel: !!this.#data.containers.model.assetContainer,
+                modelVisible: this.#data.containers.model.visible,
+            });
+            return false;
+        }
+        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));
+        this.#logDebug("Updated wall and floor visibility", { show });
+    }
+
+    #setOptionsMaterial(optionMaterial) {
+        if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
+            this.#logWarn("Material option invalid", { optionMaterial });
+            return false;
+        }
+
+        this.#logDebug("Applying material option", {
+            prefix: optionMaterial.prefix,
+            value: optionMaterial.value,
+            changed: optionMaterial.changed,
+        });
+
+        const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
+        if (!material) {
+            this.#logWarn("Requested material not found", { value: optionMaterial.value });
+            return false;
+        }
+
+        const containers = [];
+        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.assetContainer.changed || optionMaterial.changed)) {
+            containers.push(this.#data.containers.model.assetContainer);
+        }
+        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.assetContainer.changed || optionMaterial.changed)) {
+            containers.push(this.#data.containers.environment.assetContainer);
+        }
+        if (containers.length === 0) {
+            this.#logDebug("No containers required material update", { prefix: optionMaterial.prefix });
+            return false;
+        }
+
+        let someSetted = false;
+        containers.forEach((container) =>
+            container.meshes
+                .filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix))
+                .forEach((mesh) => {
+                    mesh.material = material;
+                    someSetted = true;
+                    this.#logDebug("Assigned material to mesh", { mesh: mesh.name, material: material.name });
+                })
+        );
+
+        this.#logDebug("Material option applied", {
+            prefix: optionMaterial.prefix,
+            value: optionMaterial.value,
+            applied: someSetted,
+            containers: containers.map((container) => container.name),
+        });
+
+        return someSetted;
+    }
+
+    #setOptionsMaterials() {
+        if (!this.#data.containers.materials.assetContainer) {
+            this.#logDebug("Skipping materials update; materials container is missing");
+            return false;
+        }
+
+        this.#logDebug("Applying material options batch");
+        let someSetted = false;
+        Object.values(this.#data.options.materials).forEach((material) => {
+            let settedMaterial = this.#setOptionsMaterial(material);
+            someSetted = someSetted || settedMaterial;
+        });
+        this.#logDebug("Material batch processing finished", { appliedAny: someSetted });
+        return someSetted;
+    }
+
+    #setOptionsCamera() {
+        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
+            this.#logDebug("No camera option update necessary", {
+                value: this.#data.options.camera.value,
+                changed: this.#data.options.camera.changed,
+                modelChanged: 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.#logWarn("Requested camera not found", { name: this.#data.options.camera.value });
+            return false;
+        }
+
+        camera.metadata = { locked: this.#data.options.camera.locked };
+        if (!this.#data.options.camera.locked) {
+            camera.attachControl(this.#canvas, true);
+            this.#logDebug("Attached unlocked camera control", { camera: camera.name });
+        } else {
+            this.#logDebug("Using locked camera configuration", { camera: camera.name });
         }
+        this.#scene.activeCamera = camera;
+        this.#logDebug("Active camera set", { camera: camera.name });
+
+        return true;
     }
 
-    #addContainer(group) {
-        if (group.container && !group.visible && group.show) {
-            group.container.addAllToScene();
-            group.visible = true;
+    #addContainer(container) {
+        if (container.assetContainer && !container.visible && container.show) {
+            container.assetContainer.addAllToScene();
+            container.visible = true;
+            this.#logDebug("Added container to scene", { name: container.name });
+        } else {
+            this.#logDebug("Skipped adding container", {
+                name: container?.name,
+                hasAssetContainer: !!container?.assetContainer,
+                visible: container?.visible,
+                show: container?.show,
+            });
         }
     }
 
-    #removeContainer(group) {
-        if (group.container && group.visible) {
-            group.container.removeAllFromScene();
-            group.visible = false;
+    #removeContainer(container) {
+        if (container.assetContainer && container.visible) {
+            container.assetContainer.removeAllFromScene();
+            container.visible = false;
+            this.#logDebug("Removed container from scene", { name: container.name });
+        } else {
+            this.#logDebug("Skipped removing container", {
+                name: container?.name,
+                hasAssetContainer: !!container?.assetContainer,
+                visible: container?.visible,
+            });
         }
     }
 
-    #replaceContainer(group, newContainer) {
-        this.#removeContainer(group);
-        group.container = newContainer;
-        group.container.meshes.forEach((mesh) => {
+    #replaceContainer(container, newAssetContainer) {
+        this.#logDebug("Replacing container asset", { name: container.name });
+        this.#removeContainer(container);
+        container.assetContainer = newAssetContainer;
+        container.assetContainer.meshes.forEach((mesh) => {
             mesh.receiveShadows = true;
             this.#shadowGen.addShadowCaster(mesh, true);
+            this.#logDebug("Configured mesh for shadows", { container: container.name, mesh: mesh.name });
+        });
+        this.#addContainer(container);
+        this.#logDebug("Container replacement complete", {
+            name: container.name,
+            meshCount: container.assetContainer.meshes.length,
         });
-        this.#addContainer(group);
     }
 
-    async #loadAssetContainer(storage) {
+    async #loadAssetContainer(container) {
+        const storage = container?.storage;
+        this.#logDebug("Requested asset container load", {
+            container: container?.name,
+            storage: this.#describeStorage(storage),
+        });
+
         if (!storage) {
+            this.#logWarn("No storage configuration provided for container", { container: container?.name });
             return false;
         }
 
         let source = storage.url || null;
 
         if (storage.db && storage.table && storage.id) {
+            this.#logDebug("Loading container from IndexedDB", {
+                container: container.name,
+                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.#logDebug("IndexedDB model unchanged; skipping reload", { container: container.name });
+                return false;
+            } else {
+                container.changed = { timestamp: object.timestamp, size: object.size };
+                this.#logDebug("IndexedDB model marked as changed", { container: container.name, metadata: container.changed });
+            }
         }
 
         if (!source) {
+            this.#logWarn("No source resolved for container", { container: container.name });
             return false;
         }
 
         let file = null;
 
-        let { blob, extension } = this.#decodeBase64(source);
+        let { blob, extension, size } = this.#decodeBase64(source);
         if (blob && extension) {
-            file = new File([blob], `model${extension}`, {
+            this.#logDebug("Source detected as Base64", { container: container.name, extension });
+            file = new File([blob], `${container.name}${extension}`, {
                 type: blob.type,
             });
+            if (!container.changed) {
+                if (container.timestamp === null && container.size === size) {
+                    this.#logDebug("Base64 model unchanged; skipping reload", { container: container.name, size });
+                    return false;
+                } else {
+                    container.changed = { timestamp: null, size: size };
+                    this.#logDebug("Base64 model marked as changed", { container: container.name, size });
+                }
+            }
         } else {
             const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
+            const { fileSize, fileTimestamp } = await this.#getServerFileDataHeader(source);
+            if (container.timestamp === fileTimestamp && container.size === fileSize) {
+                this.#logDebug("Remote model unchanged; skipping reload", {
+                    container: container.name,
+                    fileTimestamp,
+                    fileSize,
+                });
+                return false;
+            } else {
+                container.changed = { timestamp: fileTimestamp, size: fileSize };
+                this.#logDebug("Remote model marked as changed", { container: container.name, metadata: container.changed });
+            }
         }
 
         let options = {
             pluginExtension: extension,
             pluginOptions: {
                 gltf: {
+                    loadAllMaterials: true,
                     preprocessUrlAsync: this.#transformUrl,
                 },
             },
         };
 
+        this.#logInfo("Loading asset container", { container: container.name, extension });
         return LoadAssetContainerAsync(file || source, this.#scene, options);
     }
 
-    async #loadContainers(loadModel = true, loadEnvironment = true) {
+    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
+        this.#logInfo("Starting container load", { loadModel, loadEnvironment, loadMaterials });
         const promiseArray = [];
-
-        promiseArray.push(loadModel ? this.#loadAssetContainer(this.#model.storage) : false);
-        promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#environment.storage) : false);
+        promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
+        promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
+        promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
 
         Promise.allSettled(promiseArray)
             .then(async (values) => {
                 const modelContainer = values[0];
                 const environmentContainer = values[1];
+                const materialsContainer = values[2];
 
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
-                    this.#replaceContainer(this.#model, modelContainer.value);
+                    this.#replaceContainer(this.#data.containers.model, modelContainer.value);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.model);
+                    this.#logInfo("Model container loaded successfully");
+                } else {
+                    this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
+                    this.#logDebug("Model container load skipped or failed", { status: modelContainer.status });
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
-                    this.#replaceContainer(this.#environment, environmentContainer.value);
+                    this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.environment);
+                    this.#logInfo("Environment container loaded successfully");
+                } else {
+                    this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
+                    this.#logDebug("Environment container load skipped or failed", { status: environmentContainer.status });
+                }
+
+                if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
+                    this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.materials);
+                    this.#logInfo("Materials container loaded successfully");
+                } else {
+                    this.#logDebug("Materials container load skipped or failed", { status: materialsContainer.status });
                 }
 
-                this.#scene.createDefaultCamera(true, true, true);
+                this.#setOptionsMaterials();
+                this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
 
+                this.#resetChangedFlags();
+
+                this.#logInfo("Containers load routine completed");
                 this.dispatchEvent(
                     new CustomEvent("model-loaded", {
                         detail: { success: "" },
@@ -387,9 +887,10 @@ class PrefViewer extends HTMLElement {
                         composed: true,
                     })
                 );
+                this.#logDebug("Dispatched model-loaded event");
             })
             .catch((error) => {
-                console.error("PrefViewer: failed to load model", error);
+                this.#logError("Failed to load containers", { error });
                 this.dispatchEvent(
                     new CustomEvent("model-error", {
                         detail: { error: error },
@@ -401,56 +902,171 @@ class PrefViewer extends HTMLElement {
     }
 
     // Public Methods
+    loadConfig(config) {
+        this.#logInfo("loadConfig called", { initialized: this.#initialized, inputType: typeof config });
+        if (typeof config === "string") {
+            try {
+                config = JSON.parse(config);
+            } catch (error) {
+                this.#logError("Failed to parse config JSON", { error });
+                throw error;
+            }
+        }
+        if (!config) {
+            this.#logWarn("No config provided");
+            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.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.materials.storage = config.materials?.storage || null;
+
+        // Options
+        if (config.options) {
+            this.#checkCameraChanged(config.options);
+            this.#checkMaterialsChanged(config.options);
+        }
+
+        this.#logDebug("Config applied", {
+            modelStorage: this.#describeStorage(this.#data.containers.model.storage),
+            environmentStorage: this.#describeStorage(this.#data.containers.environment.storage),
+        });
+
+        this.#initialized && this.#loadContainers(true, true, true);
+    }
+
+    setOptions(options) {
+        this.#logInfo("setOptions called", { optionsProvided: !!options });
+        if (!options) {
+            this.#logWarn("setOptions called without options");
+            return false;
+        }
+        let someSetted = false;
+        if (this.#checkCameraChanged(options)) {
+            this.#logDebug("Camera options changed via setOptions");
+            someSetted = someSetted || this.#setOptionsCamera();
+        }
+        if (this.#checkMaterialsChanged(options)) {
+            this.#logDebug("Material options changed via setOptions");
+            someSetted = someSetted || this.#setOptionsMaterials();
+        }
+        this.#resetChangedFlags();
+        this.#logDebug("setOptions completed", { appliedAny: someSetted });
+        debugger;
+        return someSetted;
+    }
+
+    loadModel(model) {
+        this.#logInfo("loadModel called", { initialized: this.#initialized, inputType: typeof model });
+        if (typeof model === "string") {
+            try {
+                model = JSON.parse(model);
+            } catch (error) {
+                this.#logError("Failed to parse model JSON", { error });
+                throw error;
+            }
+        }
+        if (!model) {
+            this.#logWarn("No model payload provided");
+            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.#logDebug("Model configuration updated", {
+            storage: this.#describeStorage(this.#data.containers.model.storage),
+            show: this.#data.containers.model.show,
+        });
+        this.#initialized && this.#loadContainers(true, false, false);
+    }
+
+    loadScene(scene) {
+        this.#logInfo("loadScene called", { initialized: this.#initialized, inputType: typeof scene });
+        if (typeof scene === "string") {
+            try {
+                scene = JSON.parse(scene);
+            } catch (error) {
+                this.#logError("Failed to parse scene JSON", { error });
+                throw error;
+            }
+        }
+        if (!scene) {
+            this.#logWarn("No scene payload provided");
+            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.#logDebug("Scene configuration updated", {
+            storage: this.#describeStorage(this.#data.containers.environment.storage),
+            show: this.#data.containers.environment.show,
+        });
+        this.#initialized && this.#loadContainers(false, true, false);
+    }
+
     showModel() {
-        this.#model.show = true;
-        this.#addContainer(this.#model);
+        this.#data.containers.model.show = true;
+        this.#addContainer(this.#data.containers.model);
+        this.#logInfo("Model visibility set to true");
     }
 
     hideModel() {
-        this.#model.show = false;
-        this.#removeContainer(this.#model);
+        this.#data.containers.model.show = false;
+        this.#removeContainer(this.#data.containers.model);
+        this.#logInfo("Model visibility set to false");
     }
 
     showScene() {
-        this.#environment.show = true;
-        this.#addContainer(this.#environment);
+        this.#data.containers.environment.show = true;
+        this.#addContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
+        this.#logInfo("Scene visibility set to true");
     }
 
     hideScene() {
-        this.#environment.show = false;
-        this.#removeContainer(this.#environment);
+        this.#data.containers.environment.show = false;
+        this.#removeContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
+        this.#logInfo("Scene visibility set to false");
     }
 
     downloadModelGLB() {
         const fileName = "model";
-        GLTF2Export.GLBAsync(this.#model.container, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+        this.#logInfo("Initiating GLB download for model", { fileName });
+        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            this.#logDebug("Model GLB export ready", { fileName });
             glb.downloadFiles();
         });
     }
 
     downloadModelUSDZ() {
         const fileName = "model";
-        USDZExportAsync(this.#model.container).then((response) => {
+        this.#logInfo("Initiating USDZ download for model", { fileName });
+        USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+                this.#logDebug("Model USDZ export ready", { fileName });
             }
         });
     }
 
     downloadModelAndSceneUSDZ() {
         const fileName = "scene";
+        this.#logInfo("Initiating USDZ download for scene", { fileName });
         USDZExportAsync(this.#scene).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+                this.#logDebug("Scene USDZ export ready", { fileName });
             }
         });
     }
 
     downloadModelAndSceneGLB() {
         const fileName = "scene";
+        this.#logInfo("Initiating GLB download for scene", { fileName });
         GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            this.#logDebug("Scene GLB export ready", { fileName });
             glb.downloadFiles();
         });
     }