What is actually "Device Pixel Ratio"?

Help & Support
#1

Hey,
Perhaps a bit stupid question, but does anyone know what “Device Pixel Ratio” actually is, and what processes are run when it is enabled?

I mean, I’ve read the API, and it’s clear that it somehow scales the render resolution automatically to the window so as to fill all pixels and produce crisp images. BUT, it seems that it takes way more resources than this functionality would justify.

Like, how does it differ, for instance, from having an event listener for when the canvas is resized and then set the rendered resolution accordingly? Without having tested very thoroughly, this seems to be less resource heavy… so I’m guessing there’s something more to it…?

#2

Does this page help? Device Pixel Ratio | Learn PlayCanvas

It’s purely about rendering resolution

#3

Not, rly. I already read it… And I’m still confused exactly how it works. Since it’s such a big performance drain it would be nice to understand it better.

Does it just basically work similarly to what I described above with the event listener, or does it do something extra?

#4

It’s not related the event listener.

The browser has a default pixel device ratio Window.devicePixelRatio - Web APIs | MDN which represent the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.

Enabling device pixel ratio (app.graphicsDevice.maxPixelRatio = window.devicePixelRatio) in PlayCanvas means that the canvas rendering resolution to the native resolution.

Disabling it, (app.graphicsDevice.maxPixelRatio = 1) sets the rendering resolution to CSS pixels resolution. ie a lower resolution.

So the difference between the two is the number of pixels rendering on the screen. More pixels means lower performance depending on the hardware.

You can set the maxPixelRatio to any number up to window.devicePixelRatio to balance between performance and resolution.

1 Like
#5

hm… ok that’s interesting :thinking:
Still a little bit confused (not that used to working in browsers), but think I know what to read up on now. Thanks a lot! :smiley:

#6

Think of it as changing the resolution in a game settings. You can either set it to the max that the display supports (window.devicePixelRatio) or a lower resolution to try to get more FPS