How to make Babylon GUI look "sharper" on mobile (high dpi) devices

[hcmetal]

Hello everyone,

This might be a common question but I am having a bit trouble figuring it out.

On mobile devices babylon scene content are rendered on relatively lower resolutions, as the hardware has limited capabilities this is expected and acceptable.

However, I am wondering if it is possible to make the GUI layer render at a higher resolution, similar to "engine.setHardwareScalingLevel(number < 1.0)"?

Obviously, setting a lower scaling level on everything (GUI and 3D scene content) is not a viable option since mobile device cannot handle the rendering task.

So is it possible to make just the GUI render at a lower hardware scaling level and leave the other contents as they are?

Or maybe there is some other way to make the GUI look "sharper" (render at a higher resolution and utilize the high dpi display on mobile devices) and I am just not reading the docs carefully enough?

Hope someone can point me to the right direction.

Thanks alot!

Edit: I am trying to use 

advancedTexture.renderScale = 2.0

But it is not making the GUI appear sharper, just smaller...

Anyway, I might not be using this right.

[Guest]

The renderScale is the way to go. You must then scale all the sizes expressed in pixel as they will be smaller else.

 

[hcmetal]

@Deltakosh, thanks for your help.

I have experimented with some combinations of options and here are the results:

Since we are scrutinizing the pixel details it might not be easy to spot the difference from the image above because it is heavily optimized and downgraded by the forum automatically.Please check the attached file for a clearer image. And please notice we might be looking at these screenshots on a common HD monitor.

It is very obvious on a high dpi device (like retina screen) that lowering hardwareScalingLevel leads to the best quality, as shown on the right.

However the fps is terrible because mobile device cannot handle the rendering.

Setting the renderScale to a higher value actually results in poor antialiazing and reduce the quality of the GUI, as shown in the middle.

In all three cases the px sizes (including font size) of the icons and texts are adjusted accordingly to maintain the same proportional size on the screen.

Is it possible to have the GUI rendering quality similar to the third (right) screenshot, while keeping a lower resolution rendering of the 3D assets, so both quality and performance can be achieved?

Edit: 

Link to the original screenshot: https://github.com/hcmetal/misc/blob/master/gui-resolution.jpg

[Guest]

Unfortunately all we have is then HTML canvas tools to render to a texture.

The best option could be to try to disable the texture sampling mode and try to render at bigger scale (To get crisper results) ?

https://www.babylonjs-playground.com/#XCPP9Y#713