Adapt Stats to use engine RenderingStatistics and remove inaccurate hooks (#345)

GuoLei1990 · web-flow · commit 96c66fbfde27 · 2026-03-04T11:48:03.000+08:00
* feat: refactor Core and Monitor to utilize Engine for improved performance tracking
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
   },
   "pnpm": {
     "overrides": {
-      "@galacean/engine": ">=1.6.0-0"
+      "@galacean/engine": ">=2.0.0-0"
     }
   }
 }
diff --git a/packages/auxiliary-lines/package.json b/packages/auxiliary-lines/package.json
@@ -24,7 +24,7 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   },
   "dependencies": {
     "@galacean/engine-toolkit-custom-material": "workspace:*"
diff --git a/packages/controls/package.json b/packages/controls/package.json
@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/custom-gltf-parser/package.json b/packages/custom-gltf-parser/package.json
@@ -23,6 +23,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/custom-material/package.json b/packages/custom-material/package.json
@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/draco/package.json b/packages/draco/package.json
@@ -20,6 +20,6 @@
     "types/**/*"
   ],
   "dependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/dynamic-bone/package.json b/packages/dynamic-bone/package.json
@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/framebuffer-picker/package.json b/packages/framebuffer-picker/package.json
@@ -23,6 +23,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/geometry-sketch/package.json b/packages/geometry-sketch/package.json
@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/gizmo/package.json b/packages/gizmo/package.json
@@ -24,8 +24,8 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0",
-    "@galacean/engine-ui": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0",
+    "@galacean/engine-ui": ">=2.0.0-0"
   },
   "dependencies": {
     "@galacean/engine-toolkit-framebuffer-picker": "workspace:*",
diff --git a/packages/input-logger/package.json b/packages/input-logger/package.json
@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/lines/package.json b/packages/lines/package.json
@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/navigation-gizmo/package.json b/packages/navigation-gizmo/package.json
@@ -24,7 +24,7 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   },
   "dependencies": {
     "@galacean/engine-toolkit-controls": "workspace:*",
diff --git a/packages/outline/package.json b/packages/outline/package.json
@@ -23,6 +23,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/skeleton-viewer/package.json b/packages/skeleton-viewer/package.json
@@ -23,6 +23,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/stats/README.md b/packages/stats/README.md
@@ -3,14 +3,15 @@
 Statistics toolkit to gather performance data
 
 ## Features
-- fps: frame rate; 
-- memory: CPU memory;
+- fps: frame rate;
+- JS Memory: JS heap memory (MB);
+- totalGraphicsMemory: total graphics memory (MB);
+- textureMemory: texture memory (MB);
+- bufferMemory: buffer memory (MB);
 - drawCall: draw call count;
 - triangles: triangle count;
 - lines: line count;
 - points: point count;
-- textures: texture count;
-- shaders: shader count;
 - webglContext: webgl context type;
 
 ## npm
diff --git a/packages/stats/package.json b/packages/stats/package.json
@@ -23,6 +23,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": ">=1.6.0-0"
+    "@galacean/engine": ">=2.0.0-0"
   }
 }
diff --git a/packages/stats/src/Core.ts b/packages/stats/src/Core.ts
@@ -1,7 +1,6 @@
+import { Engine } from "@galacean/engine";
 import DrawCallHook from "./hooks/DrawCallHook";
