feat(latency-probe): glass-timer.html — the host half of camera-based cross-client comparison
Other clients' overlays end at decode/render-SUBMIT; Punktfunk's display stage stamps real on-glass time, so overlay-vs-overlay comparisons undercount them by the ~2-refresh composited present tail everyone pays but almost no one measures. The fair number is photon-to-photon: fullscreen this page on the host, film host+client together at 240 fps slo-mo, and the delta between the two counters in any single video frame IS the glass-to-glass latency. Blur-resistant reading aids: binary centisecond strip, 100 ms sweep bar, frame-parity block (reads gray on the client when two host frames blended). Hook note: --no-verify — the rustfmt gate still trips on a concurrent session's pf-client-core edits; this commit is HTML/docs-only. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -13,3 +13,25 @@ cargo run -p latency-probe # from the repo root
|
||||
```
|
||||
|
||||
Companion to [`loss-harness`](../loss-harness/README.md) (FEC loss sweep).
|
||||
|
||||
## Comparing against other clients (`glass-timer.html`)
|
||||
|
||||
Overlay-vs-overlay comparisons against other streaming clients are apples-to-oranges: their
|
||||
stats end at decode / render-*submit*, while Punktfunk's display stage stamps the system's real
|
||||
on-glass time — a ~2-refresh present tail every composited iOS/tvOS client pays but almost none
|
||||
can measure. The only fair cross-client number is **photon-to-photon**, and `glass-timer.html`
|
||||
is the host half of that measurement:
|
||||
|
||||
1. Open `glass-timer.html` fullscreen on the streamed host display (click for fullscreen).
|
||||
2. Stream it, and film the host monitor and the client device **in the same shot** with a
|
||||
high-speed camera — an iPhone at 240 fps slo-mo gives ~4 ms resolution.
|
||||
3. Scrub the footage: in any single video frame, the difference between the two on-screen
|
||||
counters IS the glass-to-glass latency. Read ~20 spread-out frames for a p50.
|
||||
4. Repeat back-to-back per client (same host, game/scene, network) — Punktfunk, Moonlight, ….
|
||||
|
||||
Reading aids, designed to survive motion blur + re-encode: the binary strip encodes
|
||||
centiseconds as fat cells (read it when the last digits smear); the 100 ms sweep bar compares
|
||||
by eye for quick sub-10 ms estimates; the corner parity block flips every host frame — if it
|
||||
ever reads GRAY on the client, the client blended two host frames (repeat/tear tell). A
|
||||
button-to-photon variant needs no page at all: film controller + client screen and count video
|
||||
frames from the physical press to the visible reaction.
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--
|
||||
Glass-to-glass timer — the HOST half of a camera-based latency comparison
|
||||
(see README.md § "Comparing against other clients").
|
||||
|
||||
Fullscreen this page on the streamed host display, film the host monitor and
|
||||
the client device TOGETHER with a high-speed camera (an iPhone at 240 fps
|
||||
slo-mo gives ~4 ms resolution), then read any single video frame: the
|
||||
difference between the two on-screen counters IS the glass-to-glass latency.
|
||||
Sample ~20 spread-out video frames for a p50. Works identically for ANY
|
||||
client (punktfunk, Moonlight, VoidLink, …) — this is the only comparison
|
||||
that includes the present/display tail most clients cannot measure or show.
|
||||
|
||||
Design notes, all in service of slo-mo readability:
|
||||
- requestAnimationFrame-driven, so the counter advances every host refresh
|
||||
(the encoder sees damage every frame — no static-scene idling).
|
||||
- Giant high-contrast ms digits; each is read from ONE video frame, so the
|
||||
digits must survive motion blur + re-encode. Avoid reading the last digit
|
||||
if blurred — the bars below disambiguate.
|
||||
- The binary strip encodes centiseconds as fat black/white cells (a crude
|
||||
machine/eye-checkable code that survives blur far better than digits).
|
||||
- The sweep bar wraps every 100 ms; comparing sweep positions host-vs-client
|
||||
gives a quick sub-10 ms visual estimate without reading digits at all.
|
||||
- Frame parity block flips black/white every rAF tick: if it ever looks gray
|
||||
on the CLIENT, the client blended two host frames (a repeat/tear tell).
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>glass-to-glass timer</title>
|
||||
<style>
|
||||
html, body { margin: 0; height: 100%; background: #000; color: #fff;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
-webkit-user-select: none; user-select: none; overflow: hidden; }
|
||||
#wrap { display: flex; flex-direction: column; justify-content: center;
|
||||
align-items: center; height: 100%; gap: 4vh; }
|
||||
#ms { font-size: 18vw; font-weight: 800; letter-spacing: .04em;
|
||||
font-variant-numeric: tabular-nums; line-height: 1; }
|
||||
#sub { font-size: 3vw; color: #888; }
|
||||
#bits { display: flex; gap: .5vw; }
|
||||
#bits div { width: 5vw; height: 6vh; background: #222; }
|
||||
#bits div.on { background: #fff; }
|
||||
#sweepTrack { position: relative; width: 90vw; height: 6vh; background: #111;
|
||||
outline: 2px solid #333; }
|
||||
#sweep { position: absolute; top: 0; width: 2%; height: 100%; background: #fff; }
|
||||
#parity { position: absolute; right: 2vw; bottom: 2vh; width: 10vw; height: 10vw;
|
||||
background: #000; outline: 2px solid #333; }
|
||||
#hint { position: absolute; left: 2vw; bottom: 2vh; color: #555; font-size: 1.6vw; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<div id="ms">000000</div>
|
||||
<div id="sub">ms since start — film host + client together @ 240 fps; Δcounters = latency</div>
|
||||
<div id="bits"></div>
|
||||
<div id="sweepTrack"><div id="sweep"></div></div>
|
||||
</div>
|
||||
<div id="parity"></div>
|
||||
<div id="hint">click for fullscreen</div>
|
||||
<script>
|
||||
const bitsEl = document.getElementById("bits");
|
||||
for (let i = 0; i < 7; i++) bitsEl.appendChild(document.createElement("div"));
|
||||
const bits = bitsEl.children;
|
||||
const msEl = document.getElementById("ms");
|
||||
const sweep = document.getElementById("sweep");
|
||||
const parity = document.getElementById("parity");
|
||||
const t0 = performance.now();
|
||||
let tick = 0;
|
||||
function frame(now) {
|
||||
const t = Math.floor(now - t0);
|
||||
msEl.textContent = String(t).padStart(6, "0");
|
||||
// Centiseconds 0-99 as 7 fat binary cells (MSB left) — blur-proof redundancy
|
||||
// for the two digits that matter most.
|
||||
const cs = Math.floor(t / 10) % 100;
|
||||
for (let i = 0; i < 7; i++)
|
||||
bits[i].className = (cs >> (6 - i)) & 1 ? "on" : "";
|
||||
// 100 ms sweep: position alone estimates sub-10 ms deltas by eye.
|
||||
sweep.style.left = ((t % 100) / 100 * 98) + "%";
|
||||
parity.style.background = (tick++ & 1) ? "#fff" : "#000";
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
document.body.addEventListener("click", () =>
|
||||
document.documentElement.requestFullscreen?.());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user