How to show text above a mesh

Questions
1

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: https://www.windowscentral.com/sites/wpcentral.com/files/styles/xlarge/public/field/image/2020/01/world-of-warcraft-patch-8.3_4.jpg

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

  1. using the GUI: https://playground.babylonjs.com/#41IFI5#8 - 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)!

Thanks!!

2

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

https://playground.babylonjs.com/#HSVQL#52

See lines 120, 121 and 126.

1 Like
3

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!

4

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.