Pixi.js: Video WebM transparan tidak menghapus alpha sebelumnya (Termasuk perbaikan!)

Saya melakukan perbaikan semacam itu di GLTexture untuk setiap proyek saya. Akan ada cara untuk membuat pengunggah ubahsuaian Anda di v5.

Saat ini strategi terbaik adalah 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;

};

Taruh di file terpisah dalam proyek Anda, beri nama "pixi-patch.js". Saya memiliki puluhan tambalan seperti itu untuk berbagai lib yang saya gunakan.

Saya sarankan kami menambahkan bendera khusus untuk pengunggah default V5, "selalu gunakan texImage2D"

ping @urozael

Hai, ya ini baik-baik saja, atau dapatkah kami mendeteksi apakah itu video seperti contoh Anda?

BTW, masalah ini juga menyebabkan tekstur video menjadi sangat lambat:

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

@ivanpopelyshev Terima kasih banyak untuk ini. Membuatku gila. Untungnya, patch upload berhasil, bahkan pada TypeScript. Semoga sesuatu seperti ini akan segera digabungkan.

@englercj Bisakah saya mendapatkan konfirmasi bahwa Anda telah mengubah menggunakan texImage2D untuk v5? Berbagai PR berbeda merujuk satu sama lain, dan saya pikir ini diselesaikan untuk v5, dan solusi telah diberikan untuk v4, dan dengan demikian ini dapat ditutup! Terima kasih

tambalan ini tidak berfungsi lagi di chrome 70… selain itu pixi5 / chrome70 di windows memperkenalkan kembali masalah aslinya

Dikonfirmasi bahwa solusi di atas berhenti berfungsi karena pembaruan Chrome 70 hanya pada mesin Window. OSX masih berfungsi dengan baik. @ivanpopelyshev, bisakah ini dibuka kembali atau haruskah saya membuat terbitan baru?

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Jika itu membantu siapa pun yang masih mengalami masalah ini, itu pasti masalah dengan texSubImage2D dan video.

Tautan yang diposting @saschagehlich sangat berharga untuk membantu menggali lebih dalam.

Jawaban / tambalan di atas tidak lagi berfungsi untuk PIXI v5, sebagai gantinya kami menambal BaseImageResource dengan perubahan serupa.

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
}

Hasilnya sangat drastis.

Sebelum

Setelah

Saya tahu masalah ini basi tetapi saya ingin melemparkan topi saya di atas ring untuk opsi untuk mungkin melewati texSubImage2D untuk jenis sumber daya tertentu. Jika tidak, saya harap solusi ini membantu orang lain dalam menangani masalah kinerja dan video.

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Saya hanya menabrak ini karena masih perlu ditangani.

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.