Optimization for High Res Monitors

Hi, I recently upgraded my monitors to some fancy QHD resolution ones and set to work this morning only to realise that my Playcanvas project now runs around 20% slower fps when I run full screen (or have my Chrome browser set to the full width and height of the monitor).

I understand that my GFX card has more pixels to push in this state, but what ways are there to limit the whole Dom resolution (3D Canvas AND 2D HTML UI elements) to 1920 x 1080?

Thanks in advance :slight_smile:

2D HTML UI DOM elements, I don’t believe so, no.

PlayCanvas, see Device Pixel Ratio | PlayCanvas Developer Site You should be able to do some logic here to ‘cap’ the rendering resolution

Or you can used RESOLUTION_FIXED rendering Application | PlayCanvas API Reference

Thanks. The issue with fixed resolution is that if I resize my canvas the 3d World gets noticeably squashed or stretched depending on the aspect ratio.
Regardless, the improvement is negligible as it seems that its the 2D DOM that’s having the biggest impact on FPS. Is there not some way to access the root canvas element of playcanvas in the DOM and do some CSS magic?

You have to size it so it keeps aspect ratio of the actual resolution. You can do this on the resize event fired by PlayCanvas

This is outside of PlayCanvas so you have to deal with whatever the browser lots you do around the 2D DOM

Okay. Cheers!

I would consider running browser performance profile and see what is actually causing your slow down.

1 Like