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
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.
- 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
Planewidth/height to size the
- I’ve also tried upping the multiple so the
DynamicTexturecanvas 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
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)
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?