Mapbox-gl-js: Raster tiles aren't perfectly crisp at integer zoom levels

[jaapster]

I noticed that raster tiles are somewhat blurry when rendered in Mapbox and did some experimenting.

When at a discrete zoom level (e.g. 14) it appears as if the tiles are rendered slightly smaller than the original size in which they were retrieved from the tile service.

Tile as it was received by the browser:

Resulting image in the map:

Am I correct in assuming that a 256x256 tile is not rendered in 256x256 pixels when at a discrete zoom level?

Once you notice the blurriness of the raster images it is rather annoying.

I'm using version 0.34.0

[Pat28]

Have done some testing as well...and found rendering at level 20 of some google tiles seems to be sharp, while level 12 is quite blurry...this screenshot shows the image zoomed in a lot...
Green is level 20, red is level 12

[jfirebaugh]

I can't reproduce this. At a discrete zoom level, 256px raster tiles are rendered at exactly 256px, with no blurriness. Are you sure you don't have a page zoom factor in effect?

[jaapster]

The page is at 100%.

I'm having trouble reproducing the size difference at the moment, but the blurriness is still there.

Original

Map

The map is at zoom level 14.

[jaapster]

I can't reproduce the size difference anymore. I'm not sure what happened there.

Another example of the difference between the original image and how it's rendered at zoom level 18:

Original

Map

[mourner]

@jaapster are you looking at this on a Retina screen? One guess I have is that browsers apply high-quality upscaling algorithms for displaying 2x-scaled images on the screen, while a OpenGL would do a low-quality bilinear interpolation.

[jaapster]

@mourner I am looking at this on a Dell Ultrasharp U3415W monitor hooked up to a MacBook pro (2015). Some of my teammates that use PC's are experiencing the same results.

[mourner]

I'm also wondering whether #4443 could have any effect on this. Could you try this on the master version (not released yet) and see if raster tiles look the same?

[jaapster]

Hi @mourner, I tried it on a build of master and the result is about the same

Original

As rendered on the map

Still blurry

[andrewharvey]

I can replicate this issue testing https://www.mapbox.com/mapbox-gl-js/example/map-tiles/

[Pat28]

Yes, exactly, the result is about the same, but I can clearly see that the
rendered image is blurry....less sharp.
Just look at the MEMORIAL letters....

On Fri, Apr 7, 2017 at 1:27 PM, Jaap Lous [e-mail] wrote:

Hi @mourner https://github.com/mourner, I tried it on a build of master
and the result is about the same

Original
[image: screen shot 2017-04-07 at 13 23 19]
https://cloud.githubusercontent.com/assets/1597572/24798343/b5fadc42-1b95-11e7-88ff-6694f4b7dee2.png

As rendered on the map
[image: screen shot 2017-04-07 at 13 23 37]
https://cloud.githubusercontent.com/assets/1597572/24798348/ba6d2e9c-1b95-11e7-995c-74eb7999091c.png

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-js/issues/4552#issuecomment-292512702,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACNXi6FvwjwExPCRosR0XyR6n0XHbZLRks5rth2KgaJpZM4M1qg9
.

[jaapster]

@Pat28 I meant the result shows about the same blurr as I've seen in v0.34.0.

[andrewharvey]

