@preference-sl/pref-viewer 2.12.0-beta.5 → 2.12.0-beta.7

package/package.json

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

package/src/babylonjs-controller.js

@@ -313,18 +313,27 @@ export default class BabylonJSController {
         }
 
         // 1) Stronger ambient fill
-        this.#hemiLight = new HemisphericLight("PrefViewerHemiLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#hemiLight.intensity = 0.6;
+        this.#hemiLight = this.#scene.getLightByName("PrefViewerHemiLight");
+        if (!this.#hemiLight) {
+            this.#hemiLight = new HemisphericLight("PrefViewerHemiLight", new Vector3(-10, 10, -10), this.#scene);
+            this.#hemiLight.intensity = 0.6;
+        }
 
         // 2) Directional light from the front-right, angled slightly down
-        this.#dirLight = new DirectionalLight("PrefViewerDirLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
-        this.#dirLight.intensity = 0.6;
+        this.#dirLight = this.#scene.getLightByName("PrefViewerDirLight");
+        if (!this.#dirLight) {
+            this.#dirLight = new DirectionalLight("PrefViewerDirLight", new Vector3(-10, 10, -10), this.#scene);
+            this.#dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
+            this.#dirLight.intensity = 0.6;
+        }
 
         // 3) Camera‐attached headlight
-        this.#cameraLight = new PointLight("PrefViewerCameraLight", this.#camera.position, this.#scene);
-        this.#cameraLight.parent = this.#camera;
-        this.#cameraLight.intensity = 0.3;
+        this.#cameraLight = this.#scene.getLightByName("PrefViewerCameraLight");
+        if (!this.#cameraLight) {
+            this.#cameraLight = new PointLight("PrefViewerCameraLight", this.#camera.position, this.#scene);
+            this.#cameraLight.parent = this.#camera;
+            this.#cameraLight.intensity = 0.3;
+        }
     }
 
     /**
@@ -375,6 +384,13 @@ export default class BabylonJSController {
             ssaoPipeline.radius = 0.0001;
             ssaoPipeline.totalStrength = 1;
             ssaoPipeline.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;
+            }
+            
             this.#scene.postProcessRenderPipelineManager.update();
             return true;
         } else {
@@ -447,6 +463,14 @@ export default class BabylonJSController {
             defaultPipeline.grain.animated = false;
             defaultPipeline.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 (defaultPipeline.grain?._postProcess) {
+                defaultPipeline.grain._postProcess.autoClear = false;
+            }
+
             this.#scene.postProcessRenderPipelineManager.update();
             return true;
         } else {
@@ -503,8 +527,8 @@ export default class BabylonJSController {
         }
 
         const pipelineOptions = {
-            resolutionExp: 8, // Higher resolution for better shadow quality
-            sampleDirections: 4, // More sample directions for smoother shadows
+            resolutionExp: 1, // Higher resolution for better shadow quality (recomended 8)
+            sampleDirections: 4, // More sample directions for smoother shadows (recomended 4)
             ssShadowsEnabled: true,
             shadowRemanence: 0.85,
             triPlanarVoxelization: true,
@@ -533,8 +557,15 @@ export default class BabylonJSController {
 
             Object.assign(iblShadowsRenderPipeline, pipelineProps);
 
+            if (iblShadowsRenderPipeline._ssaoPostProcess) {
+                iblShadowsRenderPipeline._ssaoPostProcess.autoClear = false;
+                iblShadowsRenderPipeline._ssaoPostProcess.samples = 1;
+            }
+
             this.#scene.meshes.forEach((mesh) => {
-                if (mesh.id.startsWith("__root__") || mesh.name === "hdri") {
+                const isRootMesh = mesh.id.startsWith("__root__");
+                const isHDRIMesh = mesh.name?.toLowerCase() === "hdri";
+                if (isRootMesh || isHDRIMesh) {
                     return false;
                 }
                 iblShadowsRenderPipeline.addShadowCastingMesh(mesh);
@@ -566,6 +597,9 @@ export default class BabylonJSController {
      */
     #initializeDefaultLightShadows() {
         this.#shadowGen = [];
+        if (!this.#dirLight) {
+            return;
+        }
         this.#dirLight.autoUpdateExtends = false;
         const shadowGenerator = new ShadowGenerator(1024, this.#dirLight);
         shadowGenerator.useBlurExponentialShadowMap = true;
@@ -578,7 +612,7 @@ export default class BabylonJSController {
             if (mesh.id.startsWith("__root__")) {
                 return false;
             }
-            if (mesh.name !== "hdri") {
+            if (mesh.name?.toLowerCase() !== "hdri") {
                 shadowGenerator.addShadowCaster(mesh, true);
             }
             mesh.receiveShadows = true;
@@ -618,7 +652,7 @@ export default class BabylonJSController {
                 if (mesh.id.startsWith("__root__")) {
                     return false;
                 }
-                if (mesh.name !== "hdri") {
+                if (mesh.name?.toLowerCase() !== "hdri") {
                     shadowGenerator.addShadowCaster(mesh, true);
                 }
             });
@@ -1180,7 +1214,14 @@ export default class BabylonJSController {
             },
         };
 
-        return [container, await LoadAssetContainerAsync(sourceData.source, this.#scene, options)];
+        let assetContainer = null;
+
+        try {
+            assetContainer = await LoadAssetContainerAsync(sourceData.source, this.#scene, options);
+            return [container, assetContainer];
+        } catch (error) {
+            return [container, assetContainer];
+        }
     }
 
     /**
@@ -1341,6 +1382,13 @@ export default class BabylonJSController {
         }
     }
 
+    /**
+     * Configures realistic glass material properties for all materials whose names include "Glass".
+     * @private
+     * @param {AssetContainer} [assetContainer] - The asset container with materials to process. If undefined, uses the model container.
+     * @returns {void}
+     * @note This method assumes that glass materials are named with the substring "Glass".
+     */
     #forceReflectionsInModelGlasses(assetContainer) {
         if (assetContainer === undefined) {
             assetContainer = this.#containers.model.assetContainer;
@@ -1350,7 +1398,7 @@ export default class BabylonJSController {
         }
         assetContainer.materials?.forEach(material => {
             if (material && material.name && material.name.includes("Glass")) {
-                material.metallic = 1.0;
+                material.metallic = 0.25;
                 material.environmentIntensity = 1.0;
             }
         });

package/src/file-storage.js

@@ -169,7 +169,7 @@ export class FileStorage {
         let file = undefined;
         return new Promise((resolve) => {
             const xhr = new XMLHttpRequest();
-            xhr.open("GET", uri, true);
+            xhr.open("GET", encodeURI(uri), true);
             xhr.responseType = "blob";
             xhr.onload = () => {
                 if (xhr.status === 200) {
@@ -205,7 +205,7 @@ export class FileStorage {
         let timeStamp = null;
         return new Promise((resolve) => {
             const xhr = new XMLHttpRequest();
-            xhr.open("HEAD", uri, true);
+            xhr.open("HEAD", encodeURI(uri), true);
             xhr.responseType = "blob";
             xhr.onload = () => {
                 if (xhr.status === 200) {
@@ -238,7 +238,7 @@ export class FileStorage {
         let size = 0;
         return new Promise((resolve) => {
             const xhr = new XMLHttpRequest();
-            xhr.open("HEAD", uri, true);
+            xhr.open("HEAD", encodeURI(uri), true);
             xhr.responseType = "blob";
             xhr.onload = () => {
                 if (xhr.status === 200) {