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/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 e77b39a..0da2452 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/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 e77b39a..0da2452 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..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(); + }); +}); 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 e77b39a..0da2452 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..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(); + }); +}); diff --git a/test/core/index.js b/test/core/index.js index 2a056a2..12feb70 100755 --- a/test/core/index.js +++ b/test/core/index.js @@ -24,3 +24,4 @@ require('./Graphics'); require('./SpriteRenderer'); require('./Ellipse'); +require('./WebGLRenderer');