Pixi.js: فشل PIXI في إنشاء مرشح من كود تظليل مخصص

المثال يعمل معي ، في أي متصفح تختبرك؟

إصدار Google Chrome 62.0.3202.94 (الإصدار الرسمي) (64 بت)

Firefox Quantum 57.0 (64 بت)

نظام التشغيل: Ubuntu 17.10 داهية

@ doebi صيد لطيف! نعم ، لقد أزال التحسين شيئًا ما (أراهن على أخذ العينات) ونسينا التحقق منه.

في الوقت الحالي ، هل أنت متأكد من أنك بحاجة إلى تصفية بدون استخدام جهاز أخذ العينات؟ في بعض الحالات ، من الأفضل إنشاء مكون إضافي للعارض مثل https://github.com/pixijs/pixi-plugin-example ؟

المرة الثانية هذا اليوم ، أنا آسف للفوضى التي أحدثها التظليل والمرشحات في الإصدار 4. سنصلحه في الإصدار الخامس.

لأكون صادقًا ، لم أتعمق في هذا الموضوع بعد. أردت فقط تجربة هذه الميزة في ذلك اليوم. سأقوم ببعض الاختبارات باستخدام نهج البرنامج المساعد للعارض. شكرا للتلميح.

هل هناك بالفعل بعض الوقت المقدر لوصول الإصدار 5؟

شهرين أو نحو ذلك :)

هناك العديد من الحيل حول المرشحات ، ولهذا السبب قمت بعمل هذا المقال: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

ivanpopelyshev بعد البرنامج التعليمي الخاص بك ، واجهت نفس المشكلة.
لقد قمت بتطبيق تصحيح مبتكر حقًا على pixi.js لجعله يعمل بالنسبة لي.

