@preference-sl/pref-viewer 2.13.1-beta.0 → 2.14.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.13.1-beta.0",
+    "version": "2.14.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

@@ -141,9 +141,11 @@ export default class BabylonJSController {
         // Render loop state balances performance with responsiveness.
         render: {
             isLoopRunning: false,
+            isIdle: false,
             dirtyFrames: 0,
             continuousUntil: 0,
             lastRenderAt: 0,
+            lastActivityAt: 0,
         },
         // Resize state batches frequent ResizeObserver notifications.
         resize: {
@@ -164,13 +166,259 @@ export default class BabylonJSController {
             burstFramesEnhanced: 32, // when AA/SSAO/IBL is enabled, more frames are needed to reach stable output
             interactionMs: 250,
             animationMs: 200,
-            idleThrottleMs: 1000 / 15,
+            idleThrottleMs: 1000 / 8, // Reduced from 15 FPS to 8 FPS for idle - reduces GPU/CPU load
+            idleThresholdMs: 3000, // Time before going to true idle (no renders)
         },
         resize: {
             throttleMs: 50, // cap resize work to ~20 Hz while dragging/resizing containers
         },
+        // Hardware-adaptive quality settings (applied based on GPU capabilities)
+        quality: {
+            // Settings for different hardware tiers: 'low', 'medium', 'high'
+            // Applied automatically based on GPU detected capabilities
+            tier: 'medium', // default, will be updated after hardware detection
+            shadowMapSize: 1024,        // Standard shadow generator resolution
+            iblShadowResolution: 1,     // IBL shadow resolution exponent (0=1024, 1=2048, 2=4096)
+            iblSampleDirections: 4,     // IBL shadow quality
+            shadowBlurKernel: 16,       // Shadow blur amount
+            ssaoEnabled: true,         // Screen Space Ambient Occlusion
+        },
     };
 
+    /**
+     * Detects hardware capabilities and determines optimal quality tier.
+     * Uses WebGL renderer info, device type, and battery status to classify hardware.
+     * @private
+     * @returns {string} Hardware tier: 'low', 'medium', 'high', or 'ultra'
+     */
+    #detectHardwareTier() {
+        // First, try to get WebGL info to help identify the device
+        const gl = this.#engine?.getRenderingCanvas()?.getContext?.('webgl2') || this.#engine?.getRenderingCanvas()?.getContext?.('webgl');
+        
+        const debugInfo = gl?.getExtension('WEBGL_debug_renderer_info');
+        const rendererName = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : '';
+        
+        // If we have WebGL renderer info and it looks like a desktop GPU, skip mobile detection
+        // Desktop GPUs typically have "NVIDIA", "AMD", "Intel" in the name
+        const isDesktopGPU = /NVIDIA|AMD|Intel|Radeon|GeForce|Quadro/i.test(rendererName);
+        
+        // Also check if it's explicitly a mobile GPU
+        const isMobileGPU = /Adreno|Mali|Apple GPU/i.test(rendererName);
+        
+        // If we detect a desktop GPU, go directly to desktop detection
+        if (isDesktopGPU && !isMobileGPU) {
+            console.log(`[PrefViewer] Desktop GPU detected: ${rendererName}`);
+            return this.#detectDesktopTier(gl, rendererName);
+        }
+
+        // If we detect a mobile GPU, it's definitely mobile
+        if (isMobileGPU) {
+            console.log(`[PrefViewer] Mobile GPU detected: ${rendererName} - Quality tier: low`);
+            return 'low';
+        }
+
+        // If no WebGL info or unclear, fall back to user agent detection
+        const mobileInfo = this.#detectMobileInfo();
+        
+        // Only treat as mobile if we have strong mobile indicators
+        if (mobileInfo.isMobile && !mobileInfo.isDesktopLike) {
+            if (mobileInfo.isHighEnd) {
+                console.log(`[PrefViewer] High-end mobile detected: ${mobileInfo.deviceName} - Quality tier: medium`);
+                return 'medium';
+            } else {
+                console.log(`[PrefViewer] Mobile detected: ${mobileInfo.deviceName} - Quality tier: low`);
+                return 'low';
+            }
+        }
+
+        // If still unclear, default to desktop detection
+        console.log(`[PrefViewer] Using desktop GPU detection (unknown renderer: ${rendererName || 'none'})`);
+        return this.#detectDesktopTier(gl, rendererName);
+    }
+
+    /**
+     * Detects hardware tier for desktop GPUs based on renderer name and WebGL capabilities.
+     * @private
+     * @param {WebGLRenderingContext} gl - WebGL context
+     * @param {string} rendererName - GPU renderer name
+     * @returns {string} Hardware tier
+     */
+    #detectDesktopTier(gl, rendererName) {
+        // Check WebGL capabilities
+        const maxTextureSize = gl?.getParameter(gl.MAX_TEXTURE_SIZE) || 8192;
+        
+        // Detect high-end GPUs
+        const isAppleSilicon = /Apple|M1|M2|M3|M4/i.test(rendererName);
+        const isNvidiaHighEnd = /RTX|GeForce (3|4|5|6|7|8|9|40|50|60|70|80|90)|RTX A[5-9]|RTX Pro|Quadro/i.test(rendererName);
+        const isAmdHighEnd = /RX (6|7|8|9)[0-9]{2,}|RX Vega|Radeon Pro|WX [0-9]/i.test(rendererName);
+        const isIntelIntegrated = /Intel.*UHD|Intel.*Iris|Mesa|llvmpipe/i.test(rendererName);
+        
+        let tier = 'high'; // Default to high for desktop
+        
+        if (isIntelIntegrated || maxTextureSize < 8192) {
+            tier = 'medium';
+        } else if (isAppleSilicon || isNvidiaHighEnd || isAmdHighEnd || maxTextureSize >= 16384) {
+            tier = 'ultra';
+        }
+        
+        console.log(`[PrefViewer] Desktop tier: ${tier} (GPU: ${rendererName || 'unknown'}, MaxTexture: ${maxTextureSize})`);
+        return tier;
+    }
+
+    /**
+     * Detects mobile device type and capabilities.
+     * Analyzes user agent, screen specs, and device performance indicators.
+     * @private
+     * @returns {Object} Mobile device info with tier classification
+     */
+    #detectMobileInfo() {
+        const userAgent = navigator.userAgent || '';
+        const screenWidth = window.screen?.width || 0;
+        const screenHeight = window.screen?.height || 0;
+        const pixelRatio = window.devicePixelRatio || 1;
+        
+        // Detect device type
+        const isIPhone = /iPhone/i.test(userAgent);
+        const isIPad = /iPad/i.test(userAgent);
+        const isAndroid = /Android/i.test(userAgent);
+        const isMobile = /Mobile/i.test(userAgent);
+        
+        // High-end mobile patterns (recent flagship devices)
+        const highEndPatterns = [
+            /iPhone (1[4-9]|SE)/i,        // iPhone 14+
+            /iPad Pro/i,                   // iPad Pro
+            /SM-S91[0-9]/i,              // Samsung S21+
+            /SM-S9[0-9]/i,               // Samsung S20+
+            /Pixel [7-9]/i,              // Pixel 7+
+            /OnePlus [8-9|10|11]/i,      // OnePlus 8+
+            /Xiaomi (1[2-4]|Mi 1[1-4])/i, // Xiaomi 12+
+            /Huawei (P50|Mate 4|)/i,     // Huawei P50+
+        ];
+        
+        // Mid-range patterns
+        const midRangePatterns = [
+            /iPhone (1[0-3]|SE)/i,       // iPhone 10-13
+            /iPad Air/i,                  // iPad Air
+            /SM-A[0-9]/i,                // Samsung A series
+            /Redmi Note/i,               // Redmi Note
+            /Pixel [4-6]/i,              // Pixel 4-6
+            /Moto G/i,                   // Moto G
+        ];
+        
+        const isHighEnd = highEndPatterns.some(p => p.test(userAgent));
+        const isMidRange = midRangePatterns.some(p => p.test(userAgent));
+        
+        // Detect tablet ONLY if explicitly in user agent (not just screen size)
+        // Many desktops have large screens and would incorrectly be detected as tablets
+        const isTablet = /iPad|Android.*Tablet|Nexus 9|Nexus 10/i.test(userAgent);
+        
+        // Detect if mobile (phone form factor) - must have explicit mobile indicators
+        const isMobilePhone = /Android.*Mobile|iPhone|iPod/i.test(userAgent);
+        
+        // Check if it looks like a desktop/laptop (has "Windows", "Mac", "Linux" but no mobile indicators)
+        const isDesktopLike = /Windows NT|Macintosh|Linux|X11/i.test(userAgent) && !isMobilePhone && !isTablet;
+        
+        // Device name for logging
+        let deviceName = 'Unknown';
+        if (isIPhone) {
+            const match = userAgent.match(/iPhone.*OS (\d+)/);
+            deviceName = match ? `iPhone OS ${match[1]}` : 'iPhone';
+        } else if (isIPad) {
+            deviceName = 'iPad';
+        } else if (isAndroid) {
+            const match = userAgent.match(/Android.*;.*(.+?)\)/);
+            deviceName = match ? match[1].trim() : 'Android';
+        }
+        
+        return {
+            isMobile: isMobilePhone && !isDesktopLike,
+            isTablet: isTablet && !isDesktopLike,
+            isDesktopLike,
+            isHighEnd: isHighEnd || (isTablet && pixelRatio >= 2),
+            isMidRange: isMidRange,
+            isLowEnd: !isHighEnd && !isMidRange,
+            deviceName,
+            screenWidth,
+            screenHeight,
+            pixelRatio,
+        };
+    }
+
+    /**
+     * Applies quality settings based on detected hardware tier.
+     * @private
+     * @param {string} tier - Hardware tier: 'low', 'medium', or 'high'
+     */
+    #applyQualitySettings(tier) {
+        const qualityPresets = {
+            // Mobile low-end (old phones, budget devices)
+            low: {
+                shadowMapSize: 256,              // Very small for speed
+                iblShadowResolution: -1,        // Disable IBL shadows
+                iblSampleDirections: 1,          // Minimal sampling
+                shadowBlurKernel: 0,             // No blur
+                ssaoEnabled: false,
+                antialiasingEnabled: false,
+                hardwareScaling: 2.5,           // Aggressive downscaling
+                maxModelResolution: 512,          // Low-res model loading
+            },
+            // Mobile high-end / Tablet / Desktop low
+            medium: {
+                shadowMapSize: 512,
+                iblShadowResolution: 0,          // 1024x1024
+                iblSampleDirections: 2,          // Fast sampling
+                shadowBlurKernel: 4,             // Light blur
+                ssaoEnabled: false,              // Disable for mobile battery
+                antialiasingEnabled: true,
+                hardwareScaling: 2.0,
+                maxModelResolution: 1024,
+            },
+            // Desktop mid-range / High-end mobile
+            high: {
+                shadowMapSize: 1024,
+                iblShadowResolution: 0,          // 1024x1024 - good balance
+                iblSampleDirections: 4,           // Quality sampling
+                shadowBlurKernel: 16,             // Smooth shadows
+                ssaoEnabled: true,
+                antialiasingEnabled: true,
+                hardwareScaling: 1.5,
+                maxModelResolution: 2048,
+            },
+            // Desktop high-end (RTX, Apple Silicon, etc.)
+            ultra: {
+                shadowMapSize: 2048,
+                iblShadowResolution: 1,          // 2048x2048
+                iblSampleDirections: 8,           // Maximum quality
+                shadowBlurKernel: 32,            // Ultra smooth
+                ssaoEnabled: true,
+                antialiasingEnabled: true,
+                hardwareScaling: 1.0,             // Native resolution
+                maxModelResolution: 4096,
+            },
+        };
+
+        // Map tier to preset with fallback
+        const presetMap = {
+            'low': qualityPresets.low,
+            'medium': qualityPresets.medium,
+            'high': qualityPresets.high,
+            'ultra': qualityPresets.ultra,
+        };
+
+        const preset = presetMap[tier] || qualityPresets.medium;
+        
+        // Apply preset to config
+        this.#config.quality = { 
+            tier, 
+            ...preset,
+            // Legacy compatibility
+            shadowMapSize: preset.shadowMapSize,
+            iblShadowResolution: preset.iblShadowResolution,
+            iblSampleDirections: preset.iblSampleDirections,
+            shadowBlurKernel: preset.shadowBlurKernel,
+        };
+    }
+
     // Promises to track async disable() lifecycle when XR and general teardown may run concurrently; ensures idempotent disable calls are safe and callers can await full teardown completion.
     #disablingPromises = {
         xr: null,