Tagging this as a bug since we have multiple people noticing the same issue that for an unscaled page (100% zoom) at a discrete zoom level raster tiles are rendered blurry (compared to the raster tile downloaded / stored in the webgl texture; I inspected the texture with WebGL Inspector and it's crisp compared to the rendering).

In this tile, I split on the left whats rendered and on the right what's in the texture/downloaded webp (split through the Boise label).

It happens with satellite too but it's less noticeable.

Interestingly on a device with a devicePixelRatio of 2.25 I don't notice this issue, it looks crisp but on a device with devicePixelRatio of 1 I do. However on the devicePixelRatio of 1 device, if I force using @2x tiles I notice it's still blurry. So appears to be environment specific.

This seems to go back to very early in GL JS versions.

[tyrasd]

Here's another example where mapbox-gl really does not the best job at rendering raster tiles: Compare https://bl.ocks.org/tyrasd/raw/4242194ccfc1c57562944733d10cbf66/#6/27.452/57.220 to https://tyrasd.github.io/osm-node-density/#7/27.452/57.220/latest (Leaflet slippy map)

(via http://www.openstreetmap.org/user/tyr_asd/diary/39009#comment38202 @jenningsanderson)

[ibesora]

Is there an estimation about when will this issue be resolved? We were evaluating MapboxGL to change Leaflet in our map building web app but are facing this same issue, all the raster tiles are much more blurry than on Leaflet to the point of being unusable.

[emreibis]

Can this issue be set to an higher priority because we do use a lot of raster tiles in our project?

[jenningsanderson]

Just adding another example, for what it's worth...
Raster (with mapbox.js / leaflet): http://www.townsendjennings.com/osm-density/index.html#11/39.023/-94.555
mapbox-gl-js: http://www.townsendjennings.com/osm-density/map-vector.html#10/39.0230/-94.5550
(512 x 512 tiles; transparent backgrounds in the tiles)

[andrewharvey]

Not related to this issue, but just in case anyone searches for blurry tiles and ends up reading this issue, make sure if you're using 256px tiles you have set tileSize: 256 on your source, as that would also cause blurry tiles.

[andrewharvey]

closed by #6026. Great work @kkaefer :tada:

[gabrielmoncea]

Hi, @andrewharvey @kkaefer @jfirebaugh

I have the same problem. Just started a project in mapbox-gl and using it with react (no wrapper)
I created the style in the studio, but the raster which is a .tif file when added as a layer gets blurry. Also, in the browser they look the same. If I am doing something wrong please tell me. In case it's not the package's fault, can you direct me to some place where this question should be asked?
Here are the screenshots:

.tif file:

in the studio:

Can you help me solve this problem. If you have questions please do ask

[andrewharvey]

@gabrielmoncea do you think your issue is #4450? There is a proposed fix for that at #6411 but it hasn't been merged into a release yet.

[kkaefer]

@gabrielmoncea how are you adding the TIFF file? Mapbox GL can't natively read TIFF files, so there's a good likelihood that one of the intermediary steps introduces these artifacts as well.

[gabrielmoncea]

@kkaefer I uploaded the files as GeoTIFFs. sorry my bad.

[riastrad]

@gabrielmoncea How are you preprocessing the GeoTiff prior to uploading it as a Tileset? The upload pipeline sometimes has trouble with unusual (anything not 256px) block sizes and this can cause the tiles to be be blurry, but you can usually get around this by specifying the GeoTiff's block size prior to uploading.

For example, using GDAL via the command line you can run a command similar to the following:

gdal_translate -co BLOCKXSIZE=256 -co BLOCKYSIZE=256 input.tif output.tif

[gabrielmoncea]

the blocks size in the command line are both 256?
shouldn't one be 512?

On Thu, May 24, 2018 at 7:31 PM, Josh Erb [e-mail] wrote:

@gabrielmoncea https://github.com/gabrielmoncea How are you
preprocessing the GeoTiff prior to uploading it as a Tileset? The upload
pipeline sometimes has trouble with unusual (anything not 256px) block
sizes and this can cause the tiles to be be blurry, but you can usually get
around this by specifying the GeoTiff's block size prior to uploading.

For example, using GDAL via the command line you can run a command similar
to the following:

gdal_translate -co BLOCKXSIZE=256 -co BLOCKYSIZE=256 input.tif output.tif

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-js/issues/4552#issuecomment-391778477,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AlcAwuM2XEgT5lxOYirgsO8TDDDyL8TEks5t1uBUgaJpZM4M1qg9
.

--
Gabriel Moncea

Acasus, Junior Developer
gabriel.[email protected]

Cyprus: [phone]

[riastrad]

@gabrielmoncea for large GeoTiff files we recommend a block size of 256x256.

See: https://www.mapbox.com/help/uploads/#tiff-uploads