diff --git a/js/pixi.js b/js/pixi.js
index 363f09c..d0a321b 100644
--- a/js/pixi.js
+++ b/js/pixi.js
@@ -2344,6 +2344,9 @@ VertexArrayObject.prototype.activate = function()
  */
 VertexArrayObject.prototype.addAttribute = function(buffer, attribute, type, normalized, stride, start)
 {
+  if (!attribute) {
+    return this;
+  }
     this.attributes.push({
         buffer:     buffer,
         attribute:  attribute,

أعلم أن هذا ليس حلاً ، لكنه يمكّنني من اللعب بأكواد التظليل في الإصدار 4 حتى يخرج الإصدار 5. (مع ربما إصلاح أفضل) :)

هذا اختراق جيد!

يمكنك نقله إلى ملف js منفصل:

PIXI.glCore.VertexArrayObject.prototype.addAttribute = ...

لدي نفس المشكلة. أيضًا مع Ubuntu 17.10 داهية. هل تظليل ثابت على الإطلاق في Pixi.js؟ هل يمكنني استخدامها في الإنتاج؟ كيف أقوم باستيراد بكسل تظليل؟

إما كمرشح إما كمكوِّن إضافي للعارض. إنها مستقرة ولكنها تتطلب معرفة جادة حول كل من webgl وبنية البكسي.

https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters
https://github.com/pixijs/pixi-plugin-example/

بالنسبة للوقت N-th ، أؤكد للناس أنه سيكون أسهل في الإصدار الخامس.

const filterCode = `void main(){
   gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}`;
const filter = new PIXI.Filter(null, filterCode);
someSprite.filters = [filter];

هذا القدر من التعليمات البرمجية يؤدي إلى هذا الخطأ. ربما يجب أن أختار مُنشئًا مختلفًا للفلتر؟ أم يجب أن أستبدل قيمة null بشيء؟

بالنسبة إلى الفلتر ، يجب عليك استخدام تنسيق النسيج وأخذ العينات ، وإلا سيفشل FilterManager في الحصول على موقع السمة.

لا يحتوي البرنامج المساعد Renderer على هذا المطلب ، جربه. نعم ، نموذجها الكبير.

جرب هذا الشيء: https://github.com/TazOen/createShaderPlugin . على الرغم من أنه يتجاهل النسيج ، فلا يوجد bindTexture هناك. إذا كنت بحاجة إلى نسيج ، فخذ مثالاً كاملاً لـ pixi-plugin.

أنت تقول إنها بحاجة إلى أسلاك نسيج و "أخذ العينات". هل كانت عينة أم عينة؟ خطأ مطبعي؟
تمكنت من جعلها تعمل بمساعدة القدوة. شكرا لكن. لماذا لا تذكر هذه الصفحة هذه التفاصيل؟
http://pixijs.io/examples/#/basics/custom -filter.js

أخذ العينات. لكن زيه وأنا لا أعتقد أن أحدًا سيفتقده. مشكلتنا حول السمات.

شكرًا لك ، إنه يفعل :) https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#cannot -read-property-location-of-undefined

أوه ، هذا هو المكان الذي كان فيه. فاتني الويكي.

شكرا لك ، انها تفعل

لقد أضفته للتو.

وأضاف أيضا إشعار في العرض التوضيحي للماوس عامل التصفية. لا يمكننا إصلاح المشكلة في الإصدار 4. سنفعل شيئًا حيال ذلك في الإصدار الخامس.

يظهر ذلك عندما لا يتم استخدام بعض الخصائص المطلوبة بواسطة FilterManager في التظليل.

ماذا عن سرد هذه الخصائص هناك؟

فقط السمة ، aTextureCoord -> vTextureCoord

هذا يزداد غرابة.
هذا الرمز يعمل بشكل جيد:

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform sampler2D uSampler;
uniform vec4 uTextureClamp;
uniform vec4 uColor;

void main(void)
{
    gl_FragColor = texture2D(uSampler, vTextureCoord);
    gl_FragColor.r = 0.0;
    gl_FragColor.g = 0.0;
    gl_FragColor.b = 0.0;
}

ولكن إذا أضفت gl_FragColor.a = 0.0; إلى النهاية ، فستظهر لك القيمة Cannot read property 'location' of undefined . يبدو أنه لا يمكنني تغيير سوى 3 أسلاك من أصل 4 على الأكثر. ما هذا؟ ما الخطأ؟

@ germansokolov13 هذا السلوك منطقي تمامًا. مجرد التفكير في ذلك:
كما ذكرت في المنشور الأصلي ، يحدث هذا الخطأ بسبب تحسين رمز التظليل glsify.

إذا أضفت gl_FragColor.a = 0.0; ، فيمكنه تحسين مكالمتك إلى texture2D ، نظرًا لأنه تم استبدالها بالكامل ، ولكن حتى ذلك الحين ، يستغرق الأمر قناة ألفا من texture2D

إذا كان glsify يحسن الاستدعاء إلى الملمس 2D ، فإن webgl لا يخصص الذاكرة لـ uSampler ، وبالتالي عندما يريد pixi تحميل البيانات إلى هذا الزي الرسمي ، فإنه يفشل ، لأنه ببساطة لا توجد مساحة لذلك المخصص.

لديك بعض الخيارات:

• قم بتطبيق نفس الاختراق كما فعلت (في الوقت الحالي) ، والذي يتحقق بشكل أساسي من تخصيص سمة قبل تحميل البيانات إليها.
• استخدم uSampler ، حتى لا تقوم glsify بتحسينه بعيدًا.
• أو فقط انتظر الإصدار الخامس.

نأمل أن يساعد هذا.

التقاط رائع ،doebi!

أو استخدم البرنامج المساعد العارض.

اوه الان ان فهمت! ربما يجب أن نضيف رقعة Doebi إلى الإصدار الثانوي التالي من Pixi.js؟ هل يجب علي إنشاء علاقات عامة؟

نعم ، العلاقات العامة ، لكن مكان مختلف.

https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/utils/Quad.js#L93
https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L242

أقترح فئة إضافية تتجاوز الطريقة والتي يتم استخدامها في FilterManager.

أهلا،
أواجه مشكلة مماثلة مع كود التظليل الخاص بي. إنه تباين في كود تظليل BlurYFilter الافتراضي فقط مع نواة أكبر وتنوع بسيط في المتغير gaussian ، لذلك لست متأكدًا تمامًا من سبب عدم عمله.

إنه يعمل بشكل جيد على Windows و MacOS و Android بقدر ما اختبرت لدي فقط مشكلات في iOS.
ها هو كود التظليل:
قمة الرأس:

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform float strength;
uniform mat3 projectionMatrix;
varying vec2 vBlurTexCoords[15];
void main(void){
   gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);
   vBlurTexCoords[0] = aTextureCoord + vec2(0.0, -7.0 * strength);
   vBlurTexCoords[1] = aTextureCoord + vec2(0.0, -6.0 * strength);
   vBlurTexCoords[2] = aTextureCoord + vec2(0.0, -5.0 * strength);
   vBlurTexCoords[3] = aTextureCoord + vec2(0.0, -4.0 * strength);
   vBlurTexCoords[4] = aTextureCoord + vec2(0.0, -3.0 * strength);
   vBlurTexCoords[5] = aTextureCoord + vec2(0.0, -2.0 * strength);
   vBlurTexCoords[6] = aTextureCoord + vec2(0.0, -1.0 * strength);
   vBlurTexCoords[7] = aTextureCoord + vec2(0.0, 0.0 * strength);
   vBlurTexCoords[8] = aTextureCoord + vec2(0.0, 1.0 * strength);
   vBlurTexCoords[9] = aTextureCoord + vec2(0.0, 2.0 * strength);
   vBlurTexCoords[10] = aTextureCoord + vec2(0.0, 3.0 * strength);
   vBlurTexCoords[11] = aTextureCoord + vec2(0.0, 4.0 * strength);
   vBlurTexCoords[12] = aTextureCoord + vec2(0.0, 5.0 * strength);
   vBlurTexCoords[13] = aTextureCoord + vec2(0.0, 6.0 * strength);
   vBlurTexCoords[14] = aTextureCoord + vec2(0.0, 7.0 * strength);
}

