@directivegames/genesys.js 3.1.24

package/games/vr-ui-demo.ts

@@ -0,0 +1,972 @@
+import * as ENGINE from 'genesys.js';
+import * as THREE from 'three';
+
+/**
+ * VR UI Demo - Comprehensive showcase of CanvasUI functionality in VR
+ * Features separate panels for each UI element type with debug information
+ */
+export class VRUIDemo extends ENGINE.BaseGameLoop {
+  private testButtons: { red: ENGINE.Actor; blue: ENGINE.Actor; green: ENGINE.Actor; yellow: ENGINE.Actor } | null = null;
+  private debugPanel: ENGINE.Actor | null = null;
+  private wireframeSphere: ENGINE.Actor | null = null;
+  private fpsTracker = { frameCount: 0, lastTime: 0, fps: 0 };
+
+  constructor(container: HTMLElement) {
+    super(container, {
+      xrEnabled: true,
+      vrSessionOptions: {
+        optionalFeatures: [
+          'hand-tracking',
+          'local-floor',
+          // 'high-fixed-foveation-level'
+        ],
+        requiredFeatures: [],
+        framebufferScaleFactor: 1.5
+      },
+    });
+  }
+
+  private async loadGochiHandFont(): Promise<void> {
+    try {
+      console.log('🔄 Starting Gochi Hand font load...');
+
+      // First try to load via CSS @font-face
+      const style = document.createElement('style');
+      style.textContent = `
+        @font-face {
+          font-family: 'Gochi Hand';
+          font-style: normal;
+          font-weight: 400;
+          font-display: swap;
+          src: url(https://fonts.gstatic.com/s/gochihand/v14/hES06XlsOjtJsgCkx1Pkfon_-w.woff2) format('woff2');
+        }
+      `;
+      document.head.appendChild(style);
+
+      // Then use FontFace API as backup
+      const myFont = new FontFace(
+        'Gochi Hand',
+        'url(https://fonts.gstatic.com/s/gochihand/v14/hES06XlsOjtJsgCkx1Pkfon_-w.woff2)'
+      );
+
+      await myFont.load();
+      document.fonts.add(myFont);
+      console.log('🎨 Gochi Hand font loaded successfully!');
+
+      // Wait for font to be ready
+      await document.fonts.ready;
+
+      // Verify font is available
+      const availableFonts = Array.from(document.fonts.values()).map(f => f.family);
+      console.log('📋 Available fonts:', availableFonts);
+
+      // Test if font can be used
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.font = '16px \'Gochi Hand\', Arial, sans-serif';
+        console.log('🧪 Font test result:', ctx.font);
+
+        // Test font rendering
+        ctx.fillText('Test', 0, 20);
+        const imageData = ctx.getImageData(0, 0, 50, 30);
+        const hasPixels = Array.from(imageData.data).some(pixel => pixel > 0);
+        console.log('🎨 Font renders pixels:', hasPixels);
+      }
+    } catch (error) {
+      console.warn('⚠️ Failed to load Gochi Hand font:', error);
+    }
+  }
+
+  protected override async preStart(): Promise<void> {
+    // Load Gochi Hand font using FontFace API
+    await this.loadGochiHandFont();
+
+    // Disable tone mapping for VR
+    this.world.postProcessManager.setPostProcessingEnabled(false);
+
+    // Create basic lighting
+    ENGINE.GameBuilder.createDefaultLighting(this.world);
+
+    console.log('🎮 VR UI Demo starting - showcasing CanvasUI integration!');
+
+    // Create VR pawn with controller support
+    const vrPawn = new ENGINE.VRPawn({
+      movementComponent: null,
+      camera: null,
+      controllerOptions: {
+        rayVisualizationEnabled: true,
+        maxRayDistance: 15
+      },
+      snapTurnAngle: 25,
+      maxTeleportDistance: 15
+    });
+
+    this.world.addActor(vrPawn);
+
+    // Create player controller
+    const controller = new ENGINE.PlayerController();
+    controller.possess(vrPawn);
+    this.world.addActor(controller);
+
+    // Add VR pawn components
+    vrPawn.addComponent(new ENGINE.VRGrabComponent({}));
+    vrPawn.addComponent(new ENGINE.VRSnapTurnComponent({ angleDeg: vrPawn.getSnapTurnAngleDegrees() }));
+    vrPawn.addComponent(new ENGINE.VRInteractComponent({ button: ENGINE.XRButton.Trigger }));
+    vrPawn.addComponent(new ENGINE.VRTeleportComponent({ maxDistance: 15 }));
+
+    // Create environment
+    this.createEnvironment();
+
+    // Wait a bit more to ensure font is fully loaded
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Create UI demo panels - positioned in front of user in a semi-circle
+    console.log('🔧 Creating Header/Main/Footer panel...');
+    this.createHeaderMainFooterPanel();
+    console.log('🔧 Creating Custom Shape panel...');
+    this.createCustomShapePanel();
+    console.log('🔧 Creating Button panel...');
+    this.createButtonPanel();
+    console.log('🔧 Creating Scrolling panel...');
+    this.createScrollingPanel();
+    console.log('🔧 Creating Images panel...');
+    this.createImagesPanel();
+    console.log('🔧 Creating Text Input panel...');
+    this.createTextInputPanel();
+    console.log('🔧 Creating Color Picker panel...');
+    this.createColorPickerPanel();
+    console.log('🔧 Creating Debug panel...');
+    this.createDebugPanel();
+
+    console.log('🌟 VR UI Demo scene created with 8 specialized CanvasUI panels!');
+    console.log('📋 Panels are positioned in front of you in a semi-circle for easy access');
+  }
+
+  private createEnvironment(): void {
+    // Create ground with proper positioning
+    const ground = new ENGINE.Actor({
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: new THREE.PlaneGeometry(20, 20),
+        material: new THREE.MeshStandardMaterial({
+          color: 0x4a5568,
+          roughness: 0.8,
+          metalness: 0.1
+        }),
+        physicsOptions: {
+          motionType: ENGINE.PhysicsMotionType.Static
+        }
+      })
+    });
+    ground.rootComponent.rotation.set(-Math.PI / 2, 0, 0);
+    ground.rootComponent.position.set(0, 0, 0);
+    this.world.addActor(ground);
+
+    // Create skybox
+    ENGINE.GameBuilder.createDefaultSkybox(this.world);
+
+    // Create reference pillars properly positioned on ground
+    for (let i = 0; i < 8; i++) {
+      const pillar = new ENGINE.Actor({
+        rootComponent: new ENGINE.MeshComponent({
+          geometry: new THREE.CylinderGeometry(0.1, 0.1, 3, 8),
+          material: new THREE.MeshStandardMaterial({
+            color: 0x666666,
+            roughness: 0.7,
+            metalness: 0.3
+          }),
+        })
+      });
+      const angle = (i / 8) * Math.PI * 2;
+      pillar.rootComponent.position.set(
+        Math.cos(angle) * 6,
+        1.5, // Half the pillar height above ground
+        Math.sin(angle) * 6
+      );
+      this.world.addActor(pillar);
+    }
+  }
+
+  private createHeaderMainFooterPanel(): void {
+    const content: ENGINE.CanvasUIContent = {
+      headerText: 'HEADER SECTION',
+      mainContent: 'This is the main content area. It can contain longer text and will demonstrate how content flows in the main section of a typical UI layout.',
+      footerText: 'Footer: Status Ready | Version 1.0'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      headerText: {
+        type: 'text',
+        position: { x: 0, y: 50 },
+        width: 512, height: 40,
+        fontSize: 18,
+        fontColor: '#ffffff',
+        backgroundColor: '#6F19D2',
+        textAlign: 'center',
+        padding: 10
+      } as ENGINE.UIElementConfig,
+      mainContent: {
+        type: 'text',
+        position: { x: 0, y: 100 },
+        width: 512, height: 120,
+        fontSize: 14,
+        fontColor: '#e0e0e0',
+        backgroundColor: '#2e2e2e',
+        padding: 15,
+        overflow: 'scroll'
+      } as ENGINE.UIElementConfig,
+      footerText: {
+        type: 'text',
+        position: { x: 0, y: 230 },
+        width: 512, height: 30,
+        fontSize: 12,
+        fontColor: '#b0b0b0',
+        backgroundColor: '#424242',
+        textAlign: 'center',
+        padding: 8
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Header/Main/Footer Layout', content, uiConfig);
+
+    panel.rootComponent.position.set(-4.5, 1.4, -2.0);
+    panel.rootComponent.rotation.set(0, 0.8, 0);
+    console.log('📍 Header/Footer panel positioned at (-4.5, 1.4, -2.0)');
+    this.world.addActor(panel);
+    console.log('🌍 Header/Footer panel added to world');
+  }
+
+  private createCustomShapePanel(): void {
+    const content: ENGINE.CanvasUIContent = {
+      circleBtn: '<path>M 30 30 A 20 20 0 1 1 30 29 Z</path>',
+      triangleBtn: '<path>M 40 10 L 60 40 L 20 40 Z</path>',
+      starBtn: '<path>M 40 5 L 45 20 L 60 20 L 48 30 L 53 45 L 40 35 L 27 45 L 32 30 L 20 20 L 35 20 Z</path>',
+      shapeInfo: 'Custom SVG shapes can be used as buttons with hover effects.'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      circleBtn: {
+        type: 'button',
+        position: { x: 80, y: 80 },
+        width: 60, height: 60,
+        backgroundColor: '#e91e63',
+        hover: '#ad1457',
+        verticalAlign: 'bottom'
+      } as ENGINE.UIElementConfig,
+      triangleBtn: {
+        type: 'button',
+        position: { x: 200, y: 80 },
+        width: 60, height: 60,
+        backgroundColor: '#9c27b0',
+        hover: '#6a1b9a',
+        verticalAlign: 'bottom'
+      } as ENGINE.UIElementConfig,
+      starBtn: {
+        type: 'button',
+        position: { x: 320, y: 80 },
+        width: 60, height: 60,
+        backgroundColor: '#ff9800',
+        hover: '#f57c00',
+        verticalAlign: 'bottom'
+      } as ENGINE.UIElementConfig,
+      shapeInfo: {
+        type: 'text',
+        position: { x: 20, y: 160 },
+        width: 472, height: 80,
+        fontSize: 14,
+        fontColor: '#81c784',
+        textAlign: 'center',
+        padding: 10
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Custom Shapes', content, uiConfig);
+
+    panel.rootComponent.position.set(-2.5, 1.4, -4.3);
+    panel.rootComponent.rotation.set(0, 0.5, 0);
+    console.log('📍 Custom Shapes panel positioned at (-2.5, 1.4, -4.3)');
+
+    const canvasUI = panel.getComponent(ENGINE.CanvasUIComponent);
+    if (canvasUI) {
+      this.setupButtonEvents(canvasUI, 'Custom Shapes');
+    }
+
+    this.world.addActor(panel);
+    console.log('🌍 Custom Shapes panel added to world');
+  }
+
+  private createButtonPanel(): void {
+    const content: ENGINE.CanvasUIContent = {
+      primaryBtn: '🔵 Primary',
+      secondaryBtn: '⚫ Secondary',
+      successBtn: '✅ Success',
+      warningBtn: '⚠️ Warning',
+      dangerBtn: '🚨 Danger',
+      infoBtn: 'ℹ️ Info',
+      buttonStatus: 'Click any button to see interaction feedback'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      primaryBtn: {
+        type: 'button',
+        position: { x: 50, y: 70 },
+        width: 120, height: 35,
+        backgroundColor: '#2196f3',
+        hover: '#1976d2',
+        textAlign: 'center',
+        verticalAlign: 'top'
+      } as ENGINE.UIElementConfig,
+      secondaryBtn: {
+        type: 'button',
+        position: { x: 170, y: 70 },
+        width: 120, height: 35,
+        backgroundColor: '#D38900',
+        hover: '#545b62',
+        textAlign: 'center',
+      } as ENGINE.UIElementConfig,
+      successBtn: {
+        type: 'button',
+        position: { x: 290, y: 70 },
+        width: 120, height: 35,
+        backgroundColor: '#4caf50',
+        hover: '#388e3c',
+        textAlign: 'center',
+        verticalAlign: 'middle'
+      } as ENGINE.UIElementConfig,
+      warningBtn: {
+        type: 'button',
+        position: { x: 50, y: 120 },
+        width: 120, height: 35,
+        backgroundColor: '#ff9800',
+        hover: '#f57c00',
+        textAlign: 'center',
+        verticalAlign: 'bottom'
+      } as ENGINE.UIElementConfig,
+      dangerBtn: {
+        type: 'button',
+        position: { x: 170, y: 120 },
+        width: 120, height: 35,
+        backgroundColor: '#f44336',
+        hover: '#d32f2f',
+        textAlign: 'center',
+        verticalAlign: 'bottom'
+      } as ENGINE.UIElementConfig,
+      infoBtn: {
+        type: 'button',
+        position: { x: 290, y: 120 },
+        width: 120, height: 35,
+        backgroundColor: '#00bcd4',
+        hover: '#0097a7',
+        textAlign: 'center',
+        verticalAlign: 'bottom'
+      } as ENGINE.UIElementConfig,
+      buttonStatus: {
+        type: 'text',
+        position: { x: 20, y: 170 },
+        width: 472, height: 60,
+        fontSize: 14,
+        fontColor: '#81c784',
+        textAlign: 'center',
+        padding: 10
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Button Styles', content, uiConfig);
+
+    panel.rootComponent.position.set(0, 1.4, -5.0);
+    console.log('📍 Button Styles panel positioned at (0, 1.4, -5.0)');
+
+    const canvasUI = panel.getComponent(ENGINE.CanvasUIComponent);
+    if (canvasUI) {
+      canvasUI.onElementSelect.add((elementName: string) => {
+        const timestamp = new Date().toLocaleTimeString();
+        canvasUI.updateElement('buttonStatus', `${elementName} clicked at ${timestamp}`);
+        console.log(`🎯 Button Panel: ${elementName} clicked`);
+      });
+    }
+
+    this.world.addActor(panel);
+    console.log('🌍 Button Styles panel added to world');
+  }
+
+  private createScrollingPanel(): void {
+    const longText = 'This is a scrolling text area demonstration. ' +
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
+      'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
+      'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. ' +
+      'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. ' +
+      'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui. ' +
+      'Officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde. ' +
+      'Omnis iste natus error sit voluptatem accusantium doloremque laudantium. ' +
+      'Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et. ' +
+      'Quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam. ' +
+      'Voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia. ' +
+      'Consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.';
+
+    const content: ENGINE.CanvasUIContent = {
+      scrollText: longText,
+      scrollInfo: 'Use VR controllers to scroll through the content above'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      scrollText: {
+        type: 'text',
+        position: { x: 20, y: 60 },
+        width: 472, height: 140,
+        fontSize: 14,
+        fontColor: '#e0e0e0',
+        backgroundColor: '#1e1e1e',
+        padding: 10,
+        overflow: 'scroll'
+      } as ENGINE.UIElementConfig,
+      scrollInfo: {
+        type: 'text',
+        position: { x: 20, y: 210 },
+        width: 472, height: 40,
+        fontSize: 12,
+        fontColor: '#81c784',
+        textAlign: 'center',
+        padding: 8
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Scrolling Content', content, uiConfig);
+
+    panel.rootComponent.position.set(2.5, 1.4, -4.3);
+    panel.rootComponent.rotation.set(0, -0.5, 0);
+    console.log('📍 Scrolling panel positioned at (2.5, 1.4, -4.3)');
+    this.world.addActor(panel);
+    console.log('🌍 Scrolling panel added to world');
+  }
+
+  private createImagesPanel(): void {
+    const content: ENGINE.CanvasUIContent = {
+      imageDemo: '/assets/textures/Checkerboard.png',
+      imageInfo: 'Images can be loaded from URLs and displayed in CanvasUI panels',
+      graphicsNote: 'Graphics are rendered on the canvas texture in real-time'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      imageDemo: {
+        type: 'img',
+        position: { x: 130, y: 70 },
+        width: 200, height: 100
+      } as ENGINE.UIElementConfig,
+      imageInfo: {
+        type: 'text',
+        position: { x: 20, y: 180 },
+        width: 472, height: 30,
+        fontSize: 14,
+        fontColor: '#81c784',
+        textAlign: 'center'
+      } as ENGINE.UIElementConfig,
+      graphicsNote: {
+        type: 'text',
+        position: { x: 20, y: 210 },
+        width: 472, height: 30,
+        fontSize: 12,
+        fontColor: '#b0b0b0',
+        textAlign: 'center'
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Images & Graphics', content, uiConfig);
+
+    panel.rootComponent.position.set(4.5, 1.4, -2.0);
+    panel.rootComponent.rotation.set(0, -0.8, 0);
+    console.log('📍 Images panel positioned at (4.5, 1.4, -2.0)');
+    this.world.addActor(panel);
+    console.log('🌍 Images panel added to world');
+  }
+
+  private createColorPickerPanel(): void {
+    const content: ENGINE.CanvasUIContent = {
+      colorPicker: '#ff0000',
+      selectedColor: 'Selected: #ff0000',
+      rgbValues: 'RGB: 255, 0, 0',
+      hexValue: 'HEX: #ff0000'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      colorPicker: {
+        type: 'picker',
+        position: { x: 50, y: 70 },
+        width: 180, height: 120
+      } as ENGINE.UIElementConfig,
+      selectedColor: {
+        type: 'text',
+        position: { x: 250, y: 70 },
+        width: 200, height: 40,
+        fontSize: 16,
+        fontColor: '#ffffff',
+        backgroundColor: '#ff0000',
+        textAlign: 'center',
+        padding: 8
+      } as ENGINE.UIElementConfig,
+      rgbValues: {
+        type: 'text',
+        position: { x: 250, y: 120 },
+        width: 200, height: 30,
+        fontSize: 14,
+        fontColor: '#e0e0e0',
+        textAlign: 'center'
+      } as ENGINE.UIElementConfig,
+      hexValue: {
+        type: 'text',
+        position: { x: 250, y: 150 },
+        width: 200, height: 30,
+        fontSize: 14,
+        fontColor: '#e0e0e0',
+        textAlign: 'center'
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Color Picker', content, uiConfig);
+
+    panel.rootComponent.position.set(3.5, 1.4, 3.5);
+    panel.rootComponent.rotation.set(0, -2.4, 0);
+    console.log('📍 Color Picker panel positioned at (3.5, 1.4, 3.5)');
+
+    const canvasUI = panel.getComponent(ENGINE.CanvasUIComponent);
+    if (canvasUI) {
+      canvasUI.onElementChange.add((elementName: string, value: unknown) => {
+        if (elementName === 'colorPicker' && typeof value === 'string') {
+          // Convert hex to RGB
+          const hex = value.replace('#', '');
+          const r = parseInt(hex.substring(0, 2), 16);
+          const g = parseInt(hex.substring(2, 4), 16);
+          const b = parseInt(hex.substring(4, 6), 16);
+
+          canvasUI.updateElement('selectedColor', `Selected: ${value}`);
+          canvasUI.updateConfig('selectedColor', 'backgroundColor', value);
+          canvasUI.updateElement('rgbValues', `RGB: ${r}, ${g}, ${b}`);
+          canvasUI.updateElement('hexValue', `HEX: ${value}`);
+
+          console.log(`🎨 Color Picker: Changed to ${value} (RGB: ${r}, ${g}, ${b})`);
+        }
+      });
+    }
+
+    this.world.addActor(panel);
+    console.log('🌍 Color Picker panel added to world');
+  }
+
+
+  private createTextInputPanel(): void {
+    const content: ENGINE.CanvasUIContent = {
+      nameLabel: 'Name:',
+      nameInput: 'Enter your name...',
+      emailLabel: 'Email:',
+      emailInput: 'user@example.com',
+      messageLabel: 'Message:',
+      messageInput: 'Type your message here...',
+      inputStatus: 'Tap any input field to activate VR keyboard'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      nameLabel: {
+        type: 'text',
+        position: { x: 20, y: 60 },
+        width: 60, height: 25,
+        fontSize: 14
+      } as ENGINE.UIElementConfig,
+      nameInput: {
+        type: 'input-text',
+        position: { x: 90, y: 60 },
+        width: 350, height: 30,
+        backgroundColor: '#37474f',
+        borderRadius: 4,
+        padding: 6
+      } as ENGINE.UIElementConfig,
+      emailLabel: {
+        type: 'text',
+        position: { x: 20, y: 100 },
+        width: 60, height: 25,
+        fontSize: 14
+      } as ENGINE.UIElementConfig,
+      emailInput: {
+        type: 'input-text',
+        position: { x: 90, y: 100 },
+        width: 350, height: 30,
+        backgroundColor: '#37474f',
+        borderRadius: 4,
+        padding: 6
+      } as ENGINE.UIElementConfig,
+      messageLabel: {
+        type: 'text',
+        position: { x: 20, y: 140 },
+        width: 60, height: 25,
+        fontSize: 14
+      } as ENGINE.UIElementConfig,
+      messageInput: {
+        type: 'input-text',
+        position: { x: 90, y: 140 },
+        width: 350, height: 50,
+        backgroundColor: '#37474f',
+        borderRadius: 4,
+        padding: 6
+      } as ENGINE.UIElementConfig,
+      inputStatus: {
+        type: 'text',
+        position: { x: 20, y: 200 },
+        width: 472, height: 40,
+        fontSize: 12,
+        fontColor: '#81c784',
+        textAlign: 'center',
+        padding: 8
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Text Input & Keyboard', content, uiConfig);
+
+    panel.rootComponent.position.set(-3.5, 1.4, 3.5);
+    panel.rootComponent.rotation.set(0, 2.4, 0);
+    console.log('📍 Text Input panel positioned at (-3.5, 1.4, 3.5)');
+
+    const canvasUI = panel.getComponent(ENGINE.CanvasUIComponent);
+    if (canvasUI) {
+      canvasUI.onElementChange.add((elementName: string, value: unknown) => {
+        const timestamp = new Date().toLocaleTimeString();
+        canvasUI.updateElement('inputStatus', `${elementName} updated at ${timestamp}`);
+        console.log(`📝 Text Input: ${elementName} = "${value}"`);
+      });
+    }
+
+    this.world.addActor(panel);
+    console.log('🌍 Text Input panel added to world');
+  }
+
+
+
+  private createUIPanel(title: string, content: ENGINE.CanvasUIContent, uiConfig: ENGINE.CanvasUIConfig): ENGINE.Actor {
+    console.log(`🎨 Creating UI panel: "${title}"`);
+
+    const actor = new ENGINE.Actor({
+      rootComponent: new ENGINE.SceneComponent({})
+    });
+
+    // Add title to config with different fonts and weights for each panel
+    const getFontForPanel = (panelTitle: string): { fontFamily: string; fontWeight: string } => {
+      switch (panelTitle) {
+        case 'Header/Main/Footer Layout': return { fontFamily: 'Gochi Hand', fontWeight: 'normal' };
+        case 'Custom Shapes': return { fontFamily: 'Verdana, sans-serif', fontWeight: '600' };
+        case 'Button Styles': return { fontFamily: 'Gochi Hand', fontWeight: 'normal' };
+        case 'Scrolling Content': return { fontFamily: 'Courier New, monospace', fontWeight: '300' };
+        case 'Images & Graphics': return { fontFamily: 'Trebuchet MS, sans-serif', fontWeight: '500' };
+        case 'Text Input & Keyboard': return { fontFamily: 'Gochi Hand', fontWeight: 'normal' };
+        case 'Color Picker': return { fontFamily: 'Palatino, serif', fontWeight: '700' };
+        case 'Debug Panel': return { fontFamily: 'Monaco, monospace', fontWeight: '200' };
+        default: return { fontFamily: 'Arial, sans-serif', fontWeight: 'normal' };
+      }
+    };
+
+    const fontConfig = getFontForPanel(title);
+    const bodyConfig: ENGINE.BodyConfig = {
+      fontFamily: fontConfig.fontFamily,
+      fontWeight: fontConfig.fontWeight,
+      fontSize: 14,
+      backgroundColor: '#1a1a2e',
+      fontColor: '#ffffff',
+      borderRadius: 20,
+      textAlign: 'center'
+    };
+
+    const titleConfig: ENGINE.UIElementConfig = {
+      type: 'text',
+      position: { x: 0, y: 10 },
+      width: 512, height: 35,
+      fontSize: 18,
+      fontColor: '#4fc3f7',
+      textAlign: 'center',
+      backgroundColor: '#0D41A13A',
+      padding: 8,
+      borderRadius: 6
+    } as ENGINE.UIElementConfig;
+
+    const fullConfig: ENGINE.CanvasUIConfig = {
+      body: bodyConfig,
+      title: titleConfig,
+      ...uiConfig
+    };
+
+    const fullContent: ENGINE.CanvasUIContent = {
+      title,
+      ...content
+    };
+
+    console.log(`📋 Panel "${title}" content:`, Object.keys(fullContent));
+    console.log(`🎛️ Panel "${title}" config:`, Object.keys(fullConfig));
+
+    const canvasUIComponent = new ENGINE.CanvasUIComponent({
+      panelSize: { width: 2.0, height: 1.5 },
+      canvasSize: { width: 512, height: 384 },
+      opacity: 0.95,
+      enableVRInteraction: true,
+      content: fullContent,
+      uiConfig: fullConfig
+    });
+
+    actor.addComponent(canvasUIComponent);
+    console.log(`✅ Panel "${title}" CanvasUIComponent added to actor`);
+
+    // The mesh won't be available until CanvasUI is initialized in beginPlay
+    // Let's add a callback to check mesh after initialization
+    setTimeout(() => {
+      const mesh = canvasUIComponent.getObject3D();
+      if (mesh) {
+        mesh.visible = true;
+        console.log(`👁️ Panel "${title}" mesh found after init, visible:`, mesh.visible, 'position:', mesh.position);
+        console.log(`🎨 Panel "${title}" mesh material:`, (mesh as any).material);
+        console.log(`📐 Panel "${title}" mesh geometry:`, (mesh as any).geometry);
+      } else {
+        console.warn(`⚠️ Panel "${title}" mesh still not found after timeout!`);
+      }
+    }, 100);
+
+
+    // Make panel grabbable
+    const grabbableComponent = new ENGINE.VRGrabbableComponent({
+      vrAttachmentInputType: 'grip',
+      attachmentMode: 'hand'
+    });
+    actor.addComponent(grabbableComponent);
+
+    // Add interactable component
+    const interactableComponent = new ENGINE.VRInteractableComponent({
+      vrInteractionRange: 12,
+      vrInteractionButton: ENGINE.XRButton.Trigger
+    });
+    actor.addComponent(interactableComponent);
+
+    console.log(`🎯 Panel "${title}" created successfully`);
+    console.log('📦 Actor position:', actor.rootComponent.position);
+    return actor;
+  }
+
+  private setupButtonEvents(canvasUI: ENGINE.CanvasUIComponent, panelName: string): void {
+    canvasUI.onElementSelect.add((elementName: string) => {
+      const timestamp = new Date().toLocaleTimeString();
+      console.log(`🎯 ${panelName}: Button "${elementName}" clicked at ${timestamp}`);
+    });
+  }
+
+
+
+
+  private createHeadTrackedButtons(): void {
+    console.log('🔧 Creating 4 head-tracked buttons around player...');
+
+    // Create 4 buttons positioned around the player with more spacing and inward rotation
+    const redButton = this.createHeadTrackedButton('🔴 HEAD-TRACKED TL', '#e57373', new THREE.Vector3(-0.8, 0.4, -1.5), new THREE.Euler(0, 0.2, 0));
+    const blueButton = this.createHeadTrackedButton('🔵 HEAD-TRACKED TR', '#64b5f6', new THREE.Vector3(0.8, 0.4, -1.5), new THREE.Euler(0, -0.2, 0));
+    const greenButton = this.createHeadTrackedButton('🟢 HEAD-TRACKED BL', '#81c784', new THREE.Vector3(-0.8, -0.4, -1.5), new THREE.Euler(0, 0.2, 0));
+    const yellowButton = this.createHeadTrackedButton('🟡 HEAD-TRACKED BR', '#fff176', new THREE.Vector3(0.8, -0.4, -1.5), new THREE.Euler(0, -0.2, 0));
+
+    this.testButtons = { red: redButton, blue: blueButton, green: greenButton, yellow: yellowButton };
+
+    // Add to world
+    this.world.addActor(redButton);
+    this.world.addActor(blueButton);
+    this.world.addActor(greenButton);
+    this.world.addActor(yellowButton);
+
+    console.log('✅ 4 head-tracked buttons created and added to camera');
+  }
+
+  private createHeadTrackedButton(text: string, color: string, headTrackingOffset: THREE.Vector3, headTrackingRotation?: THREE.Euler): ENGINE.Actor {
+    const content: ENGINE.CanvasUIContent = {
+      btn: text
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      body: {
+        fontFamily: 'Arial',
+        fontSize: 14,
+        backgroundColor: '#1a1a2e',
+        fontColor: '#ffffff',
+        borderRadius: 10,
+        textAlign: 'center'
+      },
+      btn: {
+        type: 'button',
+        position: { x: 10, y: 10 },
+        width: 280, height: 130,
+        backgroundColor: color,
+        hover: color + 'AA',
+        textAlign: 'center',
+        fontSize: 24,
+        fontColor: '#ffffff'
+      } as ENGINE.UIElementConfig
+    };
+
+    const actor = new ENGINE.Actor({
+      rootComponent: new ENGINE.SceneComponent({})
+    });
+
+    console.log(`🔧 Creating head-tracked button "${text}" with offset:`, headTrackingOffset.toArray());
+
+    const canvasUIComponent = new ENGINE.CanvasUIComponent({
+      panelSize: { width: 0.6, height: 0.3 },
+      canvasSize: { width: 300, height: 150 },
+      opacity: 1.0,
+      enableVRInteraction: true,
+      enableHeadTracking: true,
+      headTrackingOffset,
+      headTrackingRotation,
+      content,
+      uiConfig
+    });
+
+    console.log(`✅ Head-tracked button "${text}" component created with enableHeadTracking: true`);
+
+    canvasUIComponent.onElementSelect.add(() => {
+      console.log(`🎯 ${text} button clicked!`);
+    });
+
+    actor.addComponent(canvasUIComponent);
+    return actor;
+  }
+
+  protected override tick(tickTime: ENGINE.TickTime): void {
+    super.tick(tickTime);
+    this.updateFPS(tickTime);
+    this.updateDebugPanel();
+  }
+
+  private updateFPS(tickTime: ENGINE.TickTime): void {
+    this.fpsTracker.frameCount++;
+    const currentTime = tickTime.currentTimeMS;
+
+    if (currentTime - this.fpsTracker.lastTime >= 1000) {
+      this.fpsTracker.fps = Math.round(this.fpsTracker.frameCount * 1000 / (currentTime - this.fpsTracker.lastTime));
+      this.fpsTracker.frameCount = 0;
+      this.fpsTracker.lastTime = currentTime;
+    }
+  }
+
+  private updateDebugPanel(): void {
+    if (!this.debugPanel) return;
+
+    const canvasUI = this.debugPanel.getComponent(ENGINE.CanvasUIComponent);
+    if (!canvasUI) return;
+
+    if (!this.testButtons) {
+      canvasUI.updateElement('spherePositions', 'Test buttons not created yet...');
+      return;
+    }
+
+    // Get camera info for debugging
+    const xrCamera = this.world.getFirstPlayerPawn()?.getCamera();
+    const xrCamPos = xrCamera ? xrCamera.position : new THREE.Vector3();
+    const xrCamVisible = xrCamera ? xrCamera.visible : false;
+
+    // Get world positions of buttons
+    const redPos = this.testButtons.red.getWorldPosition();
+    const bluePos = this.testButtons.blue.getWorldPosition();
+    const greenPos = this.testButtons.green.getWorldPosition();
+    const yellowPos = this.testButtons.yellow.getWorldPosition();
+
+    // Check if head tracking is actually working
+    const redComponent = this.testButtons.red.getComponent(ENGINE.CanvasUIComponent);
+    const headTrackingEnabled = redComponent?.options.enableHeadTracking ?? false;
+    const redCanvasUI = redComponent?.getCanvasUI();
+    const isAttachedToCamera = redCanvasUI?.mesh?.parent === xrCamera;
+
+    const debugText = `FPS: ${this.fpsTracker.fps}
+XR Cam: (${xrCamPos.x.toFixed(2)}, ${xrCamPos.y.toFixed(2)}, ${xrCamPos.z.toFixed(2)})
+XR Cam Visible: ${xrCamVisible}
+XR Presenting: ${this.isXRPresenting() ?? false}
+Head Tracking: ${headTrackingEnabled}
+Attached to Camera: ${isAttachedToCamera} Parent is: ${redCanvasUI?.mesh?.parent?.name}
+
+🔴 Red Button: (${redPos.x.toFixed(2)}, ${redPos.y.toFixed(2)}, ${redPos.z.toFixed(2)})
+🔵 Blue Button: (${bluePos.x.toFixed(2)}, ${bluePos.y.toFixed(2)}, ${bluePos.z.toFixed(2)})
+🟢 Green Button: (${greenPos.x.toFixed(2)}, ${greenPos.y.toFixed(2)}, ${greenPos.z.toFixed(2)})
+🟡 Yellow Button: (${yellowPos.x.toFixed(2)}, ${yellowPos.y.toFixed(2)}, ${yellowPos.z.toFixed(2)})`;
+
+    canvasUI.updateElement('spherePositions', debugText);
+  }
+
+
+  private createDebugPanel(): void {
+    const content: ENGINE.CanvasUIContent = {
+      debugTitle: 'Debug Information',
+      spherePositions: 'Sphere positions will update here...',
+      instructions: 'This panel shows real-time sphere positions'
+    };
+
+    const uiConfig: ENGINE.CanvasUIConfig = {
+      debugTitle: {
+        type: 'text',
+        position: { x: 0, y: 60 },
+        width: 512, height: 30,
+        fontSize: 16,
+        fontColor: '#ff6b35',
+        textAlign: 'center',
+        backgroundColor: '#1a1a1a',
+        padding: 8
+      } as ENGINE.UIElementConfig,
+      spherePositions: {
+        type: 'text',
+        position: { x: 20, y: 100 },
+        width: 472, height: 120,
+        fontSize: 12,
+        fontColor: '#e0e0e0',
+        backgroundColor: '#2e2e2e',
+        padding: 10,
+        fontFamily: 'monospace'
+      } as ENGINE.UIElementConfig,
+      instructions: {
+        type: 'text',
+        position: { x: 20, y: 230 },
+        width: 472, height: 30,
+        fontSize: 11,
+        fontColor: '#81c784',
+        textAlign: 'center',
+        padding: 5
+      } as ENGINE.UIElementConfig
+    };
+
+    const panel = this.createUIPanel('Debug Panel', content, uiConfig);
+    this.debugPanel = panel;
+
+    // Position above and in front of player
+    panel.rootComponent.position.set(0, 3.2, -4.0);
+    console.log('📍 Debug panel positioned at (0, 3.2, -4.0) - above and in front');
+    this.world.addActor(panel);
+    console.log('🌍 Debug panel added to world');
+  }
+
+
+  protected override postStart(): void {
+    console.log('🚀 VR UI Demo ready! Put on your VR headset and explore the different UI panels.');
+    console.log('🔧 Creating head-tracked buttons with enableHeadTracking: true...');
+    this.createHeadTrackedButtons();
+    console.log('🎯 Test buttons should be visible: red in front, blue on left, green on right, yellow behind');
+    console.log('🌐 Creating wireframe sphere attached to XR camera...');
+    this.createWireframeSphere();
+  }
+
+  private createWireframeSphere(): void {
+    const actor = new ENGINE.Actor({
+      rootComponent: new ENGINE.MeshComponent({
+        geometry: new THREE.SphereGeometry(3, 32, 16),
+        material: new THREE.MeshBasicMaterial({
+          color: 0x00ff00,
+          wireframe: true,
+          transparent: true,
+          opacity: 0.3
+        })
+      })
+    });
+
+    this.wireframeSphere = actor;
+
+    // Attach to XR camera instead of copying position
+    const xrCamera = this.world.getFirstPlayerPawn()?.getCamera();
+    if (xrCamera) {
+      xrCamera.add(actor.rootComponent);
+      console.log('✅ 1m wireframe sphere attached to XR camera');
+    }
+  }
+}