Is WebGPU bottlenecked by canvas resolution?

Questions
, ,
1

I’ve noticed that no matter how simple my scene is, when the HTMLCanvasElement exceeds resolutions of about 2560x1080, the frame rate starts getting noticeably uneven (the reported FPS doesn’t go down, but the animations in the scene don’t appear as smooth).

I have a GeForce RTX 3080 and using requestAnimationFrame if it helps.

Anyone else notice the same thing?

2

Do you have some kind of post processing running?

3

Nope no post-processing.

4

The closest effect I have experienced might be completely unrelated to your experience, but nevertheless: it happened with Firefox, with a small canvas it worked well, with big canvas the animation scattered. FPS measurement reported good 60 FPS, but visually the animation degraded to 10 FPS, because I was able to see individual frames as they changed.

The culprit was the antialias flag when the renderer was initiated. With antialias: false the animation was OK, with antialias: true the animation was bad.

My uneducated conclusion was that the way Firefox made antialiasing was not optimal. The antialiasing was not implemented by Three.js, but by Firefox. So even if my program delivered frames in time, Firefox could not process them all and skipped most frames. With Chrome (and other Chromium based browsers) no such things happened.

In a nutshell:

  • with Firefox, antialias and small canvas - animation and fps are good
  • with Firefox, antialias and big canvas - animation is bad, fps is good
  • with Firefox, no antialias and big canvas - animation and fps are good
  • with Chrome, any antialias, any size - animation and fps are good
2 Likes
5

I agree, Firefox is bahaving wired, and performance is worse than on Chrome or IE…