@preference-sl/pref-viewer 2.11.0-beta.4 → 2.11.0-beta.6

package/package.json

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

package/src/babylonjs-animation-controller.js

@@ -12,6 +12,9 @@ import { OpeningAnimation } from "./babylonjs-animation-opening.js";
  *  - Displays and disposes the animation control menu (GUI) for animated nodes.
  *  - Provides API for interaction and animation control.
  *
+ * Public Methods:
+ *  - dispose(): Disposes all resources managed by the animation controller.
+ *
  * @class
  */
 export default class BabylonJSAnimationController {
@@ -50,6 +53,7 @@ export default class BabylonJSAnimationController {
      */
     #getAnimatedNodes() {
         this.#scene.animationGroups.forEach((animationGroup) => {
+            animationGroup.stop();
             if (!animationGroup._targetedAnimations.length) {
                 return;
             }
@@ -150,21 +154,34 @@ export default class BabylonJSAnimationController {
      * @private
      */
     #setupPointerObservers() {
-        this.#scene.onPointerObservable.add((pointerInfo) => {
-            if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
-                const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
-                this.#hightlightMeshesForAnimation(pickingInfo);
-            }
-            if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                // Remove any previously created Babylon GUI
-                if (this.#advancedDynamicTexture) {
-                    this.#advancedDynamicTexture.dispose();
-                    this.#advancedDynamicTexture = null;
-                }
-                const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
-                this.#showMenu(pickingInfo);
+        if (this.#openingAnimations.length === 0) {
+            return;
+        }
+        this.#scene.onPointerObservable.add(this.#onAnimationPointerObservable.bind(this));
+    }
+
+    /**
+     * Handles pointer events in the Babylon.js scene for animation interaction.
+     * On pointer move, highlights meshes belonging to animated nodes under the cursor.
+     * On pointer up (click), disposes any existing GUI and displays the animation control menu for the selected node.
+     *
+     * @private
+     * @param {PointerInfo} pointerInfo - The pointer event information from Babylon.js.
+     */
+    #onAnimationPointerObservable(pointerInfo) {
+        if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
+            const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
+            this.#hightlightMeshesForAnimation(pickingInfo);
+        }
+        if (pointerInfo.type === PointerEventTypes.POINTERUP) {
+            // Remove any previously created Babylon GUI
+            if (this.#advancedDynamicTexture) {
+                this.#advancedDynamicTexture.dispose();
+                this.#advancedDynamicTexture = null;
             }
-        });
+            const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
+            this.#showMenu(pickingInfo);
+        }
     }
 
     /**
@@ -192,4 +209,27 @@ export default class BabylonJSAnimationController {
         }
         openingAnimation.showControls(this.#advancedDynamicTexture);
     }
+
+    /**
+     * Disposes all resources managed by the animation controller.
+     * Cleans up the highlight layer, GUI texture, and internal animation/node lists.
+     * Should be called when the controller is no longer needed to prevent memory leaks.
+     * @public
+     */
+    dispose() {
+        if (this.#highlightLayer) {
+            this.#highlightLayer.dispose();
+            this.#highlightLayer = null;
+        }
+        if (this.#advancedDynamicTexture) {
+            this.#advancedDynamicTexture.dispose();
+            this.#advancedDynamicTexture = null;
+        }
+        this.#animatedNodes = [];
+        this.#openingAnimations = [];
+        const observer = this.#scene.onPointerObservable._observers.find((observer) => observer.callback.name.includes("#onAnimationPointerObservable"));
+        if (observer) {
+            this.#scene.onPointerObservable.remove(observer);
+        }
+    }
 }

package/src/babylonjs-controller.js

@@ -294,29 +294,42 @@ export default class BabylonJSController {
             return false;
         }
 
