Pixi.js: Прозрачные видео WebM не очищают предыдущую альфа-версию (исправление включено!)

Созданный на 7 июн. 2017  ·  14Комментарии  ·  Источник: pixijs/pixi.js

См. Https://github.com/pixijs/pixi.js/issues/3526.

Нашему проекту необходимо срочно внедрить это исправление в последний выпуск Pixi.js, мы не хотим вносить изменения.

Благодарю.

Stale 💾 v4.x (Legacy) 🕷 Bug

Самый полезный комментарий

Я делаю такие исправления в GLTexture для каждого своего проекта. В v5 будет возможность сделать свой собственный загрузчик.

Сейчас лучшая стратегия - сделай сам:

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». У меня есть десятки подобных патчей для разных библиотек, которые я использую.

Все 14 Комментарий

Я делаю такие исправления в GLTexture для каждого своего проекта. В v5 будет возможность сделать свой собственный загрузчик.

Сейчас лучшая стратегия - сделай сам:

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 пинг

Привет, да, это нормально, или мы можем просто определить, видео ли это как в вашем примере?

Кстати, эта проблема также приводит к очень медленной работе текстур видео:

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

@ivanpopelyshev Большое спасибо за это. Сводил меня с ума. К счастью, исправление upload сработало даже на TypeScript. Надеюсь, что-то подобное скоро будет объединено.

@englercj Могу я получить подтверждение того, что вы перешли на использование texImage2D для v5? Различные PR ссылаются друг на друга, и я думаю, что это решено для v5, а для v4 был дан обходной путь, и, таким образом, это можно закрыть! Спасибо

этот патч больше не работает на chrome 70 ... кроме того pixi5 / chrome70 на windows возвращает исходную проблему

Подтверждено, что указанное выше решение перестало работать с момента обновления Chrome 70 только на компьютере с Windows. OSX по-прежнему работает нормально. @ivanpopelyshev, можно ли открыть этот выпуск повторно или мне стоит создать новый выпуск?

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Если это помогает кому-то, кто все еще сталкивается с этой проблемой, это, безусловно, проблема с texSubImage2D и видео.

Опубликованная ссылка разобраться в этом.

Приведенный выше ответ / патч больше не работает для PIXI v5, вместо этого мы исправили 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
}

Результаты действительно впечатляют.

Перед
2019-09-11-082818_1058x748_scrot

После
2019-09-11-082725_1058x748_scrot

Я знаю, что эта проблема устарела, но я хотел бы бросить свою шляпу за возможность, возможно, обойти texSubImage2D для определенных типов ресурсов. В противном случае я надеюсь, что это решение поможет всем, кто имеет дело с проблемами производительности и видео.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Я просто натыкаюсь на это, потому что это все еще требует решения.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги