PIXI.js : WebM video alpha doesn't blend with background

[adil.invideo]

Currently I'm loading a webm video using PIXI.Texture.fromVideo. The video has a certain amount of transparent because of which it blends well with the background when executed using native html, css via the video tag. Doing the same in PIXI doesn't give the same result because of which things go off. Need some help here. A link to the experiment is here that shows the comparison between html and PIXI.

https://jsfiddle.net/adil_invideo/va7nqf3y/209/

Example Description:

1) A webM video that has blue and grey clouds both with a certain amount of alpha.

2) Adding a white background makes the grey cloud blend well in html/css dom and hence it looks invisible (Expected behaviour)

3) Adding a white background makes the grey cloud look the same and no blend takes place in PIXI. (Error)

Just to cross check, i replaced the video in PIXI with a thumbnail Image of the video and I got the desired/correct result. So i short it works for Pixi image but not for Pixi Video. (to toggle between image and video, change const video = false/true on line 11)

Any and all help is appreciated.

I have attached a screenshot of the behaviour observed on both html dom against PIXI.

[ivan.popelyshev]

Known issue, please search this forum and https://github.com/pixijs/pixi.js/issues?q=is%3Aissue

[adil.invideo]

Hi @ivan.popelyshev thanks for directing me. I did try the solutions mentioned here https://github.com/pixijs/pixi.js/issues/4089 but none of them worked. Could you please help out and correct me if I'm doing anything wrong. 

https://jsfiddle.net/adil_invideo/va7nqf3y/238/

NEED HELP.. Thanks

 

[adil.invideo]

Upgraded to PIXI 6 and used the following code

PIXI.resources.BaseImageResource.prototype.upload = function(renderer, baseTexture, glTexture, source) {
  const gl = renderer.gl;
  const width = baseTexture.realWidth;
  const height = baseTexture.realHeight;
  source = source || this.source;
  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha);
  // add this line, check for video
  const isVideo = !!source.videoWidth
  if (!isVideo && baseTexture.target === gl.TEXTURE_2D && glTexture.width === width && glTexture.height === height)
  {
    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source);
  }
  else
  {
    glTexture.width = width;
    glTexture.height = height;
    gl.texImage2D(baseTexture.target, 0, baseTexture.format, baseTexture.format, baseTexture.type, source);

  }
  return true
}

Seems to work now.. it was not working on v5.3.3

[ivan.popelyshev]

That's very strange. The only real difference between that and what we have in v6 is "baseTexture.premultiplyAlpha". In v6 it does not exist, so its false.

[adil.invideo]

@ivan.popelyshev I noticed that after adding this fix, almost every sprite gets a bright stroke around it. This may be possible because of premultiplied alpha being applied more than once. How do we go about solving this ?

Edited April 6, 2021 by adil.invideo

[ivan.popelyshev]

> This may be possible because of premultiplied alpha being applied more than once. How do we go about solving this ?

there's no `premuiltiplyAlpha` in v6, its all about `alphaMode===1` or something like that. Just try to use "false" for videos, and that "alphaMode===1" for everything else

Edited April 7, 2021 by ivan.popelyshev