Draw text over parent mesh, but behind other meshes

Questions
1

screenshot showing issue and desired interaction

I’m trying draw some atoms (spheres) with their element symbol as a label on top of them. As the camera pivots the label should always remain on top of the atom, but be behind any other atoms that are in front, and the label should shrink the further away it gets (to match the atom).

My current solution is to create a plane and assign a TextBlock to it’s texture with .addControl, then move the plane as the mesh moves and face it towards the camera, so that it’s always sitting just in front of the atom. This gives the label the correct depth and tracking. It works for the most part, but runs into issues when atoms are close to eachother and at the edge of the screen, and the text overlaps the atom in weird ways since it’s a flat plane sitting in front of a round edge.

Is it possible to somehow attach the label to the sphere rendering, so that it always renders over top of the parent atom, but will be behind any other atoms which overlap it?

Thanks for any suggestions!

2

Though I have not used them, I wonder if decals might be an alternative. One would not always face the camera, but you could put one on each side, and letter might look better wrapped around the sphere.

Here is a PG where each click places another decal.

Documentation.

3 Likes
3

I love @JCPalmer ideas as it is probably the easiest to build :slight_smile:

4

Hi @JeremyAlchemie and welcome to the forum.

Could just put material on a sphere and use billBoardMode Babylon.js Playground

Happen to have used dynamicTexture for letters plus rotations on spheres to get letters on front and correct orientation. You could just create a material with a letter on.

If you want lots of atoms then using a textureAtlas and SPS with UVs could be a way to go

https://doc.babylonjs.com/how_to/solid_particles#colors-and-uvs

but would require more thinking about.

3 Likes