Animate - Low performance on mobile with window.devicePixelRatio resize

Questions
, , , ,
1

Following this tutorial for a personal project I’ve noticed that the rotation animation of my object is drastically lower on new generation mobile devices and almost stuck on older ones.

I’ve noticed that removing the call to window.devicePixelRatio corrector the object results horribly blocky and blurry but at least the fps is back to normal

here part of my index.js (you can find the whole in github project here):

function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const pixelRatio = window.devicePixelRatio;
    const width  = canvas.clientWidth  * pixelRatio | 0;
    const height = canvas.clientHeight * pixelRatio | 0;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }
...
function render(time) {
    time *= 0.001; // convert to seconds

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
...
}

what would you suggest me to do to avoid this behavior and have a balanced result in pixelRatio and fps?

here the deployed app: https://kbb-dev.web.app/
and the github project: https://github.com/yedduzzo/kbb-dev

2

(1) If you are doing these calculations manually, be sure to set render pixelRatio to 1.0 - otherwise you’ll the duplicating the pixel ratio calculations and effectively increasing the rendering resolution to 1e+Infinity, which can cause some minor framerate drops.

(2) Fun fact of the day - it’s possible to set renderer pixel ratio to values in-between integers. Both 1.1 and 1.5 seem to give a nice balance between native resolution and blurry mess on high-end devices.

3

Thanks mjurczyk for the quick response!
Sorry, I’m pretty a noob and I’ve already answered myself by placing the renderer.setPixelSize(1) function in the resizeing function right before the renderer.setSize() function.

Now, as I’ve noticed that I can get an acceptable performance even on crap mobile phones with a pixelRatio of 0.5, my question is:
what would yo suggest to do to handle risized mobile with a pixelRatio of 0.5 but having 1 in case of desktop browsers as even on the Chrome inspector the mobile view is fine while the desktop is blurry?

BTW here’s my definitive code:

function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const pixelRatio = window.devicePixelRatio;
    const width  = canvas.clientWidth  * pixelRatio | 0;
    const height = canvas.clientHeight * pixelRatio | 0;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setPixelRatio( 0.8 );
      renderer.setSize(width, height, false);
    }
    return needResize;
  }
4

It depends on your app complexity and how stable FPS you’d need in your specific case.

On desktop using pixelRatio equal to 1.0 should be alright in most cases (if it’s not, it may be the fault of the app itself.)
On mobile you can use anything between 2.0 and 0.9 to achieve stable fps between 30 and 60 (in case of games the later is nice to have.) Take into account that if you’re using WebGL text (troika, textures or geometry), it will become a bit blurry for values below the native resolution.