شظية:

varying vec2 vBlurTexCoords[15];
uniform sampler2D uSampler;
void main(void){
   gl_FragColor = vec4(0.0);
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[0]) * 0.013068780984604511;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[1]) * 0.013907007172070673;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[2]) * 0.017439264394216315;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[3]) * 0.028762309061254498;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[4]) * 0.05603114255667656;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[5]) * 0.10421702583793174;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[6]) * 0.163461199220823;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[7]) * 0.2062265415448454;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[8]) * 0.163461199220823;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[9]) * 0.10421702583793174;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[10]) * 0.05603114255667656;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[11]) * 0.028762309061254498;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[12]) * 0.017439264394216315;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[13]) * 0.013907007172070673;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[14]) * 0.013068780984604511;
}

للمقارنة فيما يلي تظليل BlurYFilter الافتراضي:
فير:

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform float strength;
uniform mat3 projectionMatrix;
varying vec2 vBlurTexCoords[5];
void main(void)
{
  gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);
  vBlurTexCoords[0] = aTextureCoord + vec2(0.0, -2.0 * strength);
  vBlurTexCoords[1] = aTextureCoord + vec2(0.0, -1.0 * strength);
  vBlurTexCoords[2] = aTextureCoord + vec2(0.0, 0.0 * strength);
  vBlurTexCoords[3] = aTextureCoord + vec2(0.0, 1.0 * strength);
  vBlurTexCoords[4] = aTextureCoord + vec2(0.0, 2.0 * strength);

}

شظية:

varying vec2 vBlurTexCoords[5];
uniform sampler2D uSampler;
void main(void)
{
    gl_FragColor = vec4(0.0);
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[0]) * 0.153388;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[1]) * 0.221461;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[2]) * 0.250301;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[3]) * 0.221461;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[4]) * 0.153388;

}

هل لدى أي شخص أي أفكار لماذا يمكن أن يحدث هذا بشكل خاطئ؟

tyleet هل أنت متأكد من أنها نفس المشكلة؟ ماذا ترى في وحدة التحكم؟

تعديل:
بغض النظر ، لقد وجدت المشكلة ، يبدو أن حجم النواة البالغ 15 أكبر من اللازم بالنسبة لنظام التشغيل iOS ، إذا قمت بتقليل حجم النواة إلى 7 ، فستعمل بشكل جيد.

<----- المنشور الأصلي --------->
أهلا،
آسف على الرد المتأخر ، لم أتمكن من عمل بعض لقطات الشاشة خلال عطلة نهاية الأسبوع. يبدو لي كما لو أنه فشل على نفس الخط. "السمة" غير محددة. فيما يلي لقطات الشاشة من وحدة التحكم عن بعد:

ivanpopelyshev ، تسخينها مع مشكلات مماثلة؟
لن أعتبرها مشكلة بعد الآن ، بما أنني حصلت على وعدك ، سيتم إصلاحها في الإصدار الخامس.

doebi إغلاق.

tyleet يمكن تحديد عدد العينات المأخوذة من النسيج في أنظمة مختلفة.

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