Condition (if) to set engine.setHardwareScalingLevel from pixelRatio of Retina display / Normal display

Questions
1

Hi Everybody,

I’m trying to set two different HardwareScalingLevel for retina and no-retina displays in order to scale the GUI (and the sharpness of the render) to a proper size.
As far as I know, Retina displays have a devicePixelRatio >= 2 while no-Retina displays have a devicePixelRatio <= 1.

I’ve tried the following code but it does not work:

const pixelRatio = window.devicePixelRatio;

const ToggleHardwareScalingLevel = () => {
  if ( pixelRatio > 1) {
     engine.setHardwareScalingLevel(1.5 / pixelRatio);     // in a Retina display, to have the GUI a little bigger
     } 
  else {
     engine.setHardwareScalingLevel(1 / pixelRatio);       // in a no-Retina display, to have the GUI a little smaller
    }
 return;
};

Do somebody have any idea what’s wrong?

Of course, I’ve tried the following code and it works but for all time of devices generating this GUI scaling issue that I want to fix:

engine.setHardwareScalingLevel(1.5 / pixelRatio);

Thank you so much all in advance!

2

Hi nickkilo,

Welcome to Babylon! Can you elaborate on the exact manner in which the code you posted does not work? Or, better, could you make a Playground that shows your scenario in action? It’ll be much easier to help you figure out what’s going on if we can see what isn’t working directly. Thanks!

3

There’s a construction parameter when you make an engine called adaptDeviceRatio:
Engine | Babylon.js Documentation (babylonjs.com)

It doesn’t pick up on if you switch screens, but you can listen in on resize events and that usually picks those up. My previous S8 android I think actually had a 1.5 ratio! If you look in the code you will see these kinds of snippets:

this._hardwareScalingLevel = adaptToDeviceRatio ? 1.0 / Math.min(limitDeviceRatio, devicePixelRatio) : 1.0;

I think you want 1.0/window.devicePixelRatio

1 Like
4

Hi again,

thank you all for your suggestions.

The issue I was facing by setting an only (high resolution) hardwareScalingLevel value for all devices was that the GUI in Retina/retina/HDPIs displays was becoming too small and on no-retina displays too big.

The goal was to scale the GUI dimension (and global resolution) to a certain value for retina/HDPI displays (without compromising performances) and to another value for no-HDPI displays.

So in order to set different scaling parameters for various pixel ratios, I finally made it simpler as follow:

        const pixelRatio = window.devicePixelRatio;

        if ( pixelRatio >= 1) {
            scalingValue = 1.6 ;  // HDPI displays
            } 
        else {
            scalingValue = 1.2;   // no-HDPI displays
            };

        engine.setHardwareScalingLevel(scalingValue / pixelRatio);

I just tried on retina and normal displays and works perfect. I will try as well with other HDPI devices (@brianzinn like some android phones) and in case add other conditions to have all cases right.

Thanks again all for the support!