diff --git a/static/js/components/GraphComponent.js b/static/js/components/GraphComponent.js index eda2887..95740f6 100644 --- a/static/js/components/GraphComponent.js +++ b/static/js/components/GraphComponent.js @@ -104,7 +104,7 @@ GraphComponent.prototype._startTime = 0; GraphComponent.prototype._endTime = 0; GraphComponent.prototype._textTick = 0; -GraphComponent.prototype.update = function () { +GraphComponent.prototype.update = function (value, skipLabel) { var width = this.fullWidth; var height = this.fullHeight; var pxRatio = this.pxRatio; @@ -115,11 +115,19 @@ GraphComponent.prototype.update = function () { var btx = this.btx; var ctx = this.ctx; - var value = this._endTime - this._startTime; - var current = this.current += (value - this.current) * this.updateFactor; - var max = this.max *= 0.99; + var current, max; - if (current > max) { max = this.max = current; } + if (value == null) { + value = this._endTime - this._startTime; + current = this.current += (value - this.current) * this.updateFactor; + max = this.max *= 0.99; + } else { + current = max = value; + } + + if (current > max) { + max = this.max = current; + } btx.clearRect(0, 0, width, height); btx.drawImage(canvas, -drawOffset * pxRatio, 0, width, height); @@ -130,8 +138,10 @@ GraphComponent.prototype.update = function () { 0, current * height / (max || 1), pxRatio, height, width - pxRatio, 0, pxRatio, height); - if (++ this._textTick > 6) { + if (!skipLabel && ++ this._textTick > 6) { this._textTick = 0; this._valueEl.textContent = current.toFixed(3); } + + this._startTime = this._endTime = 0; }; diff --git a/static/js/scenes/MainScene.js b/static/js/scenes/MainScene.js index d60d8d0..02eefd0 100644 --- a/static/js/scenes/MainScene.js +++ b/static/js/scenes/MainScene.js @@ -142,6 +142,7 @@ MainScene.prototype.initItems = function () { MainScene.prototype.togglePostFx = function (isEnabled) { this.usePostFx = isEnabled; + this.needsRender = true; }; MainScene.prototype.onWindowResize = function () { @@ -360,17 +361,17 @@ MainScene.prototype.initStats = function () { var el = this.statsElement; this.statsPhysics = App.GraphComponent.create({ - label: 'Physics (ms)' + label : 'Physics (ms)' }); this.statsGraphics = App.GraphComponent.create({ - label: 'Graphics (ms)', - updateFactor: 0.025 + label : 'Graphics (ms)', + updateFactor : 0.025 }); this.statsPost = App.GraphComponent.create({ - label: 'Post FX (ms)', - updateFactor: 0.025 + label : 'Post FX (ms)', + updateFactor : 0.025 }); this.statsPhysics.appendTo(el); @@ -400,8 +401,6 @@ MainScene.prototype.update = function (delta) { this.medusae.update(delta); this.statsPhysics.end(); this.lensDirtPass.update(delta); - } else { - this.statsPhysics.reset(); } this.audio.update(delta); @@ -421,7 +420,12 @@ MainScene.prototype.preRender = function (delta, stepProgress) { this.statsPost.reset(); } - this.statsPhysics.update(); + if (this.loop.didUpdate) { + this.statsPhysics.update(); + } else { + this.statsPhysics.update(0, true); + } + this.statsGraphics.update(); this.statsPost.update(); }; diff --git a/static/js/utils/Looper.js b/static/js/utils/Looper.js index 2f7fe17..818a94d 100644 --- a/static/js/utils/Looper.js +++ b/static/js/utils/Looper.js @@ -1,6 +1,7 @@ /*global requestAnimationFrame*/ App.Looper = Looper; function Looper(context, update, render, delta) { + var _this = this; var _update = context[update]; var _render = context[render]; @@ -17,6 +18,7 @@ function Looper(context, update, render, delta) { if (steps > 0) { stepTime -= steps * targetDelta; + _this.didUpdate = true; } while (steps > 0) { @@ -33,6 +35,7 @@ function Looper(context, update, render, delta) { var time = Date.now(); var delta = Math.min(maxDelta, time - lastTime); + _this.didUpdate = false; animateStep(delta); requestAnimationFrame(animate); lastTime = time;