solved Mobile canvas resolution

[SvenFrankson]

Hi everyone,

I'm currently makind VR apps with BabylonJS, and try to solve the issue of the canvas resolution. I've already found some discussions about this topic, oddly none seems to concern the same issue as I do (it's not about anti-aliasing, as far as I understand, it's more about hardware pixel and css pixel)

If I open this playground in my phone : https://www.babylonjs-playground.com/#JPJB3A#2 (not VR, the question is the same for mobile VR and mobile non-VR applications)

The pixels are too large. When watching the phone through Google Cardboard it's even worse.

This playground https://www.babylonjs-playground.com/#JPJB3A#1 is much better, with hardwareScaling set to 0.25

It's fairly logical, because my phone has 4 hardware pixels per "layout pixel".

1) I'm using a ZTE Axon 7 phone, with 2500*1080 screen. A full screen canvas has width = 900px, height=450px in my browser. Do you encounter the same issues with your phone ?

2) Is there already an automatic built-in way to set the canvas resolution ? Like with the <meta> or something ? (ie : without adding resizing code in the app)

3) If no, should not we add some code to recognize the screen dpi an set the hardwareScaling accordingly ? So it work "out of the box" on mobile. Or is it to CPU-intensive to enforce x16 resolution ?

Thanks a lot for you inputs ! Have a nice week-end

PS : I've also tried the scenes from @davrous -interesting- article here : https://www.davrous.com/2017/07/07/from-zero-to-hero-creating-webvr-experiences-with-babylon-js-on-all-platforms/ , I'm 90% sure I have the same issues with the examples like Sponza scene, also the fact there are some textures ad lightning make it less obvious.

[brianzinn]

I tried it out on a OnePlus One and an S8.  Both rendered good with round edges on the sphere.  I bumped up the subdivs to 64 to make it more rounded.  I'm building also a VR game targeting mobile devices, so interested in these types of issues.  Cheers.

[SvenFrankson]

Oh okay then it's only on my phone, too bad ^^, seems like it will be harder to fix ! Thanks for the input anyway

Out of curiosity, which browser do you use ?

[brianzinn]

I'm using Chrome dev.  Was looking at this MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

I didn't look yet in babylon source to see what setHardwareScalingLevel does, but might be a corelation or a way to auto-set?

[brianzinn]

Just checked source and default is set like this:
 

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

So, you are overriding the _hardwareScalingLevel.  Maybe your browser doesn't return window.devicePixelRatio, so it defaults to 1.0?

[SvenFrankson]

I've updated the playgrounds, they were identical so the bug could not appear ^^

My phone returns window.devicePixelRatio = 4, but if I do not override the value, _hardwareScalingLevel is 1.

Yet, I think I solved it, thanks ! When instantiating the engine, you have to provide the 4th argument adaptToDeviceRatio.

constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio = false)

In my case, the following instantiation :

Main.Engine = new BABYLON.Engine(Main.Canvas, true, {}, true); 

Did the job ! Thanks a lot for your inputs !

[brianzinn]

Glad you figured it out.  Correct me if I'm wrong, but passing in limitDeviceRatio: 0.25 won't have the same experience on all devices.

ie: if you left it alone it would automatically be set to 1/4 for your phone.  my phone might end up as 1/2, but Math.min(..) would take 0.25, so maybe options should just be {}?

[SvenFrankson]

Indeed, I made a typo copying the line, it's limiteDeviceRatio = 4, not 0.25, I updated my answer.

[brianzinn]

What I meant was if there existed a phone with a devicePixelRatio higher than 4 (ie: 8) then they would still get the issue you had before, so that maybe passing in limitDeviceRatio is not needed in conjunction with adaptToDeviceRatio: true in engine constructor?

[SvenFrankson]

You're right. Oddly, when I tried without limitDeviceRatio, I had no scaling at all, so I thought the value was mandatory. But it now works, so I guess it was due to caching issues during my tests.

Thanks, I update the answer !