Creating non scaling front facing labels

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!

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

1 Like

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

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

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?

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

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.

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 ?

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 )

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

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