Function updateMetricsDisplay

examples/worker-rendering/main.ts:446–496

(metrics: PerformanceMetrics)

}

function updateMetricsDisplay(metrics: PerformanceMetrics): void {
  // FPS Display with color coding
  const fps = metrics.fps;
  const fpsEl = document.getElementById('fpsDisplay');
  if (fpsEl) {
    fpsEl.textContent = fps.toFixed(1);
    
    // Update quality indicator
    if (fps > FPS_SMOOTH_THRESHOLD) {
      fpsEl.setAttribute('data-quality', 'smooth');
    } else if (fps > FPS_MEDIUM_THRESHOLD) {
      fpsEl.setAttribute('data-quality', 'medium');
    } else {
      fpsEl.setAttribute('data-quality', 'choppy');
    }
  }

  // Frame Time Stats
  const ft = metrics.frameTimeStats;
  setElementText(
    'frameTimeDisplay',
    `${ft.min.toFixed(1)} / ${ft.avg.toFixed(1)} / ${ft.max.toFixed(1)} / ${ft.p95.toFixed(1)} / ${ft.p99.toFixed(1)} ms`
  );

  // Memory Stats
  if (metrics.memory.used > 0) {
    setElementText(
      'memoryDisplay',
      `${formatBytes(metrics.memory.used)} / ${formatBytes(metrics.memory.peak)}`
    );
  } else {
    setElementText('memoryDisplay', 'N/A');
  }

  // Frame Drops
  setElementText(
    'frameDropsDisplay',
    `${metrics.frameDrops.totalDrops} / ${metrics.frameDrops.consecutiveDrops}`
  );

  // Total Frames
  setElementText('totalFramesDisplay', formatNumber(metrics.totalFrames));

  // Elapsed Time
  setElementText('elapsedDisplay', formatDuration(metrics.elapsedTime));

  // Update frame time graph
  if (frameGraph) {
    frameGraph.addFrame(ft.avg);
  }
}

function clearMetricsDisplay(): void {
  setElementText('fpsDisplay', '--');