Rojoss

Bad performance on 4k/retina displays

Recommended Posts

Hey, I made a post before about scaling for high DPI monitors and thought that I came up with an acceptable solution but here I am again with some of my concerns about scaling and performance on 4k/retina displays.
Even when I start from scratch and just draw a circle the performance is garbage.

The weirdest thing is that the performance drops as soon as I put 1 pixel of the Chrome window on a 4k screen.
So basically I have 2 screens connected and I move the Chrome window off the normal screen towards the 4k screen and immediately the frame rate drops to 30 instead of 60.
I've logged the canvas and rendered size and there is no change when I put it partially on the other screen so the same stuff gets rendered.
I've done the same to some other games and didn't notice this performance drop at all.
It also happens with the examples and the bunny benchmark as shown in the crappy video below :P

So my question is why the performance is suddenly so bad when I move the window over towards the 4k monitor.

I would really appreciate if people have any tips on how to make sure the game looks good and performs well on 4k/retina displays.
CSS scaling makes the performance better but then everything becomes extremely blurry and it's really not acceptable.
Is it even possible to make web games that look great for 4k/retina displays with PIXI or in general?

image.png  image.png

Share this post


Link to post
Share on other sites

i dont know what you have done, I did the game in 4k screen with very hd textures. all is running at 60 fps. You need to implement delta time for you transform or animation.

and make sure not open too many webgl content in the browser at the same time, which your delta time will make your animation running same speed even the fps drops.

don't scale the content in css otherwise your scene will be blur. please scale your game scene in PIXI. Hopefull those make sense to you

Share this post


Link to post
Share on other sites
8 minutes ago, tywang2006 said:

i dont know what you have done, I did the game in 4k screen with very hd textures. all is running at 60 fps. You need to implement delta time for you transform or animation.

and make sure not open too many webgl content in the browser at the same time, which your delta time will make your animation running same speed even the fps drops.

It happens with the Pixi examples too.
I don't do any movement, no textures, nothing happens in any kind of update loop it's just a canvas with a graphic circle that's all.
Even if I have only 1 browser window open with a canvas and a circle the same thing happens.
I've tried the same setup on 3 different PC's where one PC has a I7, gtx1080, ssd, 16gb ram and in general it's a really good PC and it still gave 30 FPS on this 4k monitor.

8 minutes ago, tywang2006 said:

don't scale the content in css otherwise your scene will be blur. please scale your game scene in PIXI. Hopefull those make sense to you

Yeah I stated that I wanna avoid CSS scaling as it makes the quality unacceptable.

Share this post


Link to post
Share on other sites

Something that came to my mind is refresh rates of the monitors.
I'm not too familiar with request animation frame but to my understanding it uses the refresh rate of the monitor.
Since the performance drops exactly from 60 to 30 (50%) it made me think it might be related to that.

EDIT: Just checked and the refresh rate of this 4k monitor is 30 Hertz.
So I suppose that's the reason it only runs at 30FPS?

Share this post


Link to post
Share on other sites
2 minutes ago, Rojoss said:

It happens with the Pixi examples too.
I don't do any movement, no textures, nothing happens in any kind of update loop it's just a canvas with a graphic circle that's all.
Even if I have only 1 browser window open with a canvas and a circle the same thing happens.
I've tried the same setup on 3 different PC's where one PC has a I7, gtx1080, ssd, 16gb ram and in general it's a really good PC and it still gave 30 FPS on this 4k monitor.

Yeah I stated that I wanna avoid CSS scaling as it makes the quality unacceptable.

Try open the example in one tab, remove rest tabs in your browser, then see what happened.

Share this post


Link to post
Share on other sites
2 minutes ago, Rojoss said:

Something that came to my mind is refresh rates of the monitors.
I'm not too familiar with request animation frame but to my understanding it uses the refresh rate of the monitor.
Since the performance drops exactly from 60 to 30 (50%) it made me think it might be related to that.

I don't think it is related to refresh rate of the monitor

Share this post


Link to post
Share on other sites
9 minutes ago, tywang2006 said:

Try open the example in one tab, remove rest tabs in your browser, then see what happened.

I only have 1 window with 1 tab open in incognito (without extensions) and no other software opened on my PC and it still happens.

Share this post


Link to post
Share on other sites

requestAnimationFrame uses vsync by default, and will therefore attempt to be as close to the monitor refresh rate as possible. A 30Hz monitor will attempt to dispatch requestAnimationFrame at 30Hz. You can turn off vsync with "--disable-gpu-vsync" when starting Chrome.

Note there are a few bugs with this on windows, YMMV.

Share this post


Link to post
Share on other sites
11 hours ago, xerver said:

requestAnimationFrame uses vsync by default, and will therefore attempt to be as close to the monitor refresh rate as possible. A 30Hz monitor will attempt to dispatch requestAnimationFrame at 30Hz. You can turn off vsync with "--disable-gpu-vsync" when starting Chrome.

Note there are a few bugs with this on windows, YMMV.

Hm I see..
I guess we'll just have to accept it that the game is not gonna run great on crappy monitors :P
It's kinda weird that it's all depended on the refresh rate of the monitor.
Disabling vsync like that isn't really a go to solution for users I guess we can put it somewhere in a troubleshooting guide but that's not ideal of course.

9 hours ago, ivan.popelyshev said:

Lets try that one: remove EVERYTHING except canvas. FPS counter is a DIV, right? 

So just a canvas without PIXI or should I initialize it with PIXI?
The FPS counter is an external library and it's all DOM stuff yeah.

Share this post


Link to post
Share on other sites

Chrome debug tools have a good rendering counter which doesnt end up making performance worse.

It can be found from f12 -> ... -> more tools -> rendering -> show fps.

Share this post


Link to post
Share on other sites
21 minutes ago, Exca said:

Chrome debug tools have a good rendering counter which doesnt end up making performance worse.

It can be found from f12 -> ... -> more tools -> rendering -> show fps.

Yeah I'm aware but there is no shortcut for it so it's easier to have an overlay.
It's also annoying because if you close the dev tools the FPS counter disappears it's just not ideal.

36 minutes ago, ivan.popelyshev said:

@Rojoss Amount of DOM elements intersected with canvas must be exactly 0. Having FPS-div somewhere near the canvas is ok, but in your case canvas takes whole page, so no DIV elements are allowed at all.

Oh really?
We were actually thinking about doing all the UI in the DOM including popups, pre and post game screens, scoreboard etc which would be rendered on top of the canvas.
The performance won't really matter if we have popups open and post game screen etc but I'm pretty sure we'll end up with some UI/HUD during the game.
So you would then recommend doing that UI through PIXI as well?
It would save a lot of time if we can do it in the DOM because PIXI doesn't have that much UI components.


----

Going a bit off topic maybe so I guess this topic has been resolved.
The 30 FPS must be because of the 30Hertz monitor because all the examples, benchmarks and other PIXI games all run at 30 FPS.

Share this post


Link to post
Share on other sites

requestAnimationFrame doesn't start while the previous frame is not finished, all GL operations are async, imagine RAF like a callback for them. That really helps in some cases.

Make logic updates independent from graphics, use "dt=(frameTime - logicTime) / frame" to adjust your tweens. Even if you open minecraft sources you'll see separate updates for graphics and world.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.