PerformanceDisplay.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. import defaultValue from "../Core/defaultValue.js";
  2. import defined from "../Core/defined.js";
  3. import destroyObject from "../Core/destroyObject.js";
  4. import DeveloperError from "../Core/DeveloperError.js";
  5. import getTimestamp from "../Core/getTimestamp.js";
  6. import getElement from "../DataSources/getElement.js";
  7. /**
  8. * @private
  9. */
  10. function PerformanceDisplay(options) {
  11. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  12. const container = getElement(options.container);
  13. //>>includeStart('debug', pragmas.debug);
  14. if (!defined(container)) {
  15. throw new DeveloperError("container is required");
  16. }
  17. //>>includeEnd('debug');
  18. this._container = container;
  19. const display = document.createElement("div");
  20. display.className = "cesium-performanceDisplay";
  21. const fpsElement = document.createElement("div");
  22. fpsElement.className = "cesium-performanceDisplay-fps";
  23. this._fpsText = document.createTextNode("");
  24. fpsElement.appendChild(this._fpsText);
  25. const msElement = document.createElement("div");
  26. msElement.className = "cesium-performanceDisplay-ms";
  27. this._msText = document.createTextNode("");
  28. msElement.appendChild(this._msText);
  29. display.appendChild(msElement);
  30. display.appendChild(fpsElement);
  31. this._container.appendChild(display);
  32. this._lastFpsSampleTime = getTimestamp();
  33. this._lastMsSampleTime = getTimestamp();
  34. this._fpsFrameCount = 0;
  35. this._msFrameCount = 0;
  36. this._throttled = false;
  37. const throttledElement = document.createElement("div");
  38. throttledElement.className = "cesium-performanceDisplay-throttled";
  39. this._throttledText = document.createTextNode("");
  40. throttledElement.appendChild(this._throttledText);
  41. display.appendChild(throttledElement);
  42. }
  43. Object.defineProperties(PerformanceDisplay.prototype, {
  44. /**
  45. * The display should indicate the FPS is being throttled.
  46. * @memberof PerformanceDisplay.prototype
  47. *
  48. * @type {boolean}
  49. */
  50. throttled: {
  51. get: function () {
  52. return this._throttled;
  53. },
  54. set: function (value) {
  55. if (this._throttled === value) {
  56. return;
  57. }
  58. if (value) {
  59. this._throttledText.nodeValue = "(throttled)";
  60. } else {
  61. this._throttledText.nodeValue = "";
  62. }
  63. this._throttled = value;
  64. },
  65. },
  66. });
  67. /**
  68. * Update the display. This function should only be called once per frame, because
  69. * each call records a frame in the internal buffer and redraws the display.
  70. *
  71. * @param {boolean} [renderedThisFrame=true] If provided, the FPS count will only update and display if true.
  72. */
  73. PerformanceDisplay.prototype.update = function (renderedThisFrame) {
  74. const time = getTimestamp();
  75. const updateDisplay = defaultValue(renderedThisFrame, true);
  76. this._fpsFrameCount++;
  77. const fpsElapsedTime = time - this._lastFpsSampleTime;
  78. if (fpsElapsedTime > 1000) {
  79. let fps = "N/A";
  80. if (updateDisplay) {
  81. fps = ((this._fpsFrameCount * 1000) / fpsElapsedTime) | 0;
  82. }
  83. this._fpsText.nodeValue = `${fps} FPS`;
  84. this._lastFpsSampleTime = time;
  85. this._fpsFrameCount = 0;
  86. }
  87. this._msFrameCount++;
  88. const msElapsedTime = time - this._lastMsSampleTime;
  89. if (msElapsedTime > 200) {
  90. let ms = "N/A";
  91. if (updateDisplay) {
  92. ms = (msElapsedTime / this._msFrameCount).toFixed(2);
  93. }
  94. this._msText.nodeValue = `${ms} MS`;
  95. this._lastMsSampleTime = time;
  96. this._msFrameCount = 0;
  97. }
  98. };
  99. /**
  100. * Destroys the WebGL resources held by this object.
  101. */
  102. PerformanceDisplay.prototype.destroy = function () {
  103. return destroyObject(this);
  104. };
  105. export default PerformanceDisplay;