Jump to content

Mobile canvas resolution


SvenFrankson
 Share

Recommended Posts

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.

Screenshot_2017-08-19-10-20-25.thumb.jpg.8ddb979e64d373151ddee1f41a058b2a.jpg

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

Screenshot_2017-08-19-10-20-11.thumb.jpg.b156770e4ca7f7588def5872c5ace9b6.jpg

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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 {}?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...