Crisp resolution makes aligned items disappear

Questions
1

Hi all, I’m very new to Babylon.js, so I might be missing something obvious here!

I’ve been trying to get a crisp resolution in my scene by following this example, lines 3, 10 and 11. The resolution looks good, but the problem is that items aligned to the edges of the screen disappear.

I’ve also tried setting var engine = new Engine(canvas, true, undefined, true), so adaptToDeviceRatio = true, which has the same result as the example above, with the same problem.

Image 1: Good resolution but aligned items are gone.

Image 1: Good resolution but aligned items are gone
Image 1: Good resolution but aligned items are gone1246×635 7.99 KB

Image 2: Bad resolution but aligned items appear.

Image 2: Bad resolution but aligned items appear
Image 2: Bad resolution but aligned items appear1242×633 17.7 KB

What is the right way to get a good resolution (applicable to different screen sizes and devices)?

2

Hello and welcome to the Babylon community! :smiley:

Can you show us your playground with the items that disappear? It will help us understand your problem better.

3

Hello!

I can’t recreate the resolution problem (because the canvas is already created?), but this shows the items disappearing: https://playground.babylonjs.com/#MVALK1#20

If you uncomment line 36 and 37 you’ll see that the rectangles disappear.

36    advancedTexture.rootContainer.scaleX = window.devicePixelRatio;
37    advancedTexture.rootContainer.scaleY = window.devicePixelRatio;

The problem is that if I don’t use those lines in my project, the scene will get blurry.
Any ideas? Are there other ways to fix the resolution?

Thank you in advance!

4

I think you might have sent the wrong Playground? It doesn’t have 40 lines.

But on the topic of GUI resolution, I’ll start by tagging @DarraghBurke

5

Oops, sorry, you’re right. I fixed the link now.

6

Thanks for fixing! I still don’t see the rectangles disappearing:

guiroot

Tested both on my desktop and on my phone. Which machine are you using?

7

Huh, that’s weird. I’ve tried it on my laptop and phone and they disappear on both.

8

I’m guessing this is probably because you have devices with a pixel ratio higher than 1 - my MacBook has the same thing. If the user is on a device with devicePixelRatio=1, then those lines won’t do anything. But if you have a greater dPR, they will break the alignment.

Can you share a playground that exhibits the behavior seen in the first image - good resolution but bad alignment? We can try a couple of things, including possibly inverting the scale based on the pixelRatio.

9

Hi just checking in, are you still having issues? @lisanne