Pixi.js: لا تمسح مقاطع فيديو WebM الشفافة ألفا السابقة (تم تضمين الإصلاح!)

تم إنشاؤها على ٧ يونيو ٢٠١٧  ·  14تعليقات  ·  مصدر: pixijs/pixi.js

يرجى مراجعة https://github.com/pixijs/pixi.js/issues/3526

من الضروري أن يتم تنفيذ هذا الإصلاح في مشروعنا في أحدث إصدار من Pixi.js ، ولا نريد تعديل أنفسنا.

شكر.

Stale 💾 v4.x (Legacy) 🕷 Bug

التعليق الأكثر فائدة

أفعل هذا النوع من الإصلاحات في GLTexture لكل مشروع من مشاريعي. ستكون هناك طريقة لجعل برنامج التحميل المخصص في الإصدار 5.

الآن أفضل استراتيجية هي 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;

};

ضعه في ملف منفصل في مشروعك ، أطلق عليه اسم "pixi-patch.js". لدي عشرات البقع من هذا القبيل لأحرف مختلفة أستخدمها.

ال 14 كومينتر

أفعل هذا النوع من الإصلاحات في GLTexture لكل مشروع من مشاريعي. ستكون هناك طريقة لجعل برنامج التحميل المخصص في الإصدار 5.

الآن أفضل استراتيجية هي 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;

};

ضعه في ملف منفصل في مشروعك ، أطلق عليه اسم "pixi-patch.js". لدي عشرات البقع من هذا القبيل لأحرف مختلفة أستخدمها.

أقترح إضافة علامة خاصة لبرنامج التحميل الافتراضي V5 ، "استخدم دائمًا texImage2D"

تضمين التغريدة

مرحبًا ، نعم ، هذا جيد ، أو هل يمكننا اكتشاف ما إذا كان مقطع فيديو مثل مثالك؟

راجع للشغل ، تتسبب هذه المشكلة أيضًا في أن تكون مواد الفيديو بطيئة للغاية:

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

ivanpopelyshev شكرا جزيلا لك على هذا. كان يقودني للجنون. لحسن الحظ ، نجح الترقيع upload ، حتى على TypeScript. نأمل أن يتم دمج شيء مثل هذا قريبًا.

englercj هل يمكنني الحصول على تأكيد بأنك غيرت استخدام texImage2D لـ v5 من فضلك؟ تشير العديد من العلاقات العامة المختلفة إلى بعضها البعض ، وأعتقد أن هذا قد تم حله لـ v5 ، وتم تقديم حل بديل لـ v4 ، وبالتالي يمكن إغلاق هذا! شكر

لم يعد هذا التصحيح يعمل على chrome 70… بالإضافة إلى ذلك ، فإن pixi5 / chrome70 على Windows يعيد تقديم الإصدار الأصلي

تم التأكيد على أن الحل أعلاه توقف عن العمل منذ تحديث Chrome 70 على جهاز Window فقط. لا يزال OSX يعمل بشكل جيد. ivanpopelyshev هل يمكن إعادة فتح هذا أم يجب إنشاء إصدار جديد؟

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه في حالة عدم حدوث أي نشاط آخر. شكرا لمساهماتكم.

في حالة مساعدة أي شخص لا يزال يواجه هذه المشكلة ، فمن المؤكد أنها مشكلة مع texSubImage2D ومقاطع الفيديو.

كان الرابط saschagehlich المنشور ذا قيمة كبيرة للمساعدة في التعمق في هذا الأمر.

لم تعد الإجابة / التصحيح أعلاه تعمل مع 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 التقييمات