Pixi.js: Transparent WebM videos do not clear previous alpha (Fix included!)

I do that kind of fixes in GLTexture for every of my projects. There'll be a way to make your custom uploader in v5.

Right now the best strategy is DIY:

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;

};

Put it in separate file in your project, name it "pixi-patch.js". I have tens of patches like that for different libs I use.

I suggest we add special flag for V5 default uploader, "always use texImage2D"

@kurozael ping

Hi, yes this is fine, or can we just detect if it is a video like your example?

BTW, this issue is also causing video textures to be extremely slow:

http://codeflow.org/issues/slow_video_to_texture/

@ivanpopelyshev Thank you so much for this. Was driving me crazy. Luckily patching upload worked, even on TypeScript. Hopefully something like this will be merged soon.

@englercj Can I just get your confirmation that you changed to using texImage2D for v5 please? Various different PRs refer each other, and I think this is solved for v5, and a workaround has been given for v4, and thus this can be closed! Thanks

this patch doesn't work anymore on chrome 70 … additionally pixi5/chrome70 on windows reintroduces the original issue

Confirmed that the solution above stopped working since Chrome 70 update on Window machine only. OSX still works fine. @ivanpopelyshev could this be reopened or should I create a new issue ?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

In case it helps anyone still running into this problem, it most certainly is an issue with texSubImage2D and videos.

The link @saschagehlich posted was incredibly valuable to helping dig deeper into this.

The answer/patch above no longer works for PIXI v5, instead we patched BaseImageResource with a similar change.

import { resources } from 'pixi.js'

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
}

The results are really quite drastic.

Before

After

I know this issue is stale but I would like to throw my hat in the ring for an option to possibly bypass texSubImage2D for certain resource types. Otherwise I hope this solution helps anyone else dealing with performance issues and videos.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

I'm just bumping this because it still needs addressing.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.