Update XRMenuPanel icones to use svg and improved code readability (#5077)

Author: samaneh-kazemi

packages/model-viewer/src/three-components/XRMenuPanel.ts

@@ -2,109 +2,190 @@ import {Camera, CanvasTexture, Mesh,Object3D, Shape,ShapeGeometry, LinearFilter,
 import {Damper} from './Damper.js';
 import {ModelScene} from './ModelScene.js';
 import { PlacementBox } from './PlacementBox.js';
+// SVG strings for the icons are defined here to avoid io and better performance for xr.
+const CLOSE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#e8eaed">
+    <path d="M6.4,19L5,17.6L10.6,12L5,6.4L6.4,5L12,10.6L17.6,5L19,6.4L13.4,12L19,17.6L17.6,19L12,13.4L6.4,19Z"/>
+</svg>`;
 
-const MAX_OPACITY = 1;
-const PANEL_WIDTH = 0.15;
-const PANEL_HEIGHT = 0.08;
-const PANEL_CORNER_RADIUS = 0.02;
+const VIEW_REAL_SIZE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#e8eaed">
+    <path d="M7,17V9H5V7H9V17H7ZM11,17V15H13V17H11ZM16,17V9H14V7H18V17H16ZM11,13V11H13V13H11Z"/>
+</svg>`;
+
+const REPLAY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#E1E2E8">
+    <defs>
+        <clipPath id="clip0">
+            <path d="M0,0h24v24h-24z"/>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#clip0)">
+        <path d="M12,22C10.75,22 9.575,21.767 8.475,21.3C7.392,20.817 6.442,20.175 5.625,19.375C4.825,18.558 4.183,17.608 3.7,16.525C3.233,15.425 3,14.25 3,13H5C5,14.95 5.675,16.608 7.025,17.975C8.392,19.325 10.05,20 12,20C13.95,20 15.6,19.325 16.95,17.975C18.317,16.608 19,14.95 19,13C19,11.05 18.317,9.4 16.95,8.05C15.6,6.683 13.95,6 12,6H11.85L13.4,7.55L12,9L8,5L12,1L13.4,2.45L11.85,4H12C13.25,4 14.417,4.242 15.5,4.725C16.6,5.192 17.55,5.833 18.35,6.65C19.167,7.45 19.808,8.4 20.275,9.5C20.758,10.583 21,11.75 21,13C21,14.25 20.758,15.425 20.275,16.525C19.808,17.608 19.167,18.558 18.35,19.375C17.55,20.175 16.6,20.817 15.5,21.3C14.417,21.767 13.25,22 12,22Z"/>
+    </g>
+</svg>`;
+
+// Panel configuration
+const PANEL_CONFIG = {
+  width: 0.16,
+  height: 0.07,
+  cornerRadius: 0.03,
+  opacity: 1,
+  color: 0x000000
+} as const;
+
+// Button configuration
+const BUTTON_CONFIG = {
+  size: 0.05, // Fixed size for all buttons
+  zOffset: 0.01, // Distance from panel surface
+  spacing: 0.07 // Space between button centers
+} as const;
+
+// Icon configuration
+const ICON_CONFIG = {
+  canvasSize: 128,
+  filter: LinearFilter
+} as const;
 
 export class XRMenuPanel extends Object3D {
-  private panelMesh: Mesh;
-  private exitButton: Mesh;
-  private toggleButton: Mesh;
+  private panelMesh!: Mesh;
+  private exitButton!: Mesh;
+  private toggleButton!: Mesh;
   private goalOpacity: number;
   private opacityDamper: Damper;
   private isActualSize: boolean = false; // Start with normalized size
 
+  // Cache for pre-rendered textures
+  private static readonly iconTextures = new Map<string, CanvasTexture>();
+  
   constructor() {
     super(); 
-    const panelShape = new Shape();
-    const w = PANEL_WIDTH, h = PANEL_HEIGHT, r = PANEL_CORNER_RADIUS;
-    //  straight horizontal bottom edge and a rounded bottom-right corner with a radius of r
-    panelShape.moveTo(-w / 2 + r, -h / 2);
-    panelShape.lineTo(w / 2 - r, -h / 2);
-    panelShape.quadraticCurveTo(w / 2, -h / 2, w / 2, -h / 2 + r);
-    // the right most line and the rounded up-right
-    panelShape.lineTo(w / 2, h / 2 - r);
-    panelShape.quadraticCurveTo(w / 2, h / 2, w / 2 - r, h / 2);
-    // the horizontal top edge and rounded up-left
-    panelShape.lineTo(-w / 2 + r, h / 2);
-    panelShape.quadraticCurveTo(-w / 2, h / 2, -w / 2, h / 2 - r);
-    // the left line and bottom left corner
-    panelShape.lineTo(-w / 2, -h / 2 + r);
-    panelShape.quadraticCurveTo(-w / 2, -h / 2, -w / 2 + r, -h / 2); 
+    
+    // Pre-render all icons
+    this.preRenderIcons();
+    
+    this.createPanel();
+    this.createButtons();
+ 
+    this.opacityDamper = new Damper();
+    this.goalOpacity = PANEL_CONFIG.opacity;
+  }
+
+  private createPanel(): void {
+    const panelShape = this.createPanelShape();
     const geometry = new ShapeGeometry(panelShape);
     const material = new MeshBasicMaterial({
-      color: 0x000000,
-      opacity: MAX_OPACITY,
+      color: PANEL_CONFIG.color,
+      opacity: PANEL_CONFIG.opacity,
       transparent: true
     }); 
     this.panelMesh = new Mesh(geometry, material);
     this.panelMesh.name = 'MenuPanel';
     this.add(this.panelMesh); 
+  }
 
+  private createButtons(): void {
     // Create exit button
-    this.exitButton = this.createButton('X');
+    this.exitButton = this.createButton('close');
     this.exitButton.name = 'ExitButton';
-    this.exitButton.position.set(0.035, 0, 0.01); // Keep X button position
+    this.exitButton.position.set(BUTTON_CONFIG.spacing / 2, 0, BUTTON_CONFIG.zOffset);
     this.add(this.exitButton);
 
-    // Create toggle button with adjusted position for larger text
-    this.toggleButton = this.createButton('1:1', {
-      width: 0.06, // Slightly wider for the longer text
-      height: 0.05 // Keep same height as X button
-    });
+    // Create toggle button
+    this.toggleButton = this.createButton('view-real-size');
     this.toggleButton.name = 'ToggleButton';
-    this.toggleButton.position.set(-0.03, 0, 0.01); // Move slightly more to the left to account for wider button
+    this.toggleButton.position.set(-BUTTON_CONFIG.spacing / 2, 0, BUTTON_CONFIG.zOffset);
     this.add(this.toggleButton);
- 
-    this.opacityDamper = new Damper();
-    this.goalOpacity = MAX_OPACITY;
-  } 
+  }
 
-  createButton(label: string, options?: {
-    width?: number;
-    height?: number;
-    fontSize?: number;
-    textColor?: string;
-    backgroundColor?: string;
-    fontFamily?: string;
-  }): Mesh {
-    const {
-      width = 0.05,
-      height = 0.05,
-      fontSize = 80,
-      textColor = '#cccccc',
-      backgroundColor = 'transparent',
-      fontFamily = 'sans-serif'
-    } = options || {};
+  private createPanelShape(): Shape {
+    const shape = new Shape();
+    const { width: w, height: h, cornerRadius: r } = PANEL_CONFIG;
+    
+    // Create rounded rectangle path
+    shape.moveTo(-w / 2 + r, -h / 2);
+    shape.lineTo(w / 2 - r, -h / 2);
+    shape.quadraticCurveTo(w / 2, -h / 2, w / 2, -h / 2 + r);
+    shape.lineTo(w / 2, h / 2 - r);
+    shape.quadraticCurveTo(w / 2, h / 2, w / 2 - r, h / 2);
+    shape.lineTo(-w / 2 + r, h / 2);
+    shape.quadraticCurveTo(-w / 2, h / 2, -w / 2, h / 2 - r);
+    shape.lineTo(-w / 2, -h / 2 + r);
+    shape.quadraticCurveTo(-w / 2, -h / 2, -w / 2 + r, -h / 2);
 
-    const canvasSize = 128;
+    return shape;
+  } 
+
+  private preRenderIcons(): void {
+    const iconSvgs = [
+      { key: 'close', svg: CLOSE_ICON_SVG },
+      { key: 'view-real-size', svg: VIEW_REAL_SIZE_ICON_SVG },
+      { key: 'replay', svg: REPLAY_ICON_SVG }
+    ];
+
+    iconSvgs.forEach(({ key, svg }) => {
+      if (!XRMenuPanel.iconTextures.has(key)) {
+        this.createTextureFromSvg(svg, key);
+      }
+    });
+  }
+
+  private createTextureFromSvg(svgContent: string, key: string): void {
     const canvas = document.createElement('canvas');
-    canvas.width = canvasSize;
-    canvas.height = canvasSize;
+    canvas.width = ICON_CONFIG.canvasSize;
+    canvas.height = ICON_CONFIG.canvasSize;
     const ctx = canvas.getContext('2d')!;
 
-    // Background
-    if (backgroundColor !== 'transparent') {
-      ctx.fillStyle = backgroundColor;
-      ctx.fillRect(0, 0, canvasSize, canvasSize);
+    // Create an image from SVG content
+    const img = new Image();
+    const svgBlob = new Blob([svgContent], {type: 'image/svg+xml'});
+    const url = URL.createObjectURL(svgBlob);
+    
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0, ICON_CONFIG.canvasSize, ICON_CONFIG.canvasSize);
+      
+      const texture = new CanvasTexture(canvas);
+      texture.needsUpdate = true;
+      texture.minFilter = ICON_CONFIG.filter;
+      
+      XRMenuPanel.iconTextures.set(key, texture);
+      URL.revokeObjectURL(url);
+    };
+    img.src = url;
+  }
+
+  createButton(iconKey: string): Mesh {    
+    // Create a placeholder mesh
+    const material = new MeshBasicMaterial({ transparent: true });
+    const geometry = new PlaneGeometry(BUTTON_CONFIG.size, BUTTON_CONFIG.size);
+    const mesh = new Mesh(geometry, material);
+    
+    // Try to get cached texture, or create a fallback
+    const cachedTexture = XRMenuPanel.iconTextures.get(iconKey);
+    if (cachedTexture) {
+      (mesh.material as MeshBasicMaterial).map = cachedTexture;
+      (mesh.material as MeshBasicMaterial).needsUpdate = true;
+    } else {
+      // RACE CONDITION FIX: Texture creation is async (img.onload), but button creation is sync
+      // This fallback handles the case where buttons are created before textures finish loading
+      this.createTextureFromSvg(iconKey === 'close' ? CLOSE_ICON_SVG : 
+                               iconKey === 'view-real-size' ? VIEW_REAL_SIZE_ICON_SVG : 
+                               REPLAY_ICON_SVG, iconKey);
+      
+      // Polling mechanism: Wait for async texture creation to complete
+      // This prevents white squares from appearing on first load
+      const checkTexture = () => {
+        const texture = XRMenuPanel.iconTextures.get(iconKey);
+        if (texture) {
+          // Texture is ready - apply it to the mesh
+          (mesh.material as MeshBasicMaterial).map = texture;
+          (mesh.material as MeshBasicMaterial).needsUpdate = true;
+        } else {
+          // Texture not ready yet - check again in 10ms
+          setTimeout(checkTexture, 10);
+        }
+      };
+      checkTexture();
     }
-  
-    // Text
-    ctx.fillStyle = textColor;
-    ctx.font = `bold ${fontSize}px ${fontFamily}`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(label, canvasSize / 2, canvasSize / 2);
-  
-    const texture = new CanvasTexture(canvas);
-    texture.needsUpdate = true;
-    texture.minFilter = LinearFilter;
-  
-    const material = new MeshBasicMaterial({ map: texture, transparent: true });
-    const geometry = new PlaneGeometry(width, height);
-    return new Mesh(geometry, material);
+    
+    return mesh;
   }
 
   exitButtonControllerIntersection(scene: ModelScene, controller: XRTargetRaySpace) {
@@ -128,34 +209,24 @@ export class XRMenuPanel extends Object3D {
     }
 
     this.isActualSize = !this.isActualSize;
-    const newLabel = this.isActualSize ? '@' : '1:1';
-    this.updateScaleModeButtonLabel(newLabel);
+    // Toggle between view real size icon and replay icon
+    // When isActualSize is true, show replay icon (to reset)
+    // When isActualSize is false, show view real size icon (to go to actual size)
+    const iconKey = this.isActualSize ? 'replay' : 'view-real-size';
+    this.updateScaleModeButtonLabel(iconKey);
 
     const targetScale = this.isActualSize ? 1.0 : initialModelScale;
     const goalScale = Math.max(minScale, Math.min(maxScale, targetScale));
 
     return goalScale;
   }
 
-  private updateScaleModeButtonLabel(label: string) {
-    const canvasSize = 128;
-    const canvas = document.createElement('canvas');
-    canvas.width = canvasSize;
-    canvas.height = canvasSize;
-    const ctx = canvas.getContext('2d')!;
-    
-    ctx.fillStyle = '#cccccc';
-    ctx.font = 'bold 80px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(label, canvasSize / 2, canvasSize / 2);
-  
-    const texture = new CanvasTexture(canvas);
-    texture.needsUpdate = true;
-    texture.minFilter = LinearFilter;
-  
-    (this.toggleButton.material as MeshBasicMaterial).map = texture;
-    (this.toggleButton.material as MeshBasicMaterial).needsUpdate = true;
+  private updateScaleModeButtonLabel(iconKey: string) {
+    const cachedTexture = XRMenuPanel.iconTextures.get(iconKey);
+    if (cachedTexture) {
+      (this.toggleButton.material as MeshBasicMaterial).map = cachedTexture;
+      (this.toggleButton.material as MeshBasicMaterial).needsUpdate = true;
+    }
   }
 
   updatePosition(camera: Camera, placementBox: PlacementBox)  {
@@ -188,7 +259,7 @@ export class XRMenuPanel extends Object3D {
    * Set the box's visibility; it will fade in and out.
    */
   set show(visible: boolean) {
-    this.goalOpacity = visible ? MAX_OPACITY : 0;
+    this.goalOpacity = visible ? PANEL_CONFIG.opacity : 0;
   }
 
   /**

packages/render-fidelity-tools/src/artifact-creator.ts

@@ -382,7 +382,7 @@ export class ArtifactCreator {
     }
 
     const screenshot =
-        await page.screenshot({path: outputPath, omitBackground: true});
+        await page.screenshot({path: outputPath as `${string}.png`, omitBackground: true});
 
     page.close();