Pixi.js: Les vidéos WebM transparentes ne suppriment pas l'alpha précédent (correctif inclus!)

Créé le 7 juin 2017  ·  14Commentaires  ·  Source: pixijs/pixi.js

Veuillez consulter https://github.com/pixijs/pixi.js/issues/3526

Il est urgent que notre projet ait ce correctif implémenté dans la dernière version de Pixi.js, nous ne voulons pas avoir à nous modifier.

Merci.

Stale 💾 v4.x (Legacy) 🕷 Bug

Commentaire le plus utile

Je fais ce genre de correctifs dans GLTexture pour chacun de mes projets. Il y aura un moyen de créer votre téléchargeur personnalisé dans la v5.

À l'heure actuelle, la meilleure stratégie est le bricolage:

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;

};

Mettez-le dans un fichier séparé dans votre projet, nommez-le "pixi-patch.js". J'ai des dizaines de correctifs comme celui-là pour différentes bibliothèques que j'utilise.

Tous les 14 commentaires

Je fais ce genre de correctifs dans GLTexture pour chacun de mes projets. Il y aura un moyen de créer votre téléchargeur personnalisé dans la v5.

À l'heure actuelle, la meilleure stratégie est le bricolage:

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;

};

Mettez-le dans un fichier séparé dans votre projet, nommez-le "pixi-patch.js". J'ai des dizaines de correctifs comme celui-là pour différentes bibliothèques que j'utilise.

Je suggère que nous ajoutions un drapeau spécial pour le téléchargeur par défaut V5, "toujours utiliser texImage2D"

@kurozael ping

Salut, oui c'est bien, ou pouvons-nous simplement détecter si c'est une vidéo comme votre exemple?

BTW, ce problème entraîne également des textures vidéo extrêmement lentes:

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

@ivanpopelyshev Merci beaucoup pour cela. Cela me rendait fou. Heureusement, la correction de upload fonctionné, même sur TypeScript. Espérons que quelque chose comme celui-ci sera bientôt fusionné.

@englercj Puis-je simplement obtenir votre confirmation que vous avez changé pour utiliser texImage2D pour la v5 s'il vous plaît? Divers PR différents se réfèrent les uns aux autres, et je pense que cela est résolu pour la v5, et une solution de contournement a été donnée pour la v4, et cela peut donc être fermé! Merci

ce correctif ne fonctionne plus sur chrome 70… de plus, pixi5 / chrome70 sur windows réintroduit le problème d'origine

Confirmé que la solution ci-dessus a cessé de fonctionner depuis la mise à jour de Chrome 70 sur Windows uniquement. OSX fonctionne toujours bien. @ivanpopelyshev pourrait-il être rouvert ou devrais-je créer un nouveau problème?

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité n'a lieu. Merci pour vos contributions.

Au cas où cela aiderait quelqu'un à rencontrer encore ce problème, il s'agit certainement d'un problème avec texSubImage2D et les vidéos.

Le lien @saschagehlich publié a été extrêmement précieux pour aider à approfondir cette question.

La réponse / le correctif ci-dessus ne fonctionne plus pour PIXI v5, mais nous avons corrigé BaseImageResource avec un changement similaire.

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
}

Les résultats sont vraiment assez drastiques.

Avant
2019-09-11-082818_1058x748_scrot

Après
2019-09-11-082725_1058x748_scrot

Je sais que ce problème est obsolète, mais je voudrais jeter mon chapeau dans le ring pour une option permettant éventuellement de contourner texSubImage2D pour certains types de ressources. Sinon, j'espère que cette solution aidera quiconque à résoudre des problèmes de performances et des vidéos.

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité n'a lieu. Merci pour vos contributions.

Je suis juste en train de cogner cela parce qu'il faut encore y remédier.

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité n'a lieu. Merci pour vos contributions.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

Darker picture Darker  ·  3Commentaires

softshape picture softshape  ·  3Commentaires

neciszhang picture neciszhang  ·  3Commentaires

lunabunn picture lunabunn  ·  3Commentaires

finscn picture finscn  ·  3Commentaires