Made of little things.

/** Debug overlay: frame time, sim time and draw stats summed over every split-screen view. */
import type { WebGLRenderer } from 'three';

export function createPerfOverlay(renderer: WebGLRenderer, parent: HTMLElement) {
  // Views render one after another, so count draw stats across the whole frame.
  renderer.info.autoReset = false;
  const panel = document.createElement('pre');
  panel.className = 'perf';
  panel.hidden = true;
  parent.append(panel);
  window.addEventListener('keydown', (event) => {
    if (event.code === 'Backquote' && !event.repeat) panel.hidden = !panel.hidden;
  });

  let frames = 0;
  let frameMs = 0;
  let simMs = 0;
  let calls = 0;
  let triangles = 0;
  let windowStart = performance.now();
  let frameStart = 0;
  let lastStart = 0;
  let worstGap = 0;
  let simStart = 0;

  return {
    begin() {
      renderer.info.reset();
      frameStart = performance.now();
      if (lastStart) worstGap = Math.max(worstGap, frameStart - lastStart);
      lastStart = frameStart;
    },
    simBegin() {
      simStart = performance.now();
    },
    simEnd() {
      simMs += performance.now() - simStart;
    },
    end() {
      const now = performance.now();
      frames++;
      frameMs += now - frameStart;
      calls += renderer.info.render.calls;
      triangles += renderer.info.render.triangles;
      if (now - windowStart < 500) return;
      if (!panel.hidden)
        panel.textContent = [
          `${((frames * 1000) / (now - windowStart)).toFixed(0)} fps`,
          `worst ${worstGap.toFixed(1)} ms`,
          `cpu   ${(frameMs / frames).toFixed(2)} ms`,
          `sim   ${(simMs / frames).toFixed(2)} ms`,
          `calls ${(calls / frames).toFixed(0)}`,
          `tris  ${(triangles / frames / 1000).toFixed(1)}k`,
        ].join('\n');
      frames = frameMs = simMs = calls = triangles = worstGap = 0;
      windowStart = now;
    },
  };
}