@eva/plugin-stats 2.0.1-beta.3 → 2.0.1-beta.31

package/dist/plugin-stats.cjs.js

@@ -11,6 +11,9 @@ class StatsComponent extends eva_js.Component {
 }
 StatsComponent.componentName = 'Stats';
 
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
 const Stats = function (style) {
     style = Object.assign({ width: 20, height: 12, x: 0, y: 0 }, style);
     const { width, height, x, y } = style;
@@ -27,6 +30,7 @@ const Stats = function (style) {
     }
     function showPanel(id) {
         for (let i = 0; i < container.children.length; i++) {
+            // @ts-ignore
             container.children[i].style.display = i === id ? 'block' : 'none';
         }
         mode = id;
@@ -37,6 +41,7 @@ const Stats = function (style) {
     const dcPanel = addPanel(Stats.Panel('DrawCall', '#330570', '#A69700'));
     const tcPanel = addPanel(Stats.Panel('TC:', '#A62500', '#00B454'));
     let memPanel;
+    // @ts-ignore
     if (self.performance && self.performance.memory) {
         memPanel = addPanel(Stats.Panel('MB', '#f08', '#201'));
     }
@@ -62,6 +67,7 @@ const Stats = function (style) {
                 prevTime = time;
                 frames = 0;
                 if (memPanel) {
+                    // @ts-ignore
                     const memory = performance.memory;
                     memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
                 }
@@ -71,6 +77,7 @@ const Stats = function (style) {
         update: function () {
             beginTime = this.end();
         },
+        // Backwards Compatibility
         domElement: container,
         setMode: showPanel,
     };
@@ -115,17 +122,41 @@ Stats.Panel = function (name, fg, bg) {
 };
 var Stats$1 = Stats;
 
+/**
+ * WebGL 绘制调用 Hook 类
+ *
+ * GLHook 通过拦截 WebGL 的 drawElements 方法，
+ * 统计每帧的绘制调用次数（Draw Calls）。
+ * 绘制调用次数是衡量渲染性能的重要指标。
+ *
+ * @example
+ * ```typescript
+ * const glHook = new GLHook(gl);
+ * console.log('Draw Passes:', glHook.drawPasses);
+ * glHook.reset(); // 重置计数
+ * glHook.release(); // 移除 Hook
+ * ```
+ */
 class GLHook {
+    /**
+     * 构造 GL Hook
+     * @param _gl - WebGL 渲染上下文
+     */
     constructor(_gl) {
+        /** 绘制调用次数 */
         this.drawPasses = 0;
+        /** 是否已初始化 Hook */
         this.isInit = false;
+        /** 原始的 drawElements 方法 */
         this.realGLDrawElements = function () { };
         if (_gl) {
             if (_gl.__proto__.drawElements) {
                 this.gl = _gl;
                 this.realGLDrawElements = _gl.__proto__.drawElements;
+                //replace to new function
                 _gl.__proto__.drawElements = this.fakeGLdrawElements(this);
                 this.isInit = true;
+                // console.log("[GLHook] GL was Hooked!");
             }
         }
         else {
@@ -144,26 +175,54 @@ class GLHook {
     release() {
         if (this.isInit) {
             this.gl.__proto__.drawElements = this.realGLDrawElements;
+            // console.log("[GLHook] Hook was removed!");
         }
         this.isInit = false;
     }
 }
 
+/**
+ * WebGL 纹理 Hook 类
+ *
+ * TextureHook 通过拦截 WebGL 的纹理创建和删除方法，
+ * 统计当前活跃的纹理数量和历史最大纹理数量。
+ * 纹理数量直接影响显存占用和渲染性能。
+ *
+ * @example
+ * ```typescript
+ * const textureHook = new TextureHook(gl);
+ * console.log('Current Textures:', textureHook.currentTextureCount);
+ * console.log('Max Textures:', textureHook.maxTexturesCount);
+ * textureHook.reset(); // 重置统计
+ * textureHook.release(); // 移除 Hook
+ * ```
+ */
 class TextureHook {
+    /**
+     * 构造纹理 Hook
+     * @param _gl - WebGL 渲染上下文
+     */
     constructor(_gl) {
+        /** 当前创建的纹理列表 */
         this.createdTextures = new Array();
+        /** 历史最大纹理数量 */
         this.maxTexturesCount = 0;
+        /** 是否已初始化 Hook */
         this.isInit = false;
+        /** 原始的 createTexture 方法 */
         this.realGLCreateTexture = function () { };
+        /** 原始的 deleteTexture 方法 */
         this.realGLDeleteTexture = function () { };
         if (_gl) {
             if (_gl.__proto__.createTexture) {
                 this.gl = _gl;
                 this.realGLCreateTexture = _gl.__proto__.createTexture;
                 this.realGLDeleteTexture = _gl.__proto__.deleteTexture;
+                //replace to new function
                 _gl.__proto__.createTexture = this.fakeGLCreateTexture(this);
                 _gl.__proto__.deleteTexture = this.fakeGLDeleteTexture(this);
                 this.isInit = true;
+                // console.log('[TextureHook] GL was Hooked!');
             }
         }
         else {
@@ -174,7 +233,7 @@ class TextureHook {
         return this.createdTextures.length;
     }
     registerTexture(texture) {
-        this.createdTextures.push(texture);
+        this.createdTextures.push(texture); // ++;
         this.maxTexturesCount = Math.max(this.createdTextures.length, this.maxTexturesCount);
     }
     fakeGLCreateTexture(context) {
@@ -207,11 +266,40 @@ class TextureHook {
     }
 }
 
+/**
+ * 基础 Hooks 类
+ *
+ * BaseHooks 用于监控 WebGL 的性能指标。
+ * 通过 hook WebGL 的底层方法，收集绘制调用次数、纹理数量等统计信息。
+ * 适用于性能分析和优化场景。
+ *
+ * @example
+ * ```typescript
+ * const hooks = new BaseHooks();
+ * hooks.attach(gl); // gl 是 WebGL 上下文
+ *
+ * // 每帧获取统计信息
+ * console.log('Draw Calls:', hooks.drawCalls);
+ * console.log('Textures:', hooks.texturesCount);
+ *
+ * // 重置统计
+ * hooks.reset();
+ * ```
+ */
 class BaseHooks {
     constructor() {
+        /** 上一次的绘制调用次数 */
         this._drawCalls = -1;
+        /** 最大增量绘制调用次数 */
         this._maxDeltaDrawCalls = -1;
     }
+    /**
+     * 附加 Hook 到 WebGL 上下文
+     *
+     * 拦截 WebGL 的绘制和纹理相关方法，开始收集统计信息。
+     *
+     * @param gl - WebGL 渲染上下文
+     */
     attach(gl) {
         this.glhook = new GLHook(gl);
         this.texturehook = new TextureHook(gl);
@@ -273,6 +361,7 @@ class StatsSystem extends eva_js.System {
         this.renderSystem = this.game.getSystem('Renderer');
         this.app = this.renderSystem.application;
         if (this.app && this.show) {
+            // @ts-ignore
             const gl = this.app.renderer.gl;
             this.hook = new BaseHooks();
             this.hook.attach(gl);
@@ -284,7 +373,7 @@ class StatsSystem extends eva_js.System {
         this.component = this.game.scene.addComponent(new StatsComponent());
         this.stats = Stats$1(this.style);
         this.component.stats = this.stats;
-        this.stats.showPanel(0);
+        this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
         document.body.appendChild(this.stats.dom);
     }
     lateUpdate() {

package/dist/plugin-stats.esm.js

@@ -7,6 +7,9 @@ class StatsComponent extends Component {
 }
 StatsComponent.componentName = 'Stats';
 
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
 const Stats = function (style) {
     style = Object.assign({ width: 20, height: 12, x: 0, y: 0 }, style);
     const { width, height, x, y } = style;
@@ -23,6 +26,7 @@ const Stats = function (style) {
     }
     function showPanel(id) {
         for (let i = 0; i < container.children.length; i++) {
+            // @ts-ignore
             container.children[i].style.display = i === id ? 'block' : 'none';
         }
         mode = id;
@@ -33,6 +37,7 @@ const Stats = function (style) {
     const dcPanel = addPanel(Stats.Panel('DrawCall', '#330570', '#A69700'));
     const tcPanel = addPanel(Stats.Panel('TC:', '#A62500', '#00B454'));
     let memPanel;
+    // @ts-ignore
     if (self.performance && self.performance.memory) {
         memPanel = addPanel(Stats.Panel('MB', '#f08', '#201'));
     }
@@ -58,6 +63,7 @@ const Stats = function (style) {
                 prevTime = time;
                 frames = 0;
                 if (memPanel) {
+                    // @ts-ignore
                     const memory = performance.memory;
                     memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
                 }
@@ -67,6 +73,7 @@ const Stats = function (style) {
         update: function () {
             beginTime = this.end();
         },
+        // Backwards Compatibility
         domElement: container,
         setMode: showPanel,
     };
@@ -111,17 +118,41 @@ Stats.Panel = function (name, fg, bg) {
 };
 var Stats$1 = Stats;
 
+/**
+ * WebGL 绘制调用 Hook 类
+ *
+ * GLHook 通过拦截 WebGL 的 drawElements 方法，
+ * 统计每帧的绘制调用次数（Draw Calls）。
+ * 绘制调用次数是衡量渲染性能的重要指标。
+ *
+ * @example
+ * ```typescript
+ * const glHook = new GLHook(gl);
+ * console.log('Draw Passes:', glHook.drawPasses);
+ * glHook.reset(); // 重置计数
+ * glHook.release(); // 移除 Hook
+ * ```
+ */
 class GLHook {
+    /**
+     * 构造 GL Hook
+     * @param _gl - WebGL 渲染上下文
+     */
     constructor(_gl) {
+        /** 绘制调用次数 */
         this.drawPasses = 0;
+        /** 是否已初始化 Hook */
         this.isInit = false;
+        /** 原始的 drawElements 方法 */
         this.realGLDrawElements = function () { };
         if (_gl) {
             if (_gl.__proto__.drawElements) {
                 this.gl = _gl;
                 this.realGLDrawElements = _gl.__proto__.drawElements;
+                //replace to new function
                 _gl.__proto__.drawElements = this.fakeGLdrawElements(this);
                 this.isInit = true;
+                // console.log("[GLHook] GL was Hooked!");
             }
         }
         else {
@@ -140,26 +171,54 @@ class GLHook {
     release() {
         if (this.isInit) {
             this.gl.__proto__.drawElements = this.realGLDrawElements;
+            // console.log("[GLHook] Hook was removed!");
         }
         this.isInit = false;
     }
 }
 
+/**
+ * WebGL 纹理 Hook 类
+ *
+ * TextureHook 通过拦截 WebGL 的纹理创建和删除方法，
+ * 统计当前活跃的纹理数量和历史最大纹理数量。
+ * 纹理数量直接影响显存占用和渲染性能。
+ *
+ * @example
+ * ```typescript
+ * const textureHook = new TextureHook(gl);
+ * console.log('Current Textures:', textureHook.currentTextureCount);
+ * console.log('Max Textures:', textureHook.maxTexturesCount);
+ * textureHook.reset(); // 重置统计
+ * textureHook.release(); // 移除 Hook
+ * ```
+ */
 class TextureHook {
+    /**
+     * 构造纹理 Hook
+     * @param _gl - WebGL 渲染上下文
+     */
     constructor(_gl) {
+        /** 当前创建的纹理列表 */
         this.createdTextures = new Array();
+        /** 历史最大纹理数量 */
         this.maxTexturesCount = 0;
+        /** 是否已初始化 Hook */
         this.isInit = false;
+        /** 原始的 createTexture 方法 */
         this.realGLCreateTexture = function () { };
+        /** 原始的 deleteTexture 方法 */
         this.realGLDeleteTexture = function () { };
         if (_gl) {
             if (_gl.__proto__.createTexture) {
                 this.gl = _gl;
                 this.realGLCreateTexture = _gl.__proto__.createTexture;
                 this.realGLDeleteTexture = _gl.__proto__.deleteTexture;
+                //replace to new function
                 _gl.__proto__.createTexture = this.fakeGLCreateTexture(this);
                 _gl.__proto__.deleteTexture = this.fakeGLDeleteTexture(this);
                 this.isInit = true;
+                // console.log('[TextureHook] GL was Hooked!');
             }
         }
         else {
@@ -170,7 +229,7 @@ class TextureHook {
         return this.createdTextures.length;
     }
     registerTexture(texture) {
-        this.createdTextures.push(texture);
+        this.createdTextures.push(texture); // ++;
         this.maxTexturesCount = Math.max(this.createdTextures.length, this.maxTexturesCount);
     }
     fakeGLCreateTexture(context) {
@@ -203,11 +262,40 @@ class TextureHook {
     }
 }
 
+/**
+ * 基础 Hooks 类
+ *
+ * BaseHooks 用于监控 WebGL 的性能指标。
+ * 通过 hook WebGL 的底层方法，收集绘制调用次数、纹理数量等统计信息。
+ * 适用于性能分析和优化场景。
+ *
+ * @example
+ * ```typescript
+ * const hooks = new BaseHooks();
+ * hooks.attach(gl); // gl 是 WebGL 上下文
+ *
+ * // 每帧获取统计信息
+ * console.log('Draw Calls:', hooks.drawCalls);
+ * console.log('Textures:', hooks.texturesCount);
+ *
+ * // 重置统计
+ * hooks.reset();
+ * ```
+ */
 class BaseHooks {
     constructor() {
+        /** 上一次的绘制调用次数 */
         this._drawCalls = -1;
+        /** 最大增量绘制调用次数 */
         this._maxDeltaDrawCalls = -1;
     }
+    /**
+     * 附加 Hook 到 WebGL 上下文
+     *
+     * 拦截 WebGL 的绘制和纹理相关方法，开始收集统计信息。
+     *
+     * @param gl - WebGL 渲染上下文
+     */
     attach(gl) {
         this.glhook = new GLHook(gl);
         this.texturehook = new TextureHook(gl);
@@ -269,6 +357,7 @@ class StatsSystem extends System {
         this.renderSystem = this.game.getSystem('Renderer');
         this.app = this.renderSystem.application;
         if (this.app && this.show) {
+            // @ts-ignore
             const gl = this.app.renderer.gl;
             this.hook = new BaseHooks();
             this.hook.attach(gl);
@@ -280,7 +369,7 @@ class StatsSystem extends System {
         this.component = this.game.scene.addComponent(new StatsComponent());
         this.stats = Stats$1(this.style);
         this.component.stats = this.stats;
-        this.stats.showPanel(0);
+        this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
         document.body.appendChild(this.stats.dom);
     }
     lateUpdate() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-stats",
-  "version": "2.0.1-beta.3",
+  "version": "2.0.1-beta.31",
   "description": "@eva/plugin-stats",
   "main": "index.js",
   "module": "dist/plugin-stats.esm.js",
@@ -18,7 +18,7 @@
   "license": "MIT",
   "homepage": "https://eva.js.org",
   "dependencies": {
-    "@eva/eva.js": "2.0.1-beta.3",
+    "@eva/eva.js": "2.0.1-beta.31",
     "lodash-es": "^4.17.21"
   }
 }