-        let createIBLShadowPipeline = function (scene) {
+        /**
+         * Creates and configures the IBL shadow render pipeline for the Babylon.js scene.
+         * Sets recommended options for resolution, sampling, opacity, and disables debug passes.
+         * Accepts an optional camera array for pipeline targeting.
+         * @private
+         * @param {Scene} scene - The Babylon.js scene instance.
+         * @param {Camera[]} [cameras] - Optional array of cameras to target with the pipeline.
+         * @returns {IblShadowsRenderPipeline} The configured IBL shadow pipeline.
+         */
+        let createIBLShadowPipeline = function (scene, cameras = [scene.activeCamera]) {
             const pipeline = new IblShadowsRenderPipeline(
                 "iblShadowsPipeline",
                 scene,
                 {
-                    resolutionExp: 7,
-                    sampleDirections: 2,
+                    resolutionExp: 8, // Higher resolution for better shadow quality
+                    sampleDirections: 4, // More sample directions for smoother shadows
                     ssShadowsEnabled: true,
-                    shadowRemanence: 0.8,
+                    shadowRemanence: 0.85,
                     triPlanarVoxelization: true,
-                    shadowOpacity: 0.8,
+                    shadowOpacity: 0.85,
                 },
-                [scene.activeCamera]
+                cameras
             );
-            pipeline.allowDebugPasses = false;
-            pipeline.gbufferDebugEnabled = true;
-            pipeline.importanceSamplingDebugEnabled = false;
-            pipeline.voxelDebugEnabled = false;
-            pipeline.voxelDebugDisplayMip = 1;
-            pipeline.voxelDebugAxis = 2;
-            pipeline.voxelTracingDebugEnabled = false;
-            pipeline.spatialBlurPassDebugEnabled = false;
-            pipeline.accumulationPassDebugEnabled = false;
+            // Disable all debug passes for performance
+            const pipelineProps = {
+                allowDebugPasses: false,
+                gbufferDebugEnabled: false,
+                importanceSamplingDebugEnabled: false,
+                voxelDebugEnabled: false,
+                voxelDebugDisplayMip: 0,
+                voxelDebugAxis: 0,
+                voxelTracingDebugEnabled: false,
+                spatialBlurPassDebugEnabled: false,
+                accumulationPassDebugEnabled: false,
+            };
+            Object.assign(pipeline, pipelineProps);
             return pipeline;
         };
 
@@ -583,7 +596,7 @@ export default class BabylonJSController {
      * @param {boolean} isVisible - True to show the container, false to hide it.
      * @returns {void}
      */
-    #updateVisibilityAttributeInComponentes(name, isVisible) {
+    #updateVisibilityAttributeInComponents(name, isVisible) {
         // Cache references to parent custom elements
         this.#getPrefViewer3DComponent();
         this.#getPrefViewerComponent();
@@ -600,13 +613,16 @@ export default class BabylonJSController {
      * Adds the asset container to the Babylon.js scene if it should be shown and is not already visible.
      * @private
      * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @param {boolean} [updateVisibility=true] - If true, updates the visibility attribute in parent components.
      * @returns {boolean} True if the container was added, false otherwise.
      */
-    #addContainer(container) {
+    #addContainer(container, updateVisibility = true) {
         if (!container.assetContainer || container.state.isVisible || !container.state.mustBeShown) {
             return false;
         }
-        this.#updateVisibilityAttributeInComponentes(container.state.name, true);
+        if (updateVisibility) {
+            this.#updateVisibilityAttributeInComponents(container.state.name, true);
+        }
         container.assetContainer.addAllToScene();
         container.state.visible = true;
         return true;
@@ -616,13 +632,16 @@ export default class BabylonJSController {
      * Removes the asset container from the Babylon.js scene if it is currently visible.
      * @private
      * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @param {boolean} [updateVisibility=true] - If true, updates the visibility attribute in parent components.
      * @returns {boolean} True if the container was removed, false otherwise.
      */
-    #removeContainer(container) {
+    #removeContainer(container, updateVisibility = true) {
         if (!container.assetContainer || !container.state.isVisible) {
             return false;
         }
-        this.#updateVisibilityAttributeInComponentes(container.state.name, false);
+        if (updateVisibility) {
+            this.#updateVisibilityAttributeInComponents(container.state.name, false);
+        }
         container.assetContainer.removeAllFromScene();
         container.state.visible = false;
         return true;
@@ -637,14 +656,15 @@ export default class BabylonJSController {
      */
     #replaceContainer(container, newAssetContainer) {
         if (container.assetContainer) {
-            this.#removeContainer(container);
+            this.#removeContainer(container, false);
             container.assetContainer.dispose();
             container.assetContainer = null;
         }
         this.#scene.getEngine().releaseEffects();
         container.assetContainer = newAssetContainer;
-        return this.#addContainer(container);
+        return this.#addContainer(container, false);
     }
+
     /**
      * Sets the visibility of wall and floor meshes in the model container based on the provided value or environment visibility.
      * @private
@@ -748,6 +768,10 @@ export default class BabylonJSController {
 
         await Promise.allSettled(promiseArray)
             .then((values) => {
+                if (this.#babylonJSAnimationController) {
+                    this.#babylonJSAnimationController.dispose();
+                    this.#babylonJSAnimationController = null;
+                };
                 values.forEach((result) => {
                     const container = result.value ? result.value[0] : null;
                     const assetContainer = result.value ? result.value[1] : null;
@@ -755,10 +779,7 @@ export default class BabylonJSController {
                         if (container.state.name === "model") {
                             assetContainer.lights = [];
                         }
-                        const replacedAndAdded = this.#replaceContainer(container, assetContainer);
-                        if (replacedAndAdded && container.state.name === "model") {
-                            this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
-                        }
+                        this.#replaceContainer(container, assetContainer);
                         container.state.setSuccess(true);
                     } else {
                         if (container.assetContainer && container.state.mustBeShown !== container.state.isVisible && container.state.name === "materials") {
@@ -767,7 +788,7 @@ export default class BabylonJSController {
                         container.state.setSuccess(false);
                     }
                 });
-
+                
                 this.#setOptions_Materials();
                 this.#setOptions_Camera();
                 this.#setVisibilityOfWallAndFloorInModel();
@@ -782,9 +803,9 @@ export default class BabylonJSController {
             .finally(async () => {
                 this.#setMaxSimultaneousLights();
                 this.#initializeShadows();
+                this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
                 this.#startRender();
             });
-
         return detail;
     }