Text GUI is pixelated with react-babylonjs

Bugs
1

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" />
    </advancedDynamicTexture>
 </plane>
2

Adding @brianzinn

1 Like
3

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

<advancedDynamicTexture
                    height={1024} width={1024}
                    createForParentMesh={true}
                    hasAlpha={true}
                    generateMipMaps={true}
                    samplingMode={Texture.TRILINEAR_SAMPLINGMODE}
                  >
    <textBlock... />
</advancedDyanmicTexture>

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
4

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