PerformanceDisplay.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. /*global define*/
  2. define([
  3. '../Core/Color',
  4. '../Core/defaultValue',
  5. '../Core/defined',
  6. '../Core/destroyObject',
  7. '../Core/DeveloperError',
  8. '../Core/getTimestamp',
  9. '../Widgets/getElement'
  10. ], function(
  11. Color,
  12. defaultValue,
  13. defined,
  14. destroyObject,
  15. DeveloperError,
  16. getTimestamp,
  17. getElement) {
  18. "use strict";
  19. var defaultFpsColor = Color.fromCssColorString('#e52');
  20. var defaultFrameTimeColor = Color.fromCssColorString('#de3');
  21. var defaultBackgroundColor = Color.fromCssColorString('rgba(40, 40, 40, 0.7)');
  22. /**
  23. * @private
  24. */
  25. var PerformanceDisplay = function(options) {
  26. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  27. var container = getElement(options.container);
  28. if (!defined(container)) {
  29. throw new DeveloperError('container is required');
  30. }
  31. this._container = container;
  32. this._fpsColor = defaultValue(options.fpsColor, defaultFpsColor).toCssColorString();
  33. this._frameTimeColor = defaultValue(options.frameTimeColor, defaultFrameTimeColor).toCssColorString();
  34. this._backgroundColor = defaultValue(options.backgroundColor, defaultBackgroundColor).toCssColorString();
  35. this._font = defaultValue(options.font, 'bold 12px Helvetica,Arial,sans-serif');
  36. var display = document.createElement('div');
  37. var fpsElement = document.createElement('div');
  38. this._fpsText = document.createTextNode("");
  39. fpsElement.appendChild(this._fpsText);
  40. fpsElement.style.color = this._fpsColor;
  41. var msElement = document.createElement('div');
  42. this._msText = document.createTextNode("");
  43. msElement.style.color = this._frameTimeColor;
  44. msElement.appendChild(this._msText);
  45. display.appendChild(fpsElement);
  46. display.appendChild(msElement);
  47. display.style['z-index'] = 1;
  48. display.style['background-color'] = this._backgroundColor;
  49. display.style.font = this._font;
  50. display.style.padding = '7px';
  51. display.style['border-radius'] = '5px';
  52. display.style.border = '1px solid #444';
  53. this._container.appendChild(display);
  54. this._lastFpsSampleTime = undefined;
  55. this._frameCount = 0;
  56. this._time = undefined;
  57. this._fps = 0;
  58. this._frameTime = 0;
  59. };
  60. /**
  61. * Update the display. This function should only be called once per frame, because
  62. * each call records a frame in the internal buffer and redraws the display.
  63. */
  64. PerformanceDisplay.prototype.update = function() {
  65. if (!defined(this._time)) {
  66. //first update
  67. this._lastFpsSampleTime = getTimestamp();
  68. this._time = getTimestamp();
  69. return;
  70. }
  71. var previousTime = this._time;
  72. var time = getTimestamp();
  73. this._time = time;
  74. var frameTime = time - previousTime;
  75. this._frameCount++;
  76. var fps = this._fps;
  77. var fpsElapsedTime = time - this._lastFpsSampleTime;
  78. if (fpsElapsedTime > 1000) {
  79. fps = this._frameCount * 1000 / fpsElapsedTime | 0;
  80. this._lastFpsSampleTime = time;
  81. this._frameCount = 0;
  82. }
  83. if (fps !== this._fps) {
  84. this._fpsText.nodeValue = fps + ' FPS';
  85. this._fps = fps;
  86. }
  87. if (frameTime !== this._frameTime) {
  88. this._msText.nodeValue = frameTime.toFixed(2) + ' MS';
  89. this._frameTime = frameTime;
  90. }
  91. };
  92. /**
  93. * Destroys the WebGL resources held by this object.
  94. */
  95. PerformanceDisplay.prototype.destroy = function() {
  96. return destroyObject(this);
  97. };
  98. return PerformanceDisplay;
  99. });