fix dashed lines with square line caps

[ansis]

fix #9531

"line-dasharray": ...,
"line-cap": "square"

This adds square caps to each dash (matching what svg does). It does this by making every pixel within the sdf 0.5 line widths closer to the edge of the dashed line. It also makes the square cap of the line it's own quad to avoid stretching the distance-along-the line which would make coincident dashed lines not line up properly.

Before:

After:

Launch Checklist

• briefly describe the changes in this PR
• include before/after visuals or gifs if this PR includes visual changes
• write tests for all new functionality
• [n/a] document any changes to public APIs
• [n/a] post benchmark scores
• manually test the debug page
• tagged @mapbox/map-design-team @mapbox/static-apis if this PR includes style spec API or visual changes
• tagged @mapbox/gl-native if this PR includes shader changes or needs a native port
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Fix dashed lines with square line caps.</changelog>

@mapbox/map-design-team this PR includes visual changes for dashed lines with square line caps. Do you think any styles need to be adjusted or would this combination be uncommon enough to not affect much? @mapbox/static-apis I'm not sure whether these visual changes would affect you in any way.

@tmpsantos this needs a -native port

[ansis]

There are two more things I need to look into:

• how the extra vertices for square line caps affect line-pattern
• how this looks when the antialiasing of the dash edge aligns exactly on the end of the line. I think it might make the entire square cap translucent

---

The square cap of each line is rendered as it’s own pair of triangles after these changes. Each pixel within the square cap has the same “distance along the line” value. When the line’s end vertex is within a dash it renders solid. When it’s in a gap it’s transparent. That’s all the way it should be. But when the “distance along the line” for the end vertex is right on the edge of a dash it’ll think it needs to antialias that pixel and will render the entire cap semi-transparent

[tmpsantos]

LGTM

[mourner]

@ansis should we revisit landing this?

[mourner]

Rebased against data-driven dashes #10591 in fix-9531-rebase branch.