Jump to content

An issue with Canvas Tinting that cause iPad crash


Recommended Posts



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

Link to comment
Share on other sites

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.



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 )
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...