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

package/package.json

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

package/src/babylonjs-animation-controller.js

@@ -1,4 +1,4 @@
-import { Color3, HighlightLayer, Mesh, PickingInfo, Scene } from "@babylonjs/core";
+import { AssetContainer, Color3, HighlightLayer, InstancedMesh, Mesh, PickingInfo, Quaternion, Scene, UtilityLayerRenderer, Vector3 } from "@babylonjs/core";
 import { PrefViewerColors } from "./styles.js";
 import OpeningAnimation from "./babylonjs-animation-opening.js";
 
@@ -18,27 +18,36 @@ import OpeningAnimation from "./babylonjs-animation-opening.js";
  *
  * Public Methods:
  *  - dispose(): Disposes all resources managed by the animation controller.
- *  - hightlightMeshes(pickingInfo): Highlights meshes that are children of an animated node when hovered.
+ *  - highlightMeshes(pickingInfo): Highlights meshes that are children of an animated node when hovered.
  *  - hideMenu(): Hides and disposes the animation control menu if it exists.
  *  - showMenu(pickingInfo): Displays the animation control menu for the animated node under the pointer.
  *
  * @class
  */
 export default class BabylonJSAnimationController {
-    #scene = null;
     #canvas = null;
+    #scene = null;
+    #assetContainer = null;
+
     #animatedNodes = [];
-    #highlightLayer = null;
-    #highlightColor = Color3.FromHexString(PrefViewerColors.primary);
     #openingAnimations = [];
 
+    #highlightColor = Color3.FromHexString(PrefViewerColors.primary);
+    #highlightLayer = null;
+    #overlayLayer = null;
+    #useHighlightLayer = false; // Set to true to use HighlightLayer (better performance) and false to use overlay meshes (UtilityLayerRenderer - always on top)
+    #lastHighlightedMeshId = null; // Cache to avoid redundant highlight updates
+
     /**
      * Creates a new BabylonJSAnimationController for a Babylon.js scene.
-     * @param {Scene} scene - The Babylon.js scene instance.
+     * @param {AssetContainer|Scene} assetContainer - The Babylon.js asset container or scene instance.
      */
-    constructor(scene) {
-        this.#scene = scene;
-        this.#canvas = this.#scene._engine._renderingCanvas;
+    constructor(assetContainer) {
+        if (assetContainer instanceof AssetContainer || assetContainer instanceof Scene) {
+            this.#scene = assetContainer.scene ? assetContainer.scene : assetContainer;
+            this.#assetContainer = assetContainer;
+            this.#canvas = this.#scene._engine._renderingCanvas;
+        }
         this.#initializeAnimations();
     }
 
@@ -48,7 +57,7 @@ export default class BabylonJSAnimationController {
      */
     #initializeAnimations() {
         this.hideMenu(); // Clean up any existing menus
-        if (!this.#scene.animationGroups.length) {
+        if (!this.#assetContainer?.animationGroups?.length) {
             return;
         }
         this.#getAnimatedNodes();
@@ -60,7 +69,7 @@ export default class BabylonJSAnimationController {
      * @private
      */
     #getAnimatedNodes() {
-        this.#scene.animationGroups.forEach((animationGroup) => {
+        this.#assetContainer.animationGroups.forEach((animationGroup) => {
             animationGroup.stop();
             if (!animationGroup._targetedAnimations.length) {
                 return;
@@ -81,7 +90,7 @@ export default class BabylonJSAnimationController {
      */
     #getOpeningAnimations() {
         const openings = {};
-        this.#scene.animationGroups.forEach((animationGroup) => {
+        this.#assetContainer.animationGroups.forEach((animationGroup) => {
             const match = animationGroup.name.match(/^animation_(open|close)_(.+)$/);
             if (!match) {
                 return;
@@ -118,7 +127,7 @@ export default class BabylonJSAnimationController {
      * @param {Mesh} mesh - The mesh to check.
      * @returns {Array<string>} Array of animated node IDs associated with the mesh.
      */
-    #getNodesAnimatedByMesh = function (mesh) {
+    #getNodesAnimatedByMesh(mesh) {
         let nodeId = [];
         let node = mesh;
         while (node.parent !== null) {
@@ -128,7 +137,176 @@ export default class BabylonJSAnimationController {
             }
         }
         return nodeId;
-    };
+    }
+
+    /**
+     * Creates overlay meshes with highlight rendering for a group of meshes.
+     * Handles both regular meshes and instanced meshes by creating clones in the utility layer.
+     * Synchronizes world matrix transformations between original and overlay meshes only when transforms change.
+     * @private
+     * @param {Mesh[]} meshes - Array of meshes to highlight with overlay outlines.
+     * @returns {Object} Cleanup API object with a dispose() method to release all overlay resources.
+     * @description
+     * - Uses UtilityLayerRenderer for rendering
+     * - Only syncs transforms when original mesh's world matrix changes (performance optimized)
+     * - Handles InstancedMeshes by creating instances of a shared overlay base
+     * - Removes overlay when mouse moves away from highlighted meshes
+     */
+    #addGroupOutlineOverlayForInstances(meshes) {
+        // Configuration
+        const OUTLINE_ENABLED = false; // Draw outline on individual meshes
+        const OUTLINE_COLOR = this.#highlightColor;
+        const OUTLINE_WIDTH = 1.5;
+        const OVERLAY_ENABLED = true; // Draw semi-transparent fill
+        const OVERLAY_COLOR = this.#highlightColor;
+        const OVERLAY_ALPHA = 0.25;
+        const RENDERING_GROUP_ID = 0; // MUST be > 0 to render on top of main scene
+
+        // Use UtilityLayerRenderer for rendering
+        const uScene = UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;
+
+        // Cache map: baseMesh -> overlayBaseMesh to reuse for InstancedMeshes
+        const baseToOverlayBase = new Map();
+
+        // Pairs of { original mesh, overlay mesh } for tracking
+        const pairs = [];
+
+        /**
+         * Gets the base mesh from either a regular mesh or an InstancedMesh
+         * @param {Mesh} mesh - The mesh to check
+         * @returns {Mesh} The base mesh or the mesh itself
+         */
+        function getBaseMesh(mesh) {
+            return mesh instanceof InstancedMesh ? mesh.sourceMesh : mesh;
+        }
+
+        /**
+         * Creates or retrieves an overlay base mesh in the utility scene
+         * Reuses the same base for all instances of the same source mesh
+         * @param {Mesh} baseMesh - The base mesh to clone
+         * @returns {Mesh} The overlay base mesh
+         */
+        function ensureOverlayBase(baseMesh) {
+            let overlayBase = baseToOverlayBase.get(baseMesh);
+            if (overlayBase) {
+                return overlayBase;
+            }
+
+            // Clone the source mesh into the utility scene (deep clone materials/geometry)
+            overlayBase = baseMesh.clone(baseMesh.name + "_overlayBase", null, true, false);
+            overlayBase._scene = uScene;
+            overlayBase.isPickable = false;
+            overlayBase.setEnabled(true);
+
+            // Configure visual appearance for the overlay
+            overlayBase.renderOutline = OUTLINE_ENABLED; // Only draw outline if enabled
+            overlayBase.outlineColor = OUTLINE_COLOR;
+            overlayBase.outlineWidth = OUTLINE_WIDTH;
+            
+            // Overlay color and transparency (semi-transparent colored fill)
+            overlayBase.renderOverlay = OVERLAY_ENABLED;
+            overlayBase.overlayColor = OVERLAY_COLOR;
+            overlayBase.overlayAlpha = OVERLAY_ALPHA;
+            
+            overlayBase.visibility = 1;
+
+            // Ensure always-on-top rendering or not
+            overlayBase.renderingGroupId = RENDERING_GROUP_ID;
+
+            baseToOverlayBase.set(baseMesh, overlayBase);
+            return overlayBase;
+        }
+
+        // Create overlay meshes for each input mesh
+        meshes.forEach((mesh) => {
+            // Skip meshes without geometry
+            if (!mesh.geometry && !mesh.getChildMeshes) {
+                return;
+            }
+
+            const baseMesh = getBaseMesh(mesh);
+            const overlayBase = ensureOverlayBase(baseMesh);
+
+            let overlay;
+            if (mesh instanceof InstancedMesh) {
+                // For instances, create a new instance of the overlay base
+                overlay = overlayBase.createInstance(mesh.name + "_overlayInst");
+                overlay._scene = uScene;
+                overlay.isPickable = false;
+            } else {
+                // For regular meshes, use the overlay base directly (avoids double cloning)
+                overlay = overlayBase;
+            }
+
+            // Remove parent to allow independent world matrix control
+            overlay.parent = null;
+            overlay.renderingGroupId = RENDERING_GROUP_ID;
+
+            pairs.push({ original: mesh, overlay });
+        });
+
+        // Sync world matrix transformations
+        const pos = new Vector3();
+        const scl = new Vector3();
+        const rot = new Quaternion();
+
+        // Track all observers for cleanup
+        const observers = [];
+
+        // Subscribe to world matrix update events
+        // This is more efficient than updating every frame
+        pairs.forEach(({ original, overlay }) => {
+            // Skip if mesh has no geometry to sync
+            if (!original.getWorldMatrix) {
+                return;
+            }
+
+            // Initial sync: copy the current world matrix
+            original.computeWorldMatrix(true);
+            original.getWorldMatrix().decompose(scl, rot, pos);
+
+            overlay.position.copyFrom(pos);
+            overlay.scaling.copyFrom(scl);
+            overlay.rotationQuaternion = overlay.rotationQuaternion || new Quaternion();
+            overlay.rotationQuaternion.copyFrom(rot);
+            overlay.computeWorldMatrix(true);
+
+            // Subscribe to world matrix changes
+            // Only updates when the original mesh's transformation actually changes
+            const obs = original.onAfterWorldMatrixUpdateObservable?.add(() => {
+                original.getWorldMatrix().decompose(scl, rot, pos);
+
+                overlay.position.copyFrom(pos);
+                overlay.scaling.copyFrom(scl);
+                overlay.rotationQuaternion.copyFrom(rot);
+                overlay.computeWorldMatrix(true);
+            });
+
+            if (obs) {
+                observers.push({ mesh: original, observer: obs });
+            }
+        });
+
+        // Cleanup API
+        return {
+            dispose() {
+                // Remove world matrix update observers
+                observers.forEach(({ mesh, observer }) => {
+                    mesh.onAfterWorldMatrixUpdateObservable?.remove(observer);
+                });
+
+                // Dispose overlay instances and meshes
+                pairs.forEach(({ original, overlay }) => {
+                    overlay.dispose();
+                });
+
+                // Dispose overlay base meshes
+                baseToOverlayBase.forEach((overlayBase) => {
+                    overlayBase.dispose();
+                });
+            },
+        };
+    }
 
     /**
      * ---------------------------
@@ -148,6 +326,10 @@ export default class BabylonJSAnimationController {
             this.#highlightLayer.dispose();
             this.#highlightLayer = null;
         }
+        if (this.#overlayLayer) {
+            this.#overlayLayer.dispose();
+            this.#overlayLayer = null;
+        }
         this.hideMenu();
         this.#animatedNodes = [];
         this.#openingAnimations.forEach((openingAnimation) => openingAnimation.dispose());
@@ -159,39 +341,74 @@ export default class BabylonJSAnimationController {
      * @public
      * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
      */
-    hightlightMeshes(pickingInfo) {
-        if (!this.#highlightLayer) {
-            this.#highlightLayer = new HighlightLayer("hl_animations", this.#scene);
+    highlightMeshes(pickingInfo) {
+        // Check if we're hovering the same mesh to avoid recreating overlays/highlights
+        const pickedMeshId = pickingInfo?.pickedMesh?.id;
+        if (this.#lastHighlightedMeshId === pickedMeshId) {
+            return; // No need to update if hovering the same mesh
         }
+        this.#lastHighlightedMeshId = pickedMeshId;
 
-        this.#highlightLayer.removeAllMeshes();
-        if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
-            return;
-        }
+        if (this.#useHighlightLayer) {
+            if (!this.#highlightLayer) {
+                this.#highlightLayer = new HighlightLayer("hl_animations", this.#scene);
+            }
 
-        const nodeIds = this.#getNodesAnimatedByMesh(pickingInfo.pickedMesh);
-        if (!nodeIds.length) {
-            return;
-        }
+            this.#highlightLayer.removeAllMeshes();
 
-        const transformNodes = [];
-        nodeIds.forEach((nodeId) => {
-            const transformNode = this.#scene.getTransformNodeByID(nodeId);
-            if (transformNode) {
-                transformNodes.push(transformNode);
+            if (!pickingInfo?.hit || !pickingInfo?.pickedMesh) {
+                return;
             }
-        });
 
-        transformNodes.forEach((transformNode) => {
-            const nodeMeshes = transformNode.getChildMeshes();
-            if (nodeMeshes.length) {
-                nodeMeshes.forEach((mesh) => {
-                    if (!this.#highlightLayer.hasMesh(mesh)) {
-                        this.#highlightLayer.addMesh(mesh, this.#highlightColor);
-                    }
-                });
+            const nodeIds = this.#getNodesAnimatedByMesh(pickingInfo.pickedMesh);
+            if (!nodeIds.length) {
+                return;
             }
-        });
+
+            const transformNodes = [];
+            nodeIds.forEach((nodeId) => {
+                const transformNode = this.#scene.getTransformNodeByID(nodeId);
+                if (transformNode) {
+                    transformNodes.push(transformNode);
+                }
+            });
+
+            transformNodes.forEach((transformNode) => {
+                const transformNodeMeshes = transformNode.getChildMeshes();
+                if (transformNodeMeshes.length) {
+                    transformNodeMeshes.forEach((mesh) => {
+                        if (!this.#highlightLayer.hasMesh(mesh)) {
+                            this.#highlightLayer.addMesh(mesh, this.#highlightColor);
+                        }
+                    });
+                }
+            });
+        } else {
+            if (this.#overlayLayer) {
+                this.#overlayLayer.dispose();
+                this.#overlayLayer = null;
+            }
+
+            if (!pickingInfo?.hit || !pickingInfo?.pickedMesh) {
+                return;
+            }
+
+            const nodeIds = this.#getNodesAnimatedByMesh(pickingInfo.pickedMesh);
+            if (!nodeIds.length) {
+                return;
+            }
+
+            const meshes = [];
+            nodeIds.forEach((nodeId) => {
+                const transformNode = this.#scene.getTransformNodeByID(nodeId);
+                if (transformNode) {
+                    const transformNodeMeshes = transformNode.getChildMeshes(false);
+                    meshes.push(...transformNodeMeshes);
+                }
+            });
+
+            this.#overlayLayer = this.#addGroupOutlineOverlayForInstances(meshes);
+        }
     }
 
     /**
@@ -201,7 +418,7 @@ export default class BabylonJSAnimationController {
      */
     hideMenu() {
         this.#openingAnimations.forEach((openingAnimation) => openingAnimation.hideControls());
-        this.#canvas.parentElement.querySelectorAll("div.pref-viewer-3d.animation-menu").forEach((menu) => menu.remove());
+        this.#canvas?.parentElement?.querySelectorAll("div.pref-viewer-3d.animation-menu").forEach((menu) => menu.remove());
     }
 
     /**

package/src/babylonjs-animation-opening.js

@@ -95,6 +95,8 @@ export default class OpeningAnimation {
         this.#bindHandlers();
         this.#openAnimation.onAnimationGroupEndObservable.add(this.#handlers.onOpened);
         this.#closeAnimation.onAnimationGroupEndObservable.add(this.#handlers.onClosed);
+
+        this.#goToClosed();
     }
 
     #bindHandlers() {

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, Scene, ShadowGenerator, SpotLight, SSAORenderingPipeline, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager, WebXRState } from "@babylonjs/core";
+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 { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression.js";
 import "@babylonjs/loaders";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression.js";
@@ -118,20 +118,25 @@ export default class BabylonJSController {
     #shadowGen = [];
     #XRExperience = null;
     #canvasResizeObserver = null;
-
+    
     #containers = {};
     #options = {};
-
+    
     #gltfResolver = null; // GLTFResolver instance
     #babylonJSAnimationController = null; // AnimationController instance
-
+    
     #handlers = {
         onKeyUp: null,
         onPointerObservable: null,
         renderLoop: null,
     };
-
-    #shadowsEnabled = false;
+    
+    #settings = {
+        antiAliasingEnabled: true,
+        ambientOcclusionEnabled: true,
+        iblEnabled: true,
+        shadowsEnabled: false,
+    };
 
     /**
      * Constructs a new BabylonJSController instance.
@@ -298,7 +303,7 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #createLights() {
-        if (this.#options.ibl && this.#options.ibl.url) {
+        if (this.#settings.iblEnabled && this.#options.ibl && this.#options.ibl.url) {
             this.#hemiLight = this.#dirLight = this.#cameraLight = null;
             this.#initializeEnvironmentTexture();
         }
@@ -334,6 +339,10 @@ export default class BabylonJSController {
             return false;
         }
 
+        if (!this.#settings.ambientOcclusionEnabled) {
+            return false;
+        }
+
         const pipelineName = "PrefViewerSSAORenderingPipeline";
 
         const supportedPipelines = this.#scene.postProcessRenderPipelineManager.supportedPipelines;
@@ -402,6 +411,10 @@ export default class BabylonJSController {
             this.#scene.postProcessRenderPipelineManager.update();
         }
 
+        if (!this.#settings.antiAliasingEnabled) {
+            return false;
+        }
+
         const defaultPipeline = new DefaultRenderingPipeline(pipelineName, true, this.#scene, [this.#scene.activeCamera], true);
 
         if (!defaultPipeline){
@@ -553,10 +566,14 @@ export default class BabylonJSController {
      */
     #initializeDefaultLightShadows() {
         this.#shadowGen = [];
+        this.#dirLight.autoUpdateExtends = false;
         const shadowGenerator = new ShadowGenerator(1024, this.#dirLight);
         shadowGenerator.useBlurExponentialShadowMap = true;
         shadowGenerator.blurKernel = 16;
         shadowGenerator.darkness = 0.5;
+        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;
@@ -589,10 +606,14 @@ export default class BabylonJSController {
             if (!(light instanceof DirectionalLight || light instanceof SpotLight)) {
                 return;
             }
+            light.autoUpdateExtends = false;
             const shadowGenerator = new ShadowGenerator(1024, light);
             shadowGenerator.useBlurExponentialShadowMap = true;
             shadowGenerator.blurKernel = 16;
             shadowGenerator.darkness = 0.5;
+            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;
@@ -614,7 +635,7 @@ export default class BabylonJSController {
      * Otherwise, sets up shadow casting and receiving for all relevant meshes using the shadow generator.
      */
     #initializeShadows() {
-        if (!this.#shadowsEnabled) {
+        if (!this.#settings.shadowsEnabled) {
             return false;
         }
         if (this.#scene.environmentTexture) {
@@ -815,7 +836,7 @@ export default class BabylonJSController {
      */
     #onPointerMove(event, pickInfo) {
         if (this.#babylonJSAnimationController) {
-            this.#babylonJSAnimationController.hightlightMeshes(pickInfo);
+            this.#babylonJSAnimationController.highlightMeshes(pickInfo);
         }
     }
 
@@ -954,11 +975,12 @@ export default class BabylonJSController {
      * @returns {boolean} True when lights were refreshed due to pending IBL changes, otherwise false.
      */
     #setOptions_IBL() {
-        if (this.#options.ibl.isPending) {
+        if (this.#options.ibl.isPending && this.#settings.iblEnabled) {
             this.#options.ibl.setSuccess(true);
             this.#createLights();
             return true;
         }
+        this.#createLights();
         return false;
     }
 
@@ -1224,7 +1246,8 @@ export default class BabylonJSController {
                 this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
                 this.#setMaxSimultaneousLights();
                 this.#loadCameraDepentEffects();
-                this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
+                this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#containers.model.assetContainer);
+                this.#forceReflectionsInModelGlasses();
                 this.#startRender();
             });
         return detail;
@@ -1318,6 +1341,21 @@ export default class BabylonJSController {
         }
     }
 
+    #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 = 1.0;
+                material.environmentIntensity = 1.0;
+            }
+        });
+    }
+
     /**
      * Translates a node along the scene's vertical (Y) axis by the provided value.
      * @private
@@ -1483,7 +1521,6 @@ export default class BabylonJSController {
 
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
         this.#createCamera();
-        this.#createLights();
         this.#enableInteraction();
         await this.#createXRExperience();
         this.#startRender();

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

@@ -336,12 +336,14 @@ export default class PrefViewer3D extends HTMLElement {
         let intensity = undefined;
 
         if (options.ibl.url) {
-            const fileStorage = new FileStorage("PrefViewer", "Files");
-            const newURL = await fileStorage.getURL(options.ibl.url);
-            if (newURL) {
-                url = newURL;
-                timeStamp = await fileStorage.getTimeStamp(options.ibl.url);
-            }
+            url = options.ibl.url;
+            // TEMPORARY: Disable FileStorage usage due to efficiency problems
+            // const fileStorage = new FileStorage("PrefViewer", "Files");
+            // const newURL = await fileStorage.getURL(options.ibl.url);
+            // if (newURL) {
+            //     url = newURL;
+            //     timeStamp = await fileStorage.getTimeStamp(options.ibl.url);
+            // }
         }
         if (options.ibl.shadows !== undefined) {
             shadows = options.ibl.shadows;