Pixi.js: 透明なWebMビデオは以前のアルファをクリアしません（修正が含まれています！）

私はすべてのプロジェクトに対してGLTextureでそのような修正を行います。 v5でカスタムアップローダーを作成する方法があります。

今のところ最良の戦略は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;

};

プロジェクト内の別のファイルに入れて、「pixi-patch.js」という名前を付けます。 使用するさまざまなライブラリに対して、そのようなパッチが数十あります。

V5のデフォルトアップローダーに「常にtexImage2Dを使用する」という特別なフラグを追加することをお勧めします

@kurozael ping

こんにちは、はい、これで問題ありませんか、それともあなたの例のようなビデオかどうかを検出できますか？

ところで、この問題により、ビデオテクスチャが非常に遅くなります。

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

@ivanpopelyshevありがとうございました。 私を夢中にさせていた。 幸いなことに、TypeScriptでも、 uploadパッチ

@englercj texImage2D for v5の使用に変更したという確認をいただけますか？ さまざまなPRが相互に参照していますが、これはv5で解決され、v4で回避策が提供されているため、これを閉じることができます。 ありがとう

このパッチはChrome70では機能しなくなりました…さらに、Windowsのpixi5 / chrome70は元の問題を再導入します

ウィンドウマシンでのみChrome70が更新されたため、上記のソリューションが機能しなくなったことを確認しました。 OSXは引き続き正常に動作します。 @ivanpopelyshevこれを再開できますか、それとも新しい問題を作成する必要がありますか？

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

それがまだこの問題に直面している人を助ける場合、それは間違いなくtexSubImage2Dとビデオの問題です。

@saschagehlichが投稿したリンクは、これを深く掘り下げるのに非常に役立ちました。

上記の回答/パッチはPIXIv5では機能しなくなりました。代わりに、同様の変更を加えてBaseImageResourceパッチを適用しました。

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
}

結果は本当に劇的です。

前

後

この問題が古くなっていることはわかっていますが、特定のリソースタイプでtexSubImage2Dをバイパスするオプションを探して、リングに帽子をかぶせたいと思います。 それ以外の場合は、このソリューションがパフォーマンスの問題やビデオを扱う他の人に役立つことを願っています。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

まだ対処する必要があるので、私はこれをぶつけています。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。