From 49242b92b9c9d1411b729b52f9b520f010ae39dd Mon Sep 17 00:00:00 2001 From: Frank Weindel <6070611+frank-weindel@users.noreply.github.com> Date: Wed, 13 Dec 2023 11:59:47 -0500 Subject: [PATCH 1/2] Examples: Implemented a statistics summary when `fps` is set --- examples/README.md | 4 +++- examples/index.ts | 41 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/examples/README.md b/examples/README.md index 669edb5c..8819d51e 100644 --- a/examples/README.md +++ b/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 30 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) diff --git a/examples/index.ts b/examples/index.ts index 73113715..d4e7e119 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -211,8 +211,49 @@ async function initRenderer( driver, ); + /** + * FPS sample captured + */ + const fpsSamples: number[] = []; + /** + * Number of samples to capture before calculating FPS stats + */ + const fpsSampleCount = 30; + /** + * Number of samples to skip before starting to capture FPS samples. + */ + const fpsSampleSkipCount = 10; + /** + * FPS sample index + */ + let fpsSampleIndex = 0; renderer.on('fpsUpdate', (target: RendererMain, fps: number) => { console.log(`FPS: ${fps}`); + const captureSample = fpsSampleIndex >= fpsSampleSkipCount; + if (captureSample) { + fpsSamples.push(fps); + const calculateStats = + (fpsSampleIndex - fpsSampleSkipCount + 1) % fpsSampleCount === 0; + if (fpsSampleIndex !== fpsSampleSkipCount && calculateStats) { + const sortedSamples = fpsSamples.sort((a, b) => a - b); + const averageFps = + fpsSamples.reduce((a, b) => a + b, 0) / fpsSamples.length; + const p99Fps = sortedSamples[Math.floor(fpsSamples.length * 0.99)]!; + const p95Fps = sortedSamples[Math.floor(fpsSamples.length * 0.95)]!; + const p75Fps = sortedSamples[Math.floor(fpsSamples.length * 0.75)]!; + const medianFps = sortedSamples[Math.floor(fpsSamples.length * 0.5)]!; + console.log(`---------------------------------`); + console.log(`Average FPS: ${averageFps}`); + console.log(`Median FPS: ${medianFps}`); + console.log(`P75 FPS: ${p75Fps}`); + console.log(`P95 FPS: ${p95Fps}`); + console.log(`P99 FPS: ${p99Fps}`); + console.log(`Num samples: ${fpsSamples.length}`); + console.log(`---------------------------------`); + fpsSamples.length = 0; + } + } + fpsSampleIndex++; }); await renderer.init(); From 206017234bb16d18128c47de9329d7efa48bf03c Mon Sep 17 00:00:00 2001 From: Frank Weindel <6070611+frank-weindel@users.noreply.github.com> Date: Thu, 14 Dec 2023 14:00:07 -0500 Subject: [PATCH 2/2] Better statistics and 100 sample size --- examples/README.md | 2 +- examples/index.ts | 28 +++++++++++++++++----------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/examples/README.md b/examples/README.md index 8819d51e..cd159900 100644 --- a/examples/README.md +++ b/examples/README.md @@ -48,7 +48,7 @@ pnpm watch - Resolution (height) of to render the test at (in logical pixels) - `fps` (boolean, default: "false") - Whether or not to log the latest FPS sample to the console every 1 second. - - After skipping the first 10 samples, every 30 samples after that will result + - 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. diff --git a/examples/index.ts b/examples/index.ts index d4e7e119..fb121016 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -218,7 +218,7 @@ async function initRenderer( /** * Number of samples to capture before calculating FPS stats */ - const fpsSampleCount = 30; + const fpsSampleCount = 100; /** * Number of samples to skip before starting to capture FPS samples. */ @@ -227,32 +227,38 @@ async function initRenderer( * 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); - const calculateStats = - (fpsSampleIndex - fpsSampleSkipCount + 1) % fpsSampleCount === 0; - if (fpsSampleIndex !== fpsSampleSkipCount && calculateStats) { + fpsSamplesLeft--; + if (fpsSamplesLeft === 0) { const sortedSamples = fpsSamples.sort((a, b) => a - b); const averageFps = fpsSamples.reduce((a, b) => a + b, 0) / fpsSamples.length; - const p99Fps = sortedSamples[Math.floor(fpsSamples.length * 0.99)]!; - const p95Fps = sortedSamples[Math.floor(fpsSamples.length * 0.95)]!; - const p75Fps = sortedSamples[Math.floor(fpsSamples.length * 0.75)]!; + 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(`P75 FPS: ${p75Fps}`); - console.log(`P95 FPS: ${p95Fps}`); - console.log(`P99 FPS: ${p99Fps}`); + 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++; });