Add performance HUD panel

apps/viewer/src/GameViewer.ts

@@ -82,6 +82,17 @@ interface NetworkStats {
   throughputSamples: NetworkSample[];
 }
 
+interface PerformanceSample {
+  atMs: number;
+  frameMs: number;
+}
+
+interface PerformanceStats {
+  frameSamples: PerformanceSample[];
+  lastFrameMs: number;
+  lastPanelUpdateAtMs: number;
+}
+
 interface PresentationEntry {
   detail: THREE.Object3D;
   icon: THREE.Sprite;
@@ -137,6 +148,7 @@ export class GameViewer {
   private readonly detailBodyEl: HTMLDivElement;
   private readonly factionStripEl: HTMLDivElement;
   private readonly networkPanelEl: HTMLDivElement;
+  private readonly performancePanelEl: HTMLDivElement;
   private readonly errorEl: HTMLDivElement;
   private readonly marqueeEl: HTMLDivElement;
 
@@ -153,6 +165,11 @@ export class GameViewer {
     streamConnected: false,
     throughputSamples: [],
   };
+  private readonly performanceStats: PerformanceStats = {
+    frameSamples: [],
+    lastFrameMs: 0,
+    lastPanelUpdateAtMs: 0,
+  };
 
   private selectedItems: Selectable[] = [];
   private worldSignature = "";
@@ -184,20 +201,26 @@ export class GameViewer {
     const hud = document.createElement("div");
     hud.className = "viewer-shell";
     hud.innerHTML = `
-      <header class="topbar">
-        <h2>Game</h2>
-        <div class="topbar-body">Bootstrapping</div>
-      </header>
+      <div class="left-panel-stack">
+        <header class="topbar">
+          <h2>Game</h2>
+          <div class="topbar-body">Bootstrapping</div>
+        </header>
+        <aside class="network-panel">
+          <h2>Network</h2>
+          <div class="network-body">Waiting for snapshot.</div>
+        </aside>
+        <aside class="performance-panel">
+          <h2>Performance</h2>
+          <div class="performance-body">Waiting for frame samples.</div>
+        </aside>
+      </div>
       <aside class="details-panel">
         <h2>Selection</h2>
         <h3 class="detail-title">Nothing selected</h3>
         <div class="detail-body">Waiting for the authoritative snapshot.</div>
         <div class="error-strip" hidden></div>
       </aside>
-      <aside class="network-panel">
-        <h2>Network</h2>
-        <div class="network-body">Waiting for snapshot.</div>
-      </aside>
       <section class="faction-strip"></section>
       <div class="marquee-box"></div>
     `;
@@ -207,6 +230,7 @@ export class GameViewer {
     this.detailBodyEl = hud.querySelector(".detail-body") as HTMLDivElement;
     this.factionStripEl = hud.querySelector(".faction-strip") as HTMLDivElement;
     this.networkPanelEl = hud.querySelector(".network-body") as HTMLDivElement;
+    this.performancePanelEl = hud.querySelector(".performance-body") as HTMLDivElement;
     this.errorEl = hud.querySelector(".error-strip") as HTMLDivElement;
     this.marqueeEl = hud.querySelector(".marquee-box") as HTMLDivElement;
 
@@ -637,6 +661,7 @@ export class GameViewer {
   }
 
   private render() {
+    const frameStartedAtMs = performance.now();
     const delta = Math.min(this.clock.getDelta(), 0.033);
     this.updateCamera(delta);
     this.updatePlanetPresentation();
@@ -644,6 +669,8 @@ export class GameViewer {
     this.updateNetworkPanel();
     this.applyZoomPresentation();
     this.renderer.render(this.scene, this.camera);
+    this.recordPerformanceStats(performance.now() - frameStartedAtMs);
+    this.updatePerformancePanel();
   }
 
   private updateCamera(delta: number) {
@@ -762,6 +789,56 @@ export class GameViewer {
     ].join("\n");
   }
 
+  private recordPerformanceStats(frameMs: number) {
+    const now = performance.now();
+    this.performanceStats.lastFrameMs = frameMs;
+    this.performanceStats.frameSamples.push({ atMs: now, frameMs });
+    const cutoff = now - 4000;
+    this.performanceStats.frameSamples = this.performanceStats.frameSamples.filter((sample) => sample.atMs >= cutoff);
+  }
+
+  private updatePerformancePanel() {
+    const now = performance.now();
+    if (
+      this.performanceStats.lastPanelUpdateAtMs > 0 &&
+      now - this.performanceStats.lastPanelUpdateAtMs < 250
+    ) {
+      return;
+    }
+
+    const samples = this.performanceStats.frameSamples;
+    const elapsedWindowSeconds = samples.length > 1
+      ? Math.max((samples[samples.length - 1].atMs - samples[0].atMs) / 1000, 0.25)
+      : 1;
+    const averageFrameMs = samples.length > 0
+      ? samples.reduce((sum, sample) => sum + sample.frameMs, 0) / samples.length
+      : 0;
+    const worstFrameMs = samples.length > 0
+      ? samples.reduce((max, sample) => Math.max(max, sample.frameMs), 0)
+      : 0;
+    const fps = samples.length > 1
+      ? (samples.length - 1) / elapsedWindowSeconds
+      : 0;
+    const recentLowFps = averageFrameMs > 0 ? 1000 / Math.max(worstFrameMs, averageFrameMs) : 0;
+    const renderInfo = this.renderer.info;
+
+    this.performancePanelEl.textContent = [
+      `fps:         ${fps.toFixed(1)}`,
+      `frame avg:   ${averageFrameMs.toFixed(2)} ms`,
+      `frame last:  ${this.performanceStats.lastFrameMs.toFixed(2)} ms`,
+      `frame worst: ${worstFrameMs.toFixed(2)} ms`,
+      `recent low:  ${recentLowFps.toFixed(1)}`,
+      `draw calls:  ${renderInfo.render.calls}`,
+      `triangles:   ${renderInfo.render.triangles}`,
+      `points:      ${renderInfo.render.points}`,
+      `lines:       ${renderInfo.render.lines}`,
+      `geometries:  ${renderInfo.memory.geometries}`,
+      `textures:    ${renderInfo.memory.textures}`,
+      `pixel ratio: ${this.renderer.getPixelRatio().toFixed(2)}`,
+    ].join("\n");
+    this.performanceStats.lastPanelUpdateAtMs = now;
+  }
+
   private updateShipPresentation() {
     const now = performance.now();
     for (const visual of this.shipVisuals.values()) {