@galacean/effects-plugin-stats 2.2.0-alpha.0 → 2.2.0

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime stats for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 云垣
- * Version: v2.2.0-alpha.0
+ * Version: v2.2.0
  */
 
 import * as EFFECTS from '@galacean/effects';
@@ -36,6 +36,17 @@ function _async_to_generator(fn) {
     };
 }
 
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
 function _instanceof1(left, right) {
     if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
         return !!right[Symbol.hasInstance](left);
@@ -160,9 +171,12 @@ function _inherits(subClass, superClass) {
     if (superClass) _set_prototype_of(subClass, superClass);
 }
 
-var DrawCallHook = /*#__PURE__*/ function() {
-    function DrawCallHook(gl) {
+/**
+ * DrawCallHook
+ */ var DrawCallHook = /*#__PURE__*/ function() {
+    function DrawCallHook(gl, debug) {
         this.gl = gl;
+        this.debug = debug;
         this.drawCall = 0;
         this.triangles = 0;
         this.lines = 0;
@@ -172,7 +186,7 @@ var DrawCallHook = /*#__PURE__*/ function() {
         this.realDrawArrays = gl.drawArrays;
         gl.drawElements = this.hookedDrawElements.bind(this);
         gl.drawArrays = this.hookedDrawArrays.bind(this);
-        if (Stats.options.debug) {
+        if (debug) {
             console.debug("DrawCall is hooked.");
         }
     }
@@ -229,14 +243,18 @@ var DrawCallHook = /*#__PURE__*/ function() {
     return DrawCallHook;
 }();
 
-var ProgramHook = /*#__PURE__*/ function() {
-    function ProgramHook(gl) {
+/**
+ * ProgramHook
+ * 每一帧的 shader 数量
+ */ var ProgramHook = /*#__PURE__*/ function() {
+    function ProgramHook(gl, debug) {
         this.gl = gl;
+        this.debug = debug;
         this.programs = 0;
         this.hooked = true;
         this.realUseProgram = gl.useProgram;
         gl.useProgram = this.hookedUseProgram.bind(this);
-        if (Stats.options.debug) {
+        if (debug) {
             console.debug("Program is hooked.");
         }
     }
@@ -244,7 +262,7 @@ var ProgramHook = /*#__PURE__*/ function() {
     _proto.hookedUseProgram = function hookedUseProgram(program) {
         this.realUseProgram.call(this.gl, program);
         this.programs++;
-        if (Stats.options.debug) {
+        if (this.debug) {
             console.debug("UseProgram: " + program + ", program: " + this.programs + ".");
         }
     };
@@ -260,16 +278,19 @@ var ProgramHook = /*#__PURE__*/ function() {
     return ProgramHook;
 }();
 
-var ShaderHook = /*#__PURE__*/ function() {
-    function ShaderHook(gl) {
+/**
+ * ShaderHook
+ */ var ShaderHook = /*#__PURE__*/ function() {
+    function ShaderHook(gl, debug) {
         this.gl = gl;
+        this.debug = debug;
         this.shaders = 0;
         this.hooked = true;
         this.realAttachShader = gl.attachShader;
         this.realDetachShader = gl.detachShader;
         gl.attachShader = this.hookedAttachShader.bind(this);
         gl.detachShader = this.hookedDetachShader.bind(this);
-        if (Stats.options.debug) {
+        if (debug) {
             console.debug("Shader is hooked.");
         }
     }
@@ -277,14 +298,14 @@ var ShaderHook = /*#__PURE__*/ function() {
     _proto.hookedAttachShader = function hookedAttachShader(program, shader) {
         this.realAttachShader.call(this.gl, program, shader);
         this.shaders++;
-        if (Stats.options.debug) {
+        if (this.debug) {
             console.debug("AttachShader: " + shader + ". shaders: " + this.shaders);
         }
     };
     _proto.hookedDetachShader = function hookedDetachShader(program, shader) {
         this.realDetachShader.call(this.gl, program, shader);
         this.shaders--;
-        if (Stats.options.debug) {
+        if (this.debug) {
             console.debug("DetachShader. shaders: " + this.shaders);
         }
     };
@@ -301,16 +322,19 @@ var ShaderHook = /*#__PURE__*/ function() {
     return ShaderHook;
 }();
 
-var TextureHook = /*#__PURE__*/ function() {
-    function TextureHook(gl) {
+/**
+ * TextureHook
+ */ var TextureHook = /*#__PURE__*/ function() {
+    function TextureHook(gl, debug) {
         this.gl = gl;
+        this.debug = debug;
         this.textures = 0;
         this.hooked = true;
         this.realCreateTexture = gl.createTexture;
         this.realDeleteTexture = gl.deleteTexture;
         gl.createTexture = this.hookedCreateTexture.bind(this);
         gl.deleteTexture = this.hookedDeleteTexture.bind(this);
-        if (Stats.options.debug) {
+        if (debug) {
             console.debug("Texture is hooked.");
         }
     }
@@ -318,7 +342,7 @@ var TextureHook = /*#__PURE__*/ function() {
     _proto.hookedCreateTexture = function hookedCreateTexture() {
         var texture = this.realCreateTexture.call(this.gl);
         this.textures++;
-        if (Stats.options.debug) {
+        if (this.debug) {
             console.debug("CreateTexture: " + texture + ", textures: " + this.textures + ".");
         }
         return texture;
@@ -326,7 +350,7 @@ var TextureHook = /*#__PURE__*/ function() {
     _proto.hookedDeleteTexture = function hookedDeleteTexture(texture) {
         this.realDeleteTexture.call(this.gl, texture);
         this.textures--;
-        if (Stats.options.debug) {
+        if (this.debug) {
             console.debug("DeleteTexture, textures: " + this.textures + ".");
         }
     };
@@ -346,7 +370,8 @@ var TextureHook = /*#__PURE__*/ function() {
 /**
  * Hook gl to calculate stats
  */ var Core = /*#__PURE__*/ function() {
-    function Core(gl) {
+    function Core(gl, debug) {
+        if (debug === void 0) debug = false;
         this.gl = gl;
         this.samplingFrames = 60;
         this.samplingIndex = 0;
@@ -355,14 +380,14 @@ var TextureHook = /*#__PURE__*/ function() {
         if (!gl) {
             throw new Error("Unsupported WebGL context.");
         }
-        this.hook(gl);
+        this.hook(gl, debug);
     }
     var _proto = Core.prototype;
-    _proto.hook = function hook(gl) {
-        this.drawCallHook = new DrawCallHook(gl);
-        this.textureHook = new TextureHook(gl);
-        this.shaderHook = new ShaderHook(gl);
-        this.programHook = new ProgramHook(gl);
+    _proto.hook = function hook(gl, debug) {
+        this.drawCallHook = new DrawCallHook(gl, debug);
+        this.textureHook = new TextureHook(gl, debug);
+        this.shaderHook = new ShaderHook(gl, debug);
+        this.programHook = new ProgramHook(gl, debug);
     };
     /**
    * reset draw call hook
@@ -398,12 +423,12 @@ var TextureHook = /*#__PURE__*/ function() {
             fps: Math.round(this.updateCounter * 1000 / (now - this.updateTime)),
             // eslint-disable-next-line compat/compat -- performance.memory is not standard
             memory: performance.memory && performance.memory.usedJSHeapSize / 1048576 >> 0,
-            drawCall: this.drawCallHook.drawCall === 0 ? 0 : this.drawCallHook.drawCall - 1,
-            triangles: this.drawCallHook.triangles === 0 ? 0 : this.drawCallHook.triangles - 2,
+            drawCall: this.drawCallHook.drawCall === 0 ? 0 : this.drawCallHook.drawCall,
+            triangles: this.drawCallHook.triangles === 0 ? 0 : this.drawCallHook.triangles,
             lines: this.drawCallHook.lines,
             points: this.drawCallHook.points,
             textures: this.textureHook.textures,
-            shaders: this.shaderHook.shaders === 0 ? 0 : this.shaderHook.shaders + 1,
+            shaders: this.shaderHook.shaders === 0 ? 0 : this.shaderHook.shaders,
             programs: this.programHook.programs,
             webglContext: _instanceof1(this.gl, WebGL2RenderingContext) ? "2.0" : "1.0"
         };
@@ -416,9 +441,10 @@ var TextureHook = /*#__PURE__*/ function() {
 }();
 
 var tpl = '\n  <dl>\n    <dt>FPS</dt>\n    <dd>0</dd>\n    <dt>Memory <span class="unit">(MB)</span></dt>\n    <dd>0</dd>\n    <dt>DrawCall</dt>\n    <dd>0</dd>\n    <dt>Triangles</dt>\n    <dd>0</dd>\n    <dt>Textures</dt>\n    <dd>0</dd>\n    <dt>Shaders</dt>\n    <dd>0</dd>\n    <dt>Program</dt>\n    <dd>0</dd>\n    <dt>WebGL</dt>\n    <dd></dd>\n  </dl>\n';
-var css = "\n  .gl-perf {\n    pointer-events: none;\n    user-select: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    padding: " + 10 / 7.5 + "vh " + 10 / 7.5 + "vh 0 " + 10 / 7.5 + "vh;\n    background: rgba(0, 0, 0, 0.3);\n    color: #fff;\n    font: " + 10 / 7.5 + "vh arial;\n  }\n\n  .gl-perf dl,\n  .gl-perf dt,\n  .gl-perf dd {\n    padding: 0;\n    margin: 0;\n  }\n\n  .gl-perf dt {\n    color: #fff;\n    text-shadow: #000 0 0 1px;\n  }\n\n  .gl-perf dt .unit{\n    font-size: " + 10 / 7.5 + "vh;\n  }\n\n  .gl-perf dd {\n    font-size: " + 20 / 7.5 + "vh;\n    padding: " + 10 / 7.5 + "vh 0 " + 10 / 7.5 + "vh;\n  }\n";
+var css = "\n  .gl-perf {\n    pointer-events: none;\n    user-select: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: " + 10 / 7.5 + "vh " + 10 / 7.5 + "vh 0 " + 10 / 7.5 + "vh;\n    background: rgba(0, 0, 0, 0.3);\n    color: #fff;\n    font: " + 10 / 7.5 + "vh arial;\n  }\n\n  .gl-perf dl,\n  .gl-perf dt,\n  .gl-perf dd {\n    padding: 0;\n    margin: 0;\n  }\n\n  .gl-perf dt {\n    color: #fff;\n    text-shadow: #000 0 0 1px;\n  }\n\n  .gl-perf dt .unit{\n    font-size: " + 10 / 7.5 + "vh;\n  }\n\n  .gl-perf dd {\n    font-size: " + 20 / 7.5 + "vh;\n    padding: " + 10 / 7.5 + "vh 0 " + 10 / 7.5 + "vh;\n  }\n";
 var Monitor = /*#__PURE__*/ function() {
-    function Monitor(gl) {
+    function Monitor(gl, options) {
+        this.options = options;
         this.items = [
             "fps",
             "memory",
@@ -441,19 +467,22 @@ var Monitor = /*#__PURE__*/ function() {
             programs: 0,
             webglContext: "2.0"
         };
-        this.core = new Core(gl);
+        this.core = new Core(gl, options.debug);
         this.createContainer();
         this.update = this.update.bind(this);
     }
     var _proto = Monitor.prototype;
     _proto.createContainer = function createContainer() {
         var container = document.createElement("div");
+        this.container = container;
+        if (!this.options.visible) {
+            this.hide();
+        }
         container.classList.add("gl-perf");
         container.innerHTML = tpl;
         container.appendChild(this.createStyle());
-        document.body.appendChild(container);
+        this.options.container.appendChild(container);
         this.doms = Array.prototype.slice.apply(container.querySelectorAll("dd"));
-        this.container = container;
     };
     _proto.createStyle = function createStyle() {
         var style = document.createElement("style");
@@ -473,11 +502,17 @@ var Monitor = /*#__PURE__*/ function() {
             });
         };
         var data = this.core.update(dt);
-        if (!data || data.drawCall === 0 || data.triangles === 0) {
+        if (!data || data.triangles === 0) {
             return;
         }
         for(var i = 0, l = this.items.length; i < l; i++)_this = this, _loop(i);
     };
+    _proto.hide = function hide() {
+        this.container.style.display = "none";
+    };
+    _proto.show = function show() {
+        this.container.style.display = "block";
+    };
     /**
    * reset all hooks
    */ _proto.reset = function reset() {
@@ -502,7 +537,7 @@ var Monitor = /*#__PURE__*/ function() {
    * dispose the instance
    */ _proto.dispose = function dispose() {
         this.release();
-        document.body.removeChild(this.container);
+        this.container.remove();
     };
     return Monitor;
 }();
@@ -513,10 +548,10 @@ var StatsComponent = /*#__PURE__*/ function(Behaviour) {
         return Behaviour.apply(this, arguments);
     }
     var _proto = StatsComponent.prototype;
-    _proto.onStart = function onStart() {
+    _proto.init = function init(options) {
         var renderer = this.engine.renderer;
         var gl = renderer.pipelineContext.gl;
-        this.monitor = new Monitor(gl);
+        this.monitor = new Monitor(gl, options);
     };
     _proto.onUpdate = function onUpdate(dt) {
         this.monitor.update(dt);
@@ -528,6 +563,11 @@ var StatsComponent = /*#__PURE__*/ function(Behaviour) {
     return StatsComponent;
 }(Behaviour);
 
+var defaultStatsOptions = {
+    debug: false,
+    visible: true,
+    container: document.body
+};
 var json = {
     "images": [],
     "fonts": [],
@@ -622,18 +662,16 @@ var json = {
  *
  */ var Stats = /*#__PURE__*/ function() {
     function Stats(player, options) {
-        if (options === void 0) options = {
-            debug: false
-        };
         this.player = player;
-        Stats.options = options;
+        this.options = options;
+        this.disposed = false;
         void this.init();
     }
     var _proto = Stats.prototype;
     _proto.init = function init() {
         var _this = this;
         return _async_to_generator(function() {
-            var composition, component, e;
+            var composition, item, e;
             return __generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -649,8 +687,11 @@ var json = {
                         ];
                     case 1:
                         composition = _state.sent();
-                        component = composition.getItemByName("component");
-                        component == null ? void 0 : component.addComponent(StatsComponent);
+                        item = composition.getItemByName("component");
+                        if (item) {
+                            item.addComponent(StatsComponent).init(_extends({}, defaultStatsOptions, _this.options));
+                            _this.component = item.getComponent(StatsComponent);
+                        }
                         return [
                             3,
                             3
@@ -666,12 +707,29 @@ var json = {
             });
         })();
     };
+    _proto.hide = function hide() {
+        var _this_component;
+        (_this_component = this.component) == null ? void 0 : _this_component.monitor.hide();
+    };
+    _proto.show = function show() {
+        var _this_component;
+        (_this_component = this.component) == null ? void 0 : _this_component.monitor.show();
+    };
+    _proto.dispose = function dispose() {
+        var _this_component;
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        (_this_component = this.component) == null ? void 0 : _this_component.dispose();
+        this.component = undefined;
+    };
     return Stats;
 }();
 
 /**
  * 插件版本号
- */ var version = "2.2.0-alpha.0";
+ */ var version = "2.2.0";
 logger.info("Plugin stats version: " + version + ".");
 if (version !== EFFECTS.version) {
     console.error("注意：请统一 Stats 插件与 Player 版本，不统一的版本混用会有不可预知的后果！", "\nAttention: Please ensure the Stats plugin is synchronized with the Player version. Mixing and matching incompatible versions may result in unpredictable consequences!");