app/services/perf.service.ts

0001 // perf.service.ts (optimized snippet)
0002 import { Injectable } from '@angular/core';
0003 import { BehaviorSubject } from 'rxjs';
0004 import {WebGLRenderer} from "three";
0005 export interface PerfLog {
0006   fps: number;
0007   frameTime: number;  // Changed from 'cpu' to 'frameTime'
0008   calls: number;
0009   triangles: number;
0010 }
0011
0012 @Injectable({
0013   providedIn: 'root',
0014 })
0015 export class PerfService {
0016   private perfSubject = new BehaviorSubject<PerfLog>({
0017     fps: 0,
0018     frameTime: 0,
0019     calls: 0,
0020     triangles: 0,
0021   });
0022   public perf$ = this.perfSubject.asObservable();
0023
0024   private lastUpdateTime = performance.now();
0025   private frameCount = 0;
0026   private frameTimes: number[] = [];
0027   private readonly updateInterval = 250; // milliseconds
0028
0029   public updateStats(renderer: WebGLRenderer, frameStartTime: number) {
0030     const now = performance.now();
0031     const thisFrameTime = now - frameStartTime;
0032
0033     this.frameCount++;
0034     this.frameTimes.push(thisFrameTime);
0035
0036     // Check if the interval has elapsed
0037     if (now - this.lastUpdateTime >= this.updateInterval) {
0038       const deltaSeconds = (now - this.lastUpdateTime) / 1000;
0039       const fps = this.frameCount / deltaSeconds;
0040
0041       // Calculate average frame time
0042       const avgFrameTime = this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length;
0043
0044       // Read renderer info only once
0045       const info = renderer.info.render;
0046
0047       // Update the metrics object
0048       const log: PerfLog = {
0049         fps: fps,
0050         frameTime: avgFrameTime,  // Now shows actual frame render time in ms
0051         calls: info.calls,
0052         triangles: info.triangles,
0053       };
0054
0055       this.perfSubject.next(log);
0056
0057       // Reset counters
0058       this.lastUpdateTime = now;
0059       this.frameCount = 0;
0060       this.frameTimes = [];
0061     }
0062   }
0063 }