How to show text above a mesh

I’m build an RPG style game and trying to render a few pieces of text above each character, like their name. I saw a couple playgrounds that represent how to accomplish this but I’m running into a few roadblocks that I can’t resolve.

First, an example of what I’m trying to accomplish so we have a reference:

And here are some playground examples that are helpful, but arent exactly what I need:

  1. using the GUI: - this mostly looks like what I want - I see there’s the TextBlock element that I can use. The issue here is, as I zoom the camera away from the boxes, the text doesn’t shrink along with the boxes, which I dont want. The text should shrink proportionally with the boxes
  2. using a plane mesh with billboard mode: Babylon.js Playground - this also looks mostly like what I want, but I dont want the plane mesh that the text sits in to have a color or a background - I just want to be able to see text

any tips would be greatly appreciated and I would especially LOVE (if someone has the time) a sample playground with the minimal amount of code for me to understand (maybe just a box with some text above it)!


In PG #2 you can clear the texture with a color having alpha = 0 and enable alpha blending on the material:

See lines 120, 121 and 126.

1 Like

Excellent! thanks for that. I have another question about this. Is it possible to make the plane mesh have a dynamic size based on how much text there is? Given the following scenarios, I’d need different sizes for the plane mesh backgrounds:

  1. user with short name like ‘duxfox’
  2. user with long name like ‘evgeni popov’

Thanks again!

No, the plane mesh is unaware of the text size, so it’s your responsibility to make a plane large enough.

What you can is having a large enough texture for the biggest text you can have and center the text inside the texture. As the background is transparent, having textures too large for a given text won’t be noticed.