@eva/plugin-stats 1.2.5 → 1.2.7

package/dist/EVA.plugin.stats.js

@@ -98,6 +98,8 @@ var _EVA_IIFE_stats = function (exports, eva_js) {
         frames = 0;
     var fpsPanel = addPanel(Stats.Panel('FPS', '#0ff', '#002'));
     var msPanel = addPanel(Stats.Panel('MS', '#0f0', '#020'));
+    var dcPanel = addPanel(Stats.Panel('DrawCall', '#330570', '#A69700'));
+    var tcPanel = addPanel(Stats.Panel('TC:', '#A62500', '#00B454'));
     var memPanel;
 
     if (self.performance && self.performance.memory) {
@@ -113,11 +115,16 @@ var _EVA_IIFE_stats = function (exports, eva_js) {
       begin: function begin(time) {
         beginTime = time || (performance || Date).now();
       },
-      end: function end() {
+      end: function end(hook) {
         frames++;
         var time = (performance || Date).now();
         msPanel.update(time - beginTime, 200);
 
+        if (hook) {
+          dcPanel.update(hook.deltaDrawCalls, Math.max(50, hook.maxDeltaDrawCalls));
+          tcPanel.update(hook.texturesCount, Math.max(20, hook.maxTextureCount));
+        }
+
         if (time >= prevTime + 1000) {
           fpsPanel.update(frames * 1000 / (time - prevTime), 100);
           prevTime = time;
@@ -188,6 +195,193 @@ var _EVA_IIFE_stats = function (exports, eva_js) {
 
   var Stats$1 = Stats;
 
+  var GLHook = function () {
+    function GLHook(_gl) {
+      this.drawPasses = 0;
+      this.isInit = false;
+
+      this.realGLDrawElements = function () {};
+
+      if (_gl) {
+        if (_gl.__proto__.drawElements) {
+          this.gl = _gl;
+          this.realGLDrawElements = _gl.__proto__.drawElements;
+          _gl.__proto__.drawElements = this.fakeGLdrawElements.bind(this);
+          this.isInit = true;
+        }
+      } else {
+        console.error("[GLHook] GL can't be NULL");
+      }
+    }
+
+    GLHook.prototype.fakeGLdrawElements = function (mode, count, type, offset) {
+      this.drawPasses++;
+      this.realGLDrawElements.call(this.gl, mode, count, type, offset);
+    };
+
+    GLHook.prototype.reset = function () {
+      this.drawPasses = 0;
+    };
+
+    GLHook.prototype.release = function () {
+      if (this.isInit) {
+        this.gl.__proto__.drawElements = this.realGLDrawElements;
+      }
+
+      this.isInit = false;
+    };
+
+    return GLHook;
+  }();
+
+  var TextureHook = function () {
+    function TextureHook(_gl) {
+      this.createdTextures = new Array();
+      this.maxTexturesCount = 0;
+      this.isInit = false;
+
+      this.realGLCreateTexture = function () {};
+
+      this.realGLDeleteTexture = function () {};
+
+      if (_gl) {
+        if (_gl.__proto__.createTexture) {
+          this.gl = _gl;
+          this.realGLCreateTexture = _gl.__proto__.createTexture;
+          this.realGLDeleteTexture = _gl.__proto__.deleteTexture;
+          _gl.__proto__.createTexture = this.fakeGLCreateTexture.bind(this);
+          _gl.__proto__.deleteTexture = this.fakeGLDeleteTexture.bind(this);
+          this.isInit = true;
+        }
+      } else {
+        console.error("[TextureHook] GL can't be NULL");
+      }
+    }
+
+    Object.defineProperty(TextureHook.prototype, "currentTextureCount", {
+      get: function get() {
+        return this.createdTextures.length;
+      },
+      enumerable: false,
+      configurable: true
+    });
+
+    TextureHook.prototype.registerTexture = function (texture) {
+      this.createdTextures.push(texture);
+      this.maxTexturesCount = Math.max(this.createdTextures.length, this.maxTexturesCount);
+    };
+
+    TextureHook.prototype.fakeGLCreateTexture = function () {
+      var texture = this.realGLCreateTexture.call(this.gl);
+      this.registerTexture(texture);
+      return texture;
+    };
+
+    TextureHook.prototype.fakeGLDeleteTexture = function (texture) {
+      var index = this.createdTextures.indexOf(texture);
+
+      if (index > -1) {
+        this.createdTextures.splice(index, 1);
+      }
+
+      this.realGLDeleteTexture.call(this.gl, texture);
+    };
+
+    TextureHook.prototype.reset = function () {
+      this.createdTextures = new Array();
+      this.maxTexturesCount = 0;
+    };
+
+    TextureHook.prototype.release = function () {
+      if (this.isInit) {
+        this.gl.__proto__.createTexture = this.realGLCreateTexture;
+        this.gl.__proto__.deleteTexture = this.realGLDeleteTexture;
+        console.log('[TextureHook] Hook was removed!');
+      }
+
+      this.isInit = false;
+    };
+
+    return TextureHook;
+  }();
+
+  var BaseHooks = function () {
+    function BaseHooks() {
+      this._drawCalls = -1;
+      this._maxDeltaDrawCalls = -1;
+    }
+
+    BaseHooks.prototype.attach = function (gl) {
+      this.glhook = new GLHook(gl);
+      this.texturehook = new TextureHook(gl);
+    };
+
+    Object.defineProperty(BaseHooks.prototype, "drawCalls", {
+      get: function get() {
+        if (this.glhook && this.glhook.isInit) {
+          return this.glhook.drawPasses;
+        }
+
+        return -1;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "maxDeltaDrawCalls", {
+      get: function get() {
+        return this._maxDeltaDrawCalls;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "deltaDrawCalls", {
+      get: function get() {
+        if (this._drawCalls == -1) {
+          this._drawCalls = this.drawCalls;
+          return 0;
+        }
+
+        var dc = this.drawCalls;
+        var delta = dc - this._drawCalls;
+        this._drawCalls = dc;
+        this._maxDeltaDrawCalls = Math.max(this._maxDeltaDrawCalls, delta);
+        return delta;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "maxTextureCount", {
+      get: function get() {
+        if (this.texturehook && this.texturehook.isInit) return this.texturehook.maxTexturesCount;
+        return 0;
+      },
+      enumerable: false,
+      configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "texturesCount", {
+      get: function get() {
+        if (this.texturehook && this.texturehook.isInit) return this.texturehook.currentTextureCount;
+        return 0;
+      },
+      enumerable: false,
+      configurable: true
+    });
+
+    BaseHooks.prototype.reset = function () {
+      this._maxDeltaDrawCalls = -1;
+      this._drawCalls = -1;
+      if (this.glhook) this.glhook.reset();
+      if (this.texturehook) this.texturehook.reset();
+    };
+
+    BaseHooks.prototype.release = function () {
+      if (this.glhook) this.glhook.release();
+      if (this.texturehook) this.texturehook.release();
+    };
+
+    return BaseHooks;
+  }();
+
   var StatsSystem = function (_super) {
     __extends(StatsSystem, _super);
 
@@ -207,6 +401,14 @@ var _EVA_IIFE_stats = function (exports, eva_js) {
 
       this.show = param.show;
       this.style = param.style;
+      this.renderSystem = this.game.getSystem('Renderer');
+      this.app = this.renderSystem.application;
+
+      if (this.app && this.show) {
+        var gl = this.app.renderer.gl;
+        this.hook = new BaseHooks();
+        this.hook.attach(gl);
+      }
     };
 
     StatsSystem.prototype.start = function () {
@@ -220,7 +422,7 @@ var _EVA_IIFE_stats = function (exports, eva_js) {
 
     StatsSystem.prototype.lateUpdate = function () {
       if (!this.show) return;
-      this.stats && this.stats.end();
+      this.stats && this.stats.end(this.hook);
     };
 
     StatsSystem.systemName = 'Stats';

package/dist/EVA.plugin.stats.min.js

@@ -1 +1 @@
-var _EVA_IIFE_stats=function(t,e){"use strict";var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function o(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var i=function(){return(i=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},a=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return o(e,t),e.prototype.update=function(){this.stats&&this.stats.begin()},e.componentName="Stats",e}(e.Component),s=function t(e){var n=(e=i({width:20,height:12,x:0,y:0},e)).width,o=e.height,a=e.x,s=e.y,l=0,r=document.createElement("div");function c(t){return r.appendChild(t.dom),t}function f(t){for(var e=0;e<r.children.length;e++)r.children[e].style.display=e===t?"block":"none";l=t}r.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000;width: "+n+"vw;height: "+o+"vw;left: "+a+"vw;top: "+s+"vw;",r.addEventListener("click",(function(t){t.preventDefault(),f(++l%r.children.length)}),!1);var p,h=(performance||Date).now(),u=h,d=0,y=c(t.Panel("FPS","#0ff","#002")),m=c(t.Panel("MS","#0f0","#020"));return self.performance&&self.performance.memory&&(p=c(t.Panel("MB","#f08","#201"))),f(0),{REVISION:16,dom:r,addPanel:c,showPanel:f,begin:function(t){h=t||(performance||Date).now()},end:function(){d++;var t=(performance||Date).now();if(m.update(t-h,200),t>=u+1e3&&(y.update(1e3*d/(t-u),100),u=t,d=0,p)){var e=performance.memory;p.update(e.usedJSHeapSize/1048576,e.jsHeapSizeLimit/1048576)}return t},update:function(){h=this.end()},domElement:r,setMode:f}};s.Panel=function(t,e,n){var o=1/0,i=0,a=Math.round,s=a(window.devicePixelRatio||1),l=80*s,r=48*s,c=3*s,f=2*s,p=3*s,h=15*s,u=74*s,d=30*s,y=document.createElement("canvas");y.width=l,y.height=r,y.style.cssText="width:100%;height:100%";var m=y.getContext("2d");return m.font="bold "+9*s+"px Helvetica,Arial,sans-serif",m.textBaseline="top",m.fillStyle=n,m.fillRect(0,0,l,r),m.fillStyle=e,m.fillText(t,c,f),m.fillRect(p,h,u,d),m.fillStyle=n,m.globalAlpha=.9,m.fillRect(p,h,u,d),{dom:y,update:function(r,v){o=Math.min(o,r),i=Math.max(i,r),m.fillStyle=n,m.globalAlpha=1,m.fillRect(0,0,l,h),m.fillStyle=e,m.fillText(a(r)+" "+t+" ("+a(o)+"-"+a(i)+")",c,f),m.drawImage(y,p+s,h,u-s,d,p,h,u-s,d),m.fillRect(p+u-s,h,s,d),m.fillStyle=n,m.globalAlpha=.9,m.fillRect(p+u-s,h,s,a((1-r/v)*d))}}};var l=s,r=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.show=!0,e}return o(e,t),e.prototype.init=function(t){void 0===t&&(t={show:!0}),this.show=t.show,this.style=t.style},e.prototype.start=function(){this.show&&(this.component=this.game.scene.addComponent(new a),this.stats=l(this.style),this.component.stats=this.stats,this.stats.showPanel(0),document.body.appendChild(this.stats.dom))},e.prototype.lateUpdate=function(){this.show&&this.stats&&this.stats.end()},e.systemName="Stats",e}(e.System),c={Components:[a],Systems:[r]};return t.Stats=a,t.StatsSystem=r,t.default=c,Object.defineProperty(t,"__esModule",{value:!0}),t}({},EVA);
+window.EVA=window.EVA||{},window.EVA.plugin=window.EVA.plugin||{};var _EVA_IIFE_stats=function(t,e){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};function o(t,e){function o(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var n=function(){return(n=Object.assign||function(t){for(var e,r=1,o=arguments.length;r<o;r++)for(var n in e=arguments[r])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)},i=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return o(e,t),e.prototype.update=function(){this.stats&&this.stats.begin()},e.componentName="Stats",e}(e.Component),s=function t(e){var r=(e=n({width:20,height:12,x:0,y:0},e)).width,o=e.height,i=e.x,s=e.y,a=0,l=document.createElement("div");function h(t){return l.appendChild(t.dom),t}function u(t){for(var e=0;e<l.children.length;e++)l.children[e].style.display=e===t?"block":"none";a=t}l.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000;width: "+r+"vw;height: "+o+"vw;left: "+i+"vw;top: "+s+"vw;",l.addEventListener("click",(function(t){t.preventDefault(),u(++a%l.children.length)}),!1);var c,p=(performance||Date).now(),f=p,d=0,x=h(t.Panel("FPS","#0ff","#002")),w=h(t.Panel("MS","#0f0","#020")),m=h(t.Panel("DrawCall","#330570","#A69700")),_=h(t.Panel("TC:","#A62500","#00B454"));return self.performance&&self.performance.memory&&(c=h(t.Panel("MB","#f08","#201"))),u(0),{REVISION:16,dom:l,addPanel:h,showPanel:u,begin:function(t){p=t||(performance||Date).now()},end:function(t){d++;var e=(performance||Date).now();if(w.update(e-p,200),t&&(m.update(t.deltaDrawCalls,Math.max(50,t.maxDeltaDrawCalls)),_.update(t.texturesCount,Math.max(20,t.maxTextureCount))),e>=f+1e3&&(x.update(1e3*d/(e-f),100),f=e,d=0,c)){var r=performance.memory;c.update(r.usedJSHeapSize/1048576,r.jsHeapSizeLimit/1048576)}return e},update:function(){p=this.end()},domElement:l,setMode:u}};s.Panel=function(t,e,r){var o=1/0,n=0,i=Math.round,s=i(window.devicePixelRatio||1),a=80*s,l=48*s,h=3*s,u=2*s,c=3*s,p=15*s,f=74*s,d=30*s,x=document.createElement("canvas");x.width=a,x.height=l,x.style.cssText="width:100%;height:100%";var w=x.getContext("2d");return w.font="bold "+9*s+"px Helvetica,Arial,sans-serif",w.textBaseline="top",w.fillStyle=r,w.fillRect(0,0,a,l),w.fillStyle=e,w.fillText(t,h,u),w.fillRect(c,p,f,d),w.fillStyle=r,w.globalAlpha=.9,w.fillRect(c,p,f,d),{dom:x,update:function(l,m){o=Math.min(o,l),n=Math.max(n,l),w.fillStyle=r,w.globalAlpha=1,w.fillRect(0,0,a,p),w.fillStyle=e,w.fillText(i(l)+" "+t+" ("+i(o)+"-"+i(n)+")",h,u),w.drawImage(x,c+s,p,f-s,d,c,p,f-s,d),w.fillRect(c+f-s,p,s,d),w.fillStyle=r,w.globalAlpha=.9,w.fillRect(c+f-s,p,s,i((1-l/m)*d))}}};var a=s,l=function(){function t(t){this.drawPasses=0,this.isInit=!1,this.realGLDrawElements=function(){},t?t.__proto__.drawElements&&(this.gl=t,this.realGLDrawElements=t.__proto__.drawElements,t.__proto__.drawElements=this.fakeGLdrawElements.bind(this),this.isInit=!0):console.error("[GLHook] GL can't be NULL")}return t.prototype.fakeGLdrawElements=function(t,e,r,o){this.drawPasses++,this.realGLDrawElements.call(this.gl,t,e,r,o)},t.prototype.reset=function(){this.drawPasses=0},t.prototype.release=function(){this.isInit&&(this.gl.__proto__.drawElements=this.realGLDrawElements),this.isInit=!1},t}(),h=function(){function t(t){this.createdTextures=new Array,this.maxTexturesCount=0,this.isInit=!1,this.realGLCreateTexture=function(){},this.realGLDeleteTexture=function(){},t?t.__proto__.createTexture&&(this.gl=t,this.realGLCreateTexture=t.__proto__.createTexture,this.realGLDeleteTexture=t.__proto__.deleteTexture,t.__proto__.createTexture=this.fakeGLCreateTexture.bind(this),t.__proto__.deleteTexture=this.fakeGLDeleteTexture.bind(this),this.isInit=!0):console.error("[TextureHook] GL can't be NULL")}return Object.defineProperty(t.prototype,"currentTextureCount",{get:function(){return this.createdTextures.length},enumerable:!1,configurable:!0}),t.prototype.registerTexture=function(t){this.createdTextures.push(t),this.maxTexturesCount=Math.max(this.createdTextures.length,this.maxTexturesCount)},t.prototype.fakeGLCreateTexture=function(){var t=this.realGLCreateTexture.call(this.gl);return this.registerTexture(t),t},t.prototype.fakeGLDeleteTexture=function(t){var e=this.createdTextures.indexOf(t);e>-1&&this.createdTextures.splice(e,1),this.realGLDeleteTexture.call(this.gl,t)},t.prototype.reset=function(){this.createdTextures=new Array,this.maxTexturesCount=0},t.prototype.release=function(){this.isInit&&(this.gl.__proto__.createTexture=this.realGLCreateTexture,this.gl.__proto__.deleteTexture=this.realGLDeleteTexture,console.log("[TextureHook] Hook was removed!")),this.isInit=!1},t}(),u=function(){function t(){this._drawCalls=-1,this._maxDeltaDrawCalls=-1}return t.prototype.attach=function(t){this.glhook=new l(t),this.texturehook=new h(t)},Object.defineProperty(t.prototype,"drawCalls",{get:function(){return this.glhook&&this.glhook.isInit?this.glhook.drawPasses:-1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxDeltaDrawCalls",{get:function(){return this._maxDeltaDrawCalls},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"deltaDrawCalls",{get:function(){if(-1==this._drawCalls)return this._drawCalls=this.drawCalls,0;var t=this.drawCalls,e=t-this._drawCalls;return this._drawCalls=t,this._maxDeltaDrawCalls=Math.max(this._maxDeltaDrawCalls,e),e},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxTextureCount",{get:function(){return this.texturehook&&this.texturehook.isInit?this.texturehook.maxTexturesCount:0},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"texturesCount",{get:function(){return this.texturehook&&this.texturehook.isInit?this.texturehook.currentTextureCount:0},enumerable:!1,configurable:!0}),t.prototype.reset=function(){this._maxDeltaDrawCalls=-1,this._drawCalls=-1,this.glhook&&this.glhook.reset(),this.texturehook&&this.texturehook.reset()},t.prototype.release=function(){this.glhook&&this.glhook.release(),this.texturehook&&this.texturehook.release()},t}(),c=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.show=!0,e}return o(e,t),e.prototype.init=function(t){if(void 0===t&&(t={show:!0}),this.show=t.show,this.style=t.style,this.renderSystem=this.game.getSystem("Renderer"),this.app=this.renderSystem.application,this.app&&this.show){var e=this.app.renderer.gl;this.hook=new u,this.hook.attach(e)}},e.prototype.start=function(){this.show&&(this.component=this.game.scene.addComponent(new i),this.stats=a(this.style),this.component.stats=this.stats,this.stats.showPanel(0),document.body.appendChild(this.stats.dom))},e.prototype.lateUpdate=function(){this.show&&this.stats&&this.stats.end(this.hook)},e.systemName="Stats",e}(e.System),p={Components:[i],Systems:[c]};return t.Stats=i,t.StatsSystem=c,t.default=p,Object.defineProperty(t,"__esModule",{value:!0}),t}({},EVA);window.EVA.plugin.stats=window.EVA.plugin.stats||_EVA_IIFE_stats;

package/dist/miniprogram.js

@@ -56,6 +56,8 @@ var Stats = function Stats(style) {
       frames = 0;
   var fpsPanel = addPanel(Stats.Panel('FPS', '#0ff', '#002'));
   var msPanel = addPanel(Stats.Panel('MS', '#0f0', '#020'));
+  var dcPanel = addPanel(Stats.Panel('DrawCall', '#330570', '#A69700'));
+  var tcPanel = addPanel(Stats.Panel('TC:', '#A62500', '#00B454'));
   var memPanel;
 
   if (self.performance && self.performance.memory) {
@@ -71,11 +73,16 @@ var Stats = function Stats(style) {
     begin: function begin(time) {
       beginTime = time || (performance || Date).now();
     },
-    end: function end() {
+    end: function end(hook) {
       frames++;
       var time = (performance || Date).now();
       msPanel.update(time - beginTime, 200);
 
+      if (hook) {
+        dcPanel.update(hook.deltaDrawCalls, Math.max(50, hook.maxDeltaDrawCalls));
+        tcPanel.update(hook.texturesCount, Math.max(20, hook.maxTextureCount));
+      }
+
       if (time >= prevTime + 1000) {
         fpsPanel.update(frames * 1000 / (time - prevTime), 100);
         prevTime = time;
@@ -146,6 +153,193 @@ Stats.Panel = function (name, fg, bg) {
 
 var Stats$1 = Stats;
 
+var GLHook = function () {
+  function GLHook(_gl) {
+    this.drawPasses = 0;
+    this.isInit = false;
+
+    this.realGLDrawElements = function () {};
+
+    if (_gl) {
+      if (_gl.__proto__.drawElements) {
+        this.gl = _gl;
+        this.realGLDrawElements = _gl.__proto__.drawElements;
+        _gl.__proto__.drawElements = this.fakeGLdrawElements.bind(this);
+        this.isInit = true;
+      }
+    } else {
+      console.error("[GLHook] GL can't be NULL");
+    }
+  }
+
+  GLHook.prototype.fakeGLdrawElements = function (mode, count, type, offset) {
+    this.drawPasses++;
+    this.realGLDrawElements.call(this.gl, mode, count, type, offset);
+  };
+
+  GLHook.prototype.reset = function () {
+    this.drawPasses = 0;
+  };
+
+  GLHook.prototype.release = function () {
+    if (this.isInit) {
+      this.gl.__proto__.drawElements = this.realGLDrawElements;
+    }
+
+    this.isInit = false;
+  };
+
+  return GLHook;
+}();
+
+var TextureHook = function () {
+  function TextureHook(_gl) {
+    this.createdTextures = new Array();
+    this.maxTexturesCount = 0;
+    this.isInit = false;
+
+    this.realGLCreateTexture = function () {};
+
+    this.realGLDeleteTexture = function () {};
+
+    if (_gl) {
+      if (_gl.__proto__.createTexture) {
+        this.gl = _gl;
+        this.realGLCreateTexture = _gl.__proto__.createTexture;
+        this.realGLDeleteTexture = _gl.__proto__.deleteTexture;
+        _gl.__proto__.createTexture = this.fakeGLCreateTexture.bind(this);
+        _gl.__proto__.deleteTexture = this.fakeGLDeleteTexture.bind(this);
+        this.isInit = true;
+      }
+    } else {
+      console.error("[TextureHook] GL can't be NULL");
+    }
+  }
+
+  Object.defineProperty(TextureHook.prototype, "currentTextureCount", {
+    get: function get() {
+      return this.createdTextures.length;
+    },
+    enumerable: false,
+    configurable: true
+  });
+
+  TextureHook.prototype.registerTexture = function (texture) {
+    this.createdTextures.push(texture);
+    this.maxTexturesCount = Math.max(this.createdTextures.length, this.maxTexturesCount);
+  };
+
+  TextureHook.prototype.fakeGLCreateTexture = function () {
+    var texture = this.realGLCreateTexture.call(this.gl);
+    this.registerTexture(texture);
+    return texture;
+  };
+
+  TextureHook.prototype.fakeGLDeleteTexture = function (texture) {
+    var index = this.createdTextures.indexOf(texture);
+
+    if (index > -1) {
+      this.createdTextures.splice(index, 1);
+    }
+
+    this.realGLDeleteTexture.call(this.gl, texture);
+  };
+
+  TextureHook.prototype.reset = function () {
+    this.createdTextures = new Array();
+    this.maxTexturesCount = 0;
+  };
+
+  TextureHook.prototype.release = function () {
+    if (this.isInit) {
+      this.gl.__proto__.createTexture = this.realGLCreateTexture;
+      this.gl.__proto__.deleteTexture = this.realGLDeleteTexture;
+      console.log('[TextureHook] Hook was removed!');
+    }
+
+    this.isInit = false;
+  };
+
+  return TextureHook;
+}();
+
+var BaseHooks = function () {
+  function BaseHooks() {
+    this._drawCalls = -1;
+    this._maxDeltaDrawCalls = -1;
+  }
+
+  BaseHooks.prototype.attach = function (gl) {
+    this.glhook = new GLHook(gl);
+    this.texturehook = new TextureHook(gl);
+  };
+
+  Object.defineProperty(BaseHooks.prototype, "drawCalls", {
+    get: function get() {
+      if (this.glhook && this.glhook.isInit) {
+        return this.glhook.drawPasses;
+      }
+
+      return -1;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(BaseHooks.prototype, "maxDeltaDrawCalls", {
+    get: function get() {
+      return this._maxDeltaDrawCalls;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(BaseHooks.prototype, "deltaDrawCalls", {
+    get: function get() {
+      if (this._drawCalls == -1) {
+        this._drawCalls = this.drawCalls;
+        return 0;
+      }
+
+      var dc = this.drawCalls;
+      var delta = dc - this._drawCalls;
+      this._drawCalls = dc;
+      this._maxDeltaDrawCalls = Math.max(this._maxDeltaDrawCalls, delta);
+      return delta;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(BaseHooks.prototype, "maxTextureCount", {
+    get: function get() {
+      if (this.texturehook && this.texturehook.isInit) return this.texturehook.maxTexturesCount;
+      return 0;
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(BaseHooks.prototype, "texturesCount", {
+    get: function get() {
+      if (this.texturehook && this.texturehook.isInit) return this.texturehook.currentTextureCount;
+      return 0;
+    },
+    enumerable: false,
+    configurable: true
+  });
+
+  BaseHooks.prototype.reset = function () {
+    this._maxDeltaDrawCalls = -1;
+    this._drawCalls = -1;
+    if (this.glhook) this.glhook.reset();
+    if (this.texturehook) this.texturehook.reset();
+  };
+
+  BaseHooks.prototype.release = function () {
+    if (this.glhook) this.glhook.release();
+    if (this.texturehook) this.texturehook.release();
+  };
+
+  return BaseHooks;
+}();
+
 var StatsSystem = function (_super) {
   __extends(StatsSystem, _super);
 
@@ -165,6 +359,14 @@ var StatsSystem = function (_super) {
 
     this.show = param.show;
     this.style = param.style;
+    this.renderSystem = this.game.getSystem('Renderer');
+    this.app = this.renderSystem.application;
+
+    if (this.app && this.show) {
+      var gl = this.app.renderer.gl;
+      this.hook = new BaseHooks();
+      this.hook.attach(gl);
+    }
   };
 
   StatsSystem.prototype.start = function () {
@@ -178,7 +380,7 @@ var StatsSystem = function (_super) {
 
   StatsSystem.prototype.lateUpdate = function () {
     if (!this.show) return;
-    this.stats && this.stats.end();
+    this.stats && this.stats.end(this.hook);
   };
 
   StatsSystem.systemName = 'Stats';

package/dist/plugin-stats.cjs.js

@@ -80,6 +80,8 @@ var Stats = function (style) {
     var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0;
     var fpsPanel = addPanel(Stats.Panel('FPS', '#0ff', '#002'));
     var msPanel = addPanel(Stats.Panel('MS', '#0f0', '#020'));
+    var dcPanel = addPanel(Stats.Panel('DrawCall', '#330570', '#A69700'));
+    var tcPanel = addPanel(Stats.Panel('TC:', '#A62500', '#00B454'));
     var memPanel;
     if (self.performance && self.performance.memory) {
         memPanel = addPanel(Stats.Panel('MB', '#f08', '#201'));
@@ -93,10 +95,14 @@ var Stats = function (style) {
         begin: function (time) {
             beginTime = time || (performance || Date).now();
         },
-        end: function () {
+        end: function (hook) {
             frames++;
             var time = (performance || Date).now();
             msPanel.update(time - beginTime, 200);
+            if (hook) {
+                dcPanel.update(hook.deltaDrawCalls, Math.max(50, hook.maxDeltaDrawCalls));
+                tcPanel.update(hook.texturesCount, Math.max(20, hook.maxTextureCount));
+            }
             if (time >= prevTime + 1000) {
                 fpsPanel.update((frames * 1000) / (time - prevTime), 100);
                 prevTime = time;
@@ -155,6 +161,174 @@ Stats.Panel = function (name, fg, bg) {
 };
 var Stats$1 = Stats;
 
+var GLHook = (function () {
+    function GLHook(_gl) {
+        this.drawPasses = 0;
+        this.isInit = false;
+        this.realGLDrawElements = function () { };
+        if (_gl) {
+            if (_gl.__proto__.drawElements) {
+                this.gl = _gl;
+                this.realGLDrawElements = _gl.__proto__.drawElements;
+                _gl.__proto__.drawElements = this.fakeGLdrawElements.bind(this);
+                this.isInit = true;
+            }
+        }
+        else {
+            console.error("[GLHook] GL can't be NULL");
+        }
+    }
+    GLHook.prototype.fakeGLdrawElements = function (mode, count, type, offset) {
+        this.drawPasses++;
+        this.realGLDrawElements.call(this.gl, mode, count, type, offset);
+    };
+    GLHook.prototype.reset = function () {
+        this.drawPasses = 0;
+    };
+    GLHook.prototype.release = function () {
+        if (this.isInit) {
+            this.gl.__proto__.drawElements = this.realGLDrawElements;
+        }
+        this.isInit = false;
+    };
+    return GLHook;
+}());
+
+var TextureHook = (function () {
+    function TextureHook(_gl) {
+        this.createdTextures = new Array();
+        this.maxTexturesCount = 0;
+        this.isInit = false;
+        this.realGLCreateTexture = function () { };
+        this.realGLDeleteTexture = function () { };
+        if (_gl) {
+            if (_gl.__proto__.createTexture) {
+                this.gl = _gl;
+                this.realGLCreateTexture = _gl.__proto__.createTexture;
+                this.realGLDeleteTexture = _gl.__proto__.deleteTexture;
+                _gl.__proto__.createTexture = this.fakeGLCreateTexture.bind(this);
+                _gl.__proto__.deleteTexture = this.fakeGLDeleteTexture.bind(this);
+                this.isInit = true;
+            }
+        }
+        else {
+            console.error("[TextureHook] GL can't be NULL");
+        }
+    }
+    Object.defineProperty(TextureHook.prototype, "currentTextureCount", {
+        get: function () {
+            return this.createdTextures.length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextureHook.prototype.registerTexture = function (texture) {
+        this.createdTextures.push(texture);
+        this.maxTexturesCount = Math.max(this.createdTextures.length, this.maxTexturesCount);
+    };
+    TextureHook.prototype.fakeGLCreateTexture = function () {
+        var texture = this.realGLCreateTexture.call(this.gl);
+        this.registerTexture(texture);
+        return texture;
+    };
+    TextureHook.prototype.fakeGLDeleteTexture = function (texture) {
+        var index = this.createdTextures.indexOf(texture);
+        if (index > -1) {
+            this.createdTextures.splice(index, 1);
+        }
+        this.realGLDeleteTexture.call(this.gl, texture);
+    };
+    TextureHook.prototype.reset = function () {
+        this.createdTextures = new Array();
+        this.maxTexturesCount = 0;
+    };
+    TextureHook.prototype.release = function () {
+        if (this.isInit) {
+            this.gl.__proto__.createTexture = this.realGLCreateTexture;
+            this.gl.__proto__.deleteTexture = this.realGLDeleteTexture;
+            console.log('[TextureHook] Hook was removed!');
+        }
+        this.isInit = false;
+    };
+    return TextureHook;
+}());
+
+var BaseHooks = (function () {
+    function BaseHooks() {
+        this._drawCalls = -1;
+        this._maxDeltaDrawCalls = -1;
+    }
+    BaseHooks.prototype.attach = function (gl) {
+        this.glhook = new GLHook(gl);
+        this.texturehook = new TextureHook(gl);
+    };
+    Object.defineProperty(BaseHooks.prototype, "drawCalls", {
+        get: function () {
+            if (this.glhook && this.glhook.isInit) {
+                return this.glhook.drawPasses;
+            }
+            return -1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "maxDeltaDrawCalls", {
+        get: function () {
+            return this._maxDeltaDrawCalls;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "deltaDrawCalls", {
+        get: function () {
+            if (this._drawCalls == -1) {
+                this._drawCalls = this.drawCalls;
+                return 0;
+            }
+            var dc = this.drawCalls;
+            var delta = dc - this._drawCalls;
+            this._drawCalls = dc;
+            this._maxDeltaDrawCalls = Math.max(this._maxDeltaDrawCalls, delta);
+            return delta;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "maxTextureCount", {
+        get: function () {
+            if (this.texturehook && this.texturehook.isInit)
+                return this.texturehook.maxTexturesCount;
+            return 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "texturesCount", {
+        get: function () {
+            if (this.texturehook && this.texturehook.isInit)
+                return this.texturehook.currentTextureCount;
+            return 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BaseHooks.prototype.reset = function () {
+        this._maxDeltaDrawCalls = -1;
+        this._drawCalls = -1;
+        if (this.glhook)
+            this.glhook.reset();
+        if (this.texturehook)
+            this.texturehook.reset();
+    };
+    BaseHooks.prototype.release = function () {
+        if (this.glhook)
+            this.glhook.release();
+        if (this.texturehook)
+            this.texturehook.release();
+    };
+    return BaseHooks;
+}());
+
 var StatsSystem = (function (_super) {
     __extends(StatsSystem, _super);
     function StatsSystem() {
@@ -166,6 +340,13 @@ var StatsSystem = (function (_super) {
         if (param === void 0) { param = { show: true }; }
         this.show = param.show;
         this.style = param.style;
+        this.renderSystem = this.game.getSystem('Renderer');
+        this.app = this.renderSystem.application;
+        if (this.app && this.show) {
+            var gl = this.app.renderer.gl;
+            this.hook = new BaseHooks();
+            this.hook.attach(gl);
+        }
     };
     StatsSystem.prototype.start = function () {
         if (!this.show)
@@ -179,7 +360,7 @@ var StatsSystem = (function (_super) {
     StatsSystem.prototype.lateUpdate = function () {
         if (!this.show)
             return;
-        this.stats && this.stats.end();
+        this.stats && this.stats.end(this.hook);
     };
     StatsSystem.systemName = 'Stats';
     return StatsSystem;

package/dist/plugin-stats.cjs.prod.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,n)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=function(t,r){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,r)};
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
@@ -12,4 +12,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
 
 See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
-***************************************************************************** */function n(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}var o=function(){return(o=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},i=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.update=function(){this.stats&&this.stats.begin()},e.componentName="Stats",e}(t.Component),s=function(t){var e=(t=o({width:20,height:12,x:0,y:0},t)).width,n=t.height,i=t.x,a=t.y,r=0,l=document.createElement("div");function c(t){return l.appendChild(t.dom),t}function p(t){for(var e=0;e<l.children.length;e++)l.children[e].style.display=e===t?"block":"none";r=t}l.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000;width: "+e+"vw;height: "+n+"vw;left: "+i+"vw;top: "+a+"vw;",l.addEventListener("click",(function(t){t.preventDefault(),p(++r%l.children.length)}),!1);var f,h=(performance||Date).now(),u=h,d=0,y=c(s.Panel("FPS","#0ff","#002")),m=c(s.Panel("MS","#0f0","#020"));return self.performance&&self.performance.memory&&(f=c(s.Panel("MB","#f08","#201"))),p(0),{REVISION:16,dom:l,addPanel:c,showPanel:p,begin:function(t){h=t||(performance||Date).now()},end:function(){d++;var t=(performance||Date).now();if(m.update(t-h,200),t>=u+1e3&&(y.update(1e3*d/(t-u),100),u=t,d=0,f)){var e=performance.memory;f.update(e.usedJSHeapSize/1048576,e.jsHeapSizeLimit/1048576)}return t},update:function(){h=this.end()},domElement:l,setMode:p}};s.Panel=function(t,e,n){var o=1/0,i=0,s=Math.round,a=s(window.devicePixelRatio||1),r=80*a,l=48*a,c=3*a,p=2*a,f=3*a,h=15*a,u=74*a,d=30*a,y=document.createElement("canvas");y.width=r,y.height=l,y.style.cssText="width:100%;height:100%";var m=y.getContext("2d");return m.font="bold "+9*a+"px Helvetica,Arial,sans-serif",m.textBaseline="top",m.fillStyle=n,m.fillRect(0,0,r,l),m.fillStyle=e,m.fillText(t,c,p),m.fillRect(f,h,u,d),m.fillStyle=n,m.globalAlpha=.9,m.fillRect(f,h,u,d),{dom:y,update:function(l,v){o=Math.min(o,l),i=Math.max(i,l),m.fillStyle=n,m.globalAlpha=1,m.fillRect(0,0,r,h),m.fillStyle=e,m.fillText(s(l)+" "+t+" ("+s(o)+"-"+s(i)+")",c,p),m.drawImage(y,f+a,h,u-a,d,f,h,u-a,d),m.fillRect(f+u-a,h,a,d),m.fillStyle=n,m.globalAlpha=.9,m.fillRect(f+u-a,h,a,s((1-l/v)*d))}}};var a=s,r=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.show=!0,e}return n(e,t),e.prototype.init=function(t){void 0===t&&(t={show:!0}),this.show=t.show,this.style=t.style},e.prototype.start=function(){this.show&&(this.component=this.game.scene.addComponent(new i),this.stats=a(this.style),this.component.stats=this.stats,this.stats.showPanel(0),document.body.appendChild(this.stats.dom))},e.prototype.lateUpdate=function(){this.show&&this.stats&&this.stats.end()},e.systemName="Stats",e}(t.System),l={Components:[i],Systems:[r]};exports.Stats=i,exports.StatsSystem=r,exports.default=l;
+***************************************************************************** */function r(t,r){function o(){this.constructor=t}e(t,r),t.prototype=null===r?Object.create(r):(o.prototype=r.prototype,new o)}var o=function(){return(o=Object.assign||function(t){for(var e,r=1,o=arguments.length;r<o;r++)for(var s in e=arguments[r])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},s=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return r(e,t),e.prototype.update=function(){this.stats&&this.stats.begin()},e.componentName="Stats",e}(t.Component),n=function(t){var e=(t=o({width:20,height:12,x:0,y:0},t)).width,r=t.height,s=t.x,i=t.y,a=0,l=document.createElement("div");function h(t){return l.appendChild(t.dom),t}function u(t){for(var e=0;e<l.children.length;e++)l.children[e].style.display=e===t?"block":"none";a=t}l.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000;width: "+e+"vw;height: "+r+"vw;left: "+s+"vw;top: "+i+"vw;",l.addEventListener("click",(function(t){t.preventDefault(),u(++a%l.children.length)}),!1);var c,p=(performance||Date).now(),f=p,d=0,x=h(n.Panel("FPS","#0ff","#002")),m=h(n.Panel("MS","#0f0","#020")),w=h(n.Panel("DrawCall","#330570","#A69700")),y=h(n.Panel("TC:","#A62500","#00B454"));return self.performance&&self.performance.memory&&(c=h(n.Panel("MB","#f08","#201"))),u(0),{REVISION:16,dom:l,addPanel:h,showPanel:u,begin:function(t){p=t||(performance||Date).now()},end:function(t){d++;var e=(performance||Date).now();if(m.update(e-p,200),t&&(w.update(t.deltaDrawCalls,Math.max(50,t.maxDeltaDrawCalls)),y.update(t.texturesCount,Math.max(20,t.maxTextureCount))),e>=f+1e3&&(x.update(1e3*d/(e-f),100),f=e,d=0,c)){var r=performance.memory;c.update(r.usedJSHeapSize/1048576,r.jsHeapSizeLimit/1048576)}return e},update:function(){p=this.end()},domElement:l,setMode:u}};n.Panel=function(t,e,r){var o=1/0,s=0,n=Math.round,i=n(window.devicePixelRatio||1),a=80*i,l=48*i,h=3*i,u=2*i,c=3*i,p=15*i,f=74*i,d=30*i,x=document.createElement("canvas");x.width=a,x.height=l,x.style.cssText="width:100%;height:100%";var m=x.getContext("2d");return m.font="bold "+9*i+"px Helvetica,Arial,sans-serif",m.textBaseline="top",m.fillStyle=r,m.fillRect(0,0,a,l),m.fillStyle=e,m.fillText(t,h,u),m.fillRect(c,p,f,d),m.fillStyle=r,m.globalAlpha=.9,m.fillRect(c,p,f,d),{dom:x,update:function(l,w){o=Math.min(o,l),s=Math.max(s,l),m.fillStyle=r,m.globalAlpha=1,m.fillRect(0,0,a,p),m.fillStyle=e,m.fillText(n(l)+" "+t+" ("+n(o)+"-"+n(s)+")",h,u),m.drawImage(x,c+i,p,f-i,d,c,p,f-i,d),m.fillRect(c+f-i,p,i,d),m.fillStyle=r,m.globalAlpha=.9,m.fillRect(c+f-i,p,i,n((1-l/w)*d))}}};var i=n,a=function(){function t(t){this.drawPasses=0,this.isInit=!1,this.realGLDrawElements=function(){},t?t.__proto__.drawElements&&(this.gl=t,this.realGLDrawElements=t.__proto__.drawElements,t.__proto__.drawElements=this.fakeGLdrawElements.bind(this),this.isInit=!0):console.error("[GLHook] GL can't be NULL")}return t.prototype.fakeGLdrawElements=function(t,e,r,o){this.drawPasses++,this.realGLDrawElements.call(this.gl,t,e,r,o)},t.prototype.reset=function(){this.drawPasses=0},t.prototype.release=function(){this.isInit&&(this.gl.__proto__.drawElements=this.realGLDrawElements),this.isInit=!1},t}(),l=function(){function t(t){this.createdTextures=new Array,this.maxTexturesCount=0,this.isInit=!1,this.realGLCreateTexture=function(){},this.realGLDeleteTexture=function(){},t?t.__proto__.createTexture&&(this.gl=t,this.realGLCreateTexture=t.__proto__.createTexture,this.realGLDeleteTexture=t.__proto__.deleteTexture,t.__proto__.createTexture=this.fakeGLCreateTexture.bind(this),t.__proto__.deleteTexture=this.fakeGLDeleteTexture.bind(this),this.isInit=!0):console.error("[TextureHook] GL can't be NULL")}return Object.defineProperty(t.prototype,"currentTextureCount",{get:function(){return this.createdTextures.length},enumerable:!1,configurable:!0}),t.prototype.registerTexture=function(t){this.createdTextures.push(t),this.maxTexturesCount=Math.max(this.createdTextures.length,this.maxTexturesCount)},t.prototype.fakeGLCreateTexture=function(){var t=this.realGLCreateTexture.call(this.gl);return this.registerTexture(t),t},t.prototype.fakeGLDeleteTexture=function(t){var e=this.createdTextures.indexOf(t);e>-1&&this.createdTextures.splice(e,1),this.realGLDeleteTexture.call(this.gl,t)},t.prototype.reset=function(){this.createdTextures=new Array,this.maxTexturesCount=0},t.prototype.release=function(){this.isInit&&(this.gl.__proto__.createTexture=this.realGLCreateTexture,this.gl.__proto__.deleteTexture=this.realGLDeleteTexture,console.log("[TextureHook] Hook was removed!")),this.isInit=!1},t}(),h=function(){function t(){this._drawCalls=-1,this._maxDeltaDrawCalls=-1}return t.prototype.attach=function(t){this.glhook=new a(t),this.texturehook=new l(t)},Object.defineProperty(t.prototype,"drawCalls",{get:function(){return this.glhook&&this.glhook.isInit?this.glhook.drawPasses:-1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxDeltaDrawCalls",{get:function(){return this._maxDeltaDrawCalls},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"deltaDrawCalls",{get:function(){if(-1==this._drawCalls)return this._drawCalls=this.drawCalls,0;var t=this.drawCalls,e=t-this._drawCalls;return this._drawCalls=t,this._maxDeltaDrawCalls=Math.max(this._maxDeltaDrawCalls,e),e},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxTextureCount",{get:function(){return this.texturehook&&this.texturehook.isInit?this.texturehook.maxTexturesCount:0},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"texturesCount",{get:function(){return this.texturehook&&this.texturehook.isInit?this.texturehook.currentTextureCount:0},enumerable:!1,configurable:!0}),t.prototype.reset=function(){this._maxDeltaDrawCalls=-1,this._drawCalls=-1,this.glhook&&this.glhook.reset(),this.texturehook&&this.texturehook.reset()},t.prototype.release=function(){this.glhook&&this.glhook.release(),this.texturehook&&this.texturehook.release()},t}(),u=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.show=!0,e}return r(e,t),e.prototype.init=function(t){if(void 0===t&&(t={show:!0}),this.show=t.show,this.style=t.style,this.renderSystem=this.game.getSystem("Renderer"),this.app=this.renderSystem.application,this.app&&this.show){var e=this.app.renderer.gl;this.hook=new h,this.hook.attach(e)}},e.prototype.start=function(){this.show&&(this.component=this.game.scene.addComponent(new s),this.stats=i(this.style),this.component.stats=this.stats,this.stats.showPanel(0),document.body.appendChild(this.stats.dom))},e.prototype.lateUpdate=function(){this.show&&this.stats&&this.stats.end(this.hook)},e.systemName="Stats",e}(t.System),c={Components:[s],Systems:[u]};exports.Stats=s,exports.StatsSystem=u,exports.default=c;

package/dist/plugin-stats.d.ts

@@ -1,4 +1,6 @@
+import type { Application } from '@eva/renderer-adapter';
 import { Component } from '@eva/eva.js';
+import type { RendererSystem } from '@eva/plugin-renderer';
 import { System } from '@eva/eva.js';
 
 declare const _default: {
@@ -25,9 +27,12 @@ declare interface StatsParams {
 
 export declare class StatsSystem extends System {
     static systemName: string;
+    app: Application;
+    renderSystem: RendererSystem;
     show: boolean;
     stats: any;
     style: any;
+    hook: any;
     component: Stats;
     init(param?: StatsParams): void;
     start(): void;

package/dist/plugin-stats.esm.js

@@ -76,6 +76,8 @@ var Stats = function (style) {
     var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0;
     var fpsPanel = addPanel(Stats.Panel('FPS', '#0ff', '#002'));
     var msPanel = addPanel(Stats.Panel('MS', '#0f0', '#020'));
+    var dcPanel = addPanel(Stats.Panel('DrawCall', '#330570', '#A69700'));
+    var tcPanel = addPanel(Stats.Panel('TC:', '#A62500', '#00B454'));
     var memPanel;
     if (self.performance && self.performance.memory) {
         memPanel = addPanel(Stats.Panel('MB', '#f08', '#201'));
@@ -89,10 +91,14 @@ var Stats = function (style) {
         begin: function (time) {
             beginTime = time || (performance || Date).now();
         },
-        end: function () {
+        end: function (hook) {
             frames++;
             var time = (performance || Date).now();
             msPanel.update(time - beginTime, 200);
+            if (hook) {
+                dcPanel.update(hook.deltaDrawCalls, Math.max(50, hook.maxDeltaDrawCalls));
+                tcPanel.update(hook.texturesCount, Math.max(20, hook.maxTextureCount));
+            }
             if (time >= prevTime + 1000) {
                 fpsPanel.update((frames * 1000) / (time - prevTime), 100);
                 prevTime = time;
@@ -151,6 +157,174 @@ Stats.Panel = function (name, fg, bg) {
 };
 var Stats$1 = Stats;
 
+var GLHook = (function () {
+    function GLHook(_gl) {
+        this.drawPasses = 0;
+        this.isInit = false;
+        this.realGLDrawElements = function () { };
+        if (_gl) {
+            if (_gl.__proto__.drawElements) {
+                this.gl = _gl;
+                this.realGLDrawElements = _gl.__proto__.drawElements;
+                _gl.__proto__.drawElements = this.fakeGLdrawElements.bind(this);
+                this.isInit = true;
+            }
+        }
+        else {
+            console.error("[GLHook] GL can't be NULL");
+        }
+    }
+    GLHook.prototype.fakeGLdrawElements = function (mode, count, type, offset) {
+        this.drawPasses++;
+        this.realGLDrawElements.call(this.gl, mode, count, type, offset);
+    };
+    GLHook.prototype.reset = function () {
+        this.drawPasses = 0;
+    };
+    GLHook.prototype.release = function () {
+        if (this.isInit) {
+            this.gl.__proto__.drawElements = this.realGLDrawElements;
+        }
+        this.isInit = false;
+    };
+    return GLHook;
+}());
+
+var TextureHook = (function () {
+    function TextureHook(_gl) {
+        this.createdTextures = new Array();
+        this.maxTexturesCount = 0;
+        this.isInit = false;
+        this.realGLCreateTexture = function () { };
+        this.realGLDeleteTexture = function () { };
+        if (_gl) {
+            if (_gl.__proto__.createTexture) {
+                this.gl = _gl;
+                this.realGLCreateTexture = _gl.__proto__.createTexture;
+                this.realGLDeleteTexture = _gl.__proto__.deleteTexture;
+                _gl.__proto__.createTexture = this.fakeGLCreateTexture.bind(this);
+                _gl.__proto__.deleteTexture = this.fakeGLDeleteTexture.bind(this);
+                this.isInit = true;
+            }
+        }
+        else {
+            console.error("[TextureHook] GL can't be NULL");
+        }
+    }
+    Object.defineProperty(TextureHook.prototype, "currentTextureCount", {
+        get: function () {
+            return this.createdTextures.length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TextureHook.prototype.registerTexture = function (texture) {
+        this.createdTextures.push(texture);
+        this.maxTexturesCount = Math.max(this.createdTextures.length, this.maxTexturesCount);
+    };
+    TextureHook.prototype.fakeGLCreateTexture = function () {
+        var texture = this.realGLCreateTexture.call(this.gl);
+        this.registerTexture(texture);
+        return texture;
+    };
+    TextureHook.prototype.fakeGLDeleteTexture = function (texture) {
+        var index = this.createdTextures.indexOf(texture);
+        if (index > -1) {
+            this.createdTextures.splice(index, 1);
+        }
+        this.realGLDeleteTexture.call(this.gl, texture);
+    };
+    TextureHook.prototype.reset = function () {
+        this.createdTextures = new Array();
+        this.maxTexturesCount = 0;
+    };
+    TextureHook.prototype.release = function () {
+        if (this.isInit) {
+            this.gl.__proto__.createTexture = this.realGLCreateTexture;
+            this.gl.__proto__.deleteTexture = this.realGLDeleteTexture;
+            console.log('[TextureHook] Hook was removed!');
+        }
+        this.isInit = false;
+    };
+    return TextureHook;
+}());
+
+var BaseHooks = (function () {
+    function BaseHooks() {
+        this._drawCalls = -1;
+        this._maxDeltaDrawCalls = -1;
+    }
+    BaseHooks.prototype.attach = function (gl) {
+        this.glhook = new GLHook(gl);
+        this.texturehook = new TextureHook(gl);
+    };
+    Object.defineProperty(BaseHooks.prototype, "drawCalls", {
+        get: function () {
+            if (this.glhook && this.glhook.isInit) {
+                return this.glhook.drawPasses;
+            }
+            return -1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "maxDeltaDrawCalls", {
+        get: function () {
+            return this._maxDeltaDrawCalls;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "deltaDrawCalls", {
+        get: function () {
+            if (this._drawCalls == -1) {
+                this._drawCalls = this.drawCalls;
+                return 0;
+            }
+            var dc = this.drawCalls;
+            var delta = dc - this._drawCalls;
+            this._drawCalls = dc;
+            this._maxDeltaDrawCalls = Math.max(this._maxDeltaDrawCalls, delta);
+            return delta;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "maxTextureCount", {
+        get: function () {
+            if (this.texturehook && this.texturehook.isInit)
+                return this.texturehook.maxTexturesCount;
+            return 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(BaseHooks.prototype, "texturesCount", {
+        get: function () {
+            if (this.texturehook && this.texturehook.isInit)
+                return this.texturehook.currentTextureCount;
+            return 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    BaseHooks.prototype.reset = function () {
+        this._maxDeltaDrawCalls = -1;
+        this._drawCalls = -1;
+        if (this.glhook)
+            this.glhook.reset();
+        if (this.texturehook)
+            this.texturehook.reset();
+    };
+    BaseHooks.prototype.release = function () {
+        if (this.glhook)
+            this.glhook.release();
+        if (this.texturehook)
+            this.texturehook.release();
+    };
+    return BaseHooks;
+}());
+
 var StatsSystem = (function (_super) {
     __extends(StatsSystem, _super);
     function StatsSystem() {
@@ -162,6 +336,13 @@ var StatsSystem = (function (_super) {
         if (param === void 0) { param = { show: true }; }
         this.show = param.show;
         this.style = param.style;
+        this.renderSystem = this.game.getSystem('Renderer');
+        this.app = this.renderSystem.application;
+        if (this.app && this.show) {
+            var gl = this.app.renderer.gl;
+            this.hook = new BaseHooks();
+            this.hook.attach(gl);
+        }
     };
     StatsSystem.prototype.start = function () {
         if (!this.show)
@@ -175,7 +356,7 @@ var StatsSystem = (function (_super) {
     StatsSystem.prototype.lateUpdate = function () {
         if (!this.show)
             return;
-        this.stats && this.stats.end();
+        this.stats && this.stats.end(this.hook);
     };
     StatsSystem.systemName = 'Stats';
     return StatsSystem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-stats",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "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": "1.2.5",
+    "@eva/eva.js": "1.2.7",
     "lodash-es": "^4.17.21"
   }
 }