Text GUI is pixelated with react-babylonjs

My text GUI is pixelated. I am using react-babylonjs to create text GUI. Here is the code

<plane name={'text'} size={0.5}  billboardMode{BABYLON.Mesh.BILLBOARDMODE_ALL} position={new Vector(1,1,1)} >
    <advancedDynamicTexture height={1000} width={1000} createForParentMesh={true} hasAlpha={true}>
    <textBlock text={'hello'} fontSizeInPixels='80' color="white" />

Adding @brianzinn

1 Like

hi @simran_jain , good question. I have come across this myself! :slight_smile: Can you add a sampling mode and also upgrade your height/width to 1024 (power of 2)?

                    height={1024} width={1024}
    <textBlock... />

If that doesn’t solve it for you then try being explicit in your Engine creation - if everything else in your screen is not pixelated then you should be OK with just the change to the Advanced Dynamic Texture.

<Engine antialias={true} adaptToDeviceRatio={true} ..>

Let us know if that fixes your issue and otherwise if you can share your engine creation code. Cheers.

1 Like

I see, adaptToDeviceRatio and increasing height and width was the solution in my case. I did not realized that my scene have pixelation problem, now everything looks clean and amazing :blush: Thank you.

1 Like