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
0006 export interface PerfLog {
0007   fps: number;
0008   cpu: number;
0009   calls: number;
0010   triangles: number;
0011 }
0012
0013 @Injectable({
0014   providedIn: 'root',
0015 })
0016 export class PerfService {
0017   private perfSubject = new BehaviorSubject<PerfLog>({
0018     fps: 0,
0019     cpu: 0,
0020     calls: 0,
0021     triangles: 0,
0022   });
0023   public perf$ = this.perfSubject.asObservable();
0024
0025   private lastUpdateTime = performance.now();
0026   private frameCount = 0;
0027
0028   // Instead of updating every frame, update every 250 ms:
0029   private readonly updateInterval = 250; // milliseconds
0030
0031   public updateStats(renderer: WebGLRenderer) {
0032     const now = performance.now();
0033     this.frameCount++;
0034
0035     // Check if the interval has elapsed
0036     if (now - this.lastUpdateTime >= this.updateInterval) {
0037       const deltaSeconds = (now - this.lastUpdateTime) / 1000;
0038       const fps = this.frameCount / deltaSeconds;
0039
0040       // Minimal CPU measurement: difference between update intervals
0041       const cpuTime = now - this.lastUpdateTime;
0042
0043       // Read renderer info only once
0044       const info = renderer.info.render;
0045
0046       // Update the metrics object
0047       const log: PerfLog = {
0048         fps: fps,
0049         cpu: cpuTime, // This is a rough measure; for real CPU usage you may need a more robust approach.
0050         calls: info.calls,
0051         triangles: info.triangles,
0052       };
0053
0054       this.perfSubject.next(log);
0055
0056       // Reset counters
0057       this.lastUpdateTime = now;
0058       this.frameCount = 0;
0059     }
0060   }
0061 }