Enable Anisotropic filtering for textures where available

Using standard bilinear filtering for sprite textures in the manner that PIXI currently does, often leads to slightly blurry sprites when a sprite is scaled to a size that is inbetween two mipmaps.

Since part of our app is a WebGL powered photo editor, using PIXI, this is not ideal. We have previously worked around this issue by modifying PIXI’s sprite shader generator to set a negative mipmap LOD bias:

vec4 sample = texture2D(uSampler, vTextureCoord, -0.5);

This ensures that the sprite is always using a slightly higher resolution mipmap.

While this works fine, we have recently realised that WebGL now has good support for anisotropic filtering, which enables us to remove the negative LOD bias and always get perfectly sharp sprites. Furthermore, performance is significantly better than our previous method since on modern GPU’s, anisotropic filtering is pretty much free, or if not, the performance impact is absolutely miniscule.

Support for anisotropic filtering can be checked like so:

 var ext = (
                gl.getExtension('EXT_texture_filter_anisotropic') ||
                gl.getExtension('MOZ_EXT_texture_filter_anisotropic') ||
                gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
            );

And can then be set on a per texture basis in the same manner as PIXI currently sets its current linear/nearest filtering in the Texture.minFilter function:

if(ext){
     var max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
     var anisotropy_level = Math.min(this.anisotropic, max);
     gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, anisotropy_level );
}

Please note than in this example we have simply added an anisotropic property to the Texture object, which accepts values from 0-16. We then check to see the maximum supported anisotropy level, and apply the chosen level or the highest supported value.

Also, in our hacked function, we only apply this technique if linear filtering is selected for a texture, and if mipmapping is enabled and allowed for said texture (since it wouldn’t make any difference without mipmaps anyway).

It would be great to see this added into PIXI as the improvement in scaled sprites is hugely significant.

More info can be found here: https://developer.mozilla.org/en-US/docs/Web/API/EXT_texture_filter_anisotropic

[teoxoy]

I’ve just realized that this issue has been opened 2 years ago. I will go ahead and start a PR for this.

[vvashisht]

Cool. Thanks!