@preference-sl/pref-viewer 2.12.0 → 2.13.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.12.0",
+    "version": "2.13.0-beta.0",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {
@@ -35,11 +35,11 @@
         "index.d.ts"
     ],
     "dependencies": {
-        "@babylonjs/core": "^8.39.2",
-        "@babylonjs/loaders": "^8.39.2",
-        "@babylonjs/serializers": "^8.39.2",
+        "@babylonjs/core": "^8.46.2",
+        "@babylonjs/loaders": "^8.46.2",
+        "@babylonjs/serializers": "^8.46.2",
         "@panzoom/panzoom": "^4.6.0",
-        "babylonjs-gltf2interface": "^8.39.2",
+        "babylonjs-gltf2interface": "^8.46.2",
         "buffer": "^6.0.3",
         "idb": "^8.0.3",
         "is-svg": "^6.1.0",

package/src/babylonjs-controller.js

@@ -1,4 +1,4 @@
-import { ArcRotateCamera, AssetContainer, Camera, Color4, DefaultRenderingPipeline, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PBRMaterial, PointerEventTypes, PointLight, RenderTargetTexture, Scene, ShadowGenerator, SpotLight, SSAORenderingPipeline, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager, WebXRState } from "@babylonjs/core";
+import { ArcRotateCamera, AssetContainer, Camera, Color4, DefaultRenderingPipeline, DirectionalLight, Engine, FreeCamera, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PBRMaterial, PointerEventTypes, PointLight, RenderTargetTexture, Scene, ShadowGenerator, SpotLight, SSAORenderingPipeline, Tools, UniversalCamera, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager, WebXRState } from "@babylonjs/core";
 import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression.js";
 import "@babylonjs/loaders";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression.js";
@@ -44,7 +44,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - load(): Reloads every pending asset container, re-applies options, and resolves with the loading summary { success, error }.
  *  - setCameraOptions(): Applies the pending camera selection, reinstalls dependent pipelines, and restarts rendering safely.
  *  - setMaterialOptions(): Re-applies all configured material overrides across visible containers and restarts rendering.
- *  - setIBLOptions(): Pushes pending HDR/IBL updates, refreshes dependent effects, and resumes the render loop.
+ *  - setIBLOptions(): Pushes pending HDR/IBL updates, refreshes dependent effects, resumes the render loop, and reports whether anything changed.
  *  - setContainerVisibility(name, show): Toggles model/environment containers, syncing wall/floor helpers and component attributes.
  *  - downloadGLB(content): Exports the selected scope (scene/model/environment) into a time-stamped GLB and triggers the download.
  *  - downloadGLTF(content): Generates a glTF + BIN + textures ZIP for the requested scope, adding metadata comments for traceability.
@@ -62,9 +62,11 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - #initializeVisualImprovements(): Reinstalls the default rendering pipeline (MSAA/FXAA/grain).
  *  - #initializeEnvironmentTexture(): Loads and sets the HDR environment texture.
  *  - #initializeIBLShadows(): Sets up IBL shadow pipeline and assigns meshes/materials.
+ *  - #addMeshToShadowGenerator(shadowGenerator, mesh): Adds eligible meshes to the provided shadow generator while honoring GLTF metadata.
  *  - #initializeShadows(): Sets up standard or IBL shadows for meshes.
  *  - #initializeDefaultLightShadows(): Configures soft shadows when no HDR environment exists.
  *  - #initializeEnvironmentShadows(): Rebuilds environment-provided shadow generators.
+ *  - #ensureMeshesReceiveShadows(): Ensures every non-root mesh receives shadows unless metadata opts out.
  *  - #setMaxSimultaneousLights(): Updates max simultaneous lights for all materials.
  *  - #onPointerObservable(info): Handles pointer events and dispatches to pointer/mouse handlers.
  *  - #onPointerUp(event, pickInfo): Handles pointer up events (e.g., right-click for animation menu).
@@ -284,7 +286,7 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #createCamera() {
-        this.#camera = new ArcRotateCamera("camera", (3 * Math.PI) / 2, Math.PI * 0.47, 10, Vector3.Zero(), this.#scene);
+        this.#camera = new ArcRotateCamera("defaultCamera", (3 * Math.PI) / 2, Math.PI * 0.47, 10, Vector3.Zero(), this.#scene);
         this.#camera.upperBetaLimit = Math.PI * 0.48;
         this.#camera.lowerBetaLimit = Math.PI * 0.25;
         this.#camera.lowerRadiusLimit = 5;
@@ -564,13 +566,18 @@ export default class BabylonJSController {
 
             this.#scene.meshes.forEach((mesh) => {
                 const isRootMesh = mesh.id.startsWith("__root__");
-                const isHDRIMesh = mesh.name?.toLowerCase() === "hdri";
-                if (isRootMesh || isHDRIMesh) {
+                if (isRootMesh) {
                     return false;
                 }
-                iblShadowsRenderPipeline.addShadowCastingMesh(mesh);
-                iblShadowsRenderPipeline.updateSceneBounds();
-                mesh.receiveShadows = true; // Not necessary for IBL shadows, but yes for standard shadows
+                
+                const isHDRIMesh = mesh.name?.toLowerCase() === "hdri";
+                const extrasCastShadows = mesh.metadata?.gltf?.extras?.castShadows;
+                const meshGenerateShadows = typeof extrasCastShadows === "boolean" ? extrasCastShadows : isHDRIMesh ? false : true;
+
+                if (meshGenerateShadows) {
+                    iblShadowsRenderPipeline.addShadowCastingMesh(mesh);
+                    iblShadowsRenderPipeline.updateSceneBounds();
+                }
             });
 
             this.#scene.materials.forEach((material) => {
@@ -590,6 +597,29 @@ export default class BabylonJSController {
         }
     }
 
