Webgl / add styling options for lines: joins, caps, offset, dash

[jahow]

This PR adds support for the following styling options:

• stroke-line-cap: this can be either square, butt or round
• stroke-line-join: this can be either bevel, miter or round
• stroke-offset: this property works like the line-offset property from the MapLibre spec
• stroke-miter-limit: miter ratio limit
• stroke-line-dash: this can be an array of expressions; currently the size of the array cannot be the result of an expression
• stroke-line-dash-offset: dash array offset in px

Most of these properties work exactly like their counterpart from the Canvas renderer. The offset property is not available in canvas yet though.

I've also added an example to try out different combinations:

https://deploy-preview-15058--ol-site.netlify.app/en/latest/examples/webgl-draw-line.html

Note: this PR also fixes a bug where the width of the stroke on screen used to be multiplied by 2 by mistake.

To do:

• add rendering tests

[github-actions]

📦 Preview the website for this branch here: https://deploy-preview-15058--ol-site.netlify.app/.

[tschaub]

Wow. Nice work. Will review more thoroughly later. Looks like line-cap may only apply to the end of the line. Is that intentional?

[jahow]

Looks like line-cap may only apply to the end of the line. Is that intentional?

Yes it does, did I miss something? Line cap is used when the segment is not connected to another one basically, otherwise it's line join.

[jahow]

Just noticed a huge glitch on the webgl-vector-layer example:

edit: fixed, the issue was caused by applying an offset on a line where some segments were colinear and going in opposite direction; the join angle was then 2π which meant that the point was offset to infinity. In this commit I made it so that the offset would be applied similar to a line cap if the join angle was too high, see last commit.

[tschaub]

Looks like line-cap may only apply to the end of the line. Is that intentional?

I should have clarified. I meant "end" as opposed to the "start" of a line. I would expect the line-cap to apply to both ends of a line.

Instead, I'm seeing the line-cap applied somewhat inconsistently to only one end of the lines (it looks partially transparent at the end of one line and absent from the start of all lines).

[jahow]

Instead, I'm seeing the line-cap applied somewhat inconsistently to only one end of the lines (it looks partially transparent at the end of one line and absent from the start of all lines).

Oh right! I took a look at how the canvas renderer was handling this and it turns out the line cap is applied on every dash, not only on the line start and end.

See the comparison between webgl (first) and canvas (second):

I'll see if I can adjust the dashes to use line caps as well.

[tschaub]

@jahow - I see that dashes may have been a distraction. I didn't try with a dash-free line to see that the cap style applies to both ends of the line.

It does seem like it would be nice if it worked with dashed lines as well.

[jahow]

I added a commit to render dashes with round/square line caps according to the style. The round caps are not looking exceptionally great at the joins currently:

Unfortunately having a better quality is going to take a while and this is as far as I'll be able to go in that PR. This will have to be revisited further.

[tschaub]

Nice work, @jahow.

[tschaub]

Separately, maybe we should discuss the stroke- prefix. Going with line- instead would align more closely with the Mapbox style spec - and it would shorten things like stroke-line-cap to line-cap.

[jahow]

Separately, maybe we should discuss the stroke- prefix. Going with line- instead would align more closely with the Mapbox style spec - and it would shorten things like stroke-line-cap to line-cap.

Indeed, that feels a little too verbose currently!