@preference-sl/pref-viewer 2.12.0-beta.1 → 2.12.0-beta.3

package/package.json

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

package/src/babylonjs-controller.js

@@ -24,6 +24,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - Provides methods for downloading models and scenes in GLB, glTF (ZIP), and USDZ formats.
  *  - Manages camera and material options, container visibility, and user interactions.
  *  - Observes canvas resize events and updates the engine accordingly.
+ *  - Applies metadata-driven scene adjustments (e.g., inner floor translation) after asset reloads.
  *  - Designed for integration with PrefViewer and GLTFResolver.
  *  - All resource management and rendering operations are performed asynchronously for performance.
  *
@@ -84,6 +85,9 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - #startRender(): Starts the Babylon.js render loop.
  *  - #loadAssetContainer(container): Loads an asset container asynchronously.
  *  - #loadContainers(): Loads all asset containers and adds them to the scene.
+ *  - #checkModelMetadata(oldMetadata, newMetadata): Processes metadata changes after loading.
+ *  - #checkInnerFloorTranslation(oldMetadata, newMetadata): Applies inner floor Y translations from metadata.
+ *  - #translateNodeY(name, deltaY): Adjusts the Y position of a scene node.
  *  - #addDateToName(name): Appends the current date/time to a name string.
  *  - #downloadZip(files, name, comment, addDateInName): Generates and downloads a ZIP file.
  *  - #openDownloadDialog(): Opens the modal download dialog.
@@ -319,9 +323,9 @@ export default class BabylonJSController {
      * @returns {boolean}
      */
     #initializeEnvironmentTexture() {
-        return false;
+        return false; // Environment texture disabled by the moment
         if (this.#scene.environmentTexture) {
-            return;
+            return false;
         }
         const hdrTextureURI = "../src/environments/noon_grass.hdr";
         const hdrTexture = new HDRCubeTexture(hdrTextureURI, this.#scene, 128);
@@ -329,6 +333,7 @@ export default class BabylonJSController {
         hdrTexture._noMipmap = false;
         hdrTexture.level = 2.0;
         this.#scene.environmentTexture = hdrTexture;
+        return true;
     }
 
     /**
@@ -340,7 +345,7 @@ export default class BabylonJSController {
      * @returns {void|false} Returns false if no environment texture is set; otherwise void.
      */
     #initializeIBLShadows() {
-        if (!this.#scene.environmentTexture) {
+        if (!this.#scene.environmentTexture || !this.#scene.environmentTexture.isReady()) {
             return false;
         }
 
@@ -407,7 +412,7 @@ export default class BabylonJSController {
      * Otherwise, sets up shadow casting and receiving for all relevant meshes using the shadow generator.
      */
     #initializeShadows() {
-        if (!this.#scene.environmentTexture) {
+        if (this.#scene.environmentTexture) {
             this.#initializeIBLShadows();
             return true;
         }
@@ -417,7 +422,7 @@ export default class BabylonJSController {
                 return false;
             }
             mesh.receiveShadows = true;
-            if (!mesh.name === "hdri") {
+            if (mesh.name !== "hdri") {
                 this.#shadowGen.addShadowCaster(mesh, true);
             }
         });
@@ -684,7 +689,7 @@ export default class BabylonJSController {
         const modelContainer = this.#containers.model;
         const environmentContainer = this.#containers.environment;
 
-        if (!cameraState.isPending && !modelContainer.state.isPending && !environmentContainer.state.isPending) {
+        if (!cameraState.isPending && !modelContainer.state.isSuccess && !environmentContainer.state.isSuccess) {
             return false;
         }
 
@@ -728,6 +733,7 @@ export default class BabylonJSController {
                 cameraState.setSuccess(true);
             }
         }
+        this.#scene.activeCamera?.detachControl();
         if (!cameraState.locked && cameraState.value !== null) {
             camera.attachControl(this.#canvas, true);
         }
@@ -848,6 +854,8 @@ export default class BabylonJSController {
             container.assetContainer = null;
         }
         this.#scene.getEngine().releaseEffects();
+        this.#scene.getEngine().releaseComputeEffects();
+
         container.assetContainer = newAssetContainer;
         return this.#addContainer(container, false);
     }
@@ -908,13 +916,14 @@ export default class BabylonJSController {
         if (!this.#gltfResolver) {
             this.#gltfResolver = new GLTFResolver();
         }
-
-        let sourceData = await this.#gltfResolver.getSource(container.state.update.storage, container.state.size, container.state.timeStamp);
+        //let sourceData = await this.#gltfResolver.getSource(container.state.update.storage, container.state.size, container.state.timeStamp);
+        // TEMPORARY: We never pass 'size' or 'timeStamp' to always force a reload and avoid issues with the active camera in reloading assetContainers
+        let sourceData = await this.#gltfResolver.getSource(container.state.update.storage, 0, null);
         if (!sourceData) {
             return [container, false];
         }
 
-        container.state.setPendingCacheData(sourceData.size, sourceData.timeStamp);
+        container.state.setPendingCacheData(sourceData.size, sourceData.timeStamp, sourceData.metadata);
 
         // https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions
         let options = {
@@ -943,6 +952,9 @@ export default class BabylonJSController {
     async #loadContainers() {
         this.#stopRender();
 
+        let oldModelMetadata = { ...(this.#containers.model?.state?.metadata ?? {}) };
+        let newModelMetadata = {};
+
         const promiseArray = [];
         Object.values(this.#containers).forEach((container) => {
             promiseArray.push(this.#loadAssetContainer(container));
@@ -962,6 +974,7 @@ export default class BabylonJSController {
                     if (result.status === "fulfilled" && assetContainer) {
                         if (container.state.name === "model") {
                             assetContainer.lights = [];
+                            newModelMetadata = { ...(container.state.update.metadata ?? {}) };
                         }
                         this.#replaceContainer(container, assetContainer);
                         container.state.setSuccess(true);
@@ -985,6 +998,7 @@ export default class BabylonJSController {
                 detail.error = error;
             })
             .finally(async () => {
+                this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
                 this.#setMaxSimultaneousLights();
                 this.#initializeShadows();
                 this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
@@ -993,6 +1007,101 @@ export default class BabylonJSController {
         return detail;
     }
 
+    /**
+     * Checks and applies model metadata changes after asset loading.
+     * @private
+     * @param {object} oldMetadata - The previous metadata object for the model.
+     * @param {object} newMetadata - The new metadata object for the model.
+     * @returns {void}
+     * @description
+     * Currently, it only checks for changes related to the inner floor translation by delegating to #checkInnerFloorTranslation.
+     */
+    #checkModelMetadata(oldMetadata, newMetadata) {
+        // For the moment only check inner floor translation
+        this.#checkInnerFloorTranslation(oldMetadata, newMetadata);
+    }
+
+    /**
+     * Checks and applies Y-axis translation for the inner floor node based on metadata changes.
+     * @private
+     * @param {object} oldMetadata - The previous metadata object for the model.
+     * @param {object} newMetadata - The new metadata object for the model.
+     * @returns {void}
+     */
+    #checkInnerFloorTranslation(oldMetadata, newMetadata) {
+        let newDeltaY = newMetadata?.customProperties?.innerFloorValue ? parseFloat(newMetadata.customProperties.innerFloorValue) : 0;
+        let oldDeltaY = oldMetadata?.customProperties?.innerFloorValue ? parseFloat(oldMetadata.customProperties.innerFloorValue) : 0;
+
+        if (newDeltaY === 0 && oldDeltaY === 0) {
+            return;
+        }
+
+        if (!this.#containers.environment.assetContainer) {
+            return;
+        }
+
+        const getNodeName = (data) => {
+            if (data && typeof data === "string" && data.includes("/")) {
+                data = data.slice(data.lastIndexOf("/") + 1);
+                return data;
+            }
+            return false;
+        };
+
+        let applyNewTranslation = false;
+        let applyOldTranslation = false;
+        let undoOldTranslation = false;
+        const newTranslationNodeName = getNodeName(newMetadata?.customProperties?.innerFloorPath);
+        const oldTranslationNodeName = getNodeName(oldMetadata?.customProperties?.innerFloorPath);
+
+        if (this.#containers.environment.state.isSuccess) {
+            // If environment is being reloaded:
+            if (this.#containers.model.state.isSuccess) {
+                // If model is also being reloaded, apply only new translation
+                applyNewTranslation = newDeltaY !== 0 && newTranslationNodeName;
+            } else {
+                // If model is not being reloaded, apply old translation
+                applyOldTranslation = oldDeltaY !== 0 && oldTranslationNodeName;
+            }
+        } else {
+            // If environment is not being reloaded:
+            if (this.#containers.model.state.isSuccess) {
+                // If environment is not being reload but model is being reloaded, undo old trasnslation and apply new translation
+                undoOldTranslation = oldDeltaY !== 0 && oldTranslationNodeName;
+                applyNewTranslation = newDeltaY !== 0 && newTranslationNodeName;
+            }
+        }
+
+        if (undoOldTranslation) {
+            this.#translateNodeY(oldTranslationNodeName, -oldDeltaY);
+        }
+        if (applyOldTranslation) {
+            this.#translateNodeY(oldTranslationNodeName, oldDeltaY);
+        }
+        if (applyNewTranslation) {
+            this.#translateNodeY(newTranslationNodeName, newDeltaY);
+        }
+    }
+
+    /**
+     * Translates a node along the scene's vertical (Y) axis by the provided value.
+     * @private
+     * @param {string} name - The node name to find in the scene.
+     * @param {number} deltaY - The Y-axis translation amount (positive or negative).
+     * @returns {boolean} True if the node was found and translated, false otherwise.
+     */
+    #translateNodeY(name, deltaY) {
+        if (!this.#scene) {
+            return false;
+        }
+        const node = this.#scene.getNodeByName(name);
+        if (!node || !node.position) {
+            return false;
+        }
+        node.position.y += deltaY;
+        return true;
+    }
+
     /**
      * Appends the current date and time to the provided name string in the format: name_YYYY-MM-DD_HH.mm.ss
      * @private

package/src/gltf-resolver.js

@@ -220,6 +220,7 @@ export default class GLTFResolver {
         let source = storage.url || null;
         let newSize, newTimeStamp;
         let pending = false;
+        let metadata = {};
 
         if (storage.db && storage.table && storage.id) {
             await this.#initializeStorage(storage.db, storage.table);
@@ -228,6 +229,7 @@ export default class GLTFResolver {
                 return false;
             }
             source = object.data;
+            metadata = { ...(object.metadata ?? {}) };
             if (object.timeStamp === currentTimeStamp) {
                 return false;
             } else {
@@ -283,6 +285,6 @@ export default class GLTFResolver {
                 }
             }
         }
-        return { source: file || source, size: newSize, timeStamp: newTimeStamp, extension: extension };
+        return { source: file || source, size: newSize, timeStamp: newTimeStamp, extension: extension, metadata: metadata, };
     }
 }

package/src/pref-viewer-3d-data.js

@@ -13,6 +13,7 @@
  */
 export class ContainerData {
     constructor(name = "") {
+        this.metadata = {};
         this.name = name;
         this.show = true;
         this.size = 0;
@@ -23,6 +24,7 @@ export class ContainerData {
     }
     reset() {
         this.update = {
+            metadata: {},
             pending: false,
             storage: null,
             success: false,
@@ -37,6 +39,7 @@ export class ContainerData {
             this.show = this.update.show !== null ? this.update.show : this.show;
             this.size = this.update.size;
             this.timeStamp = this.update.timeStamp;
+            this.metadata = { ...(this.update.metadata ?? {}) };
         } else {
             this.update.success = false;
         }
@@ -48,9 +51,10 @@ export class ContainerData {
         this.update.success = false;
         this.update.show = show !== undefined ? show : this.update.show !== null ? this.update.show : this.show;
     }
-    setPendingCacheData(size = 0, timeStamp = null) {
+    setPendingCacheData(size = 0, timeStamp = null, metadata = {}) {
         this.update.size = size;
         this.update.timeStamp = timeStamp;
+        this.update.metadata = { ...(metadata ?? {}) };
     }
     get isPending() {
         return this.update.pending === true;