I am trying to fix blurred out textures from a distance I dont understand what is causing it. I have tried setting anisotropy to max but I get the same results. The renderer.getMaxAnisotropy function returns a value of 16, I have tried changing the values manually as well but it has no effect. Setting the MagFilter to nearest helps but it still doesnt achieve the quality which you can see on the Khronos Reference Viewer (The Sharper Image, observe the labels).
With the mipmaps off the blurriness is reduced but the results are not as clear as the reference viewer.
Also, changing the mag/min filter while the mipmaps are off makes no difference. I am not sure exactly what am I doing wrong.
It’s hard to tell w/o seeing your code live, as jsfiddle or codepen.
Your render either uses min or mag filter, not both at the same time. If disabling mipmaps changes the image then min filter is in use.
The blurriness can also be a result of the canvas being resized onscreen by means of css/javascript (buffer size in pixels and onscreen size in pixels do not match, so the browser resamples the canvas).
I found the solution. The blurriness was being caused by the canvas being resized indeed. Also the devicePixelRatio was not set correctly. Thanks for the help
