Creating non scaling front facing labels

Questions
1

Hello,
i need to have nicely styled ( crisp ) labels on a mesh that rotate with the mesh but always face the camera.

I came up with the following playground:
https://playground.babylonjs.com/#RS9G14
( you can create markers / labels with alt-clicking the sphere )
I have two problems:
for some reason the z-position calculation and accompanying opacity change does not work
and
the marker gets created way of the clicked position.

any help much appreciated!

2

Would this playground help finding the right coordinates ? https://playground.babylonjs.com/#1BAPRM#73

1 Like
3

Hm, not really, since I basically use the same logic.
But in my example the position is off but I am not sure why,

4

Line 127, you set the sphere as the transform parent. But the sphere.position.y is 1, so everything you attach is offseted by 1 on Y. Replacing sphere with ground (position at 0,0,0) will make the mesh appears where it’s clicked.

3 Likes
5

Thank you.
That was an easy explanation.
Now I am working my way back to the original problem of showing and hiding the labels according to their position.
I have merged the label code into that cat playground linked by @sebavan
https://playground.babylonjs.com/#4M4PMR#14
the code for showing / hiding the labels / sprites according to z-Index was taken from here:
https://playground.babylonjs.com/#CUH660#32

But for some reason that is not working correctly.
Is this somehow connected to the model being more complex?
Or did I just miss something small?

6

Please share your latest PG so we can take a look.

7

It is this one here;
https://playground.babylonjs.com/#4M4PMR#14
I have commented out the code for the actual labels and just used the simpler sprites from the other playground to make it easier to spot the error.

8

You need to validate each step one by one:

  • is the px and py values computation is correct? Display a GUI element or any indicator to be sure it’s at the right position.
  • are the depth values in linear coordinates? if not, then compute pz in the same coordinates system
  • is there some Y inversion in the readPixel buffer ?
9

I updated the playground so that the sprite does not switch to opacity 0 but 0.5
this way one can see that px and py are correct ( the sprite is exactly where the decal was created )
For the other questions I really dont know, since I got the original code from the other playground mentioned in the above post ( https://playground.babylonjs.com/#CUH660#32 )

10

Offset the hit position with the normal. If the position is too close to the surface, the depth precision will make it blink.
Once fixed :

Front Facing Div Labels | Babylon.js Playground (babylonjs.com)

3 Likes
11

Thanks so much.
This was what I was missing.
Here is the final version with divs that actually look like labels.
For anyones future reference:
https://playground.babylonjs.com/#4M4PMR#19

3 Likes