Transparent WebM videos do not clear previous alpha (Fix included!)

[kurozael]

Please see #3526

It's urgent for our project to have this fix implemented into the latest Pixi.js release, we don't want to have to modify ourselves.

Thanks.

[ivanpopelyshev]

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.

[ivanpopelyshev]

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

[ivanpopelyshev]

@kurozael ping

[kurozael]

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

[saschagehlich]

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

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

[zeh]

@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.

[themoonrat]

@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

[neer2005]

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

[m4nuC]

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 ?

[stale]

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.

[tlackemann]

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.

[stale]

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.

[kurozael]

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

[stale]

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.