Closed Benkevych closed 4 years ago
Hi @Benkevych, thanks for the report. The visual artifacts you see are due to three.js dificulty with transparent object. Some background here: https://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#15995475
Long story short, just add depthWrite: false
to your link custom material and it should fix it.
@vasturiano well, this is not the best solution, because it results some wierd illusions)
Yes, it does cause some Escher-like effects, because the depth buffer computation is being bypassed. This is a hard problem, rooted in three.js and WebGL.
An alternative work-around I would suggest for your case is to simply make your hidden (opacity=0) links as thin as possible (but not 0). Something like:
linkWidth={link => isHidden(link) ? 0.01 : normalWidth}
This will minimize the visual impact of the gaps, hopefully to a point that is neglectable.
I have some invisible links, but somehow they appear over other links sometimes. Example: http://ec2-52-14-138-28.us-east-2.compute.amazonaws.com/