Merge pull request #5847 from spikyMalkallam/High_Refresh

Fix Frame Rate higher than target on high refresh rate displays (>200Hz)

Author: davepagurek

src/core/main.js

@@ -284,7 +284,8 @@ class p5 {
           loadingScreen.parentNode.removeChild(loadingScreen);
         }
         if (!this._setupDone) {
-          this._lastFrameTime = window.performance.now();
+          this._lastTargetFrameTime = window.performance.now();
+          this._lastRealFrameTime = window.performance.now();
           context._setup();
           context._draw();
         }
@@ -357,7 +358,8 @@ class p5 {
         }
       }
 
-      this._lastFrameTime = window.performance.now();
+      this._lastTargetFrameTime = window.performance.now();
+      this._lastRealFrameTime = window.performance.now();
       this._setupDone = true;
       if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
         this._updateAccsOutput();
@@ -366,7 +368,7 @@ class p5 {
 
     this._draw = () => {
       const now = window.performance.now();
-      const time_since_last = now - this._lastFrameTime;
+      const time_since_last = now - this._lastTargetFrameTime;
       const target_time_between_frames = 1000 / this._targetFrameRate;
 
       // only draw if we really need to; don't overextend the browser.
@@ -384,10 +386,12 @@ class p5 {
       ) {
         //mandatory update values(matrixes and stack)
         this.redraw();
-        this._frameRate = 1000.0 / (now - this._lastFrameTime);
-        this.deltaTime = now - this._lastFrameTime;
+        this._frameRate = 1000.0 / (now - this._lastRealFrameTime);
+        this.deltaTime = now - this._lastRealFrameTime;
         this._setProperty('deltaTime', this.deltaTime);
-        this._lastFrameTime = now;
+        this._lastTargetFrameTime = Math.max(this._lastTargetFrameTime
+          + target_time_between_frames, now);
+        this._lastRealFrameTime = now;
 
         // If the user is actually using mouse module, then update
         // coordinates, otherwise skip. We can test this by simply

test/unit/core/environment.js

@@ -120,6 +120,77 @@ suite('Environment', function() {
     test('p5.prototype.getFrameRate', function() {
       assert.strictEqual(myp5.getFrameRate(), 0);
     });
+
+    suite('drawing with target frame rates', function() {
+      let clock;
+      let prevRequestAnimationFrame;
+      let nextFrameCallback = () => {};
+      let controlledP5;
+
+      setup(function() {
+        clock = sinon.useFakeTimers(0);
+        sinon.stub(window.performance, 'now', Date.now);
+
+        // Save the real requestAnimationFrame so we can restore it later
+        prevRequestAnimationFrame = window.requestAnimationFrame;
+        // Use a fake requestAnimationFrame that just stores a ref to the callback
+        // so that we can call it manually
+        window.requestAnimationFrame = function(cb) {
+          nextFrameCallback = cb;
+        };
+
+        return new Promise(function(resolve) {
+          controlledP5 = new p5(function(p) {
+            p.setup = function() {
+              p.createCanvas(10, 10);
+              p.frameRate(60);
+              p.loop();
+              resolve(p);
+            };
+
+            p.draw = function() {};
+          });
+        });
+      });
+
+      teardown(function() {
+        clock.restore();
+        window.performance.now.restore();
+        window.requestAnimationFrame = prevRequestAnimationFrame;
+        nextFrameCallback = function() {};
+        controlledP5.remove();
+      });
+
+      test('draw() is called at the correct frame rate given a faster display', function() {
+        sinon.spy(controlledP5, 'draw');
+
+        clock.tick(1000 / 200); // Simulate a 200Hz refresh rate
+        nextFrameCallback(); // trigger the next requestAnimationFrame
+        assert(controlledP5.draw.notCalled, 'draw() should not be called before 1s/60');
+
+        // Advance until 5ms before the next frame should render.
+        // This should be within p5's threshold for rendering the frame.
+        clock.tick(1000 / 60 - 1000 / 200 - 5);
+        nextFrameCallback(); // trigger the next requestAnimationFrame
+        assert(controlledP5.draw.calledOnce, 'one frame should have been drawn');
+        // deltaTime should reflect real elapsed time
+        assert.equal(controlledP5.deltaTime, 1000 / 60 - 5);
+
+        // Advance enough time forward to be 1s/60 - 5ms from the last draw
+        clock.tick(1000 / 60 - 5);
+        nextFrameCallback(); // trigger the next requestAnimationFrame
+        // Even though this is 1s/60 - 5ms from the last draw, the last frame came
+        // in early, so we still shouldn't draw
+        assert(controlledP5.draw.calledOnce, 'draw() should not be called before 1s/60 past the last target draw time');
+
+        // Advance enough time forward to be 1s/60 from the last draw
+        clock.tick(5);
+        nextFrameCallback();
+        assert(controlledP5.draw.calledTwice); // Now it should draw again!
+        // deltaTime should reflect real elapsed time
+        assert.equal(controlledP5.deltaTime, 1000 / 60);
+      });
+    });
   });
 
   suite('p5.prototype.getTargetFrameRate', function() {