diff --git a/devtools/web/src/devtools-manager.ts b/devtools/web/src/devtools-manager.ts index bd14241d..ebb22ba8 100644 --- a/devtools/web/src/devtools-manager.ts +++ b/devtools/web/src/devtools-manager.ts @@ -58,6 +58,20 @@ export class DevtoolsManager { */ private _bufferedData = new BufferedRuntimeData(); + private _fpsBuffer : number[] = [0,0,0,0,0,0,0,0,0,0]; + private _fpsBufferIdx = 0; + //calculate an average FPS for the last 10 frames + private _calcAvgFPS = () => { + let sum = this._fpsBuffer[0]; + for (let i = 1; i < 10; i++) + sum += this._fpsBuffer[i]; + return Math.floor(sum / 10); + } + private _nextFPSBufferIdx = () => { + (this._fpsBufferIdx == 9) ? this._fpsBufferIdx = 0 : this._fpsBufferIdx++; + return this._fpsBufferIdx; + } + /** * Notifies the devtools that the web runtime has completed an update. */ @@ -66,12 +80,12 @@ export class DevtoolsManager { deltaFrame: number ) => { if (this._enabled) { - const fps = Math.floor(1_000 / deltaFrame); + this._fpsBuffer[this._nextFPSBufferIdx()] = 1_000 / deltaFrame; this._bufferedData.update(runtimeInfo.data); this._notifyUpdateCompleted( runtimeInfo.data, runtimeInfo.wasmBufferByteLen, - fps + this._calcAvgFPS() ); } }; diff --git a/runtimes/web/src/ui/app.ts b/runtimes/web/src/ui/app.ts index 9a9602c6..21a9819d 100644 --- a/runtimes/web/src/ui/app.ts +++ b/runtimes/web/src/ui/app.ts @@ -429,6 +429,8 @@ export class App extends LitElement { // When we should perform the next update let timeNextUpdate = performance.now(); + // Track the timestamp of the last frame + let lastTimeFrameStart = timeNextUpdate; const onFrame = (timeFrameStart: number) => { requestAnimationFrame(onFrame); @@ -480,8 +482,9 @@ export class App extends LitElement { runtime.composite(); if (import.meta.env.DEV) { - // FIXME(2022-08-20): Pass the correct FPS for display - devtoolsManager.updateCompleted(runtime, 1000/60); + // FIXED(2023-12-13): Pass the correct FPS for display + devtoolsManager.updateCompleted(runtime, timeFrameStart - lastTimeFrameStart); + lastTimeFrameStart = timeFrameStart; } } }