mapbox / mapbox/mapbox-gl-js

Adjust line inset value for lines with `line-gap-width` in shader?

Open
#4,708 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Steps to Trigger Behavior
  1. Create a line style layer
  2. Create another line style layer with a line-gap-width value that equals the line-width value 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:

screen shot 2017-05-11 at 10 12 39 pm

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:

line-gap-width-current
  • Green lines have line-width: A
  • Double maroon lines drawn under green lines have line-gap-width: A and line-width: B
  • Double maroon lines not under green lines also have line-gap-width: A and line-width: B, for comparison
  • Single maroon lines have line-width: B, for comparison

Here's what the altered behavior looks like:

line-gap-width-no-visible-gap

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.