diff --git a/src/core/Application.js b/src/core/Application.js index bc730db..ea0f058 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -33,6 +33,9 @@ * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + */ constructor(width, height, options, noWebGL) { diff --git a/src/core/Application.js b/src/core/Application.js index bc730db..ea0f058 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -33,6 +33,9 @@ * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + */ constructor(width, height, options, noWebGL) { diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index ce0e1c4..75ae9b5 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -49,11 +49,20 @@ * enable this if you need to call toDataUrl on the webgl context. * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when * rendering, stopping pixel interpolation. + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. */ constructor(width, height, options = {}) { super('WebGL', width, height, options); + this.legacy = !!options.legacy; + + if (this.legacy) + { + glCore.VertexArrayObject.FORCE_NATIVE = true; + } + /** * The type of this renderer as a standardised const * diff --git a/src/core/Application.js b/src/core/Application.js index bc730db..ea0f058 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -33,6 +33,9 @@ * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + */ constructor(width, height, options, noWebGL) { diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index ce0e1c4..75ae9b5 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -49,11 +49,20 @@ * enable this if you need to call toDataUrl on the webgl context. * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when * rendering, stopping pixel interpolation. + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. */ constructor(width, height, options = {}) { super('WebGL', width, height, options); + this.legacy = !!options.legacy; + + if (this.legacy) + { + glCore.VertexArrayObject.FORCE_NATIVE = true; + } + /** * The type of this renderer as a standardised const * diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9b349bd..f7cc1a0 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -103,11 +103,18 @@ { const gl = this.renderer.gl; - // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); + if (this.renderer.legacy) + { + this.MAX_TEXTURES = 1; + } + else + { + // step 1: first check max textures the GPU can handle. + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); - // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); + // step 2: check the maximum number of if statements the shader can have too.. + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); + } const shader = this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); diff --git a/src/core/Application.js b/src/core/Application.js index bc730db..ea0f058 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -33,6 +33,9 @@ * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + */ constructor(width, height, options, noWebGL) { diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index ce0e1c4..75ae9b5 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -49,11 +49,20 @@ * enable this if you need to call toDataUrl on the webgl context. * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when * rendering, stopping pixel interpolation. + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. */ constructor(width, height, options = {}) { super('WebGL', width, height, options); + this.legacy = !!options.legacy; + + if (this.legacy) + { + glCore.VertexArrayObject.FORCE_NATIVE = true; + } + /** * The type of this renderer as a standardised const * diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9b349bd..f7cc1a0 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -103,11 +103,18 @@ { const gl = this.renderer.gl; - // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); + if (this.renderer.legacy) + { + this.MAX_TEXTURES = 1; + } + else + { + // step 1: first check max textures the GPU can handle. + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); - // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); + // step 2: check the maximum number of if statements the shader can have too.. + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); + } const shader = this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js new file mode 100644 index 0000000..f0e9bc8 --- /dev/null +++ b/test/core/WebGLRenderer.js @@ -0,0 +1,19 @@ +'use strict'; + +function isWebGLSupported(fn) +{ + return PIXI.utils.isWebGLSupported() ? fn : function () {}; // eslint-disable-line no-empty-function +} + +describe('PIXI.WebGLRenderer', isWebGLSupported(function () +{ + it('setting option legacy should disable VAOs and set minimum SPRITE_MAX_TEXTURES to 1', function () + { + const renderer = new PIXI.WebGLRenderer(1, 1, { legacy: true }); + + expect(PIXI.glCore.VertexArrayObject.FORCE_NATIVE).to.equal(true); + expect(renderer.plugins.sprite.MAX_TEXTURES).to.equal(1); + + renderer.destroy(); + }); +})); diff --git a/src/core/Application.js b/src/core/Application.js index bc730db..ea0f058 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -33,6 +33,9 @@ * need to call toDataUrl on the webgl context * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2 * @param {boolean} [noWebGL=false] - prevents selection of WebGL renderer, even if such is present + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experience unexplained flickering try setting this to true. + */ constructor(width, height, options, noWebGL) { diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index ce0e1c4..75ae9b5 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -49,11 +49,20 @@ * enable this if you need to call toDataUrl on the webgl context. * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when * rendering, stopping pixel interpolation. + * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility + * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. */ constructor(width, height, options = {}) { super('WebGL', width, height, options); + this.legacy = !!options.legacy; + + if (this.legacy) + { + glCore.VertexArrayObject.FORCE_NATIVE = true; + } + /** * The type of this renderer as a standardised const * diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js index 9b349bd..f7cc1a0 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -103,11 +103,18 @@ { const gl = this.renderer.gl; - // step 1: first check max textures the GPU can handle. - this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); + if (this.renderer.legacy) + { + this.MAX_TEXTURES = 1; + } + else + { + // step 1: first check max textures the GPU can handle. + this.MAX_TEXTURES = Math.min(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS), settings.SPRITE_MAX_TEXTURES); - // step 2: check the maximum number of if statements the shader can have too.. - this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); + // step 2: check the maximum number of if statements the shader can have too.. + this.MAX_TEXTURES = checkMaxIfStatmentsInShader(this.MAX_TEXTURES, gl); + } const shader = this.shader = generateMultiTextureShader(gl, this.MAX_TEXTURES); diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js new file mode 100644 index 0000000..f0e9bc8 --- /dev/null +++ b/test/core/WebGLRenderer.js @@ -0,0 +1,19 @@ +'use strict'; + +function isWebGLSupported(fn) +{ + return PIXI.utils.isWebGLSupported() ? fn : function () {}; // eslint-disable-line no-empty-function +} + +describe('PIXI.WebGLRenderer', isWebGLSupported(function () +{ + it('setting option legacy should disable VAOs and set minimum SPRITE_MAX_TEXTURES to 1', function () + { + const renderer = new PIXI.WebGLRenderer(1, 1, { legacy: true }); + + expect(PIXI.glCore.VertexArrayObject.FORCE_NATIVE).to.equal(true); + expect(renderer.plugins.sprite.MAX_TEXTURES).to.equal(1); + + renderer.destroy(); + }); +})); diff --git a/test/core/index.js b/test/core/index.js index 2a056a2..63a8f21 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -23,4 +23,5 @@ require('./Circle'); require('./Graphics'); require('./SpriteRenderer'); +require('./WebGLRenderer'); require('./Ellipse');