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?

19

Hello, it seems that the performance is also quite poor on an iPad Pro M1 (2021) and an iPhone 16 Pro.

iPad Pro M1 (2021)

iPhone 16 Pro

The FPS are 60 in both cases, but this does not match the perceived performance which looks less than 30fps.

I’ve also tried it in a Mac Book Pro M4 in Safari (60fps in the UI but 30fps aprox perceived), where the performance is better, but also looks slower than in google chrome (60fps in the UI but it looks like 120fps).

The 60fps displayed in the UI is wrong, notice that the screen of the Mac Book Pro M4 is 120hz and in almost any other babylon.js playground reaches 120fps

20

cc @amoebachant to take over while raanan is out