Pixi.js: Vídeos WebM transparentes não limpam o alfa anterior (correção incluída!)

Eu faço esse tipo de correção no GLTexture para todos os meus projetos. Haverá uma maneira de fazer seu uploader personalizado na v5.

No momento, a melhor estratégia é 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;

};

Coloque-o em um arquivo separado em seu projeto, chame-o de "pixi-patch.js". Eu tenho dezenas de patches como esse para diferentes bibliotecas que uso.

Eu sugiro que adicionemos sinalizador especial para uploader padrão V5, "sempre use texImage2D"

@kurozael ping

Olá, sim, tudo bem, ou podemos apenas detectar se é um vídeo como o seu exemplo?

Aliás, esse problema também está fazendo com que as texturas de vídeo sejam extremamente lentas:

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

@ivanpopelyshev Muito obrigado por isso. Estava me deixando louco. Felizmente, corrigir upload funcionou, mesmo no TypeScript. Esperançosamente, algo assim será mesclado em breve.

@englercj Posso apenas obter sua confirmação de que você mudou para o texImage2D para v5, por favor? Vários PRs diferentes referem-se uns aos outros e acho que isso está resolvido para a v5 e uma solução alternativa foi fornecida para a v4 e, portanto, isso pode ser fechado! obrigado

este patch não funciona mais no Chrome 70 ... adicionalmente pixi5 / chrome70 no Windows reintroduz o problema original

Confirmado que a solução acima parou de funcionar desde a atualização do Chrome 70 apenas em máquinas Windows. OSX ainda funciona bem. @ivanpopelyshev pode ser reaberto ou devo criar um novo problema?

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Caso ajude alguém que ainda esteja enfrentando esse problema, certamente é um problema com texSubImage2D e vídeos.

O link @saschagehlich postado foi incrivelmente valioso para ajudar a aprofundar isso.

A resposta / patch acima não funciona mais para PIXI v5, em vez disso, corrigimos BaseImageResource com uma alteração semelhante.

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
}

Os resultados são realmente drásticos.

Antes

Depois de

Eu sei que este problema está obsoleto, mas gostaria de lançar meu chapéu no ringue por uma opção de possivelmente ignorar texSubImage2D para certos tipos de recursos. Caso contrário, espero que esta solução ajude alguém a lidar com problemas de desempenho e vídeos.

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Só estou superando isso porque ainda precisa ser resolvido.

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.