probe.gl/dist/es5/stats-widgets/stats-widget.js

JavaScript Console Instrumentation and Benchmarking for Browser and Node

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var TEXT_SIZE = 10;
var TEXT_START = [7, 37];
var TEXT_SPACING = 6;
var HEADER_SIZE = 20;
var BOTTOM_SPACING = 20;
var HEADER_POS = [3, 3];
var BG = '#000';
var FG = '#ccc';
var WIDTH = 160;

var HEIGHT = function HEIGHT(items) {
  return items.length * TEXT_SIZE + (items.length - 1) * TEXT_SPACING + TEXT_START[1] + BOTTOM_SPACING;
};

var StatsWidget = function () {
  function StatsWidget(items) {
    (0, _classCallCheck2.default)(this, StatsWidget);
    var prevGpuTimes = [];

    for (var _i = 0; _i < items.length; _i++) {
      prevGpuTimes[_i] = 0;
    }

    var totalTime = 1.1;
    var N = 50;
    var totalFrameTime = [];
    var frameTimeCount = 0;
    var avgFrameTime = [];

    for (i = 0; i < items.length; ++i) {
      totalFrameTime[i] = 0.0;
      avgFrameTime[i] = 0.0;
    }
  }

  (0, _createClass2.default)(StatsWidget, [{
    key: "update",
    value: function update(deltaTime) {
      totalTime += deltaTime;

      if (totalTime > 1.0) {
        totalTime = 0;

        _clearTextArea();
      }

      frameTimeCount++;

      for (i = 0; i < drawCalls.length; i++) {
        drawCall = drawCalls[i];
        frameTime = drawCall[0].stats.gpuTime - prevGpuTimes[i];
        totalFrameTime[i] += frameTime;

        if (frameTimeCount === N) {
          avgFrameTime[i] = totalFrameTime[i] / N;
          totalFrameTime[i] = 0.0;
        }

        prevGpuTimes[i] = drawCall[0].stats.gpuTime;
      }

      if (frameTimeCount === N) {
        frameTimeCount = 0;
      }
    }
  }, {
    key: "_createDOM",
    value: function _createDOM() {
      var pr = Math.round(window.devicePixelRatio || 1);
      var container = document.createElement('div');
      container.style.cssText = 'position:fixed;top:20px;left:20px;opacity:0.8;z-index:10000;';
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.width = WIDTH * pr;
      canvas.height = HEIGHT * pr;
      canvas.style.cssText = "width: ".concat(WIDTH, "px;height: ").concat(HEIGHT, "px");
      context.fillStyle = BG;
      context.fillRect(0, 0, WIDTH * pr, HEIGHT * pr);
      container.appendChild(canvas);
      document.body.appendChild(container);
      this.context = context;
    }
  }, {
    key: "_drawHeader",
    value: function _drawHeader(context) {
      var pr = Math.round(window.devicePixelRatio || 1);
      context.font = "bold ".concat(HEADER_SIZE * pr, "px Helvetica,Arial,sans-serif");
      context.textBaseline = 'top';
      context.fillStyle = FG;
      context.fillText('Stats', HEADER_POS[0] * pr, HEADER_POS[1] * pr);
    }
  }, {
    key: "_clearTextArea",
    value: function _clearTextArea(context) {
      var pr = Math.round(window.devicePixelRatio || 1);
      context.fillStyle = BG;
      context.fillRect(TEXT_START[0] * pr, TEXT_START[1] * pr, (WIDTH - TEXT_START[0]) * pr, (HEIGHT - TEXT_START[1]) * pr);
      context.font = "bold ".concat(TEXT_SIZE * pr, "px Helvetica,Arial,sans-serif");
      context.fillStyle = FG;
    }
  }, {
    key: "_drawTextItem",
    value: function _drawTextItem(context, i, title, value) {
      var pr = Math.round(window.devicePixelRatio || 1);
      var textCursor = [TEXT_START[0], TEXT_START[1]];
      var str = "".concat(drawCall[1], " : ").concat(Math.round(100.0 * avgFrameTime[i]) / 100.0, "ms");
      context.fillText(str, textCursor[0] * pr, textCursor[1] * pr);
      textCursor[1] += TEXT_SIZE + TEXT_SPACING;
    }
  }]);
  return StatsWidget;
}();
//# sourceMappingURL=stats-widget.js.map