Jump to content

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.

Link to comment
Share on other sites

@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?


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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...