Pixi.js: Los videos transparentes de WebM no borran alfa anterior (¡corrección incluida!)

Hago ese tipo de correcciones en GLTexture para cada uno de mis proyectos. Habrá una forma de hacer que su cargador personalizado en v5.

Ahora mismo, la mejor estrategia es el bricolaje:

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;

};

Póngalo en un archivo separado en su proyecto, asígnele el nombre "pixi-patch.js". Tengo decenas de parches como ese para las diferentes bibliotecas que uso.

Sugiero que agreguemos una bandera especial para el cargador predeterminado de V5, "siempre use texImage2D"

@kurozael ping

Hola, sí, esto está bien, ¿o simplemente podemos detectar si es un video como tu ejemplo?

Por cierto, este problema también está causando que las texturas de video sean extremadamente lentas:

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

@ivanpopelyshev Muchas gracias por esto. Me estaba volviendo loco. Afortunadamente, parchear upload funcionó, incluso en TypeScript. Con suerte, algo como esto se fusionará pronto.

@englercj ¿Puedo recibir tu confirmación de que cambiaste a usar texImage2D para v5, por favor? Varios PR diferentes se refieren entre sí, y creo que esto está resuelto para v5, y se ha dado una solución para v4, ¡y por lo tanto, esto se puede cerrar! Gracias

este parche ya no funciona en Chrome 70 ... además, pixi5 / chrome70 en Windows reintroduce el problema original

Confirmó que la solución anterior dejó de funcionar desde la actualización de Chrome 70 solo en la máquina con Windows. OSX todavía funciona bien. @ivanpopelyshev ¿ podría reabrirse o debería crear una nueva edición?

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

En caso de que ayude a alguien que todavía se encuentre con este problema, ciertamente es un problema con texSubImage2D y videos.

El enlace que publicó @saschagehlich fue increíblemente valioso para ayudar a profundizar en esto.

La respuesta / parche anterior ya no funciona para PIXI v5, en su lugar, parcheamos BaseImageResource con un cambio similar.

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
}

Los resultados son realmente bastante drásticos.

antes de

Después

Sé que este problema está obsoleto, pero me gustaría lanzar mi sombrero en el ring por una opción para evitar posiblemente texSubImage2D para ciertos tipos de recursos. De lo contrario, espero que esta solución ayude a cualquier otra persona a lidiar con problemas de rendimiento y videos.

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

Solo estoy superando esto porque todavía necesita ser abordado.

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.