Babylon GUI mobile is all blurry

Questions
1

Hi!, I’m having some issue with my GUI… All my elements are set in percentile and it work fine on my desktop and mobile. However, the resolution on mobile is very blurry. However, when I check for the mobile on the Google Chrome emulator, everything works fine.

This is my canvas settings:

this.canvas = document.getElementById('onmo-glass-canvas') as HTMLCanvasElement;
	this.canvas.style.overflow = 'hidden';
	this.canvas.width = window.innerWidth;
	this.canvas.height = window.innerHeight;
	this.canvas.style.display = 'block';
	this.canvas.style.margin = 'auto';
	this.canvas.style.outline = 'none';
	this.canvas.style.overflow = 'hidden';

Then I created a wrapper which take all the height and the width of the canvas minus 32px. Every elements of my UI is added to that wrapper.

I did some research and found this :

this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio);

On mobile, the GUI is now clear but everything is way too big and exceed the screen. What am I missing?

2

cc @carolhmj as I believe there is a parameter in the gui to follow dpi

3

Can you show us a reproduction of your issue?

4

I can’t really showcase since the project is professionnal…

However, these are the important parts of the code :

App.ts

constructor() {
  // Create canvas
  this.canvas = this.createCanvas();
  
  // Initialize babylon engine
  this.engine = new Engine(this.canvas, true);
  this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
  this.engine.adaptToDeviceRatio = true;
  
  // Initialize babylon scene
  this.scene = new Scene(this.engine);
  this.width = this.engine.getRenderWidth();
  this.height = this.engine.getRenderHeight();
}

private main(): void {
	// Resize if the screen is resized/rotated
	window.addEventListener('resize', () => {
		this.engine.resize();
	});
}

hud.ts

constructor(app: App, scene: Scene) {
  this.app = app;
  this.scene = scene;

  // Create my UI
  this.ui = AdvancedDynamicTexture.CreateFullscreenUI('UI');
  
  // Create my container
  this.mainContainer = new Rectangle('mainContainer');
  this.mainContainer.width = this.app.canvas.width - 32 + 'px';
  this.mainContainer.height = this.app.canvas.height - 32 + 'px';
  this.mainContainer.color = 'transparent';
  this.ui.addControl(this.mainContainer);
}
5

Try setting adaptToDeviceRatio to true in the engine options and then when creating the GUI pass true to CreateFullscreenUI for the adaptiveScaling parameter. For example here’s a simple playground from the GUI doc that’s blurry on my iPhone but crisp with these changes below. :slight_smile:

6 Likes
6

Thanks for your answer even if it does not work for me…

However, I found my solution! I simply had to remove this line of code in my index.html

<meta name="viewport" content="width=device-width, initial-scale=1" />
2 Likes
7

Hey, you shouldn’t do this :unamused:
Even if it is working,…for now.
very basic why not, there are more reasons and more detailed answers on the internet.

1 Like
8

I think this is the right answer if you want the GUI to look the same size on different DPR device in same viewport width.
The doc didn’t seem to say anything about the adaptiveScaling parameter. Thank you sooooo much!

1 Like
9

Hi and welcome to the Community,
Thank you so much for sharing your experience on this in this first post.
And you are right when saying:

I remember in a previous post of mine, saying it would be nice if we could have a small chapter in the doc around this topic as there are just so many posts, questions and confusion around this. I would have done it myself but I’m not an english native and then, not an expert for cross-devices dev. And the last thing we need would be to add even more confusion to it. @RaananW @PirateJC @carolhmj If Yours feel like it someday? :wink:

11

Assigned @PirateJC just as a future reference! thanks :slight_smile:

2 Likes