solved Retina Display Laptop & Mobile

[F3/*X]

Dear Forum

 I found the babylonjs models on my computer don't look not as good as on the iphone, so i tested the resolution:

 

Macbook 12" (2304 x 1440px):

Pixel ratio: 1

render height: 714

canvas height: 714

window.devicePixelRatio: 2

 

iphone 8 4.7":

PixelRatio: 1

RenderHeight: 1393

CanvasHeight: 1393

window.devicePixelRatio: 2

 

-

so my iphone is haft the physical size and double the screen resolution, thats absurd no? Is it possible that the retina display of my macbook was not recogniced by the browser? 

i tried:

var scene = new BABYLON.Scene(engine);

engine.setHardwareScalingLevel(0.5);

but nothing changes. Is there a way to detect all retina displays and boost the resolution?

 

Thanks!

 

 

[F3/*X]

sorry - the "engine.setHardwareScalingLevel(0.5);" was just not working, because i forgot the ";". Now it's all good. - looks way better...

 

engine.setHardwareScalingLevel(0.5);

[brianzinn]

8 hours ago, F3/*X said:

Is there a way to detect all retina displays and boost the resolution?

Hi F3/*X - Welcome to the forum!!  There's an optional 4th parameter when you create the engine to do this automatically.  It defaults to false.
https://doc.babylonjs.com/api/classes/babylon.engine#constructor

The code in the Engine constructor that handles this for you is here:
https://github.com/BabylonJS/Babylon.js/blob/master/src/Engine/babylon.engine.ts#L1165

const devicePixelRatio = Tools.IsWindowObjectExist() ? (window.devicePixelRatio || 1.0) : 1.0;

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

If you don't set adaptToDeviceRatio to true in Engine constructor, then you may want to account for other devicePixelRatios.  I am on a laptop right now with a devicePixelRatio of 2.5

[F3/*X]

oh great, thanks! Just one "true" more for the engine constructor and all is set