+    /**
+     * Adds the mesh to the provided shadow generator when it is eligible to cast shadows.
+     * Skips hidden Babylon root nodes, ignores HDRI domes, and honors the `castShadows` GLTF extra flag.
+     * @private
+     * @param {ShadowGenerator} shadowGenerator - Target generator that should receive the mesh.
+     * @param {AbstractMesh} mesh - Mesh to evaluate for shadow casting.
+     * @returns {boolean} True when the mesh is registered as a caster, otherwise false.
+     */
+    #addMeshToShadowGenerator(shadowGenerator, mesh) {
+        const isRootMesh = mesh.id.startsWith("__root__");
+        if (isRootMesh) {
+            return false;
+        }
+        const isHDRIMesh = mesh.name?.toLowerCase() === "hdri";
+        const extrasCastShadows = mesh.metadata?.gltf?.extras?.castShadows;
+        const meshGenerateShadows = typeof extrasCastShadows === "boolean" ? extrasCastShadows : isHDRIMesh ? false : true;
+        if (meshGenerateShadows) {
+            shadowGenerator.addShadowCaster(mesh, true);
+            return true;
+        }
+        return false;
+    }
+
     /**
      * Configures soft shadows for the built-in directional light used when no HDR environment is present.
      * @private
@@ -608,15 +638,7 @@ export default class BabylonJSController {
         shadowGenerator.bias = 0.0005;
         shadowGenerator.normalBias = 0.02;
         shadowGenerator.getShadowMap().refreshRate = RenderTargetTexture.REFRESHRATE_RENDER_ONCE;
-        this.#scene.meshes.forEach((mesh) => {
-            if (mesh.id.startsWith("__root__")) {
-                return false;
-            }
-            if (mesh.name?.toLowerCase() !== "hdri") {
-                shadowGenerator.addShadowCaster(mesh, true);
-            }
-            mesh.receiveShadows = true;
-        });
+        this.#scene.meshes.forEach((mesh) => this.#addMeshToShadowGenerator(shadowGenerator, mesh));
         this.#shadowGen.push(shadowGenerator);
     }
 
@@ -648,18 +670,28 @@ export default class BabylonJSController {
             shadowGenerator.bias = 0.0005;
             shadowGenerator.normalBias = 0.02;
             shadowGenerator.getShadowMap().refreshRate = RenderTargetTexture.REFRESHRATE_RENDER_ONCE;
-            this.#scene.meshes.forEach((mesh) => {
-                if (mesh.id.startsWith("__root__")) {
-                    return false;
-                }
-                if (mesh.name?.toLowerCase() !== "hdri") {
-                    shadowGenerator.addShadowCaster(mesh, true);
-                }
-            });
+            this.#scene.meshes.forEach((mesh) => this.#addMeshToShadowGenerator(shadowGenerator, mesh));
             this.#shadowGen.push(shadowGenerator);
         });
     }
 
+    /**
+     * Marks every non-root mesh as shadow receiving, unless GLTF metadata explicitly disables it.
+     * Ensures standard shadow generators work even when extras are missing, while still honoring `receiveShadows` overrides.
+     * @private
+     * @returns {void}
+     */
+    #ensureMeshesReceiveShadows() {
+        this.#scene.meshes.forEach((mesh) => {
+            const isRootMesh = mesh.id.startsWith("__root__");
+            if (isRootMesh) {
+                return false;
+            }
+            const extrasReceiveShadows = mesh.metadata?.gltf?.extras?.receiveShadows;
+            mesh.receiveShadows = typeof extrasReceiveShadows === "boolean" ? extrasReceiveShadows : true; // Not necessary for IBL shadows, but yes for standard shadows
+        });
+    }
+
     /**
      * Initializes shadows for the Babylon.js scene.
      * @private
@@ -672,6 +704,9 @@ export default class BabylonJSController {
         if (!this.#settings.shadowsEnabled) {
             return false;
         }
+
+        this.#ensureMeshesReceiveShadows();
+
         if (this.#scene.environmentTexture) {
             if (this.#options.ibl.shadows) {
                 if (this.#scene.environmentTexture.isReady()) {
@@ -834,12 +869,23 @@ export default class BabylonJSController {
      * @returns {void|false} Returns false if there is no active camera; otherwise, void.
      */
     #onMouseWheel(event, pickInfo) {
