@galacean/effects-plugin-stats 2.0.0-alpha.32

package/dist/index.js

@@ -0,0 +1,674 @@
+/*!
+ * Name: @galacean/effects-plugin-stats
+ * Description: Galacean Effects runtime stats for the web
+ * Author: Ant Group CO., Ltd.
+ * Contributors: 云垣
+ * Version: v2.0.0-alpha.32
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var effects = require('@galacean/effects');
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+
+function _instanceof1(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else return _instanceof1(left, right);
+}
+
+function __generator(thisArg, body) {
+    var _ = {
+        label: 0,
+        sent: function sent() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, f, y, t, g;
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+typeof SuppressedError === "function" ? SuppressedError : function _SuppressedError(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+
+var DrawCallHook = /*#__PURE__*/ function() {
+    function DrawCallHook(gl) {
+        this.gl = gl;
+        this.drawCall = 0;
+        this.triangles = 0;
+        this.lines = 0;
+        this.points = 0;
+        this.hooked = true;
+        this.realDrawElements = gl.drawElements;
+        this.realDrawArrays = gl.drawArrays;
+        gl.drawElements = this.hookedDrawElements.bind(this);
+        gl.drawArrays = this.hookedDrawArrays.bind(this);
+        if (Stats.options.debug) {
+            console.debug("DrawCall is hooked.");
+        }
+    }
+    var _proto = DrawCallHook.prototype;
+    _proto.hookedDrawElements = function hookedDrawElements(mode, count, type, offset) {
+        this.realDrawElements.call(this.gl, mode, count, type, offset);
+        this.update(count, mode);
+    };
+    _proto.hookedDrawArrays = function hookedDrawArrays(mode, first, count) {
+        this.realDrawArrays.call(this.gl, mode, first, count);
+        this.update(count, mode);
+    };
+    _proto.update = function update(count, mode) {
+        var gl = this.gl;
+        this.drawCall++;
+        switch(mode){
+            case gl.TRIANGLES:
+                this.triangles += count / 3;
+                break;
+            case gl.TRIANGLE_STRIP:
+            case gl.TRIANGLE_FAN:
+                this.triangles += count - 2;
+                break;
+            case gl.LINES:
+                this.lines += count / 2;
+                break;
+            case gl.LINE_STRIP:
+                this.lines += count - 1;
+                break;
+            case gl.LINE_LOOP:
+                this.lines += count;
+                break;
+            case gl.POINTS:
+                this.points += count;
+                break;
+            default:
+                console.error("Unknown draw mode: " + mode + ". Count: " + count);
+                break;
+        }
+    };
+    _proto.reset = function reset() {
+        this.drawCall = 0;
+        this.triangles = 0;
+        this.lines = 0;
+        this.points = 0;
+    };
+    _proto.release = function release() {
+        if (this.hooked) {
+            this.gl.drawElements = this.realDrawElements;
+            this.gl.drawArrays = this.realDrawArrays;
+            this.hooked = false;
+        }
+    };
+    return DrawCallHook;
+}();
+
+var ProgramHook = /*#__PURE__*/ function() {
+    function ProgramHook(gl) {
+        this.gl = gl;
+        this.programs = 0;
+        this.hooked = true;
+        this.realUseProgram = gl.useProgram;
+        gl.useProgram = this.hookedUseProgram.bind(this);
+        if (Stats.options.debug) {
+            console.debug("Program is hooked.");
+        }
+    }
+    var _proto = ProgramHook.prototype;
+    _proto.hookedUseProgram = function hookedUseProgram(program) {
+        this.realUseProgram.call(this.gl, program);
+        this.programs++;
+        if (Stats.options.debug) {
+            console.debug("UseProgram: " + program + ", program: " + this.programs + ".");
+        }
+    };
+    _proto.reset = function reset() {
+        this.programs = 0;
+    };
+    _proto.release = function release() {
+        if (this.hooked) {
+            this.gl.useProgram = this.realUseProgram;
+            this.hooked = false;
+        }
+    };
+    return ProgramHook;
+}();
+
+var ShaderHook = /*#__PURE__*/ function() {
+    function ShaderHook(gl) {
+        this.gl = gl;
+        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) {
+            console.debug("Shader is hooked.");
+        }
+    }
+    var _proto = ShaderHook.prototype;
+    _proto.hookedAttachShader = function hookedAttachShader(program, shader) {
+        this.realAttachShader.call(this.gl, program, shader);
+        this.shaders++;
+        if (Stats.options.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) {
+            console.debug("DetachShader. shaders: " + this.shaders);
+        }
+    };
+    _proto.reset = function reset() {
+        this.shaders = 0;
+    };
+    _proto.release = function release() {
+        if (this.hooked) {
+            this.gl.attachShader = this.realAttachShader;
+            this.gl.detachShader = this.realDetachShader;
+            this.hooked = false;
+        }
+    };
+    return ShaderHook;
+}();
+
+var TextureHook = /*#__PURE__*/ function() {
+    function TextureHook(gl) {
+        this.gl = gl;
+        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) {
+            console.debug("Texture is hooked.");
+        }
+    }
+    var _proto = TextureHook.prototype;
+    _proto.hookedCreateTexture = function hookedCreateTexture() {
+        var texture = this.realCreateTexture.call(this.gl);
+        this.textures++;
+        if (Stats.options.debug) {
+            console.debug("CreateTexture: " + texture + ", textures: " + this.textures + ".");
+        }
+        return texture;
+    };
+    _proto.hookedDeleteTexture = function hookedDeleteTexture(texture) {
+        this.realDeleteTexture.call(this.gl, texture);
+        this.textures--;
+        if (Stats.options.debug) {
+            console.debug("DeleteTexture, textures: " + this.textures + ".");
+        }
+    };
+    _proto.reset = function reset() {
+        this.textures = 0;
+    };
+    _proto.release = function release() {
+        if (this.hooked) {
+            this.gl.createTexture = this.realCreateTexture;
+            this.gl.deleteTexture = this.realDeleteTexture;
+            this.hooked = false;
+        }
+    };
+    return TextureHook;
+}();
+
+/**
+ * Hook gl to calculate stats
+ */ var Core = /*#__PURE__*/ function() {
+    function Core(gl) {
+        this.gl = gl;
+        this.samplingFrames = 60;
+        this.samplingIndex = 0;
+        this.updateCounter = 0;
+        this.updateTime = 0;
+        if (!gl) {
+            throw new Error("Unsupported WebGL context.");
+        }
+        this.hook(gl);
+    }
+    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);
+    };
+    /**
+   * reset draw call hook
+   */ _proto.reset = function reset() {
+        var _this_drawCallHook, _this_programHook;
+        (_this_drawCallHook = this.drawCallHook) == null ? void 0 : _this_drawCallHook.reset();
+        (_this_programHook = this.programHook) == null ? void 0 : _this_programHook.reset();
+    };
+    /**
+   * release hook
+   */ _proto.release = function release() {
+        var _this_drawCallHook, _this_textureHook, _this_shaderHook, _this_programHook;
+        (_this_drawCallHook = this.drawCallHook) == null ? void 0 : _this_drawCallHook.release();
+        (_this_textureHook = this.textureHook) == null ? void 0 : _this_textureHook.release();
+        (_this_shaderHook = this.shaderHook) == null ? void 0 : _this_shaderHook.release();
+        (_this_programHook = this.programHook) == null ? void 0 : _this_programHook.release();
+    };
+    /**
+   * update performance data
+   */ _proto.update = function update(dt) {
+        var now = performance.now();
+        this.updateCounter++;
+        if (now - this.updateTime < 1000) {
+            return undefined;
+        }
+        if (this.samplingIndex !== this.samplingFrames) {
+            this.reset();
+            this.samplingIndex++;
+            return undefined;
+        }
+        this.samplingIndex = 0;
+        var data = {
+            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,
+            lines: this.drawCallHook.lines,
+            points: this.drawCallHook.points,
+            textures: this.textureHook.textures,
+            shaders: this.shaderHook.shaders === 0 ? 0 : this.shaderHook.shaders + 1,
+            programs: this.programHook.programs,
+            webglContext: _instanceof1(this.gl, WebGL2RenderingContext) ? "2.0" : "1.0"
+        };
+        this.reset();
+        this.updateCounter = 0;
+        this.updateTime = now;
+        return data;
+    };
+    return Core;
+}();
+
+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 Monitor = /*#__PURE__*/ function() {
+    function Monitor(gl) {
+        this.items = [
+            "fps",
+            "memory",
+            "drawCall",
+            "triangles",
+            "textures",
+            "shaders",
+            "programs",
+            "webglContext"
+        ];
+        this.data = {
+            fps: 60,
+            memory: 0,
+            drawCall: 0,
+            triangles: 0,
+            lines: 0,
+            points: 0,
+            textures: 0,
+            shaders: 0,
+            programs: 0,
+            webglContext: "2.0"
+        };
+        this.core = new Core(gl);
+        this.createContainer();
+        this.update = this.update.bind(this);
+    }
+    var _proto = Monitor.prototype;
+    _proto.createContainer = function createContainer() {
+        var container = document.createElement("div");
+        container.classList.add("gl-perf");
+        container.innerHTML = tpl;
+        container.appendChild(this.createStyle());
+        document.body.appendChild(container);
+        this.doms = Array.prototype.slice.apply(container.querySelectorAll("dd"));
+        this.container = container;
+    };
+    _proto.createStyle = function createStyle() {
+        var style = document.createElement("style");
+        style.appendChild(document.createTextNode(css));
+        return style;
+    };
+    /**
+   * Update per frame
+   */ _proto.update = function update(dt) {
+        var _this, _loop = function(i, l) {
+            var dom = _this.doms[i];
+            var item = _this.items[i];
+            var value = data[item] || 0;
+            // see: http://wilsonpage.co.uk/preventing-layout-thrashing/
+            requestAnimationFrame(function() {
+                dom.innerText = String(value);
+            });
+        };
+        var data = this.core.update(dt);
+        if (!data || data.drawCall === 0 || data.triangles === 0) {
+            return;
+        }
+        for(var i = 0, l = this.items.length; i < l; i++)_this = this, _loop(i);
+    };
+    /**
+   * reset all hooks
+   */ _proto.reset = function reset() {
+        var _this, _loop = function(i, l) {
+            var dom = _this.doms[i];
+            var item = _this.items[i];
+            var value = _this.data[item] || 0;
+            // see: http://wilsonpage.co.uk/preventing-layout-thrashing/
+            requestAnimationFrame(function() {
+                dom.innerText = String(value);
+            });
+        };
+        this.core.reset();
+        for(var i = 0, l = this.items.length; i < l; i++)_this = this, _loop(i);
+    };
+    /**
+   * release all hooks
+   */ _proto.release = function release() {
+        this.core.release();
+    };
+    /**
+   * destroy the instance
+   */ _proto.destroy = function destroy() {
+        this.release();
+        document.body.removeChild(this.container);
+    };
+    return Monitor;
+}();
+
+var StatsComponent = /*#__PURE__*/ function(ItemBehaviour) {
+    _inherits(StatsComponent, ItemBehaviour);
+    function StatsComponent() {
+        return ItemBehaviour.apply(this, arguments);
+    }
+    var _proto = StatsComponent.prototype;
+    _proto.start = function start() {
+        var renderer = this.engine.renderer;
+        var gl = renderer.pipelineContext.gl;
+        this.monitor = new Monitor(gl);
+    };
+    _proto.update = function update(dt) {
+        this.monitor.update(dt);
+    };
+    return StatsComponent;
+}(effects.ItemBehaviour);
+
+var json = {
+    "images": [],
+    "fonts": [],
+    "version": "3.0",
+    "shapes": [],
+    "plugins": [],
+    "type": "ge",
+    "compositions": [
+        {
+            "id": "2",
+            "name": "stats",
+            "duration": 5,
+            "startTime": 0,
+            "endBehavior": 2,
+            "previewSize": [
+                750,
+                1624
+            ],
+            "items": [
+                {
+                    "id": "05e1c616baf34cc084968a05703719cd"
+                }
+            ],
+            "camera": {
+                "fov": 60,
+                "far": 40,
+                "near": 0.1,
+                "clipMode": 1,
+                "position": [
+                    0,
+                    0,
+                    8
+                ],
+                "rotation": [
+                    0,
+                    0,
+                    0
+                ]
+            },
+            "sceneBindings": []
+        }
+    ],
+    "components": [],
+    "geometries": [],
+    "materials": [],
+    "items": [
+        {
+            "id": "05e1c616baf34cc084968a05703719cd",
+            "name": "component",
+            "duration": 99999,
+            "type": "1",
+            "visible": true,
+            "endBehavior": 0,
+            "delay": 0,
+            "renderLevel": "B+",
+            "components": [],
+            "transform": {
+                "position": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                },
+                "eulerHint": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 0
+                },
+                "anchor": {
+                    "x": 0,
+                    "y": 0
+                },
+                "size": {
+                    "x": 1.2,
+                    "y": 1.2
+                },
+                "scale": {
+                    "x": 1,
+                    "y": 1,
+                    "z": 1
+                }
+            },
+            "dataType": "VFXItemData"
+        }
+    ],
+    "shaders": [],
+    "bins": [],
+    "textures": [],
+    "animations": [],
+    "compositionId": "2"
+};
+var Stats = /*#__PURE__*/ function() {
+    function Stats(player, options) {
+        if (options === void 0) options = {
+            debug: false
+        };
+        this.player = player;
+        Stats.options = options;
+        void this.init();
+    }
+    var _proto = Stats.prototype;
+    _proto.init = function init() {
+        var _this = this;
+        return _async_to_generator(function() {
+            var composition, component, e;
+            return __generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            2,
+                            ,
+                            3
+                        ]);
+                        return [
+                            4,
+                            _this.player.loadScene(json)
+                        ];
+                    case 1:
+                        composition = _state.sent();
+                        component = composition.getItemByName("component");
+                        component == null ? void 0 : component.addComponent(StatsComponent);
+                        return [
+                            3,
+                            3
+                        ];
+                    case 2:
+                        e = _state.sent();
+                        throw new Error("Failed to load stats scene: " + e.message + ".");
+                    case 3:
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    return Stats;
+}();
+
+exports.Stats = Stats;
+//# sourceMappingURL=index.js.map