Pixi.js: PIXI.Ticker.maxFPS does not lock FPS to 60

[whats0n0]

Expected Behavior

PIXI.Ticker.maxFPS should lock FPS to 60 by default or by specifying it (according to the docs).

Current Behavior

PIXI.Ticker.maxFPS does not lock the max FPS to 60 by default on a 120hz monitor, at least not for me. The FPS goes to 120 and sometimes falls to 60 FPS, and then goes up to 120 FPS again.

Setting app.ticker.maxFPS = 60 or anything above 60 doesn't work either. However, if you set app.ticker.maxFPS = 59.99 it works which seems very weird.

Steps to Reproduce

Example: https://codepen.io/whats0n0/pen/YbJwbg

1. Use 120hz monitor
2. Set app.ticker.maxFPS = 60;
3. FPS still goes above 60

Environment

• pixi.js version: v5.0.3
• Browser & Version: Chrome 74.0.3729.169
• OS & Version: Windows 10
• Running Example: https://codepen.io/whats0n0/pen/YbJwbg

[edreal]

I got 144 all the time as well. I feel like it could have something to do with how requestAnimationFrame() works if PIXI still uses it.

[themoonrat]

I added this for v5, so sorry it's not working as intended.

This behaviour is occurring because of this bit of code

if (fps / 1000 >= settings.TARGET_FPMS)
{
    this._minElapsedMS = 0;
}

So with the default value of settings.TARGET_FPMS, it means that if you try to set the maxfps to 60 or above, it actually disables the maxfps behaviour. I wanted a way to set amax FPS, and then remove it later. Since I use 60hz monitors, I felt that if you wanted 60fps, don't artificially limit it, let requestAnimationFrame take care of it.

Clearly with higher frame rate monitors that logic doesn't work, so I'll have a rethink.

[whats0n0]

Alright, I see!
The reason I found out was because requestAnimationFrame was randomly switching between 120fps and 60fps (probably because of performance) which caused stuttering. Otherwise I could just have let it run at whatever FPS it wanted.

[themoonrat]

@whats0n0 I have a high refresh rate monitor arriving Thursday so will be able to test any tweaks I have to how this setting works!

[djmisterjon]

this will maybe interest you.
i remember test on my 3d tv, my projet ran at ~240 fps with arg "chromium-args": "--disable-gpu-vsync
https://bugs.chromium.org/p/chromium/issues/detail?id=787485

I do not want say bullshit because I know nothing about this and not enough to experiment on my side.
But could this be related to v-sync setup?

[JetLua]

Inspiration comes from stackoverflow, i hope it can be useful.

let last = 0
const FPS = 1
const interval = 1e3 / FPS | 0 // Fix occasional drop-off frames

animate()

function animate() {
  requestAnimationFrame(animate)

  const now = performance.now() | 0 // Fix occasional drop-off frames
  const elapsed = now - last

  if (elapsed < interval) return

  console.log('animate')

  // Excellent
  last = now - (elapsed % interval)
}

[johnnymast]

May I asked why this issue was closed? Is the conclusion not to use the ticker for V4 but have a separated game loop? I mean for PIXI v4.

[bigtimebuddy]

It was automatically closed because PR #5388 marked it as fixing this issue. This fix was relevant for v5. That PR and follow up changes to Ticker could probably be backported to v4 if someone wants to make a PR.

[adam-mvk]

@bigtimebuddy I think you mean #5833 :)