Inspector: Improve precision (#32007)

* improve fps

* updates

Author: sunag

examples/jsm/inspector/Inspector.js

@@ -5,13 +5,11 @@ import { Performance } from './tabs/Performance.js';
 import { Console } from './tabs/Console.js';
 import { Parameters } from './tabs/Parameters.js';
 import { Viewer } from './tabs/Viewer.js';
-import { setText, ease, splitPath, splitCamelCase } from './ui/utils.js';
+import { setText, splitPath, splitCamelCase } from './ui/utils.js';
 
 import { QuadMesh, NodeMaterial, CanvasTarget, setConsoleFunction, REVISION, NoToneMapping } from 'three/webgpu';
 import { renderOutput, vec3, vec4 } from 'three/tsl';
 
-const EASE_FACTOR = 0.1;
-
 class Inspector extends RendererInspector {
 
 	constructor() {
@@ -40,9 +38,6 @@ class Inspector extends RendererInspector {
 
 		//
 
-		this.deltaTime = 0;
-		this.softDeltaTime = 0;
-
 		this.statsData = new Map();
 		this.canvasNodes = new Map();
 		this.profiler = profiler;
@@ -60,7 +55,7 @@ class Inspector extends RendererInspector {
 			},
 			graph: {
 				needsUpdate: false,
-				duration: .05,
+				duration: .02,
 				time: 0
 			}
 		};
@@ -228,18 +223,29 @@ class Inspector extends RendererInspector {
 
 			data.cpu = stats.cpu;
 			data.gpu = stats.gpu;
+			data.stats = [];
 
 			data.initialized = true;
 
 		}
 
-		// TODO: Smooth values
+		// store stats
+
+		if ( data.stats.length > this.maxFrames ) {
+
+			data.stats.shift();
+
+		}
+
+		data.stats.push( stats );
+
+		// compute averages
 
-		data.cpu = stats.cpu; // ease( .. )
-		data.gpu = stats.gpu;
+		data.cpu = this.getAverageDeltaTime( data, 'cpu' );
+		data.gpu = this.getAverageDeltaTime( data, 'gpu' );
 		data.total = data.cpu + data.gpu;
 
-		//
+		// children
 
 		for ( const child of stats.children ) {
 
@@ -330,6 +336,33 @@ class Inspector extends RendererInspector {
 
 	}
 
+	getAverageDeltaTime( statsData, property, frames = this.fps ) {
+
+		const statsArray = statsData.stats;
+
+		let sum = 0;
+		let count = 0;
+
+		for ( let i = statsArray.length - 1; i >= 0 && count < frames; i -- ) {
+
+			const stats = statsArray[ i ];
+			const value = stats[ property ];
+
+			if ( value > 0 ) {
+
+				// ignore invalid values
+
+				sum += value;
+				count ++;
+
+			}
+
+		}
+
+		return sum / count;
+
+	}
+
 	resolveFrame( frame ) {
 
 		const nextFrame = this.getFrameById( frame.frameId + 1 );
@@ -367,21 +400,12 @@ class Inspector extends RendererInspector {
 
 		//
 
-		if ( this.softDeltaTime === 0 ) {
-
-			this.softDeltaTime = frame.deltaTime;
-
-		}
-
-		this.deltaTime = frame.deltaTime;
-		this.softDeltaTime = ease( this.softDeltaTime, frame.deltaTime, this.nodeFrame.deltaTime, EASE_FACTOR );
-
 		this.updateCycle( this.displayCycle.text );
 		this.updateCycle( this.displayCycle.graph );
 
 		if ( this.displayCycle.text.needsUpdate ) {
 
-			setText( 'fps-counter', this.softFPS.toFixed() );
+			setText( 'fps-counter', this.fps.toFixed() );
 
 			this.performance.updateText( this, frame );
 
@@ -398,18 +422,6 @@ class Inspector extends RendererInspector {
 
 	}
 
-	get fps() {
-
-		return 1000 / this.deltaTime;
-
-	}
-
-	get softFPS() {
-
-		return 1000 / this.softDeltaTime;
-
-	}
-
 	updateCycle( cycle ) {
 
 		cycle.time += this.nodeFrame.deltaTime;

examples/jsm/inspector/RendererInspector.js

@@ -11,6 +11,7 @@ class ObjectStats {
 		this.timestamp = 0;
 		this.cpu = 0;
 		this.gpu = 0;
+		this.fps = 0;
 
 		this.children = [];
 		this.parent = null;
@@ -111,6 +112,8 @@ export class RendererInspector extends InspectorBase {
 
 		this.addFrame( frame );
 
+		this.fps = this._getFPS();
+
 		this.lastFrame = frame;
 
 		this.currentFrame = null;
@@ -121,6 +124,26 @@ export class RendererInspector extends InspectorBase {
 
 	}
 
+	_getFPS() {
+
+		let frameSum = 0;
+		let timeSum = 0;
+
+		for ( let i = this.frames.length - 1; i >= 0; i -- ) {
+
+			const frame = this.frames[ i ];
+
+			frameSum ++;
+			timeSum += frame.deltaTime;
+
+			if ( timeSum >= 1000 ) break;
+
+		}
+
+		return ( frameSum * 1000 ) / timeSum;
+
+	}
+
 	_createFrame() {
 
 		return {

examples/jsm/inspector/tabs/Performance.js

@@ -162,7 +162,7 @@ class Performance extends Tab {
 
 	updateGraph( inspector/*, frame*/ ) {
 
-		this.graph.addPoint( 'fps', inspector.softFPS );
+		this.graph.addPoint( 'fps', inspector.fps );
 		this.graph.update();
 
 	}
@@ -243,7 +243,7 @@ class Performance extends Tab {
 
 		//
 
-		setText( 'graph-fps-counter', inspector.softFPS.toFixed() + ' FPS' );
+		setText( 'graph-fps-counter', inspector.fps.toFixed() + ' FPS' );
 
 		//
 

examples/jsm/inspector/ui/utils.js

@@ -1,15 +1,3 @@
-export function ease( target, current, deltaTime, duration ) {
-
-	if ( duration <= 0 ) return current;
-
-	const t = Math.min( 1, deltaTime / duration );
-
-	target += ( current - target ) * t;
-
-	return target;
-
-}
-
 export function createValueSpan( id = null ) {
 
 	const span = document.createElement( 'span' );