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

Discussion in 'Learning Javascript' started by Jonforum, Jul 30, 2017.

    Tags:
  1. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,580
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    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 ?
    [​IMG]

    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
    [​IMG]
    Someone has an idea of what I do wrong.
    [​IMG]

    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.
     
    #1
  2. Gamefall Team

    Gamefall Team Nebula Games Leader Veteran

    Messages:
    337
    Likes Received:
    420
    Location:
    Italy
    First Language:
    Italian
    Primarily Uses:
    RMMV
    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:

    Code:
    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:
     
    #2
  3. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,580
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    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.
    PHP:
    Texture.prototype.upload = function(source)
    {
       
    this.bind();

       var 
    gl this.gl;

       
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGLthis.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_2D0this.formatthis.formatthis.typesource);
       }
       else
       {
           
    gl.texSubImage2D(gl.TEXTURE_2D000this.formatthis.typesource);
       }

       
    this.width newWidth;
       
    this.height newHeight;

    };
     
    #3
  4. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,580
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    the alpha are ok iwht very old forma VP8, but is very scappy S^%$#
    [​IMG]

    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.
     

    Attached Files:

    #4
  5. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,580
    Likes Received:
    1,360
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    RGB32 seem work with VP9 .webm
    and i remove -pix_fmt yuva420p , i just dont use it at all!
    PHP:
    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

    [​IMG]
     
    Last edited: Jul 31, 2017
    #5

Share This Page