Crisp text issue when reproducing playground in my own repo

Questions
1

I am having trouble reproducing the clarity of the text in this playground: https://playground.babylonjs.com/#XCPP9Y#16333

In my own repo, this is the code:

window.advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI('UI');
const textAffordance = Button.CreateSimpleButton('textAffordance', textString);
  textAffordance.width = 0.8;
  textAffordance.height = 0.8;
  textAffordance.color = 'white';
  textAffordance.background = 'green';
  window.advancedTexture.addControl(textAffordance);

And here are the two buttons created by the playground and repo:

image (8)
image (8)1920×1078 75.3 KB

image (7)
image (7)1920×1080 50.6 KB

image (10)
image (9)

I’m viewing them both on the same monitor, both in fullscreen. I’ve tried messing around with rootContainer.scaleX/Y and renderScale but nothing seems to help.

In case it’s relevant, a coworker and I both took videos of this playground: https://www.babylonjs-playground.com/#J1KG86#9

I’m on Windows and you can see changing the render scale resizes the text, and he’s on Mac and it just makes it crisper.


2

renderScale should have made an effect :thinking: Can you share your project, or at least a small reproduction of it? It will be easier to understand what’s going on.

3

It has an effect, it just doesn’t help with how crisp the text is. Here is the advancedTexture.renderScale set to 0.5 and 2. it changes the size, but not the resolution it seems.

image
image1919×965 210 KB

image
image1919×966 80.3 KB

Unfortunately I’m not permitted to share the repo, and can’t really reproduce a small part as it’s thousands and thousands of lines at this point, but if you have questions about a specific part I can try to pull that out. I’m sorry, I know that might make debugging this impossible.

4

So it turns out it was something in our post-processing. Need to figure out exactly what, but I disabled it and it works.

1 Like
5

Ooooh, I’m glad you found something there! I was looking at the Leonardo da Vinci text example and realized that you might also need to increase the font size when you change the renderScale: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com) (Which makes sense to me, because if you increase the render size of the texture in pixels the font should also grow in response) :thinking:

6

It turned out it was FXAA :man_facepalming: Might need to split our GUI into a different camera then to not apply post processing to it?

2 Likes
7

There’s a bit easier way now: just set adt.layer.applyPostProcess on the ADT :smiley: New Kernel Blur Postprocess | Babylon.js Playground (babylonjs.com)

3 Likes
8

Now, that’s a nice adding :smiley: Bookmarked.

1 Like