Problem with adaptToDeviceRatio and adaptiveScaling

Questions
1

Hi, I pass adaptToDeviceRatio=true to Engine for better rendering quality and adaptiveScaling=true to AdvancedDynamicTexture.CreateFullscreenUI to restore the output size.
If I want to move the GUI to an edge (e.g. vertical alignment: top), it disappears completely on the mobile phone.

Please check this out with PC vs mobile phone:

1 Like
2

cc @RaananW

3

Instead of the constructor option, please use the newly added flag (line 34):

I will make sure both constructor and this flag work the same. Thanks for reporting!

1 Like
4

Here is the fix :-1:

1 Like
5

Hi, thank you. I’ve been able to position the elements.

Is there a chance to get the better rendering quality? The text could be a little crisper.

I think that scaleX and scaleY (context) are important here so that the canvas renders the text in better quality.

Screenshot with blurry text on mobile:

grafik
grafik1080×999 42.5 KB

6

i can look into that, of course

8

I have found a solution. It is possible to do the scaling outside of the ADT.

  const scalingLevel = engine.getHardwareScalingLevel();
  const scale = 1 / scalingLevel;
  const size = `${100 * scalingLevel}%`;
  texture.rootContainer.scaleX = scale;
  texture.rootContainer.scaleY = scale;
  texture.rootContainer.width = size;
  texture.rootContainer.height = size;

To get rid of drawing problems on mobile, it is possible to use

texture.useInvalidateRectOptimization = false;
1 Like
9

Long time, but here is a solution :slight_smile:

1 Like
11

Hi, sorry for reopening this issue, but trying the original PG https://playground.babylonjs.com/#Q3PGSG#2
crashes on Android devices (at least on some Samsungs Sx…, Ax… where we have tested it. We get a black screen with these issues on the console:

image
image965×624 80.9 KB

On iOS it fails loading the page the first time and we have this on console (but if then I reload the page, it loads ok):

image
image898×116 20.6 KB

1 Like
14

This should be now working on all devices - Texture max size - Some devices enforce a max texture size of 4096 by RaananW · Pull Request #16670 · BabylonJS/Babylon.js · GitHub

You will be able to test the snapshot once the build is done

1 Like
15

Thanks! It works here https://playground.babylonjs.com/?snapshot=refs/pull/16670/merge#Q3PGSG#2

1 Like
16

Hi @RaananW , I’m implementing the adaptiveScaling option in a production project but I’ve just seen that it doesn’t seem to work when a gui element is attached to a mesh to follow its position with the linkWithMesh() method:

With adaptiveScaling set to false, the label is at the center of the sphere:

image
image434×352 11.4 KB

But when set to true, if the device has a DPR of 1, the label has an offset:

image
image406×408 11.2 KB

If the device has a high DPR screen (on most mobile devices I’ve tested), the label completely disappears from the screen.

Is this a bug or there is maybe a workaround for a gui element linked to a mesh and using adaptiveScaling?

Thanks!

1 Like
17

you can test it here and let me know - Fix global viewport calculations in AdvancedDynamicTexture by RaananW · Pull Request #16757 · BabylonJS/Babylon.js · GitHub

3 Likes
18

Thanks @RaananW, it works perfect on desktop and Android devices but there are some problems on iOS devices. Here I’m attaching some videos of the issue

  • Some times, when the PG is loaded, we have this blank screen (tested on iPhone SE 2nd gen and iPhone 15 pro):

    ios_error
    ios_error1179×2556 132 KB

  • And when it loads after refreshing the page, the performance is really low when I use guiElement.linkWithMesh(mesh) . Even if it says its 60fps, the camera movement is slow, lagging behind the screen touch movement and with stuttering https://playground.babylonjs.com/#Q3PGSG#5:

Iphone 15 PRO video capture wit linkWithMesh (low perceived performance):

Iphone 15 PRO video capture without linkWithMesh (high performance):

On Android devices the performance is correct with linkWithMesh.

Is this a limitation of iOS devices?