Sprite on top of mesh in the same THREE.Group

Hi All, I have a case where I am showing tags using 2D sprites in the 3D world. sprites are connected to very thing cylinder meshes that connect to the surface centroid. Some camera angles render the sprite behind the cylinder for obvious reasons.
This is the desired behavior.

The is the case I am trying to fix.

I should point out that the main mesh is a huge buffered geometry with a complex shader program and the black edge lines is another big geometry.

If I try to use render order or depth functions, it impacts the interaction of the cylinder and sprite with all the objects.

Is there any way that I can ensure that all objects are rendered the same except that the cylinder is always behind the sprite (Is there a strict render ordering of objects inside a group?). There can be several such objects. I dont want to mess with global render order.

Why connect the line into the center of the sprite? You should be able to calculate the projected radius of the sprite in world space and then only draw the line up to the edge of the sprite rather than to the middle.

Apologies, the line length is actually only till the radius. but its still visible on top because the line is always normal to the face of geometry it is attached to. However the sprite does not rotate at all. So you can reach cases, where the sprite is behind the line and exactly covers the line.
image
In this image, the line is not to the center, its to the edge of the sprite but from the center. Ideally the line should have been hidden.

ok I figured it out. Its was indeed a depth perception issue. Solved it with:

  1. Every material has transparent: true, renderer.sortObjects = true
  2. depthWrite: false on the line
  3. render order of the group (that has the line and sprite) has to be higher than render order of main geom.
  4. render order of the sprite is higher than render order of the line.