Text Clipping, stitching renders onto separate canvas

[jamieowen]

mapbox-gl-js version: 1.12.0

Hi,

I think this probably lies outside of reasonable use of mapbox-gl but I was hoping you could shed some light into why this may be happening.

The below two images are high res images created using the mapbox-gl renderer.
The big difference is that I am creating the image by stitching together multiple mapbox-gl renders to a separate canvas.

In a nutshell... I have the mapbox-gl canvas set at a fixed size of 512x512. I then generate tile coordinates using the Mapbox Spherical Mercator package. For each tile I then position mapbox-gl, wait for the idle event and then render the result into the target 'high-res' canvas. Zoom levels are fixed integers which you can see with the debug information.

If you see the images below there is clipping of text between these tiles. I have marked some of the errors in red and correct situations in blue.

The clipping is consistent on multiple renders, but inconsistent in that there is no obvious pattern. e.g horizontal/vertical clipping only or small overlaps only..

I have played around with custom styling and have adjusted the allow-overlap/avoid-edges css properties but they don't seem to help.

Any ideas would be appreciated!

[ryanhamley]

Given how unusual this use case is and the lack of a live example, it's hard to say exactly what the issue is. I suspect though that you may be running into an issue with tile buffers. #6791 doesn't directly address this situation, but it does lay out some of the logic behind vector tile buffers and what may be happening here.

• rendered geometry != source geometry: a feature whose source geometry is located within A may be rendered partially or wholly outside of A's bounds, in some neighboring tile B. For example, a line inside A may have a line-width that extends past the boundary into B.
• We draw one tile at a time, and for each tile, we only draw the region within that tile's bounds, using the stencil buffer to mask away anything that would fall outside of it. When we draw tile A, the part of the rendered line that bleeds outside of its boundaries is masked away. Thus, when we draw tile B, we must have access to the geometry of that feature from A so that we can draw the portion of it that falls within B's bounds.

If you're using Mapbox styles and tiles, I don't believe this is configurable. You may have to create your own tileset to work around this issue. I'd recommend contacting Mapbox Support for more guidance since this stretches the bounds of supported GL JS use.