Babylon GUI mobile is all blurry

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?

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

Can you show us a reproduction of your issue?

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);
}


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:

4 Likes

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

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