Vector tile lines with line-offset get clipped

[stacy-rendall]

maplibre-gl-js version: 4.3.2

browser: all

Steps to Trigger Behavior

1. vector layer with a line feature rendered with an offset, i.e. "line-offset": 24,
2. at higher zoom levels the offset features will get clipped, apparently they will not be visible beyond the bounds of their original tile...?

Expected Behavior

Continuous features should be rendered continuously, without weird looking graphical breaks

Actual Behavior

the features are continuous, same features at lower zoom:

[HarelM]

Please provide a jsbin/codepen with a reproduction of the issue.

[stacy-rendall]

Here you go @HarelM: https://jsbin.com/puquvoqude

Red/blue lines are from the same source, but the red lines are offset. At certain zoom levels the red lines are clipped. Our guess is that it appears to be when they are out of the tile:

[HarelM]

The linked jsbin gives me an empty map, please try and provide a minimal reproduction.
Just a side note - a 64 pixel offset on tiles that are 256 pixels, with probably a margin of 20 or so pixels will cause this issue.
The render is working on a per tile basis, which is probably what's causing this issue.
I couldn't find the place in the code that defines that, but feel free to dive into it...

[stacy-rendall]

The linked jsbin gives me an empty map, please try and provide a minimal reproduction.

I removed my MapTiler API key, you will need to update the two key=get_your_own_key" lines with a MapTiler API key

Just a side note - a 64 pixel offset on tiles that are 256 pixels, with probably a margin of 20 or so pixels will cause this issue. The render is working on a per tile basis, which is probably what's causing this issue. I couldn't find the place in the code that defines that, but feel free to dive into it...

64 pixels was for demonstration, however the same effect occurs with smaller values (just less pronounced). I am hoping to be able to make some time to look into the code this week.

[HarelM]

maptiler style is very big, it is advised to try and reproduce this with our demotiles and a very basic style, preferably inline the style - 2-3 layers total.

[stacy-rendall]

Ah, ok, try this one: https://jsbin.com/miputeqaji

Note: seem to have to zoom in/out a little to get the tile lines to appear at all:

Because the tiles are so big/simple I had to dial up the offset and it is a bit messy

[stacy-rendall]

The render is working on a per tile basis, which is probably what's causing this issue.
I couldn't find the place in the code that defines that, but feel free to dive into it...

Is that likely to just be a flag that could be sensibly toggled? Seems like it would be a deeper (i.e. architectural) decision about the renderer...? I did start looking at the code, but didn't get very far.

[HarelM]

I meant to say that I couldn't find in the code the tiles' margin configuration, so it might be that the margin is configured inside the tile, the render draws each tile with the margin and then clips it to the actual tile size without the margins.
So when generating the tiles for a style with a big offset you'd need generate them with a big margin.

[stacy-rendall]

Have been doing some investigation, and I might have found something useful:

• /src/render/draw_line.ts line 118 calls a function painter.stencilModeForClipping()
• this is defined in /src/render/painter.ts line 272. If I comment out the actual return and simply return StencilMode.disabled then the offset lines do not get clipped...

This makes sense, as it appears that the offset lines are being clipped to their tile.

I have implemented this change (certainly not a fix, as it would certainly break other things) in the following branch: https://github.com/stacy-rendall/maplibre-gl-js/tree/test/4160-tile-line-offset

With example reproducing the issue and fix as noted below: http://localhost:9966/test/examples/vector-line-offset.html

Initial behaviour

(note: have to zoom in a few notches to get red lines to appear, then out again to get back to the original zoom)

with StencilMode.disabled