diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 6487683..ddde146 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -36,6 +36,7 @@ * @property {OES_texture_float} floatTexture - WebGL v1 extension * @property {WEBGL_lose_context} loseContext - WebGL v1 extension * @property {OES_vertex_array_object} vertexArrayObject - WebGL v1 extension + * @property {EXT_texture_filter_anisotropic} anisotropicFiltering - WebGL v1 and v2 extension */ this.extensions = {}; @@ -163,11 +164,16 @@ vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), }); } - - // we don't use any specific WebGL 2 ones yet! + else if (this.webGLVersion === 2) + { + Object.assign(this.extensions, { + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + }); + } } /** diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 6487683..ddde146 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -36,6 +36,7 @@ * @property {OES_texture_float} floatTexture - WebGL v1 extension * @property {WEBGL_lose_context} loseContext - WebGL v1 extension * @property {OES_vertex_array_object} vertexArrayObject - WebGL v1 extension + * @property {EXT_texture_filter_anisotropic} anisotropicFiltering - WebGL v1 and v2 extension */ this.extensions = {}; @@ -163,11 +164,16 @@ vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), }); } - - // we don't use any specific WebGL 2 ones yet! + else if (this.webGLVersion === 2) + { + Object.assign(this.extensions, { + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + }); + } } /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 4958121..883d271 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -26,6 +26,7 @@ * into a Resource. * @param {Object} [options] - Collection of options * @param {PIXI.MIPMAP_MODES} [options.mipmap=PIXI.settings.MIPMAP_TEXTURES] - If mipmapping is enabled for texture + * @param {number} [options.anisotropicLevel=PIXI.settings.ANISOTROPIC_LEVEL] - Anisotropic filtering level of texture * @param {PIXI.WRAP_MODES} [options.wrapMode=PIXI.settings.WRAP_MODE] - Wrap mode for textures * @param {PIXI.SCALE_MODES} [options.scaleMode=PIXI.settings.SCALE_MODE] - Default scale mode, linear, nearest * @param {PIXI.FORMATS} [options.format=PIXI.FORMATS.RGBA] - GL format type @@ -45,7 +46,7 @@ options = options || {}; - const { premultiplyAlpha, mipmap, scaleMode, width, height, + const { premultiplyAlpha, mipmap, anisotropicLevel, scaleMode, width, height, wrapMode, format, type, target, resolution, resourceOptions } = options; // Convert the resource to a Resource object @@ -88,6 +89,14 @@ this.mipmap = mipmap !== undefined ? mipmap : settings.MIPMAP_TEXTURES; /** + * Anisotropic filtering level of texture + * + * @member {number} + * @default PIXI.settings.ANISOTROPIC_LEVEL + */ + this.anisotropicLevel = anisotropicLevel !== undefined ? anisotropicLevel : settings.ANISOTROPIC_LEVEL; + + /** * How the texture wraps * @member {number} */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 6487683..ddde146 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -36,6 +36,7 @@ * @property {OES_texture_float} floatTexture - WebGL v1 extension * @property {WEBGL_lose_context} loseContext - WebGL v1 extension * @property {OES_vertex_array_object} vertexArrayObject - WebGL v1 extension + * @property {EXT_texture_filter_anisotropic} anisotropicFiltering - WebGL v1 and v2 extension */ this.extensions = {}; @@ -163,11 +164,16 @@ vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), }); } - - // we don't use any specific WebGL 2 ones yet! + else if (this.webGLVersion === 2) + { + Object.assign(this.extensions, { + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + }); + } } /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 4958121..883d271 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -26,6 +26,7 @@ * into a Resource. * @param {Object} [options] - Collection of options * @param {PIXI.MIPMAP_MODES} [options.mipmap=PIXI.settings.MIPMAP_TEXTURES] - If mipmapping is enabled for texture + * @param {number} [options.anisotropicLevel=PIXI.settings.ANISOTROPIC_LEVEL] - Anisotropic filtering level of texture * @param {PIXI.WRAP_MODES} [options.wrapMode=PIXI.settings.WRAP_MODE] - Wrap mode for textures * @param {PIXI.SCALE_MODES} [options.scaleMode=PIXI.settings.SCALE_MODE] - Default scale mode, linear, nearest * @param {PIXI.FORMATS} [options.format=PIXI.FORMATS.RGBA] - GL format type @@ -45,7 +46,7 @@ options = options || {}; - const { premultiplyAlpha, mipmap, scaleMode, width, height, + const { premultiplyAlpha, mipmap, anisotropicLevel, scaleMode, width, height, wrapMode, format, type, target, resolution, resourceOptions } = options; // Convert the resource to a Resource object @@ -88,6 +89,14 @@ this.mipmap = mipmap !== undefined ? mipmap : settings.MIPMAP_TEXTURES; /** + * Anisotropic filtering level of texture + * + * @member {number} + * @default PIXI.settings.ANISOTROPIC_LEVEL + */ + this.anisotropicLevel = anisotropicLevel !== undefined ? anisotropicLevel : settings.ANISOTROPIC_LEVEL; + + /** * How the texture wraps * @member {number} */ diff --git a/packages/core/src/textures/TextureSystem.js b/packages/core/src/textures/TextureSystem.js index 6a2da8f..edf279a 100644 --- a/packages/core/src/textures/TextureSystem.js +++ b/packages/core/src/textures/TextureSystem.js @@ -2,7 +2,7 @@ import BaseTexture from './BaseTexture'; import GLTexture from './GLTexture'; import { removeItems } from '@pixi/utils'; -import { MIPMAP_MODES, WRAP_MODES } from '@pixi/constants'; +import { MIPMAP_MODES, WRAP_MODES, SCALE_MODES } from '@pixi/constants'; /** * System plugin to the renderer to manage textures. @@ -376,6 +376,15 @@ /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); /* eslint-disable max-len */ + + const anisotropicExt = this.renderer.context.extensions.anisotropicFiltering; + + if (anisotropicExt && texture.anisotropicLevel > 0 && texture.scaleMode === SCALE_MODES.LINEAR) + { + const level = Math.min(texture.anisotropicLevel, gl.getParameter(anisotropicExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT)); + + gl.texParameterf(texture.target, anisotropicExt.TEXTURE_MAX_ANISOTROPY_EXT, level); + } } else { diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 6487683..ddde146 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -36,6 +36,7 @@ * @property {OES_texture_float} floatTexture - WebGL v1 extension * @property {WEBGL_lose_context} loseContext - WebGL v1 extension * @property {OES_vertex_array_object} vertexArrayObject - WebGL v1 extension + * @property {EXT_texture_filter_anisotropic} anisotropicFiltering - WebGL v1 and v2 extension */ this.extensions = {}; @@ -163,11 +164,16 @@ vertexArrayObject: gl.getExtension('OES_vertex_array_object') || gl.getExtension('MOZ_OES_vertex_array_object') || gl.getExtension('WEBKIT_OES_vertex_array_object'), + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), uint32ElementIndex: gl.getExtension('OES_element_index_uint'), }); } - - // we don't use any specific WebGL 2 ones yet! + else if (this.webGLVersion === 2) + { + Object.assign(this.extensions, { + anisotropicFiltering: gl.getExtension('EXT_texture_filter_anisotropic'), + }); + } } /** diff --git a/packages/core/src/textures/BaseTexture.js b/packages/core/src/textures/BaseTexture.js index 4958121..883d271 100644 --- a/packages/core/src/textures/BaseTexture.js +++ b/packages/core/src/textures/BaseTexture.js @@ -26,6 +26,7 @@ * into a Resource. * @param {Object} [options] - Collection of options * @param {PIXI.MIPMAP_MODES} [options.mipmap=PIXI.settings.MIPMAP_TEXTURES] - If mipmapping is enabled for texture + * @param {number} [options.anisotropicLevel=PIXI.settings.ANISOTROPIC_LEVEL] - Anisotropic filtering level of texture * @param {PIXI.WRAP_MODES} [options.wrapMode=PIXI.settings.WRAP_MODE] - Wrap mode for textures * @param {PIXI.SCALE_MODES} [options.scaleMode=PIXI.settings.SCALE_MODE] - Default scale mode, linear, nearest * @param {PIXI.FORMATS} [options.format=PIXI.FORMATS.RGBA] - GL format type @@ -45,7 +46,7 @@ options = options || {}; - const { premultiplyAlpha, mipmap, scaleMode, width, height, + const { premultiplyAlpha, mipmap, anisotropicLevel, scaleMode, width, height, wrapMode, format, type, target, resolution, resourceOptions } = options; // Convert the resource to a Resource object @@ -88,6 +89,14 @@ this.mipmap = mipmap !== undefined ? mipmap : settings.MIPMAP_TEXTURES; /** + * Anisotropic filtering level of texture + * + * @member {number} + * @default PIXI.settings.ANISOTROPIC_LEVEL + */ + this.anisotropicLevel = anisotropicLevel !== undefined ? anisotropicLevel : settings.ANISOTROPIC_LEVEL; + + /** * How the texture wraps * @member {number} */ diff --git a/packages/core/src/textures/TextureSystem.js b/packages/core/src/textures/TextureSystem.js index 6a2da8f..edf279a 100644 --- a/packages/core/src/textures/TextureSystem.js +++ b/packages/core/src/textures/TextureSystem.js @@ -2,7 +2,7 @@ import BaseTexture from './BaseTexture'; import GLTexture from './GLTexture'; import { removeItems } from '@pixi/utils'; -import { MIPMAP_MODES, WRAP_MODES } from '@pixi/constants'; +import { MIPMAP_MODES, WRAP_MODES, SCALE_MODES } from '@pixi/constants'; /** * System plugin to the renderer to manage textures. @@ -376,6 +376,15 @@ /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); /* eslint-disable max-len */ + + const anisotropicExt = this.renderer.context.extensions.anisotropicFiltering; + + if (anisotropicExt && texture.anisotropicLevel > 0 && texture.scaleMode === SCALE_MODES.LINEAR) + { + const level = Math.min(texture.anisotropicLevel, gl.getParameter(anisotropicExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT)); + + gl.texParameterf(texture.target, anisotropicExt.TEXTURE_MAX_ANISOTROPY_EXT, level); + } } else { diff --git a/packages/settings/src/settings.js b/packages/settings/src/settings.js index 47abd10..47fa4ea 100644 --- a/packages/settings/src/settings.js +++ b/packages/settings/src/settings.js @@ -29,6 +29,18 @@ MIPMAP_TEXTURES: 1, /** + * Default anisotropic filtering level of textures. + * Usually from 0 to 16 + * + * @static + * @name ANISOTROPIC_LEVEL + * @memberof PIXI.settings + * @type {number} + * @default 16 + */ + ANISOTROPIC_LEVEL: 0, + + /** * Default resolution / device pixel ratio of the renderer. * * @static