@@ -463,6 +711,7 @@ export default class BabylonJSController {
      * Evaluates whether the renderer should stay in continuous mode.
      * XR always forces continuous rendering; animation/camera motion also extends the
      * continuous deadline window to avoid abrupt stop-start behavior.
+     * OPTIMIZATION: Added true idle mode - stops rendering completely after idleThresholdMs of inactivity.
      * @private
      * @param {number} now - Current high-resolution timestamp.
      * @returns {boolean} True when continuous rendering should remain active.
@@ -470,6 +719,8 @@ export default class BabylonJSController {
     #shouldRenderContinuously(now) {
         const inXR = this.#XRExperience?.baseExperience?.state === WebXRState.IN_XR;
         if (inXR) {
+            this.#state.render.isIdle = false;
+            this.#state.render.lastActivityAt = now;
             return true;
         }
 
@@ -478,18 +729,36 @@ export default class BabylonJSController {
 
         if (animationRunning) {
             this.#state.render.continuousUntil = Math.max(this.#state.render.continuousUntil, now + this.#config.render.animationMs);
+            this.#state.render.isIdle = false;
+            this.#state.render.lastActivityAt = now;
         }
         if (cameraInMotion) {
             this.#state.render.continuousUntil = Math.max(this.#state.render.continuousUntil, now + this.#config.render.interactionMs);
+            this.#state.render.isIdle = false;
+            this.#state.render.lastActivityAt = now;
+        }
+
+        // OPTIMIZATION: True idle mode - if no activity for idleThresholdMs, stop rendering completely
+        const timeSinceActivity = now - this.#state.render.lastActivityAt;
+        if (timeSinceActivity > this.#config.render.idleThresholdMs) {
+            this.#state.render.isIdle = true;
         }
 
-        return animationRunning || cameraInMotion || this.#state.render.continuousUntil > now;
+        const shouldRender = animationRunning || cameraInMotion || this.#state.render.continuousUntil > now;
+        
+        // Reset idle flag if we need to render
+        if (shouldRender) {
+            this.#state.render.isIdle = false;
+        }
+        
+        return shouldRender;
     }
 
     /**
      * Render loop callback for Babylon.js.
      * Runs only while scene state is dirty, interactive motion is active, animations are running, or XR is active.
-     * It self-stops when the scene becomes idle.
+     * It self-stops when the scene becomes idle (true idle mode - no renders at all).
+     * OPTIMIZATION: Added true idle mode that completely stops rendering after idleThresholdMs.
      * @private
      * @returns {void}
      */
@@ -503,6 +772,12 @@ export default class BabylonJSController {
         const continuous = this.#shouldRenderContinuously(now);
         const needsRender = continuous || this.#state.render.dirtyFrames > 0;
 
+        // OPTIMIZATION: True idle mode - stop rendering completely when idle
+        if (this.#state.render.isIdle && !needsRender) {
+            this.#stopEngineRenderLoop();
+            return;
+        }
+
         if (!needsRender) {
             this.#stopEngineRenderLoop();
             return;
@@ -1035,9 +1310,10 @@ export default class BabylonJSController {
 
         const pipelineName = "PrefViewerIblShadowsRenderPipeline";
 
+        // Use hardware-adaptive quality settings
         const pipelineOptions = {
-            resolutionExp: 1, // Higher resolution for better shadow quality (recomended 8)
-            sampleDirections: 4, // More sample directions for smoother shadows (recomended 4)
+            resolutionExp: this.#config.quality.iblShadowResolution, // Adaptive: 0=1024, 1=2048, 2=4096
+            sampleDirections: this.#config.quality.iblSampleDirections, // Adaptive: 2=fast, 4=quality
             ssShadowsEnabled: true,
             shadowRemanence: 0.85,
             triPlanarVoxelization: true,
@@ -1108,6 +1384,7 @@ export default class BabylonJSController {
 
     /**
      * Configures soft shadows for the built-in directional light used when no HDR environment is present.
+     * Uses hardware-adaptive quality settings.
      * @private
      * @returns {void}
      */
@@ -1116,9 +1393,12 @@ export default class BabylonJSController {
             return;
         }
         this.#dirLight.autoUpdateExtends = false;
-        const shadowGenerator = new ShadowGenerator(1024, this.#dirLight);
+        // Use quality-adaptive shadow map size
+        const shadowMapSize = this.#config.quality.shadowMapSize;
+        const shadowGenerator = new ShadowGenerator(shadowMapSize, this.#dirLight);
         shadowGenerator.useBlurExponentialShadowMap = true;
-        shadowGenerator.blurKernel = 16;
+        // Use quality-adaptive blur kernel
+        shadowGenerator.blurKernel = this.#config.quality.shadowBlurKernel;
         shadowGenerator.darkness = 0.5;
         shadowGenerator.bias = 0.0005;
         shadowGenerator.normalBias = 0.02;
@@ -1499,6 +1779,7 @@ export default class BabylonJSController {
 
     /**
      * Handles mouse wheel events on the Babylon.js canvas for zooming the camera.
+     * OPTIMIZATION: Tracks activity for idle mode.
      * @private
      * @param {WheelEvent} event - The mouse wheel event.
      * @param {Object} pickInfo - The result of the scene pick operation (not used in this method).
@@ -1506,6 +1787,12 @@ export default class BabylonJSController {
      */
     #onMouseWheel(event, pickInfo) {
         event.preventDefault();
+        
+        // OPTIMIZATION: Mark activity for idle mode
+        const now = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+        this.#state.render.lastActivityAt = now;
+        this.#state.render.isIdle = false;
+        
         const camera = this.#scene?.activeCamera;
         if (!camera) {
             return false;
@@ -1527,14 +1814,20 @@ export default class BabylonJSController {
         }
     }
 
-    /**
+     /**
      * Handles pointer up events on the Babylon.js scene.
+     * OPTIMIZATION: Tracks activity for idle mode.
      * @private
      * @param {PointerEvent} event - The pointer up event.
      * @param {PickInfo} pickInfo - The result of the scene pick operation.
      * @returns {void}
      */
     #onPointerUp(event, pickInfo) {
+        // OPTIMIZATION: Mark activity for idle mode
+        const now = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+        this.#state.render.lastActivityAt = now;
+        this.#state.render.isIdle = false;
+        
         if (this.#babylonJSAnimationController) {
             if (event.button !== 2 || !pickInfo || !pickInfo.pickedMesh) {
                 this.#babylonJSAnimationController.hideMenu();
@@ -1548,12 +1841,18 @@ export default class BabylonJSController {
 
     /**
      * Handles pointer move events on the Babylon.js scene.
+     * OPTIMIZATION: Tracks activity for idle mode.
      * @private
      * @param {PointerEvent} event - The pointer move event.
      * @param {PickInfo|null} pickInfo - The sampled result of the scene pick operation (may be null when sampling skips a raycast).
      * @returns {void}
      */
     #onPointerMove(event, pickInfo) {
+        // OPTIMIZATION: Mark activity for idle mode
+        const now = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+        this.#state.render.lastActivityAt = now;
+        this.#state.render.isIdle = false;
+        
         const camera = this.#scene?.activeCamera;
         if (camera && !camera.metadata?.locked) {
             this.#requestRender({ frames: 1, continuousMs: this.#config.render.interactionMs });
@@ -2420,6 +2719,20 @@ export default class BabylonJSController {
         this.#configureDracoCompression();
         this.#engine = new Engine(this.#canvas, true, { alpha: true, stencil: true, preserveDrawingBuffer: false });
         this.#engine.disableUniformBuffers = true;
+        
+        // OPTIMIZATION: Detect hardware tier and apply quality settings
+        const detectedTier = this.#detectHardwareTier();
+        this.#applyQualitySettings(detectedTier);
+        
+        // OPTIMIZATION: Apply hardware scaling from quality preset
+        const pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+        const baseScaling = this.#config.quality.hardwareScaling || 1;
+        const scalingLevel = pixelRatio > 1 ? baseScaling * pixelRatio : baseScaling;
+        this.#engine.setHardwareScalingLevel(scalingLevel);
+        
+        // OPTIMIZATION: Initialize idle tracking
+        this.#state.render.lastActivityAt = typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
+        
         this.#scene = new Scene(this.#engine);
 
         // Activate the rendering of geometry data into a G-buffer, essential for advanced effects like deferred shading,

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

@@ -594,6 +594,11 @@ export default class PrefViewer3D extends HTMLElement {
 
         const loadDetail = await this.#babylonJSController.load(forceReload);
 
+        // Apply initial render settings if provided in options
+        if (config.options?.render) {
+            await this.applyRenderSettings(config.options.render);
+        }
+
         return { ...loadDetail, load: this.#onLoaded() };
     }
 
@@ -622,6 +627,12 @@ export default class PrefViewer3D extends HTMLElement {
         if (needUpdateIBL) {
             someSetted = someSetted || (await this.#babylonJSController.setIBLOptions());
         }
+        
+        // Apply render settings if provided
+        if (options.render) {
+            await this.applyRenderSettings(options.render);
+        }
+        
         const detail = this.#onSetOptions();
         return { success: someSetted, detail: detail };
     }

package/src/pref-viewer.js

@@ -106,7 +106,7 @@ export default class PrefViewer extends HTMLElement {
      * @returns {string[]} Array of attribute names to observe.
      */
     static get observedAttributes() {
-        return ["config", "culture", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene"];
+        return ["config", "culture", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene", "show-menu"];
     }
 
     /**
@@ -174,6 +174,10 @@ export default class PrefViewer extends HTMLElement {
                 const showScene = value.toLowerCase() === "true";
                 showScene ? this.showScene() : this.hideScene();
                 break;
+            case "show-menu":
+                // Recreate menu to apply show/hide setting
+                this.#createMenu3D();
+                break;
         }
     }
 
@@ -271,6 +275,7 @@ export default class PrefViewer extends HTMLElement {
     /**
      * Creates (or recreates) the PrefViewerMenu3D element, wires hover/apply handlers, and syncs it with the 3D component.
      * When a menu already exists it is removed so the DOM stays clean.
+     * Respects the "show-menu" attribute to determine if menu should be visible.
      * @private
      * @returns {void}
      */
@@ -282,6 +287,16 @@ export default class PrefViewer extends HTMLElement {
             this.#menu3D.removeEventListener("pref-viewer-menu-3d-apply", this.#handlers.onMenuApply);
             this.#menu3D.remove();
         }
+        
+        // Check if menu should be shown (default: true if not specified)
+        const showMenuAttr = this.getAttribute("show-menu");
+        const showMenu = showMenuAttr === null || showMenuAttr === "true";
+        
+        if (!showMenu) {
+            this.#menu3D = null;
+            return;
+        }
+        
         this.#menu3D = document.createElement("pref-viewer-menu-3d");
         if (typeof this.#menu3D.setCulture === "function") {
             this.#menu3D.setCulture(this.#culture);