Sign in to follow this  
hcmetal

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

@Deltakosh, thanks for your help.

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

gui-resolution.thumb.jpg.8a31fe493f54b81b7c4cfd080b6c69a4.jpg

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.