Improving performance of video used as a mask

[Blake Mann]

I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels.

I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done:

• Create a texture from video
• Create a sprite from image
• Add the image sprite to a container
• Set 'mask' property of container to be the video texture

This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening.

I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient.

Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best

watercolor-test.html

[jonforum]

you maybe do something wrong because my i7 run a 65% pick when animation run!
It very bad performance for a simple video fx.

 

the codecs can be important.

what codec did you use, did you try some other libs ??

i don't have issues with vp9

 

a good link here about web codec

https://www.webmproject.org/hardware/vp9/bige/

 

 

[Blake Mann]

I downloaded StaxRip and tried re-encoding the video using the settings from that screenshot you posted, it hasn't seemed to have had any effect.

The only thing that I've been able to do to improve things so far is to stop the default ticker and manually update at only about 30 frames per second, to match the video frame rate - which gives me just enough idle time in between frames to help out the page performance, but it's still not entirely ideal!

[jonforum]

the printscreen was an old example customize, every context is different.

Otherwise a little idea like that.
I'm just making a suggestion.

what do you think about:
*to create a sequence png  of your animation mask with resolution divided by / 2 or 4. (it should be rather light especially that the mask is in black or white)

*Compute a spriteSheet with texturePacker

*Use pixi SpriteSheet Animation and scale * 2 or 4 + use as alpha mask. ?

it will maybe just little more blur because your will use scale.

 

it's just an idea like that if you can not find another solution with someone else.
SpriteSheet Animation is ultrafast performance,  but she will ask you a little more work.