Line with offset and round caps produces rendering artifacts

[daniel-j-h]

Hey folks, here is a rendering issue I ran into when using

• a line layer
• a line width of x
• a line offset of x
• round line joins and caps

it looks like the polygon's vertices don't get properly displaced and rendered then, leading to rendering artifacts.

Check out the screenshots below from the Android emulator (x86), and the artifacts at the polygon vertices / corners.

I'm on the maps sdk v10.0.0-rc.6

[kiryldz]

@daniel-j-h could you please check it out with updated gl-native core version? PR has not landed yet but you could check already.

[daniel-j-h]

Sure, do you have a pre-release binary or something like this I can point my gradle dependency to?

[kiryldz]

Oh wait a sec, guess you're using our maps sdk rc.6 stable version and not building main branch from source 😄 I'm messing things a bit here, could you please run ./gradlew :dependencies | grep maps:android-core to make sure we're on the same page here 😄

[kiryldz]

And also couple of follow-up q:

• some actual code will be appreciated
• does this bug happen on real device or emulator only

[daniel-j-h]

could you please run ./gradlew :dependencies | grep maps:android-core to make sure we're on the same page

Sure, getting

com.mapbox.maps:android-core:10.0.0-rc.6

The +lineLayer looks something like this (a bit more complicated because I interpolate line width and offsets across zoom levels)

lineWidth(x)
lineOffset(x)

lineColor(e)

lineOpacity(1.0)

lineJoin(LineJoin.ROUND)
lineCap(LineCap.ROUND)

minZoom(10.0)
maxZoom(24.0)

I just confirmed this issue happening on a real device, too, and not just the emulator (see screen from the device grab below)

[endanke]

I can reproduce this on macOS in gl-native, seems like it's a bug in the line rendering. If I have to guess it's probably caused by the calculation of the rounded corners and it's offsetting the vertices incorrectly for those parts. I haven't tried it in GL-JS yet but maybe we have there the same issue.

[kiryldz]

@daniel-j-h created an internal ticket, will let you know when this gets resolved

[daniel-j-h]

Cool cool! Not urgent on my side since there are workarounds :hugs:

[daniel-j-h]

Here is a similar issue I'm hitting now with

• line width of x
• line offset of x/2

where for polygons with steep angles the line outline extends over the polygon's boundaries.

I checked and it happens

• in the emulator and on device
• with or without line caps or line joins set

it looks to me like there is an issue in offsetting the line width and steep angles.

If you think this is a different issue, feel free to split it off into a separate ticket.

[daniel-j-h]

Hey folks, we hit just the same issue on Mapbox GL JS https://github.com/mapbox/mapbox-gl-js/issues/3809 which made check back here.

I don't agree with your stale bot archiving this as this is still an issue.

Do you folks have a timeline for this issue or should we look for workarounds or not use this as it seems broken across platforms?