Blurred Textures at a distance. Setting anisotropy levels doesnt effect at all?

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).

My Viewer with anisotropic settings set to 16

Khronos Reference Viewer

My viewer with MagFilter set to nearest

Lens with MagFilter Nearest

One thing I have also noticed is that running my viewer on Edge as compared to Chrome yields a bit more sharper results with MagFilter set to Nearest.

try to set
texture.generateMipmaps = false;
to check if at your distance magFilter is in use and not minFilter

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.

MipMaps off:
Screen Shot 2

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 :slight_smile: