CesiumGS / CesiumGS/cesium

Polylines get too thin at steep angles

Open
#5,231 5 comments 0 reactions 0 assignees View on GitHub
category - polyline priority - high type - enhancement
Dominant language
JavaScript
Stars
15.7k
Forks
3.9k
Avg merge
4d 6h
Merged PRs (30d)
34

Description

Polylines with sharp angles can get much thinner than the lineWidth dictates. This isn't a problem when zoomed out from the lines. For example, this looks good:

![manyangles](https://cloud.githubusercontent.com/assets/1235080/25346049/8b8da3de-28e4-11e7-8b87-1c18e3d714ec.png)

Here's the [live demo of the above](https://sandcastle.cesium.com/#c=pVTfT9swEP5XTn3BpcFpO8GktaBN5ZEJNNBe1j24yZVaOHZkO0Vl4n/n7CRtE3jYNL84vrvv8/34nK2wsJX4jBYuQeMzLNDJquA/o42dZPG4MNoLqdGeDGdLvdRbQmWoPdobowl49vl81rEKT9Zpa8yl80JnGGyNyW9k9qTRObJNxpF0XenMS+LLTFFWHm/oQqaMTkAJn8AGRS71Y0JuZewQ/iw10ApkpXEyIjsl3IuiVJjfNc47a0q0fsdCCS2S6KeEog1GwPZ5nsJ34TfcSc0asnj25gflILRjTTLDYYdM+EhGxX9Alhn3t2QNZRwBp4ZS/ui4yHPWFB1WadROUYvgCxxZa09dsSNXc+NCWE9fQn/ia2uKa3y0iO6btWLHfoXqz/ZDqtvdZfzXtZ/af9NMI8/097BH9Sxzv6H69jrq+QtBMpRCUUjUy8H7Wn++1kp+beWsq2KF9nYdVBdFeRH9aQoLi0QGAmyYlwIRugZmDaH7jpNwjQUWOCThxjPa5l26GYxGsqPYmFNXrotgYpMEJjQMJiHtcgwTGJOvlcjxGznUdniTI8riFI40OOHnybvAzoSmk3EDuxj3bz+Gxuc3a1tXi9QRIfLC2HLzYKbXbBwCGt+LMcWDYT05h4BBMpg7v1N41dJ/lUVprIfKKsZ56pGeMDXfpasqe0LPM+faDszTY+g8l1uQ+eVy0PtjLQeQKeEcedaVUvfyBZeDq3lK8e+gysSHeLtFq8QuhG0mVze1kXM+T+n4MdIbo1bC9pjfAA).

Zoom in on the right-most angle, and you'll start to notice something odd:

![oneangle](https://cloud.githubusercontent.com/assets/1235080/25346105/b0346b28-28e4-11e7-90b4-e0bd8e2a69d1.png)

The elbow joint here features a line that is much thinner than the requested 10-pixel thickness. Zoom in on that, and things get worse fast:

![justthetip](https://cloud.githubusercontent.com/assets/1235080/25346156/df4fbcd2-28e4-11e7-813d-e173ff53d3e1.png)

I suspect this may be intentional. Certainly it's better than the old behavior of allowing the tip of the angle to expand out indefinitely. But even so, it's possible to fill the screen with thin lines when the application is calling for thick lines, which is not ideal.

Can there be some way to preserve the thick lines here, without having part of the angle stick out too far? Something like this:

![lineangleidea](https://cloud.githubusercontent.com/assets/1235080/25346799/aea3d940-28e6-11e7-8c9a-426d9a3b266e.png)

Here I'm imagining the blue is where a thick line would normally be, for example if there were no code for handling the join at the angle point. The orange is where my hypothetical algorithm decided to fill in the gap at the angle, to make this look like a continuous line. I don't know if this is the right answer to this problem or not, but it seems better than modifying a large length of the line to be less than the requested width.

Reported to me by @AnneWoepse.

Contributor guide

Open the contributing guide

Research direction

Run the linked live demo and reproduce the thinning at the right-most sharp angle while zooming in. Investigate the polyline rendering path responsible for angle joins; done means steep-angle joins preserve the requested line width without allowing the join to extend indefinitely.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.