search

vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs
https://vasturiano.github.io/react-force-graph/example/large-graph/
MIT License
2.22k stars 284 forks source link

Link opacity bug #9

Closed Benkevych closed 4 years ago

Benkevych commented 6 years ago

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/

screen shot 2018-05-07 at 18 05 35

screen shot 2018-05-07 at 18 10 19

vasturiano commented 6 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.

Benkevych commented 6 years ago

@vasturiano well, this is not the best solution, because it results some wierd illusions) screen shot 2018-05-08 at 12 32 03

vasturiano commented 6 years ago

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.