Jump to content

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


Recommended Posts

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.


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.2063212023_Screenshot2021-03-10at6_25_21PM.thumb.png.9758f866f003c33001ba407fed693d1e.png

Link to comment
Share on other sites

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);
    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

Link to comment
Share on other sites

  • 4 weeks later...

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 by ivan.popelyshev
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...