Browser scale leads to lower playcanvas resolution

It seems like using a higher browser scaling leads to a lower resolution of playcanvas. This is especially bad on high dpi monitors which often use a default browser scaling of >100%

Is there a workaround?

Do you have Device Pixel Ration ticked in rendering settings?

No, and turning it on doesn’t change the behavior either. :confused:

Can you provide a sample project and screenshots of what you get and what you expect to see please?

I’m using 150% Windows 10 scaling and it looks fine to me?

Browser in Chrome at 200% zoomed in:

Here are my tests (firefox, win10)

without browser scaling (100%):

with browser scaling 200%:

The thin lines and text elements make the effect more visible. If you look closely you can see the same effect on your cube sample too.
Actually I haven’t yet found a single playcanvas project which doesn’t show this effect.

One solution could be to override the browser scale setting, if possible. But I’d rather not be messing with a user setting if I don’t have to.

I think that is just the nature of browser scaling unfortunately. The canvas is rasterised (I think) so zooming in is going to cause artifacts. It’s like enlarging a picture from it’s original resolution and scaling it back down again.

Might be worth trying it out without the iframe?

Can you try: https://playcanv.as/e/p/lBg2rBGR/ vs https://playcanv.as/p/lBg2rBGR/ please and see if you get the same issue? (notice the extra ‘e’ in the URL link, this loads the app without the iframe so you can try your published builds as well)

Got the puzzle solved, and it actually is the device pixel ratio! The thing is that you have to reload the app after changing the browser zoom :sweat_smile:

Thanks for your help!!

1 Like