Desktop/mobile ratio and scale

Hey everyone! I was searching for my question, but didn’t find anything that helps with this headache. The question is: how can I make my canvas/engine responsive to the device screen? If I do nothing (without any settings) and run my project on mobile, then on mobile I see a low poly scene, like someone changed quality from 1080p to 360p (see on screenshot). Ok, I found some steps. I tried to remove <meta name="viewport" content="width=device-width, initial-scale=1" /> and in this case the scene on mobile looks like it should be, but we all know we can’t remove this tag.
I tried to set engine.adaptToDeviceRatio to true,
but nothing really happens except the scene on mobile kinda zoomed. I tried to use setHardwareScalingLevel, but this one affects only the desktop version (for instance, if set to lower than 1, then desktop looks “zoomed” like mobile on my screenshots).
Oh and plus something wrong with water because of this problem, I guess.
Sorry, I can’t share the playground with you, because it’s a commercial project.



So is there anyone else who faced this problem and has a solution? If it’s really easy one and I’m just stupid, please, don’t tell my school teacher…

I don’t know anything of mobile dev, so hopefully someone who knows more will be able to help.

Regarding the water, what is exactly the problem? Does it work when you remove <meta name="viewport" content="width=device-width, initial-scale=1" />? Does it work on a desktop computer?

Water works fine on desktop and looks strange(see, like parallelograms) on mobile, but normal only if I remove that meta tag.The whole 3D scene looks well on mobile without that tag, but the other – 2D content – doesn’t display normally.

Hey,
just from the top of my head - do you have this line in your code?

window.addEventListener("resize", () => {
    engine.resize();
});

Another thing is:

why we can’t remove this tag? It is just a meta tag. You can do whatever you want to do with it - it suppose to help you.

You can also check my project to see if that issue is occurring there also:

But I don’t have much going on there yet so it might be more difficult to spot the difference.

And lastly, after looking at your screenshots, maybe it does look ok? I mean, on the mobile you do have less pixels than at the desktop so there will be some drop in the quality.

Hello @starkXV just checking in if you have any more questions?

Hi there! Sorry for that late response. Yea, I still have the same problem. I tried canvas.width = window.devicePixelRatio * window.innerWidth and the same for its height. After this I got a beautiful picture, but can’t interact with meshes any more in the right way. For instance, I click on an image on a wall, but the system thinks I clicked on a floor. It’s because of the double scale, you know… Shortly, I’m still searching for a proper decision.

Maybe this can help:

1 Like

And yep - that helped me! Thank you, my French friend! Guess now I need to create another post here with a tutorial on how to get beautiful picture on mobile and who knows maybe someday it’ll be integrated into Babylon engine as well.

2 Likes

Hi there!
I’m facing the same problem, that my game looks pixelated and blured on mobile. And it can be different in different browsers.
So I found this topic, and probably have better solution. At least for me.

Just set once:

engine.setHardwareScalingLevel(1 / window.devicePixelRatio)

And I got perfect rendering, with real device resolution. Hope it can help somebody :slight_smile:

2 Likes