Question about resolution

[soylomass]

Hi, I have the following questions about renderer's resolution property:

1. It seems obvious, but I want to be sure: Does increasing the resolution of the renderer reduce performance?

2. In case the above is true, may I implement a switch in my game so that users on low end devices can reduce resolution, increasing performance? If so, is there any problem with changing the renderer's resolution at runtime?

 

Thanks in advance.

[bubamara]

1. yes, more pixels to draw

2. yes. for example you can read window.devicePixelRatio and set renderer's resolution accordingly, because there's a big probability that device with higher devicePixelRatio (and thus display resolution) needs more performant GPU.

not sure about changing renderer's resolution on the fly, but I think safest way would be to destroy and recreate renderer

[ivan.popelyshev]

2. its possible but pixi cant do that without some help, like, changing rootRenderTarget resolution and calling "resize" one more time.

[themoonrat]

Also for 2. I wouldn't just link devicePixelRatio to the resolution part of PIXI. Otherwise you get mobile devices trying to render at 4k or over... which is just silly.  By all means, adjust resolution based on device, but I'd pick a few resolutions, and select which one to use based on inspecting the device

To change resolution of the renderer dynamically, you can use code like this

const oldResolution = renderer.resolution;

renderer.plugins.interaction.resolution = newResolution;

if ( renderer.gl ) ) {
  renderer.resolution = renderer.rootRenderTarget.resolution = newResolution;
} else {
  renderer.resolution = renderer.rootResolution = newResolution;
}

renderer.resize( renderer.width / oldResolution, renderer.height / oldResolution );

 

[soylomass]

Thanks everyone! I'll set a default resolution and if changing resolution at runtime works well, I'll implement a slider so users can change it. 

[bubamara]

of course you dont want mobile devices to be rendering at resolution 4. I meant something like this :

var resolution = Math.floor(window.devicePixelRatio ? window.devicePixelRatio : window.screen.deviceXDPI / window.screen.logicalXDPI) || 1;

if (resolution > 2 || device.isDesktop)
{
    resolution = 2;
}

 

[ivan.popelyshev]

Dont forget about `PIXI.settings.FILTER_RESOLUTION` which is default for all filters. If you want to change resolution in runtime, you have to change every `filter.resolution` too.