how play video with alpha ( vp9 alpha encoding .webm ) PIXI.Texture.fromVideo

[Jonforum]

ps: I do not know if it's my javascript code, so i post this issue in javascript support.

hi everybody, I can not play a transparent video with pixi.
do you have any idea why i have this issue ?

i see here we can do it withy chromius add the support FFmpeg/FFmpeg

So i use the FFmpeg .webm (RGBA || yuva420p)
see link here:
https://github.com/FFmpeg/FFmpeg/commit/acca56d9629b7fc158ce188190d22314c3d92c39


so i try 2 configu on the trancoding, but PIXI show alway video with black background !!?.
-pix_fmt yuva420p || -pix_fmt rgba

Someone has an idea of what I do wrong.

I looked at some methods here,
https://developer.mozilla.org/fr/docs/Web/API/HTMLMediaElement

but nothing seems to can solve my problem.
Thanks for all help that yours can bring me.

 

[Gamefall Team]

Hey man, this is a common problem in PIXI I think. Surfing in the internet you can find some people that has tried to make some fixes. Try to make a new plugin file named, for example, pixi-patch.js and paste this code there:

PIXI.glCore.GLTexture.prototype.upload = function(source)
{
    this.bind();

    var gl = this.gl;

    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha);

        var isVideo = !!source.videoWidth;
    var newWidth = isVideo ? source.videoWidth : source.width;
    var newHeight = isVideo ? source.videoHeight : source.height;

    if(newHeight !== this.height || newWidth !== this.width || isVideo)
    {
        gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source);
    }
    else
    {
        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source);
    }

    this.width = newWidth;
    this.height = newHeight;

};

I don't know if this can solve the problem, but at least you can try!

Source:

Spoiler

https://github.com/pixijs/pixi.js/issues/4089

 

[Jonforum]

yes a see this code.

i also try replace original pixi code in the core with this to test.
but not work, i have black background.

Texture.prototype.upload = function(source)
{
   this.bind();

   var gl = this.gl;

   gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha);

       var isVideo = !!source.videoWidth;
   var newWidth = isVideo ? source.videoWidth : source.width;
   var newHeight = isVideo ? source.videoHeight : source.height;

   if(newHeight !== this.height || newWidth !== this.width || isVideo)
   {
       gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source);
   }
   else
   {
       gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source);
   }

   this.width = newWidth;
   this.height = newHeight;

};

 

[Jonforum]

the alpha are ok iwht very old forma VP8, but is very scappy S^%$#

i send the video webm + alpha encoded.
Is some can get it to work !
I am discouraged.
I will surely opt for another technique with png image in batch.

 

[Jonforum]

RGB32 seem work with VP9 .webm
and i remove -pix_fmt yuva420p , i just dont use it at all!

FFVideoSource("%source_file%", colorspace = "RGB32", \
              cachefile = "%source_temp_file%.ffindex")

i find it int this index
http://avisynth.nl/index.php/Avisynthplus_color_formats

But i have a strange repainting.
Almost looks like image stacked in overlay, not clearing or displaying per frame !!!
am shure is a pixi bug !
very strange