@preference-sl/pref-viewer 2.13.0-beta.1 → 2.13.0-beta.2

package/package.json

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

package/src/babylonjs-controller.js

@@ -96,7 +96,13 @@ export default class BabylonJSController {
     
     #gltfResolver = null; // GLTFResolver instance
     #babylonJSAnimationController = null; // AnimationController instance
-    
+
+    #renderPipelines = {
+        default: null,
+        ssao: null,
+        iblShadows: null,
+    };
+
     #handlers = {
         onKeyUp: null,
         onPointerObservable: null,
@@ -412,6 +418,43 @@ export default class BabylonJSController {
         }
     }
 
+    /**
+     * Detaches and disposes the SSAO render pipeline from the active camera when it exists.
+     * Guards against missing scene resources or absent pipelines, returning false when no cleanup is needed.
+     * @private
+     * @returns {boolean} Returns true when the SSAO pipeline was disabled, false otherwise.
+     */
+    #disableAmbientOcclusion() {
+        const pipelineManager = this.#scene?.postProcessRenderPipelineManager;
+
+        if (!this.#scene || !pipelineManager || this.#scene?.activeCamera === null) {
+            return false;
+        }
+
+        const supportedPipelines = pipelineManager.supportedPipelines;
+        
+        if (supportedPipelines === undefined) {
+            return false;
+        }
+
+        if (!this.#renderPipelines.ssao) {
+            return false;
+        }
+
+        const pipelineName = this.#renderPipelines.ssao.name;
+        const ssaoPipeline = supportedPipelines ? supportedPipelines.find((pipeline) => pipeline.name === pipelineName) : false;
+
+        if (ssaoPipeline) {
+            pipelineManager.detachCamerasFromRenderPipeline(pipelineName, [this.#scene.activeCamera]);
+            ssaoPipeline.dispose();
+            pipelineManager.removePipeline(pipelineName);
+            pipelineManager.update();
+            this.#renderPipelines.ssao = null;
+        }
+
+        return true;
+    }
+
     /**
      * Rebuilds the SSAO post-process pipeline to inject screenspace ambient occlusion on the active camera.
      * Disposes previous SSAO pipelines, instantiates a tuned `SSAORenderingPipeline`, and attaches it to the
@@ -420,138 +463,166 @@ export default class BabylonJSController {
      * @returns {boolean} True if the SSAO pipeline is supported and enabled, otherwise false.
      */
     #initializeAmbientOcclussion() {
-        if (!this.#scene || !this.#scene.postProcessRenderPipelineManager || this.#scene.activeCamera === null) {
+        const pipelineManager = this.#scene?.postProcessRenderPipelineManager;
+        if (!this.#scene || !pipelineManager || this.#scene?.activeCamera === null) {
             return false;
         }
 
         if (!this.#settings.ambientOcclusionEnabled) {
             return false;
         }
-
-        const pipelineName = "PrefViewerSSAORenderingPipeline";
-
-        const supportedPipelines = this.#scene.postProcessRenderPipelineManager.supportedPipelines;
-
-        if (!supportedPipelines) {
+        const supportedPipelines = pipelineManager.supportedPipelines;
+        
+        if (supportedPipelines === undefined) {
             return false;
         }
-
-        const oldSsaoPipeline = supportedPipelines ? supportedPipelines.find((pipeline) => pipeline.name === pipelineName) : false;
-
-        if (oldSsaoPipeline) {
-            oldSsaoPipeline.dispose();
-            this.#scene.postProcessRenderPipelineManager.update();
-        }
+        
+        const pipelineName = "PrefViewerSSAORenderingPipeline";
 
         const ssaoRatio = {
             ssaoRatio: 0.5,
             combineRatio: 1.0
         };
 
-        const ssaoPipeline = new SSAORenderingPipeline(pipelineName, this.#scene, ssaoRatio, [this.#scene.activeCamera]);
+        this.#renderPipelines.ssao = new SSAORenderingPipeline(pipelineName, this.#scene, ssaoRatio, [this.#scene.activeCamera]);
 
-        if (!ssaoPipeline){
+        if (!this.#renderPipelines.ssao){
             return false;
         }   
 
-        if (ssaoPipeline.isSupported) {
-            ssaoPipeline.fallOff = 0.000001;
-            ssaoPipeline.area = 1;
-            ssaoPipeline.radius = 0.0001;
-            ssaoPipeline.totalStrength = 1;
-            ssaoPipeline.base = 0.6;
+        if (this.#renderPipelines.ssao.isSupported) {
+            this.#renderPipelines.ssao.fallOff = 0.000001;
+            this.#renderPipelines.ssao.area = 1;
+            this.#renderPipelines.ssao.radius = 0.0001;
+            this.#renderPipelines.ssao.totalStrength = 1;
+            this.#renderPipelines.ssao.base = 0.6;
             
             // Configure SSAO to calculate only once instead of every frame for better performance
-            if (ssaoPipeline._ssaoPostProcess) {
-                ssaoPipeline._ssaoPostProcess.autoClear = false;
-                ssaoPipeline._ssaoPostProcess.samples = 1;
+            if (this.#renderPipelines.ssao._ssaoPostProcess) {
+                this.#renderPipelines.ssao._ssaoPostProcess.autoClear = false;
+                this.#renderPipelines.ssao._ssaoPostProcess.samples = 1;
+            }
+            if (this.#renderPipelines.ssao._combinePostProcess) {
+                this.#renderPipelines.ssao._combinePostProcess.autoClear = false;
+                this.#renderPipelines.ssao._combinePostProcess.samples = 1;
             }
             
-            this.#scene.postProcessRenderPipelineManager.update();
+            pipelineManager.update();
             return true;
         } else {
-            ssaoPipeline.dispose();
-            this.#scene.postProcessRenderPipelineManager.update();
+            this.#renderPipelines.ssao.dispose();
+            this.#renderPipelines.ssao = null;
+            pipelineManager.update();
             return false;
         }
     }
 
     /**
-     * Rebuilds the custom default rendering pipeline (MSAA, FXAA, film grain) for the active camera.
-     * Disposes any previous pipeline instance to avoid duplicates, then attaches a fresh
-     * `DefaultRenderingPipeline` with tuned settings for sharper anti-aliasing and subtle grain.
+     * Tears down the default rendering pipeline (MSAA/FXAA/grain) for the active camera when present.
+     * Ensures stale pipelines detach cleanly so a fresh one can be installed on the next load.
      * @private
-     * @returns {boolean} True when the pipeline is supported and active, otherwise false.
-     * @see {@link https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/defaultRenderingPipeline|Using the Default Rendering Pipeline | Babylon.js Documentation}
+     * @returns {boolean} Returns true when the pipeline was removed, false otherwise.
      */
-    #initializeVisualImprovements() {
-        if (!this.#scene || !this.#scene.postProcessRenderPipelineManager || this.#scene.activeCamera === null) {
+    #disableVisualImprovements() {
+        const pipelineManager = this.#scene?.postProcessRenderPipelineManager;
+
+        if (!this.#scene || !pipelineManager || this.#scene?.activeCamera === null) {
             return false;
         }
 
-        const pipelineName = "PrefViewerDefaultRenderingPipeline";
-        const supportedPipelines = this.#scene.postProcessRenderPipelineManager.supportedPipelines;
+        const supportedPipelines = pipelineManager.supportedPipelines;
+        
+        if (supportedPipelines === undefined) {
+            return false;
+        }
 
-        if (!supportedPipelines) {
+        if (!this.#renderPipelines.default) {
             return false;
         }
 
-        const oldDefaultPipeline = supportedPipelines ? supportedPipelines.find((pipeline) => pipeline.name === pipelineName) : false;
+        const pipelineName = this.#renderPipelines.default.name;
+        const defaultPipeline = supportedPipelines ? supportedPipelines.find((pipeline) => pipeline.name === pipelineName) : false;
+
+        if (defaultPipeline) {
+            pipelineManager.detachCamerasFromRenderPipeline(pipelineName, [this.#scene.activeCamera]);
+            defaultPipeline.dispose();
+            pipelineManager.removePipeline(pipelineName);
+            pipelineManager.update();
+            this.#renderPipelines.default = null;
+        }
 
-        if (oldDefaultPipeline) {
-            oldDefaultPipeline.dispose();
-            this.#scene.postProcessRenderPipelineManager.update();
+        return true;
+    }
+
+    /**
+     * Rebuilds the custom default rendering pipeline (MSAA, FXAA, film grain) for the active camera.
+     * Disposes any previous pipeline instance to avoid duplicates, then attaches a fresh
+     * `DefaultRenderingPipeline` with tuned settings for sharper anti-aliasing and subtle grain.
+     * @private
+     * @returns {boolean} True when the pipeline is supported and active, otherwise false.
+     * @see {@link https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/defaultRenderingPipeline|Using the Default Rendering Pipeline | Babylon.js Documentation}
+     */
+    #initializeVisualImprovements() {
+        const pipelineManager = this.#scene?.postProcessRenderPipelineManager;
+        if (!this.#scene || !pipelineManager || this.#scene?.activeCamera === null) {
+            return false;
         }
 
         if (!this.#settings.antiAliasingEnabled) {
             return false;
         }
+        const supportedPipelines = pipelineManager.supportedPipelines;
+        
+        if (supportedPipelines === undefined) {
+            return false;
+        }
+        
+        const pipelineName = "PrefViewerDefaultRenderingPipeline";
 
-        const defaultPipeline = new DefaultRenderingPipeline(pipelineName, true, this.#scene, [this.#scene.activeCamera], true);
+        this.#renderPipelines.default = new DefaultRenderingPipeline(pipelineName, true, this.#scene, [this.#scene.activeCamera], true);
 
-        if (!defaultPipeline){
+        if (!this.#renderPipelines.default){
             return false;
         } 
 
-        if (defaultPipeline.isSupported) {
+        if (this.#renderPipelines.default.isSupported) {
             // MSAA - Multisample Anti-Aliasing
             const caps = this.#scene.getEngine()?.getCaps?.() || {};
             const maxSamples = typeof caps.maxMSAASamples === "number" ? caps.maxMSAASamples : 4;
-            defaultPipeline.samples = Math.max(1, Math.min(8, maxSamples));
-
+            this.#renderPipelines.default.samples = Math.max(1, Math.min(8, maxSamples));
             // FXAA - Fast Approximate Anti-Aliasing
-            defaultPipeline.fxaaEnabled = true;
-            defaultPipeline.fxaa.samples = 8;
-            defaultPipeline.fxaa.adaptScaleToCurrentViewport = true;
-            if (defaultPipeline.fxaa.edgeThreshold !== undefined) {
-                defaultPipeline.fxaa.edgeThreshold = 0.125;
+            this.#renderPipelines.default.fxaaEnabled = true;
+            this.#renderPipelines.default.fxaa.samples = 8;
+            this.#renderPipelines.default.fxaa.adaptScaleToCurrentViewport = true;
+            if (this.#renderPipelines.default.fxaa.edgeThreshold !== undefined) {
+                this.#renderPipelines.default.fxaa.edgeThreshold = 0.125;
             }
-            if (defaultPipeline.fxaa.edgeThresholdMin !== undefined) {
-                defaultPipeline.fxaa.edgeThresholdMin = 0.0625;
+            if (this.#renderPipelines.default.fxaa.edgeThresholdMin !== undefined) {
+                this.#renderPipelines.default.fxaa.edgeThresholdMin = 0.0625;
             }
-            if (defaultPipeline.fxaa.subPixelQuality !== undefined) {
-                defaultPipeline.fxaa.subPixelQuality = 0.75;
+            if (this.#renderPipelines.default.fxaa.subPixelQuality !== undefined) {
+                this.#renderPipelines.default.fxaa.subPixelQuality = 0.75;
             }
 
             // Grain
-            defaultPipeline.grainEnabled = true;
-            defaultPipeline.grain.adaptScaleToCurrentViewport = true;
-            defaultPipeline.grain.animated = false;
-            defaultPipeline.grain.intensity = 3;
+            this.#renderPipelines.default.grainEnabled = true;
+            this.#renderPipelines.default.grain.adaptScaleToCurrentViewport = true;
+            this.#renderPipelines.default.grain.animated = false;
+            this.#renderPipelines.default.grain.intensity = 3;
 
             // Configure post-processes to calculate only once instead of every frame for better performance
-            if (defaultPipeline.fxaa?._postProcess) {
-                defaultPipeline.fxaa._postProcess.autoClear = false;
+            if (this.#renderPipelines.default.fxaa?._postProcess) {
+                this.#renderPipelines.default.fxaa._postProcess.autoClear = false;
             }
-            if (defaultPipeline.grain?._postProcess) {
-                defaultPipeline.grain._postProcess.autoClear = false;
+            if (this.#renderPipelines.default.grain?._postProcess) {
+                this.#renderPipelines.default.grain._postProcess.autoClear = false;
             }
 
-            this.#scene.postProcessRenderPipelineManager.update();
+            pipelineManager.update();
             return true;
         } else {
-            defaultPipeline.dispose();
-            this.#scene.postProcessRenderPipelineManager.update();
+            this.#renderPipelines.default.dispose();
+            pipelineManager.update();
             return false;
         }
     }
@@ -571,6 +642,43 @@ export default class BabylonJSController {
         return true;
     }
 
+    /**
+     * Removes the IBL shadow render pipeline from the active camera when present.
+     * Ensures voxelized shadow data is disposed so reloading environments installs a clean pipeline.
+     * @private
+     * @returns {boolean} Returns true when the pipeline was removed, false otherwise.
+     */
+    #disableIBLShadows() {
+        const pipelineManager = this.#scene?.postProcessRenderPipelineManager;
+
+        if (!this.#scene || !pipelineManager || this.#scene?.activeCamera === null) {
+            return false;
+        }
+
+        const supportedPipelines = pipelineManager.supportedPipelines;
+        
+        if (supportedPipelines === undefined) {
+            return false;
+        }
+
+        if (!this.#renderPipelines.iblShadows) {
+            return false;
+        }
+
+        const pipelineName = this.#renderPipelines.iblShadows.name;
+        const defaultPipeline = supportedPipelines ? supportedPipelines.find((pipeline) => pipeline.name === pipelineName) : false;
+
+        if (defaultPipeline) {
+            pipelineManager.detachCamerasFromRenderPipeline(pipelineName, [this.#scene.activeCamera]);
+            defaultPipeline.dispose();
+            pipelineManager.removePipeline(pipelineName);
+            pipelineManager.update();
+            this.#renderPipelines.iblShadows = null;
+        }
+
+        return true;
+    }
+
     /**
      * Initializes the Image-Based Lighting (IBL) shadows for the Babylon.js scene.
      * Creates an IBL shadow render pipeline and adds all relevant meshes and materials for shadow casting and receiving.
@@ -580,27 +688,22 @@ export default class BabylonJSController {
      * @returns {void|false} Returns false if no environment texture is set; otherwise void.
      */
     #initializeIBLShadows() {
-        if (!this.#scene || !this.#scene.postProcessRenderPipelineManager || this.#scene.activeCamera === null) {
+        const pipelineManager = this.#scene?.postProcessRenderPipelineManager;
+
+        if (!this.#scene || !pipelineManager || this.#scene?.activeCamera === null) {
             return false;
         }
 
-        // if (!this.#scene.environmentTexture || !this.#scene.environmentTexture.isReady()) {
         if (!this.#scene.environmentTexture) {
             return false;
         }
-        const pipelineName = "PrefViewerIblShadowsRenderPipeline";
-        const supportedPipelines = this.#scene.postProcessRenderPipelineManager.supportedPipelines;
-
+        const supportedPipelines = pipelineManager.supportedPipelines;
+        
         if (!supportedPipelines) {
             return false;
         }
-
-        const oldIblShadowsRenderPipeline = supportedPipelines ? supportedPipelines.find((pipeline) => pipeline.name === pipelineName) : false;
-
-        if (oldIblShadowsRenderPipeline) {
-            oldIblShadowsRenderPipeline.dispose();
-            this.#scene.postProcessRenderPipelineManager.update();
-        }
+        
+        const pipelineName = "PrefViewerIblShadowsRenderPipeline";
 
         const pipelineOptions = {
             resolutionExp: 1, // Higher resolution for better shadow quality (recomended 8)
@@ -611,13 +714,13 @@ export default class BabylonJSController {
             shadowOpacity: 0.85,
         };
 
-        const iblShadowsRenderPipeline = new IblShadowsRenderPipeline(pipelineName, this.#scene, pipelineOptions, [this.#scene.activeCamera]);
+        this.#renderPipelines.iblShadows = new IblShadowsRenderPipeline(pipelineName, this.#scene, pipelineOptions, [this.#scene.activeCamera]);
 
-        if (!iblShadowsRenderPipeline) {
+        if (!this.#renderPipelines.iblShadows) {
             return false;
         }
        
-        if (iblShadowsRenderPipeline.isSupported) {
+        if (this.#renderPipelines.iblShadows.isSupported) {
             // Disable all debug passes for performance
             const pipelineProps = {
                 allowDebugPasses: false,
@@ -631,11 +734,11 @@ export default class BabylonJSController {
                 accumulationPassDebugEnabled: false,
             };
 
-            Object.assign(iblShadowsRenderPipeline, pipelineProps);
+            Object.assign(this.#renderPipelines.iblShadows, pipelineProps);
 
-            if (iblShadowsRenderPipeline._ssaoPostProcess) {
-                iblShadowsRenderPipeline._ssaoPostProcess.autoClear = false;
-                iblShadowsRenderPipeline._ssaoPostProcess.samples = 1;
+            if (this.#renderPipelines.iblShadows._ssaoPostProcess) {
+                this.#renderPipelines.iblShadows._ssaoPostProcess.autoClear = false;
+                this.#renderPipelines.iblShadows._ssaoPostProcess.samples = 1;
             }
 
             this.#scene.meshes.forEach((mesh) => {
@@ -649,8 +752,8 @@ export default class BabylonJSController {
                 const meshGenerateShadows = typeof extrasCastShadows === "boolean" ? extrasCastShadows : isHDRIMesh ? false : true;
 
                 if (meshGenerateShadows) {
-                    iblShadowsRenderPipeline.addShadowCastingMesh(mesh);
-                    iblShadowsRenderPipeline.updateSceneBounds();
+                    this.#renderPipelines.iblShadows.addShadowCastingMesh(mesh);
+                    this.#renderPipelines.iblShadows.updateSceneBounds();
                 }
             });
 
@@ -658,15 +761,15 @@ export default class BabylonJSController {
                 if (material instanceof PBRMaterial) {
                     material.enableSpecularAntiAliasing = false;
                 }
-                iblShadowsRenderPipeline.addShadowReceivingMaterial(material);
+                this.#renderPipelines.iblShadows.addShadowReceivingMaterial(material);
             });
 
-            iblShadowsRenderPipeline.updateVoxelization();
-            this.#scene.postProcessRenderPipelineManager.update();
+            this.#renderPipelines.iblShadows.updateVoxelization();
+            pipelineManager.update();
             return true;
         } else {
-            iblShadowsRenderPipeline.dispose();
-            this.#scene.postProcessRenderPipelineManager.update();
+            this.#renderPipelines.iblShadows.dispose();
+            pipelineManager.update();
             return false;
         }
     }
@@ -700,7 +803,6 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #initializeDefaultLightShadows() {
-        this.#shadowGen = [];
         if (!this.#dirLight) {
             return;
         }
@@ -766,6 +868,20 @@ export default class BabylonJSController {
         });
     }
 
+    /**
+     * Disposes every active shadow generator plus the IBL shadow pipeline to avoid stale casters across reloads.
+     * Clears the cached `#shadowGen` array so subsequent loads can rebuild fresh generators.
+     * @private
+     * @returns {void}
+     */
+    #disableShadows() {
+        this.#shadowGen.forEach((shadowGenerator) => {
+            shadowGenerator.dispose();
+        });
+        this.#shadowGen = [];
+        this.#disableIBLShadows();
+    }
+
     /**
      * Initializes shadows for the Babylon.js scene.
      * @private
@@ -913,7 +1029,6 @@ export default class BabylonJSController {
         this.#engine.dispose();
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
-        this.#shadowGen = [];
     }
 
     /**
@@ -1281,6 +1396,7 @@ export default class BabylonJSController {
      */
     #stopRender() {
         this.#engine.stopRenderLoop(this.#handlers.renderLoop);
+        this.#unloadCameraDependentEffects();
     }
     /**
      * Starts the Babylon.js render loop for the current scene.
@@ -1289,6 +1405,7 @@ export default class BabylonJSController {
      * @returns {Promise<void>}
      */
     async #startRender() {
+        this.#loadCameraDependentEffects();
         await this.#scene.whenReadyAsync();
         this.#engine.runRenderLoop(this.#handlers.renderLoop);
     }
@@ -1359,7 +1476,6 @@ export default class BabylonJSController {
      */
     async #loadContainers() {
         this.#stopRender();
-        this.#scene.postProcessRenderPipelineManager?.dispose();
 
         let oldModelMetadata = { ...(this.#containers.model?.state?.metadata ?? {}) };
         let newModelMetadata = {};
@@ -1385,6 +1501,13 @@ export default class BabylonJSController {
                             assetContainer.lights = [];
                             newModelMetadata = { ...(container.state.update.metadata ?? {}) };
                         }
+                        if (container.state.name === "model" || container.state.name === "environment") {
+                            assetContainer.cameras.forEach((camera) => {
+                                // To avoid conflicts when reloading the model we rename the id because Babylon.js caches the camera's SSAO effect by id.
+                                const sufix = "_" + Date.now();
+                                camera.id = `${camera.id || camera.name || "camera"}${sufix}`;
+                            });
+                        }
                         this.#replaceContainer(container, assetContainer);
                         container.state.setSuccess(true);
                     } else {
@@ -1410,7 +1533,6 @@ export default class BabylonJSController {
             .finally(async () => {
                 this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
                 this.#setMaxSimultaneousLights();
-                this.#loadCameraDepentEffects();
                 this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#containers.model.assetContainer);
                 this.#startRender();
             });
@@ -1423,12 +1545,24 @@ export default class BabylonJSController {
      * @private
      * @returns {void}
      */
-    #loadCameraDepentEffects() {
+    #loadCameraDependentEffects() {
         this.#initializeVisualImprovements();
         this.#initializeAmbientOcclussion();
         this.#initializeShadows();
     }
 
+    /**
+     * Shuts down every post-process tied to the active camera before stopping the render loop.
+     * Ensures AA, SSAO, and shadow resources detach cleanly so reloads rebuild from scratch.
+     * @private
+     * @returns {void}
+     */
+    #unloadCameraDependentEffects() {
+        this.#disableVisualImprovements();
+        this.#disableAmbientOcclusion();
+        this.#disableShadows();
+    }
+
     /**
      * Checks and applies model metadata changes after asset loading.
      * @private
@@ -1690,6 +1824,7 @@ export default class BabylonJSController {
         this.#disableInteraction();
         this.#disposeAnimationController();
         this.#disposeXRExperience();
+        this.#unloadCameraDependentEffects();
         this.#disposeEngine();
     }
 
@@ -1844,7 +1979,6 @@ export default class BabylonJSController {
     setCameraOptions() {
         this.#stopRender();
         const cameraOptionsSetted = this.#setOptions_Camera();
-        this.#loadCameraDepentEffects();
         this.#startRender();
         return cameraOptionsSetted;
     }
@@ -1871,7 +2005,6 @@ export default class BabylonJSController {
     setIBLOptions() {
         this.#stopRender();
         const IBLOptionsSetted = this.#setOptions_IBL();
-        this.#loadCameraDepentEffects();
         this.#startRender();
         return IBLOptionsSetted;
     }