@galacean/effects-plugin-stats 2.4.8 → 2.5.0-alpha.1

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime stats for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 云垣
- * Version: v2.4.8
+ * Version: v2.5.0-alpha.1
  */
 
 'use strict';
@@ -194,6 +194,11 @@ function _inherits(subClass, superClass) {
     if (superClass) _set_prototype_of(subClass, superClass);
 }
 
+function _assert_this_initialized(self) {
+    if (self === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    return self;
+}
+
 /**
  * DrawCallHook
  */ var DrawCallHook = /*#__PURE__*/ function() {
@@ -345,14 +350,40 @@ function _inherits(subClass, superClass) {
     return ShaderHook;
 }();
 
-/**
- * TextureHook
- */ var TextureHook = /*#__PURE__*/ function() {
+var TextureHook = /*#__PURE__*/ function() {
     function TextureHook(gl, debug) {
+        var _this = this;
         this.gl = gl;
         this.debug = debug;
         this.textures = 0;
         this.hooked = true;
+        this.hookedCreateTexture = function() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            var _this_realCreateTexture;
+            var texture = (_this_realCreateTexture = _this.realCreateTexture).call.apply(_this_realCreateTexture, [].concat([
+                _this.gl
+            ], args));
+            _this.textures++;
+            if (_this.debug) {
+                console.debug("CreateTexture: " + texture + ", textures: " + _this.textures + ".");
+            }
+            return texture;
+        };
+        this.hookedDeleteTexture = function() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            var _this_realDeleteTexture;
+            (_this_realDeleteTexture = _this.realDeleteTexture).call.apply(_this_realDeleteTexture, [].concat([
+                _this.gl
+            ], args));
+            _this.textures--;
+            if (_this.debug) {
+                console.debug("DeleteTexture, textures: " + _this.textures + ".");
+            }
+        };
         this.realCreateTexture = gl.createTexture;
         this.realDeleteTexture = gl.deleteTexture;
         gl.createTexture = this.hookedCreateTexture.bind(this);
@@ -362,21 +393,6 @@ function _inherits(subClass, superClass) {
         }
     }
     var _proto = TextureHook.prototype;
-    _proto.hookedCreateTexture = function hookedCreateTexture() {
-        var texture = this.realCreateTexture.call(this.gl);
-        this.textures++;
-        if (this.debug) {
-            console.debug("CreateTexture: " + texture + ", textures: " + this.textures + ".");
-        }
-        return texture;
-    };
-    _proto.hookedDeleteTexture = function hookedDeleteTexture(texture) {
-        this.realDeleteTexture.call(this.gl, texture);
-        this.textures--;
-        if (this.debug) {
-            console.debug("DeleteTexture, textures: " + this.textures + ".");
-        }
-    };
     _proto.reset = function reset() {
         this.textures = 0;
     };
@@ -465,10 +481,15 @@ function _inherits(subClass, superClass) {
 
 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: 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() {
+/**
+ * Performance monitor.
+ */ var Monitor = /*#__PURE__*/ function(EventEmitter) {
+    _inherits(Monitor, EventEmitter);
     function Monitor(gl, options) {
-        this.options = options;
-        this.items = [
+        var _this;
+        _this = EventEmitter.call(this) || this;
+        _this.options = options;
+        _this.items = [
             "fps",
             "memory",
             "drawCall",
@@ -478,7 +499,8 @@ var Monitor = /*#__PURE__*/ function() {
             "programs",
             "webglContext"
         ];
-        this.data = {
+        _this.visible = false;
+        _this.data = {
             fps: 60,
             memory: 0,
             drawCall: 0,
@@ -490,15 +512,17 @@ var Monitor = /*#__PURE__*/ function() {
             programs: 0,
             webglContext: "2.0"
         };
-        this.core = new Core(gl, options.debug);
-        this.createContainer();
-        this.update = this.update.bind(this);
+        _this.core = new Core(gl, options.debug);
+        _this.visible = options.visible;
+        _this.createContainer();
+        _this.update = _this.update.bind(_assert_this_initialized(_this));
+        return _this;
     }
     var _proto = Monitor.prototype;
     _proto.createContainer = function createContainer() {
         var container = document.createElement("div");
         this.container = container;
-        if (!this.options.visible) {
+        if (!this.visible) {
             this.hide();
         }
         container.classList.add("gl-perf");
@@ -528,12 +552,22 @@ var Monitor = /*#__PURE__*/ function() {
         if (!data || data.triangles === 0) {
             return;
         }
+        this.emit("update", data);
+        if (!this.visible) {
+            return;
+        }
         for(var i = 0, l = this.items.length; i < l; i++)_this = this, _loop(i);
     };
-    _proto.hide = function hide() {
+    /**
+   * Hide the monitor
+   */ _proto.hide = function hide() {
+        this.visible = false;
         this.container.style.display = "none";
     };
-    _proto.show = function show() {
+    /**
+   * Show the monitor
+   */ _proto.show = function show() {
+        this.visible = true;
         this.container.style.display = "block";
     };
     /**
@@ -563,9 +597,11 @@ var Monitor = /*#__PURE__*/ function() {
         this.container.remove();
     };
     return Monitor;
-}();
+}(EFFECTS.EventEmitter);
 
-var StatsComponent = /*#__PURE__*/ function(Behaviour) {
+/**
+ * Stats 组件，用于监控渲染性能
+ */ var StatsComponent = /*#__PURE__*/ function(Behaviour) {
     _inherits(StatsComponent, Behaviour);
     function StatsComponent() {
         return Behaviour.apply(this, arguments);
@@ -576,10 +612,15 @@ var StatsComponent = /*#__PURE__*/ function(Behaviour) {
         var gl = renderer.pipelineContext.gl;
         this.monitor = new Monitor(gl, options);
     };
-    _proto.onUpdate = function onUpdate(dt) {
+    /**
+   * 每帧更新
+   * @param dt
+   */ _proto.onUpdate = function onUpdate(dt) {
         this.monitor.update(dt);
     };
-    _proto.dispose = function dispose() {
+    /**
+   * 释放资源
+   */ _proto.dispose = function dispose() {
         Behaviour.prototype.dispose.call(this);
         this.monitor.dispose();
     };
@@ -682,12 +723,40 @@ var json = {
     "compositionId": "2"
 };
 /**
+ * Stats plugin for the Player.
  *
+ * @example
+ * ```ts
+ * // Simple usage of Stats plugin
+ * import { Stats } from '@galacean/effects-plugin-stats';
+ *
+ * const stats = new Stats(player);
+ * // Hide the stats monitor
+ * stats.hide();
+ * // Show the stats monitor
+ * stats.show();
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 自定义 Stats 组件的 onUpdate 方法
+ * // 可用于在每帧更新时获取性能数据
+ * const stats = new Stats(player, { visible: false });
+ * const [_, component] = await Promise.all([
+ *   player.loadScene(json),
+ *   stats.getComponent(),
+ * ]);
+ *
+ * component?.monitor.on('update', data => {
+ *   console.info(data);
+ * });
+ * ```
  */ var Stats = /*#__PURE__*/ function() {
     function Stats(player, options) {
         this.player = player;
         this.options = options;
         this.disposed = false;
+        this.initialized = new EFFECTS.Deferred();
         void this.init();
     }
     var _proto = Stats.prototype;
@@ -701,8 +770,8 @@ var json = {
                         _state.trys.push([
                             0,
                             2,
-                            ,
-                            3
+                            3,
+                            4
                         ]);
                         return [
                             4,
@@ -717,12 +786,17 @@ var json = {
                         }
                         return [
                             3,
-                            3
+                            4
                         ];
                     case 2:
                         e = _state.sent();
                         throw new Error("Failed to load stats scene: " + e.message + ".");
                     case 3:
+                        _this.initialized.resolve();
+                        return [
+                            7
+                        ];
+                    case 4:
                         return [
                             2
                         ];
@@ -730,15 +804,45 @@ var json = {
             });
         })();
     };
-    _proto.hide = function hide() {
+    /**
+   * Get the stats component.
+   * @returns
+   */ _proto.getComponent = function getComponent() {
+        var _this = this;
+        return _async_to_generator(function() {
+            return __generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            _this.initialized.promise
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2,
+                            _this.component
+                        ];
+                }
+            });
+        })();
+    };
+    /**
+   * Hide the stats monitor.
+   */ _proto.hide = function hide() {
         var _this_component;
         (_this_component = this.component) == null ? void 0 : _this_component.monitor.hide();
     };
-    _proto.show = function show() {
+    /**
+   * Show the stats monitor.
+   */ _proto.show = function show() {
         var _this_component;
         (_this_component = this.component) == null ? void 0 : _this_component.monitor.show();
     };
-    _proto.dispose = function dispose() {
+    /**
+   * Dispose the stats component and release resources.
+   * @returns
+   */ _proto.dispose = function dispose() {
         var _this_component;
         if (this.disposed) {
             return;
@@ -752,7 +856,7 @@ var json = {
 
 /**
  * 插件版本号
- */ var version = "2.4.8";
+ */ var version = "2.5.0-alpha.1";
 EFFECTS.logger.info("Plugin stats version: " + version + ".");
 if (version !== EFFECTS__namespace.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!");