vasturiano / globe.gl

UI component for Globe Data Visualization using ThreeJS/WebGL
https://vasturiano.github.io/globe.gl/example/world-population/
MIT License
1.97k stars 293 forks source link

Arc dash caps #113

Open Dmitriy-ua opened 2 years ago

Dmitriy-ua commented 2 years ago

Hello Vasco! Thanks for your great work. Could you please advise me how can I add caps for arc dashes https://www.screencast.com/t/k75KnaHeDQRH

vasturiano commented 2 years ago

@Dmitriy-ua thanks for reaching out.

Unfortunately that's not currently supported. The reason being that those thicker arc lines are implemented using a ThreeJS TubeGeometry, and that geometry is - well - a tube, so it has open sides.

So theoretically the way to achieve that would be extend each tube geometry with circles the cover the ends, but that will add some complexity to the layer, as well as potentially some performance impact.

Dmitriy-ua commented 2 years ago

Thanks for such a quick response. I understand it. But when creating a tubeGeometry, there is the last parameter "closed" which is set to false by default. Would it help if set it to true and how it can be done? https://www.screencast.com/t/6nT6ot245flx Or how to apply a double-sided material for the arc, so that it is not transparent from the inside?

vasturiano commented 1 year ago

@Dmitriy-ua unfortunately it's not that simple of a change. When the arcs/tubes are being dashed like in your example, it's not a set of small tubes that's being rendered, but a single tube end-to-end which is being sliced by means of shader manipulation. This is for the intent of performance because the iterative generation of small tube segments is just too slow compared to the shader slice approach. So the "closable ends" of the real tube are in fact the edges touching the surface of the globe not those in between dashes. Thus the closed parameter will be of no help there.

Regarding the double-sided material, the issue with that is that it causes unexpected visual artifacts when you start using transparency in the arcs. Like this one:

Screenshot 2022-07-12 at 15 52 57

Therefore I choose to avoid it as it makes matters even worse.