Adjust line inset value for lines with `line-gap-width` in shader?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
Steps to Trigger Behavior
- Create a line style layer
- Create another line style layer with a
line-gap-widthvalue that equals theline-widthvalue of the first line style layer
Expected Behavior
There is no visible gap between the two lines
Actual Behavior
There is a small visible gap between the two lines:
The current shader behavior is to adjust the inset value of lines with a gapwidth to account for the antialiasing, but I think that this is causing the visible gap.
If you replace this line in the line vertex shader:
float inset = gapwidth + (gapwidth > 0.0 ? ANTIALIASING : 0.0);
with
float inset = gapwidth;
There is no longer a visible gap. This does make lines a bit visibly thicker when there isn't a corresponding line whose line-width equals its line-gap-width drawn on top of it. However, I think the main use case of the line-gap-width property is to use it with another line drawn on top of it, so I think it may be better to optimize for that use case. If there's a solution that would be optimized for both, that would be even better.
Here's what the current behavior looks like:
- Green lines have
line-width: A - Double maroon lines drawn under green lines have
line-gap-width: Aandline-width: B - Double maroon lines not under green lines also have
line-gap-width: Aandline-width: B, for comparison - Single maroon lines have
line-width: B, for comparison
Here's what the altered behavior looks like:
We've used line-gap-width extensively in our core styles for a while, for roads, but I think the color contrast between the casing and the background color has always been so low that this issue wasn't really visible. We've recently been testing more high-contrast styling, and we are now finding that this is an issue. (I tested older version of mapbox-gl-js, I think this has probably always been consistent behavior).
Does this seem like something we can adjust?
/cc @aparlato
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/shaders/line.vertex.glsl at the linked inset calculation and reproduce the two-layer line style described in the issue. Compare the current calculation with the proposed gapwidth-only calculation, including cases without an overlaid line. Done means eliminating the visible gap for matching line-width and line-gap-width values while assessing the reported standalone-line thickness tradeoff.
Written by the indexing model from the issue text.
Assessment
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100