An issue with Canvas Tinting that cause iPad crash

[Ezelia]

Hello

 

I'm developing a particle emitter for Pixi.js and noticed a performance problem (only noticable on canvas 2D mode) that cause ipad to crash . (tested on ipad mini, noticed on some iphones)

 

 

this performance drop is very specific to the situation described bellow :

 

 - Using canvas2D renderer (iOS)

 - handling a significant number of textures.

 - each texture change the tint many times (in my case, there is a new tint each frame).

 

 

I identified the issue and sent a pull request (https://github.com/GoodBoyDigital/pixi.js/pull/924) but don't know if this is the best way to fix it.
the PR fixed my performance issues and iOS crash.

I was able to reproduce the situation on safari browser (performance drop but no crash)

 

here is the unpatched CanvasTinter

 

 

 

and here is the patched version

 

[Sebi]

You are wrong on this.

The tintCache is a property of your texture which stores the tinted version of a texture to not recreate it each frame.

Your fix however will overwrite one single canvas each frame (or whichever frame the tint happens). With no way to return to a prior tint color.

Imagine you have 2 sprites which share a texture. With your patch:

 

 

var SpriteA = PIXI.Sprite.fromFrame("texture");stage.addChild(SpriteA);var SpriteB = PIXI.Sprite.fromFrame("texture");stage.addChild(SpriteB);SpriteA.tint = 0xff0000; // when rendered: tintCache[0xff0000] = red canvasSpriteB.tint = 0x0000ff; // turns red canvas blue. tintCache[0x0000ff] AND tintCache[0xff0000] = blue canvas

 

Both Sprites will be tinted blue because both tintCache refer to the same canvas.

Also, the texture will never be tinted red again.

This is not what we want.

Look:

http://mokgames.com/pixi-experiments/pixi-tint-patch.html

However, to solve your memory issue, you will have to do something like this in your update loop:

 

 

if(particle.texture.tintCache && particle.texture.tintCache[particle.cachedTint]) {  particle.texture.tintCache[particle.cachedTint] = null; // or delete, whatever}

or kill the whole thing:

function animate() {  [...]  renderer.render(stage);  particle.texture.tintCache = null;}

( I didn't look up if the tintCache is using the hex or dec color as key, might have to change that )