Blurry PNG map tile textures

Questions
1

Hello I am trying to create web map service similar to https://www.openstreetmap.org/. Map tiles (256x256) are aquired from osm free api https://b.tile.openstreetmap.de/{z}/{x}/${y}.png. Then i map this texture to material. After that i create simple plane meshes and to them I apply coresponding map tile material. Result is map from map tiles similar to www.openstreetmap.org/. Sadly result is
blurred.

Current setting are:
material.map.anisotropy = 16;
material.map.magFilter = THREE.LinearFilter;
material.map.minFilter = THREE.LinearMipmapLinearFilter;

I would be thankfull if someone would help me solve this issue.

My version:

mojemapa
mojemapa1072×735 1.02 MB

OSM version:
osmmapa
osmmapa974×667 576 KB

Sharpest version what I got was with:
material.map.anisotropy = 0;
material.map.magFilter = THREE.NearestFilter;
material.map.minFilter = THREE.NearestMipmapNearestFilter;

With that Image is nicely sharp but now it got alot pixel artifact even with perfect zoom(focus) especialy when moving with map.

Interesting facts:
even when setting one of these settings to their opposing values results to blurry texture
material.map.magFilter = THREE.NearestFilter;
material.map.minFilter = THREE.NearestMipmapNearestFilter;
material.map.anisotropy = 0;

When i disable generation of mipmaps result is unchanged.

I ve tested it on both PerspectiveCamera and OrthographicCamera.

Edit: I ve created this js fiddle: http://jsfiddle.net/vqjosz16/ which contains parts of code from my app. Everyone can now experience the issue I am facing.

2

Hard to know if the blurring is happening on the texture itself, or the canvas as a whole. Are you using a high-DPI device, and did you set a device pixel ratio?

3

Thanks for response. I am using LG Flatron E2242T monitor and I dont think it is high-DPI. I ve tried it on my notebook and it has same issue. Device pixel ratio is set via “renderer.setPixelRatio(window.devicePixelRatio);”

4

How about using this setting?

material.map.magFilter = THREE.LinearFilter;
material.map.minFilter = THREE.LinearFilter;
5

Thanks for response. I ve tried these settings and I dont see any difference. Check this js fiddle: http://jsfiddle.net/vqjosz16/ which contains snipets of code from my app. Hopefully it will help track down reason of this blur.

6

What are you doing to ensure a 1:1 zoom ratio? I’m getting a range from mid-Sweden to south of Italy regardless of my browser height. That means that the textures will shrink when the browser is short, and stretch when the browser is tall. Maybe you’re seeing blur because the texture is being stretched up.

1 Like
7

Yeah that was an issue. Now with correct zoom ratio and Nearest filtering I am getting nicely sharp texture. Thanks alot.

1 Like