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

package/package.json

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

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
@@ -755,8 +775,8 @@ export default class BabylonJSController {
                         if (container.state.name === "model") {
                             assetContainer.lights = [];
                         }
-                        const replacedAndAdded = this.#replaceContainer(container, assetContainer);
-                        if (replacedAndAdded && container.state.name === "model") {
+                        const replaced = this.#replaceContainer(container, assetContainer);
+                        if (replaced && container.state.name === "model") {
                             this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
                         }
                         container.state.setSuccess(true);