Pixi.js: Transparente WebM-Videos löschen das vorherige Alpha nicht (Fix enthalten!)

Erstellt am 7. Juni 2017  ·  14Kommentare  ·  Quelle: pixijs/pixi.js

Weitere Informationen finden Sie unter

Für unser Projekt ist es dringend erforderlich, dass dieses Update in der neuesten Version von Pixi.js implementiert wird. Wir möchten uns nicht selbst ändern müssen.

Vielen Dank.

Stale 💾 v4.x (Legacy) 🕷 Bug

Hilfreichster Kommentar

Ich mache diese Art von Korrekturen in GLTexture für jedes meiner Projekte. Es gibt eine Möglichkeit, Ihren benutzerdefinierten Uploader in Version 5 zu erstellen.

Im Moment ist DIY die beste Strategie:

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;

};

Legen Sie es in einer separaten Datei in Ihrem Projekt ab und nennen Sie es "pixi-patch.js". Ich habe Dutzende solcher Patches für verschiedene Bibliotheken, die ich benutze.

Alle 14 Kommentare

Ich mache diese Art von Korrekturen in GLTexture für jedes meiner Projekte. Es gibt eine Möglichkeit, Ihren benutzerdefinierten Uploader in Version 5 zu erstellen.

Im Moment ist DIY die beste Strategie:

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;

};

Legen Sie es in einer separaten Datei in Ihrem Projekt ab und nennen Sie es "pixi-patch.js". Ich habe Dutzende solcher Patches für verschiedene Bibliotheken, die ich benutze.

Ich schlage vor, wir fügen ein spezielles Flag für den V5-Standard-Uploader hinzu: "Verwenden Sie immer texImage2D."

@kurozael ping

Hallo, ja, das ist in Ordnung, oder können wir einfach erkennen, ob es sich um ein Video wie Ihr Beispiel handelt?

Übrigens führt dieses Problem auch dazu, dass Videotexturen extrem langsam sind:

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

@ivanpopelyshev Vielen Dank dafür. Hat mich verrückt gemacht. Glücklicherweise funktionierte das Patchen von upload sogar unter TypeScript. Hoffentlich wird so etwas bald zusammengeführt.

@englercj Kann ich nur Ihre Bestätigung erhalten, dass Sie auf texImage2D für v5 umgestellt haben? Verschiedene PRs verweisen aufeinander, und ich denke, dies ist für Version 5 gelöst, und für Version 4 wurde eine Problemumgehung angegeben, die geschlossen werden kann! Vielen Dank

Dieser Patch funktioniert unter Chrome 70 nicht mehr. Zusätzlich führt pixi5 / chrome70 unter Windows das ursprüngliche Problem wieder ein

Bestätigt, dass die oben genannte Lösung seit dem Chrome 70-Update nur auf Windows-Computern nicht mehr funktioniert. OSX funktioniert immer noch gut. @ivanpopelyshev könnte dies wieder geöffnet werden oder sollte ich ein neues Problem erstellen?

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Falls es jemandem hilft, der immer noch auf dieses Problem stößt, handelt es sich mit Sicherheit um ein Problem mit texSubImage2D und Videos.

Der Link @saschagehlich, der gepostet wurde, war unglaublich wertvoll, um tiefer in dieses

Die obige Antwort / der Patch funktioniert nicht mehr für PIXI v5, stattdessen haben wir BaseImageResource mit einer ähnlichen Änderung gepatcht.

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
}

Die Ergebnisse sind wirklich ziemlich drastisch.

Vor
2019-09-11-082818_1058x748_scrot

Nach dem
2019-09-11-082725_1058x748_scrot

Ich weiß, dass dieses Problem veraltet ist, aber ich möchte meinen Hut in den Ring werfen, um die Option zu erhalten, möglicherweise texSubImage2D für bestimmte Ressourcentypen zu umgehen. Ansonsten hoffe ich, dass diese Lösung allen anderen hilft, die sich mit Leistungsproblemen und Videos befassen.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Ich stoße nur darauf, weil es noch adressiert werden muss.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

finscn picture finscn  ·  3Kommentare

Darker picture Darker  ·  3Kommentare

samueller picture samueller  ·  3Kommentare

readygosports picture readygosports  ·  3Kommentare

madroneropaulo picture madroneropaulo  ·  3Kommentare