@preference-sl/pref-viewer 2.10.0-beta.19 → 2.10.0-beta.20

package/package.json

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

package/src/index.js

@@ -332,10 +332,12 @@ class PrefViewer extends HTMLElement {
         if (!options || !options.camera) {
             return false;
         }
-        const cameraChanged = options.camera && options.camera !== this.#data.options.camera.value ? true : false
-        this.#data.options.camera.changed = cameraChanged ? { oldValue: this.#data.options.camera.value, success: false } : false;
-        this.#data.options.camera.value = cameraChanged ? options.camera : this.#data.options.camera.value;
-        return cameraChanged;
+
+        const changed = options.camera !== this.#data.options.camera.value;
+        this.#data.options.camera.changed = changed ? { oldValue: this.#data.options.camera.value, oldLocked: this.#data.options.camera.locked, success: false } : false;
+        if (changed) this.#data.options.camera.value = options.camera;
+
+        return changed;
     }
 
     #checkMaterialsChanged(options) {
@@ -368,6 +370,8 @@ class PrefViewer extends HTMLElement {
     // Babylon.js
     async #initializeBabylon() {
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
+        this.#engine.disableUniformBuffers = true; // <- evita el límite de GL_MAX_*_UNIFORM_BUFFERS  // PROVISIONAL, YA QUE ESTO ES UN POCO OVERKILL
+
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
         this.#createCamera();
@@ -487,6 +491,8 @@ class PrefViewer extends HTMLElement {
 
     #disposeEngine() {
         if (!this.#engine) return;
+        this.#shadowGen?.dispose();
+        this.#scene?.lights?.slice().forEach(l => l.dispose());
         this.#engine.dispose();
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
@@ -537,7 +543,7 @@ class PrefViewer extends HTMLElement {
         try {
             JSON.parse(decoded);
             isJson = true;
-        } catch {}
+        } catch { }
         extension = isJson ? ".gltf" : ".glb";
         const type = isJson ? "model/gltf+json" : "model/gltf-binary";
         const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
@@ -619,9 +625,9 @@ class PrefViewer extends HTMLElement {
         let camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || null;
         if (!camera) {
             if (this.#data.options.camera.changed?.oldValue && this.#data.options.camera.changed?.oldValue !== this.#data.options.camera.value) {
-                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === his.#data.options.camera.changed.oldValue) || null;
+                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.oldValue) || null;
             }
-            if (camera){
+            if (camera) {
                 camera.metadata = { locked: this.#data.options.camera.changed.oldLocked };
                 this.#data.options.camera.value = this.#data.options.camera.changed.oldValue;
                 this.#data.options.camera.locked = this.#data.options.camera.changed.oldLocked;
@@ -656,13 +662,34 @@ class PrefViewer extends HTMLElement {
     }
 
     #replaceContainer(container, newAssetContainer) {
-        this.#removeContainer(container);
+        // 1) quita y destruye el anterior si existía
+        const old = container.assetContainer;
+        if (old) {
+            if (container.visible) { old.removeAllFromScene(); }
+            old.dispose(); // <- importante
+        }
+
+        // 2) asigna el nuevo y prepara
         container.assetContainer = newAssetContainer;
-        container.assetContainer.meshes.forEach((mesh) => {
+
+        // Opcional: limitar luces por material para ganar margen
+        container.assetContainer.materials?.forEach(m => {
+            if ("maxSimultaneousLights" in m) {
+                m.maxSimultaneousLights = 2; // 2–3 suele ir bien
+            }
+        });
+
+        // 3) sombras solo para los meshes que te interesen (mejor que todos)
+        container.assetContainer.meshes.forEach(mesh => {
             mesh.receiveShadows = true;
             this.#shadowGen.addShadowCaster(mesh, true);
         });
+
+        // 4) añade a escena
         this.#addContainer(container);
+
+        // 5) fuerza recompilación con defines correctos del nuevo estado
+        this.#scene.getEngine().releaseEffects();
     }
 
     async #loadAssetContainer(container) {
@@ -706,7 +733,7 @@ class PrefViewer extends HTMLElement {
         } else {
             const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
-            const [fileSize, fileTimeStamp ] = await this.#getServerFileDataHeader(source);
+            const [fileSize, fileTimeStamp] = await this.#getServerFileDataHeader(source);
             if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
                 return false;
             } else {
@@ -727,7 +754,7 @@ class PrefViewer extends HTMLElement {
         return LoadAssetContainerAsync(file || source, this.#scene, options);
     }
 
-    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {        
+    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
         const promiseArray = [];
         promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
         promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
@@ -742,6 +769,7 @@ class PrefViewer extends HTMLElement {
                 const materialsContainer = values[2];
 
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
+                    this.#stripImportedLights(modelContainer.value);
                     this.#replaceContainer(this.#data.containers.model, modelContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.model);
                 } else {
@@ -749,6 +777,7 @@ class PrefViewer extends HTMLElement {
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
+                    this.#stripImportedLights(environmentContainer.value);
                     this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.environment);
                 } else {
@@ -756,6 +785,7 @@ class PrefViewer extends HTMLElement {
                 }
 
                 if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
+                    this.#stripImportedLights(materialsContainer.value);
                     this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
                     this.#storeChangedFlagsForContainer(this.#data.containers.materials);
                 }
@@ -780,6 +810,14 @@ class PrefViewer extends HTMLElement {
             });
     }
 
+    #stripImportedLights(container) {
+        // El glTF puede traer KHR_lights_punctual: bórralas antes de añadir a la escena
+        if (container?.lights?.length) {
+            // Clonar para no mutar mientras iteras
+            container.lights.slice().forEach(l => l.dispose());
+        }
+    }
+
     // Public Methods
     loadConfig(config) {
         config = typeof config === "string" ? JSON.parse(config) : config;