Hello,
I am using Cesium’s UrlTemplateImageryProvider class (UrlTemplateImageryProvider - Cesium Documentation) to render slippy tiles on the map. I am seeing them having black borders around the edges is there any way to remove these.
I have tried passing undefined to the rectangle prop to no avail. Thank you!
For additional context. We’re seeing these borders specifically where a tile does not cover an entire 256x256 tile space. Where you see the black lines is actually were two or more tiles with alpha bands overlap, each tile contributing pixel content bounded by the black lines. The lines appear to be interpolation(?) artifacts where Cesium is rendering the edge of the tile, moving from opaque pixel content to transparent content. In the underlying tile data the alpha band has only 0 and 255 for transparency values. And where pixel data is completely transparent the pixel values are always 0,0,0. In such a case I wouldn’t expect the underlying data to be the cause of any kind of border. This is why I believe it is a rendering artifact in Cesium.
Hi there,
CesiumJS should render the entire content of the 256 image, without overlapping. If the tiles themselves are smaller images, you should be able to set the tileHeight and/or tileWidth values.
It may also be helpful if you could provide a code example for debugging, if possible.
Thanks,
Gabby
Yes, I agree. Cesium is rendering the entire content of the 256 by 256 pixel image. But some tiles have transparent content. In our case this transparent content is always marked by a straight-line edge between the fully opaque and fully transparent content at some point mid-tile. At this mid-tile edge is where we’re seeing the black line appear. Again, it seems like a rendering artifact, more specifically in how Cesium is interpolating the edge within the tile. The overlapping is coming from the fact that we’re instantiating UrlTemplateImageryProviders that and rendering tiles at the exact same Slippy Tile locations.
For my understanding what is the result you are expecting? The line to be transparent, or no line to be visible at all?
No line at all.
Here is an easy test case setup. Take one a 256x256 px tile that is say 100% green (all pixels with value 255 in the green band). Slice it down the middle so now you have two 256x256px tiles. Tile 1 with one with the left half all green and the right side black, where it is green the alpha band is 100% opaque, where it is black the alpha band is 100% transparent. For Tile 2 swap the green and black sides (and the transparencies respectively). Both tiles must have the same Z, X, Y tile index. Create two UrlTemplateImageryProvider instances, with Tile 1 associated with one instance and Tile 2 associated with the other instance.
From purely a 2D array perspective, Tile 1 and Tile 2 stacked on top of each other have no gap, no line. Thusly I would not expect a line to show up in Cesium, yet it does.
I will be absolutely honest with, I’ve not tested this with a perfectly vertical or perfectly horizontal line between the two tiles, because we’re never going to naturally have perfectly vertical or horizontal lines. But I have tested it with the slightly diagonal lines seen in the initial screenshot.
Let me know what you think.
Thanks for clarifying this additional info.
You may have some luck adjusting the imagery layer texture filter as it controls how each pixel blended with its neighbors.
Possibly, you could also try setting colorToAlpha to black.
Thank you @Gabby_Getz! These are great suggestions and precisely the kind of knobs we were looking to turn. We’re tied down at the moment, but we’ll report back when we are able to do some more tests.
