depthWrite of nodes and SpriteText

[turhanberk]

Hi there! Hope everything is well.

I am working on a project where I use the 3d-force-graph library with three-spritetext library, where I add both spherical&cylinder geometries and text to the nodes. I am also using custom links.

Since the links are custom and have different weights/colors, they appear to pass through the nodes, which makes the overall view complicated. Since I do not want the links pass through the nodes and end in the boundaries, I switched depthWrite to true; however in this case my SpriteText also seems to be cut out.

My question (and hopefully a suggestion) is that is there any way that I can make the depthWrite of the nodes true and still be able to see the SpriteText that I added? I tried to reposition the links but since not all of my nodes are spherical it is hard to correctly position the link to the edge of the nodes, especially when they are long CylinderGeometry.

I am adding 2 snapshots from the scene to make my question more clear. In the first snapshot, the links pass through the nodes which I try to avoid. In the second snapshot, I make depthWrite of the node structures true where the link passing through problem is solved, but I also lose the SpriteText that I added. Is there a way that I can keep the links on the boundaries and keep the SpriteText visible?

Thanks a lot for your help in advance!

[yesyunyun]

I'm not sure may I answer you and if this solution is fit for you, but I solved a similar problem by adding an additional option to spriteText. Before you add spriteText to your node group, you can set position of spriteText.

yourText.position.z = 0.5 (proper number to your project)
group.add(yourText)

This is because your additional objects overlap the sprite text that generates on the node center. I hope you solve the problem with this solution.

[turhanberk]

Hi @yunison,

Thanks a lot for the suggestion. It partially solves the problem, but when I rotate the graph with mouse again the text disappears due to the depthWrite option I guess.

I want to use the depthWrite as true, because if I don't, when I rotate the some nodes appear to be in front of another ones when aligned during rotations where it should not be the case. If the depthWrite is false and 2 nodes are aligned, the one that was rendered first seems to be appear rather than based on their real x,y,z values.

Any help or any suggestion would be amazingly appreciated! Maybe there can be a suggestion from @vasturiano :) ?

Again thanks a lot!

[vasturiano]

Thanks for creating this issue @turhanberk!

To be honest I also don't exactly know how to achieve what you've described. Transparency and z-indexing can be quite a challenging topic in WebGL in general, and ThreeJS doesn't escape that curse. But, I would be very interested to hear what other more experienced folks in ThreeJS may be able to suggest here. Perhaps it's worth posting in a more ThreeJS oriented forum to reach a wider base.