-        if (!this.#scene?.activeCamera) {
+        const camera = this.#scene?.activeCamera;
+        if (!camera) {
             return false;
         }
-        //this.#scene.activeCamera.target = pickInfo.hit ? pickInfo.pickedPoint.clone() : this.#scene.activeCamera.target;
-        if (!this.#scene.activeCamera.metadata?.locked) {
-            this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
+        if (!camera.metadata?.locked) {            
+            if (camera instanceof ArcRotateCamera) {
+                camera.wheelPrecision = camera.wheelPrecision || 3.0;
+                camera.inertialRadiusOffset -= event.deltaY * camera.wheelPrecision * 0.001;
+            } else if (camera instanceof FreeCamera || camera instanceof UniversalCamera) {
+                camera.wheelPrecision = camera.wheelPrecision || 3.0;
+                const zoomSpeed = -event.deltaY * camera.wheelPrecision * 0.001;
+
+                const target = camera.target || Vector3.Zero();
+                const direction = target.subtract(camera.position).normalize();
+                const movementVector = direction.scale(zoomSpeed);
+                camera.position = camera.position.add(movementVector);
+            }
         }
         event.preventDefault();
     }
@@ -995,7 +1041,8 @@ export default class BabylonJSController {
             }
         }
         this.#scene.activeCamera?.detachControl();
-        if (!cameraState.locked && cameraState.value !== null) {
+        camera.detachControl();
+        if (!cameraState.locked) {
             camera.attachControl(this.#canvas, true);
         }
         this.#scene.activeCamera = camera;
@@ -1210,6 +1257,9 @@ export default class BabylonJSController {
                     compileMaterials: true,
                     loadAllMaterials: true,
                     loadOnlyMaterials: container.state.name === "materials",
+                    extensionOptions: {
+                        ExtrasAsMetadata: { enabled: true },
+                    },
                 },
             },
         };
@@ -1288,7 +1338,6 @@ export default class BabylonJSController {
                 this.#setMaxSimultaneousLights();
                 this.#loadCameraDepentEffects();
                 this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#containers.model.assetContainer);
-                this.#forceReflectionsInModelGlasses();
                 this.#startRender();
             });
         return detail;
@@ -1382,28 +1431,6 @@ 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;
-        }
-        if (!this.#scene || !assetContainer) {
-            return;
-        }
-        assetContainer.materials?.forEach(material => {
-            if (material && material.name && material.name.includes("Glass")) {
-                material.metallic = 0.25;
-                material.environmentIntensity = 1.0;
-            }
-        });
-    }
-
     /**
      * Translates a node along the scene's vertical (Y) axis by the provided value.
      * @private

package/src/pref-viewer-3d-data.js

@@ -138,7 +138,8 @@ export class MaterialData {
  *  - Access status via isPending, isSuccess getters.
  */
 export class CameraData {
-    constructor(name = "", value = null, locked = true) {
+    defaultLocked = true;
+    constructor(name = "", value = null, locked = this.defaultLocked) {
         this.name = name;
         this.value = value;
         this.locked = locked;
@@ -161,7 +162,7 @@ export class CameraData {
             this.update.success = false;
         }
     }
-    setPending(value = undefined, locked = true) {
+    setPending(value = undefined, locked = this.defaultLocked) {
         this.reset();
         if (value === undefined) {
             return;