Rojoss Posted July 7, 2017 Share Posted July 7, 2017 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 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? Quote Link to comment Share on other sites More sharing options...
tywang2006 Posted July 7, 2017 Share Posted July 7, 2017 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 Quote Link to comment Share on other sites More sharing options...
Rojoss Posted July 7, 2017 Author Share Posted July 7, 2017 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. Quote Link to comment Share on other sites More sharing options...
Rojoss Posted July 7, 2017 Author Share Posted July 7, 2017 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? Quote Link to comment Share on other sites More sharing options...
tywang2006 Posted July 7, 2017 Share Posted July 7, 2017 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. Quote Link to comment Share on other sites More sharing options...
tywang2006 Posted July 7, 2017 Share Posted July 7, 2017 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 Quote Link to comment Share on other sites More sharing options...
Rojoss Posted July 7, 2017 Author Share Posted July 7, 2017 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. Quote Link to comment Share on other sites More sharing options...
themoonrat Posted July 7, 2017 Share Posted July 7, 2017 The refresh rate is the monitor will effect fps.... the browser may decide to not send a new requestAnimationFrame if the monitor won't be refreshing to display any changes Quote Link to comment Share on other sites More sharing options...
xerver Posted July 9, 2017 Share Posted July 9, 2017 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. Tilde 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 9, 2017 Share Posted July 9, 2017 Lets try that one: remove EVERYTHING except canvas. FPS counter is a DIV, right? Quote Link to comment Share on other sites More sharing options...
Rojoss Posted July 10, 2017 Author Share Posted July 10, 2017 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 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 10, 2017 Share Posted July 10, 2017 @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. Quote Link to comment Share on other sites More sharing options...
Exca Posted July 10, 2017 Share Posted July 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
Rojoss Posted July 10, 2017 Author Share Posted July 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
xerver Posted July 10, 2017 Share Posted July 10, 2017 Quote It's kinda weird that it's all depended on the refresh rate of the monitor. Only requestAnimationFrame does, you can use setTimeout/setINterval for your app logic, and requestAnimationFrame for rendering. Rojoss and yahiko 2 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 10, 2017 Share Posted July 10, 2017 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. Rojoss 1 Quote Link to comment Share on other sites More sharing options...
yahiko Posted July 10, 2017 Share Posted July 10, 2017 In my project, I plan to implement some Web Workers (4) in order to take advantage of quad core CPUs. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 10, 2017 Share Posted July 10, 2017 1 hour ago, yahiko said: In my project, I plan to implement some Web Workers (4) in order to take advantage of quad core CPUs. Correction: You hope to implement some Web Workers. It's never that easy yahiko and OSUblake 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.