Blurred text

[pichou]

I have notice that the text created with babylon gui is blur. So I tried to put a classic html div and a gui text next to each other and the result is really obvious.

I have made a playground to see it : https://www.babylonjs-playground.com/#2ARI2W#3
And attached you will find a screenshot of what I see. Plus I get the same thing with images, they are really blurred!

First I wondered if this is only on my computer/screen that it is blurred like that. Some of you also have this problem?

I have looked for a solution and the best I have found is to use the setSize function of the engine : 
https://github.com/BabylonJS/Babylon.js/blob/master/src/Engine/babylon.engine.ts#L2250

And it works I have better texts icons and images, but then a lot of other stuff were broken like the scene.pick function because the canvas size doesn't match with the screen size anymore I guess.

So I just wonder why canvas can't have a better resolution and if there is a fix maybe?

Bye bye, Pichou

[timetocode]

I don't know the real answer, but another trick can be to make the text bigger and then scale it down.

It isn't perfect, but it is less blurry: https://www.babylonjs-playground.com/#2ARI2W#4 (doubled size then scaled to 0.5)

[Guest]

You can also ask the ADT to render at bigger scale:

https://www.babylonjs-playground.com/#2ARI2W#5

 

Nevertheless it will be tricky to get the same quality as browser are specialized to produce high quality texts

 

 

[JoshB]

This is unfortunately the reason that it seems I can't use Babylon.js would have liked to because it seems easier to control than three.js but the blurry text is a big issue for me. 

[JohnK]

Have you tried the extension  http://doc.babylonjs.com/extensions/castorgui

another full screen gui by Dad72 to see if this is more to you liking?

[Guest]

@JoshB Three.js must face the same issue if we are talking about rendering text INSIDE WebGL. As @JohnK mentioned you can also use HTML based GUI tools that will render the text perfectly.

[pichou]

Thanks guys a lot for all your answers!

Just by curiosity, how do other game engine manage to have good text quality?

Plus for me this is not only text but also images, but I guess the problem is link.

 

[Guest]

I have no idea as I try to not watch other engines code. But if someone can point me to the right direction I will be pleased to update the way we render the ADT

[pichou]

Hey @Deltakosh,

I know this library fabricjs which seems to have no issue to have good text rendering with webGL : http://fabricjs.com/

Plus I have made some research and found this article very interesting with a working example : http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/

Then I also found this stackoverflow which list several techniques with its pros and cons : https://stackoverflow.com/questions/25956272/better-quality-text-in-webgl

Maybe you already know all of that but I hope that can help!

Cheerz, Pichou

[Guest]

This is the technique we use for text rendering: http://delphic.me.uk/webgltext.html

We do not plan to support text as geometry so far but if someone is motivated to step in and support it I will be happy to merge the PR

[Sebavan]

Hello Forum ?

From what I have gathered so far, it happens mainly cause we are not (at least in my case) rendering at native pixel size ( hardwareScalingLevel = 1 ) Here is a quick demo full scale for me ( hardwareScalingLevel = 0.5 ) where I also obvisously have to increase the texture size.

https://www.babylonjs-playground.com/#2ARI2W#8

It is actually what http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/ is using:

Hope this can help

[Magilla]

@Sebavan Thank you for that. My upcoming project (which I might need to hire  @Pryme8 for  ) probably needs this exact information. 

[Guest]

Another idea is just to use the rescale of the rootContainer so you don't have to change the size of your controls:

https://www.babylonjs-playground.com/#2ARI2W#9

(see lines #26 and #27)