Drawing text on DynamicTexture suffering quality loss

Questions
1

I’ve been trying to implement name tags and health bars above characters in my game. I’ve managed to do so by using a DynamicTexture on a Plane mesh and billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL, and making it a child of my character Mesh. And then I’m rendering the text simply with DynamicTexture.drawText

However the main problem I’ve been running into is the loss of quality in the text for the name tag, especially when the camera zooms out a little bit more, the text quickly becomes really hard to read, and even when it’s readable it’s noticeably of lower quality than browser-rendered text at the same size.

I’ve tried:

  • turning off mipmaps on the dynamic texture, that improved things moderately, the quality was extremely bad with mipmaps on
  • I’m using the same multiple against the Plane width/height to size the DynamicTexture
  • I’ve also tried upping the multiple so the DynamicTexture canvas is as large as 4,000px longest edge, and it does improve the quality by a little bit, however it’s still noticeably worse than browser-rendered text, and seeing as I’m going to want many of these name labels to be rendering simultaneously, I’m guessing this approach definitely won’t end well
  • tried scene.getEngine().setHardwareScalingLevel(1 / devicePixelRatio);, no effect

Even after everything I’ve tried, you can see in this screenshot below that it’s still not quite there. (The text on the left hand side is rendered by another HTML5Canvas that I’ve just overlaid on top of the main canvas for comparison, and it’s clear to see how much more readable it is, even at a smaller size than the text rendered by BabylonJS)

blurry_text_canvas

I’m wondering if there’s anything I’ve missed or if this is simply a limitation of BabylonJS/3D transformations being applied to the DynamicTexture canvas (does this happen if billboard mode is switched on?)

Wondering if anyone has any ideas, or alternative suggestions on implementing this feature for my game. I’m starting to wonder if figuring out where the position of the text should be and simply rendering it on another canvas overlaid on top of the main BabylonJS canvas would be a viable solution

Alternatively, I’ve also seen many mentions of a Canvas2D extension for BabylonJS which I understand is no longer around. Is the functionality that I want here supported in any other part of Babylon? Babylon.GUI, maybe?

1 Like
3

It looks like your texture is being alpha tested and not alpha blended.
Have you set material.useAlphaFromDiffuseTexture?
If you just need mono colored text you can also draw white text on an opacity texture.

It could be helpful to look at your textures in the inspector as well.

3 Likes
4

Thanks mise! Setting useAlphaFromDiffuseTexture did the trick

2 Likes