Mapbox-gl-js: raster-resampling has no effect on raster tiles (eg. nearest neighbor is still blurry)

[robhawkes]

mapbox-gl-js version: v0.49.0

browser: Chrome 69.0.3497.92 (Windows 64bit)

Steps to Trigger Behavior

1. Set up a basic map instance with a raster tile layer
2. Set the raster-resampling paint property of the raster tile layer to nearest
3. Over-zoom map and notice blurry tiles

Link to Demonstration

http://jsbin.com/nohuromeqa/1/edit?js,output

Expected Behavior

According to the documentation, when setting the raster-resampling paint property to nearest the raster tiles should have sharp pixels when over-zoomed.

Nearest neighbor filtering interpolates pixel values using the nearest original source pixel creating a sharp but pixelated look when overscaled

Also, when changing the raster-resampling paint property to linear the results should appear different.

Actual Behavior

When setting the raster-resampling paint property to nearest the raster tiles have blurry pixels when over-zoomed.

When changing the raster-resampling paint property to linear the results appear the same (blurry).

Screenshots with custom layer (not in demo)

Over-zoomed in QGIS

Over-zoomed in Mapbox GL JS with raster-resampling set to nearest

Over-zoomed in Mapbox GL JS with raster-resampling set to linear

Screenshots from demo

Original tile

Over-zoomed in Mapbox GL JS with raster-resampling set to nearest

Over-zoomed in Photoshop (1000% increase in size)

[mourner]

Interesting! Might be GPU-dependent? Here's how the example works for me on macOS:

Can you also try different browsers?

[robhawkes]

Ah good question, I hadn't checked other browsers and machines yet.

Here are the results of a few tests:

• Windows, NVIDIA GeForce GTX 1070
  
  
  
  • Firefox (62.0.2) looks blurry
  
  
  • Edge (42.17134.1.0) looks blurry
  
  
• Windows (Surface Book 2), NVIDIA GeForce GTX 1050
  
  
  
  • Chrome (69.0.3497.100) looks blurry
  
  
• MacOS (MacBook Pro Retina, 2012)
  
  
  
  • Chrome (69.0.3497.100) looks pixellated
  
  
• iOS (iPhone 8 Plus)
  
  
  
  • Chrome 69.03497.105 (iOS) looks pixellated
  
  

Looks like Windows vs. MacOS / iOS more than GPU. Are you able to replicate it on a Windows machine?

[mourner]

Hmm, I have no ideas why Windows wouldn't like the NEAREST mag filter. Perhaps you could poke around the code and see if there are any clues? https://github.com/mapbox/mapbox-gl-js/blob/master/src/render/draw_raster.js#L48

[robhawkes]

Me neither, I'll see if I can find a moment to have a look and poke around.

If it helps, the Three.js examples using a nearest mag filter work as expected (pixellated) on Windows: https://threejs.org/examples/webgl_materials_texture_filters.html

[andrewharvey]

It's passing in the render tests which run on Linux, and I can't replicate this on my Linux machine either, so certainly it being a Windows specific issue sounds plausible.

[Scarysize]

I can also confirm this issue. I validated that both MIN & MAG texture filters are set to NEAREST using the WebGL Inspector Chrome Extension. This only happens on Windows, no issues on macOS:

Instead of blur, we get rainbowy edges, as we remap grey scale colors of the original tile image.

[Scarysize]

I did some digging, and from what I can gather, the problematic lines are here:

https://github.com/mapbox/mapbox-gl-js/blob/321a3695a6c068a1cfd58629ed9d8dcb333b8bbd/src/source/raster_tile_source.js#L129-L131

If commented out, everything looks fine on my side.