-import { RequestHook } from "./hooks/RequestHook";
-import ShaderHook from "./hooks/ShaderHook";
-import TextureHook from "./hooks/TextureHook";
+
 
 declare global {
   interface Performance {
@@ -14,25 +13,24 @@ declare global {
  */
 export class Core {
   private readonly gl: WebGLRenderingContext | WebGL2RenderingContext;
+  private readonly engine: Engine;
   private drawCallHook: DrawCallHook;
-  private textureHook: TextureHook;
-  private shaderHook: ShaderHook;
-  private requestHook: RequestHook;
+
   private samplingFrames: number = 60;
   private samplingIndex: number = 0;
   private updateCounter: number = 0;
   private updateTime: number = 0;
 
-  constructor(gl: WebGLRenderingContext | WebGL2RenderingContext) {
+  constructor(engine: Engine) {
+    // @ts-ignore
+    const gl = engine._hardwareRenderer.gl;
     this.gl = gl;
+    this.engine = engine;
     this.hook(gl);
   }
 
   private hook(gl: WebGLRenderingContext | WebGL2RenderingContext): void {
     this.drawCallHook = new DrawCallHook(gl);
-    this.textureHook = new TextureHook(gl);
-    this.shaderHook = new ShaderHook(gl);
-    this.requestHook = new RequestHook();
   }
 
   /**
@@ -47,8 +45,6 @@ export class Core {
    */
   public release(): void {
     this.drawCallHook && this.drawCallHook.release();
-    this.textureHook && this.textureHook.release();
-    this.shaderHook && this.shaderHook.release();
   }
 
   /**
@@ -69,16 +65,17 @@ export class Core {
 
     this.samplingIndex = 0;
 
+    const renderingStatistics = this.engine.renderingStatistics;
     let data: PerformanceData = {
       fps: Math.round((this.updateCounter * 1000) / (now - this.updateTime)),
       memory: performance.memory && (performance.memory.usedJSHeapSize / 1048576) >> 0,
       drawCall: this.drawCallHook.drawCall,
       triangles: this.drawCallHook.triangles,
       lines: this.drawCallHook.lines,
       points: this.drawCallHook.points,
-      textures: this.textureHook.textures,
-      size: this.requestHook.size,
-      shaders: this.shaderHook.shaders,
+      textureMemory: formatBytes(renderingStatistics.textureMemory),
+      bufferMemory: formatBytes(renderingStatistics.bufferMemory),
+      totalGraphicsMemory: formatBytes(renderingStatistics.totalMemory),
       webglContext:
         window.hasOwnProperty("WebGL2RenderingContext") && this.gl instanceof WebGL2RenderingContext ? "2.0" : "1.0"
     };
@@ -99,8 +96,13 @@ interface PerformanceData {
   triangles: number;
   lines: number;
   points: number;
-  textures: number;
-  shaders: number;
-  size: string;
+  textureMemory: string;
+  bufferMemory: string;
+  totalGraphicsMemory: string;
   webglContext: string;
 }
+
+function formatBytes(bytes: number): string {
+  const mb = bytes / 1048576;
+  return mb.toFixed(2);
+}
diff --git a/packages/stats/src/Monitor.ts b/packages/stats/src/Monitor.ts
@@ -1,22 +1,23 @@
+import { Engine } from "@galacean/engine";
 import { Core } from "./Core";
 
 let tpl = `
   <dl>
     <dt>FPS</dt>
     <dd>0</dd>
-    <dt>Memory <span class="unit">(MB)</span></dt>
+    <dt>JS Memory <span class="unit">(MB)</span></dt>
     <dd>0</dd>
-    <dt>DrawCall</dt>
+    <dt>Total Graphics Memory <span class="unit">(MB)</span></dt>
     <dd>0</dd>
-    <dt>Triangles</dt>
+    <dt>Texture Memory <span class="unit">(MB)</span></dt>
     <dd>0</dd>
-    <dt>Textures</dt>
+    <dt>Buffer Memory <span class="unit">(MB)</span></dt>
     <dd>0</dd>
-    <dt>Shaders</dt>
+    <dt>DrawCall</dt>
     <dd>0</dd>
-    <dt>Network Size <span class="unit">(MB)</span></dt>
+    <dt>Triangles</dt>
     <dd>0</dd>
-    <dt>WebGL</dt>
+<dt>WebGL</dt>
     <dd></dd>
   </dl>
 `;
@@ -53,6 +54,7 @@ let css = `
     font-size: ${20 / 7.5}vh;
     padding: ${10 / 7.5}vh 0 ${10 / 7.5}vh;
   }
+
 `;
 
 export default class Monitor {
@@ -61,10 +63,10 @@ export default class Monitor {
   private container: HTMLElement;
   private readonly items: string[];
 
-  constructor(gl: WebGLRenderingContext | WebGL2RenderingContext) {
-    this.core = new Core(gl);
+  constructor(engine: Engine) {
+    this.core = new Core(engine);
     this.items = [];
-    this.items = ["fps", "memory", "drawCall", "triangles", "textures", "shaders", "size", "webglContext"];
+    this.items = ["fps", "memory", "totalGraphicsMemory", "textureMemory", "bufferMemory", "drawCall", "triangles", "webglContext"];
     this.createContainer();
     this.update = this.update.bind(this);
   }
diff --git a/packages/stats/src/Stats.ts b/packages/stats/src/Stats.ts
@@ -1,24 +1,17 @@
 import { Script, Camera } from "@galacean/engine";
-import { hookRequest } from "./hooks/RequestHook";
 import Monitor from "./Monitor";
 
 /**
  * Display engine status data such as FPS.
  */
 export class Stats extends Script {
   private monitor: Monitor;
-  private camera: Camera;
-
-  static hookRequest() {
-    hookRequest();
-  }
 
   override set enabled(value: boolean) {
     value ? this._setupMonitor() : this.monitor.destroy();
   }
 
   override onBeginRender(camera: Camera): void {
-    this.camera = camera;
     if (!this.monitor) {
       this._setupMonitor();
     }
@@ -31,10 +24,6 @@ export class Stats extends Script {
   }
 
   private _setupMonitor() {
-    // @ts-ignore
-    const gl = this.camera.engine._hardwareRenderer.gl;
-    if (gl) {
-      this.monitor = new Monitor(gl);
-    }
+    this.monitor = new Monitor(this.engine);
   }
 }
diff --git a/packages/stats/src/hooks/RequestHook.ts b/packages/stats/src/hooks/RequestHook.ts
diff --git a/packages/stats/src/hooks/ShaderHook.ts b/packages/stats/src/hooks/ShaderHook.ts
diff --git a/packages/stats/src/hooks/TextureHook.ts b/packages/stats/src/hooks/TextureHook.ts
diff --git a/packages/tween/package.json b/packages/tween/package.json
diff --git a/packages/way-point/package.json b/packages/way-point/package.json
diff --git a/packages/xr/package.json b/packages/xr/package.json
diff --git a/tests/package.json b/tests/package.json

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@`
`75`	`75`	`},`
`76`	`76`	`"pnpm": {`
`77`	`77`	`"overrides": {`
`78`		`- "@galacean/engine": ">=1.6.0-0"`
	`78`	`+ "@galacean/engine": ">=2.0.0-0"`
`79`	`79`	`}`
`80`	`80`	`}`
`81`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,6 @@`
`24`	`24`	`"types/*/"`
`25`	`25`	`],`
`26`	`26`	`"peerDependencies": {`
`27`		`- "@galacean/engine": ">=1.6.0-0"`
	`27`	`+ "@galacean/engine": ">=2.0.0-0"`
`28`	`28`	`}`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,6 @@`
`23`	`23`	`"types/*/"`
`24`	`24`	`],`
`25`	`25`	`"peerDependencies": {`
`26`		`- "@galacean/engine": ">=1.6.0-0"`
	`26`	`+ "@galacean/engine": ">=2.0.0-0"`
`27`	`27`	`}`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,6 @@`
`20`	`20`	`"types/*/"`
`21`	`21`	`],`
`22`	`22`	`"dependencies": {`
`23`		`- "@galacean/engine": ">=1.6.0-0"`
	`23`	`+ "@galacean/engine": ">=2.0.0-0"`
`24`	`24`	`}`
`25`	`25`	`}`