Link opacity bug about react-force-graph HOT 3 CLOSED

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.

from react-force-graph.

@vasturiano well, this is not the best solution, because it results some wierd illusions)

from react-force-graph.

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.

from react-force-graph.