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 bbba342..e4cd8a0 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -50,11 +50,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 bbba342..e4cd8a0 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -50,11 +50,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 1402e47..2affcd5 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -103,11 +103,19 @@ { 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); // create a couple of buffers 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 bbba342..e4cd8a0 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -50,11 +50,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 1402e47..2affcd5 100644 --- a/src/core/sprites/webgl/SpriteRenderer.js +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -103,11 +103,19 @@ { 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); // create a couple of buffers diff --git a/test/core/WebGLRenderer.js b/test/core/WebGLRenderer.js new file mode 100644 index 0000000..a66c6fa --- /dev/null +++ b/test/core/WebGLRenderer.js @@ -0,0 +1,14 @@ +'use strict'; + +describe('PIXI.WebGLRenderer', function () +{ + it('setting option legacy should disable VAOs and set minimum SPRITE_MAX_TEXTURES to 1', function (done) + { + var 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); + + done(); + }); +});