Background is not properly tiled and blurry

[Nekzuris]

Description

I noticed that the tiles are very blurry and not properly tiled, not a big deal with real imagery, but quite noticeable with text like Mapnik Carto.

With canary the blur is almost gone but still not properly tiled.

I haven’t yet looked at the renderer code, but you probably just need to remove a small scale factor applied on every tiles.
This scale factor is typically used to hide gaps between tiles on Chrome due to this bug but might no longer be necessary and is definitely not needed on Firefox.

For reference I've done this for iD openstreetmap/iD#10594

Screenshots

Blurry and visible tiles on rapid

Sharp and properly tiled with leaflet

https://www.openstreetmap.org/#map=18/48.272140/7.052858

Version

2.4.3

What browser are you seeing the problem on? What version are you running?

Firefox v133.0

The OS you're using

win

Steps to reproduce

Open the editor and look closely (hide data layer).

The browser URL at the time you encountered the bug

https://rapideditor.org/edit#map=18.00/48.27224/7.05398&background=MAPNIK&datasets=fbRoads,msBuildings&disable_features=boundaries

The auto-detected useragent string for your browser (leave blank if you're manually filling this form out)

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

[bhousel]

Thanks for reporting @Nekzuris - we can look into it.
The way Rapid renders tiles is very different than how iD and Leaflet renders them, so there might not be much that we can do.

iD and Leaflet create a slippy map of img elements, and as you found Chrome sometimes rounds the dimensions of these incorrectly, that's why I added that small epsilon to close the seams a long time ago.

Rapid actually packs the image data into an atlas texture and uploads these images to the GPU. We can render the tiles at exactly the correct size, however we offset the texture coordinates by half a pixel so that the texture doesn't bleed into neighboring images in the atlas - this is probably what is causing the blurriness. It will always be a very tiny bit blurry, but there should never be seams from neighboring textures or empty parts of the atlas.

[bhousel]

I've been working on this today and I came up with a workaround that lets us avoid the half-pixel correction trick from my previous comment.

We can add 1px padding around each texture, then write actual image data into the padding so that when the texture is sampled at the correct size, it doesn't bleed into the neighboring texture in the atlas.

It works ok! I had to zoom into z21 (#map=21.00/48.27217/7.05060), to really see the difference, but it is nice to be able to display the background imagery faithfully instead of slightly squooshed:

The code is a bit experimental. I am brute-forcing the copying by just calling texSubImage2D a bunch of times.
This seems to work fine, but it's probably inefficient, so I'm going to profile a bit and try a more performant method before closing this issue.