Examples: Implemented a statistics summary when fps is set (#109)

When `fps` is set on a run of an Example Test, skipping the first 10 fps
samples, every 30 fps samples print out a statistics summary of those
samples.

Example:
```
---------------------------------
Average FPS: 27.25
Median FPS: 26
P01 FPS: 19
P05 FPS: 26
P25 FPS: 26
Std Dev FPS: 2.7798381247835278
Num samples: 100
---------------------------------
```

Author: frank-weindel

examples/README.md

@@ -47,7 +47,9 @@ pnpm watch
 - `resolution` (number, default: 720)
   - Resolution (height) of to render the test at (in logical pixels)
 - `fps` (boolean, default: "false")
-  - Whether or not to log the latest FPS to the console every 1 second.
+  - Whether or not to log the latest FPS sample to the console every 1 second.
+  - After skipping the first 10 samples, every 100 samples after that will result
+    in a statistics summary printed to the console.
 - `ppr` (number, default: 1)
   - Device physical pixel ratio.
 - `multiplier` (number, default: 1)

examples/index.ts

@@ -211,8 +211,55 @@ async function initRenderer(
     driver,
   );
 
+  /**
+   * FPS sample captured
+   */
+  const fpsSamples: number[] = [];
+  /**
+   * Number of samples to capture before calculating FPS stats
+   */
+  const fpsSampleCount = 100;
+  /**
+   * Number of samples to skip before starting to capture FPS samples.
+   */
+  const fpsSampleSkipCount = 10;
+  /**
+   * FPS sample index
+   */
+  let fpsSampleIndex = 0;
+  let fpsSamplesLeft = fpsSampleCount;
   renderer.on('fpsUpdate', (target: RendererMain, fps: number) => {
-    console.log(`FPS: ${fps}`);
+    const captureSample = fpsSampleIndex >= fpsSampleSkipCount;
+    if (captureSample) {
+      fpsSamples.push(fps);
+      fpsSamplesLeft--;
+      if (fpsSamplesLeft === 0) {
+        const sortedSamples = fpsSamples.sort((a, b) => a - b);
+        const averageFps =
+          fpsSamples.reduce((a, b) => a + b, 0) / fpsSamples.length;
+        const p01Fps = sortedSamples[Math.floor(fpsSamples.length * 0.01)]!;
+        const p05Fps = sortedSamples[Math.floor(fpsSamples.length * 0.05)]!;
+        const p25Fps = sortedSamples[Math.floor(fpsSamples.length * 0.25)]!;
+        const medianFps = sortedSamples[Math.floor(fpsSamples.length * 0.5)]!;
+        const stdDevFps = Math.sqrt(
+          fpsSamples.reduce((a, b) => a + (b - averageFps) ** 2, 0) /
+            fpsSamples.length,
+        );
+        console.log(`---------------------------------`);
+        console.log(`Average FPS: ${averageFps}`);
+        console.log(`Median FPS: ${medianFps}`);
+        console.log(`P01 FPS: ${p01Fps}`);
+        console.log(`P05 FPS: ${p05Fps}`);
+        console.log(`P25 FPS: ${p25Fps}`);
+        console.log(`Std Dev FPS: ${stdDevFps}`);
+        console.log(`Num samples: ${fpsSamples.length}`);
+        console.log(`---------------------------------`);
+        fpsSamples.length = 0;
+        fpsSamplesLeft = fpsSampleCount;
+      }
+    }
+    console.log(`FPS: ${fps} (samples left: ${fpsSamplesLeft})`);
+    fpsSampleIndex++;
   });
 
   await renderer.init();