Pixi.js: PIXI कस्टम शेडर कोड से फ़िल्टर बनाने में विफल रहता है

उदाहरण मेरे लिए काम करता है, आप किस ब्राउज़र में आपका परीक्षण कर रहे हैं?

Google क्रोम संस्करण 62.0.3202.94 (आधिकारिक बिल्ड) (64-बिट)

फ़ायरफ़ॉक्स क्वांटम 57.0 (64-बिट)

ओएस: उबुंटू 17.10 कलात्मक

@doebi अच्छा कैच! हाँ, अनुकूलन ने कुछ हटा दिया (मैं इसके नमूने को शर्त लगाता हूं) और हम इसे जांचना भूल गए।

अभी के लिए, क्या आप सुनिश्चित हैं कि आपको सैम्पलर के उपयोग के बिना फ़िल्टर की आवश्यकता है? कुछ मामलों में https://github.com/pixijs/pixi-plugin-example जैसे रेंडरर प्लगइन बनाना बेहतर है?

इस दिन दूसरी बार, मुझे इस गड़बड़ी के लिए खेद है कि शेडर और फिल्टर v4 में हैं। हम इसे v5 में ठीक कर देंगे।

सच कहूं तो, मैंने अभी तक इस विषय में गहराई से खुदाई नहीं की है। बस उस फीचर के साथ दूसरे दिन प्रयोग करना चाहता था। मैं रेंडरर प्लगइन दृष्टिकोण के साथ कुछ परीक्षण करूंगा। संकेत के लिए धन्यवाद।

क्या v5 के लिए पहले से ही कुछ ETA है?

2 महीने या तो :)

फ़िल्टर के बारे में कई तरकीबें हैं, इसलिए मैंने वह लेख बनाया है: 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,

मुझे पता है कि यह कोई समाधान नहीं है, लेकिन यह मुझे v4 में शेडर कोड के साथ खेलने में सक्षम बनाता है जब तक कि v5 बाहर न हो जाए। (संभवतः एक बेहतर फिक्स के साथ) :)

यह एक अच्छा हैक है!

आप इसे अलग जेएस फ़ाइल में ले जा सकते हैं:

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

मुझे भी यही समस्या हुई। इसके अलावा उबंटू 17.10 आर्टफुल के साथ। क्या Pixi.js में शेडर्स बिल्कुल भी स्थिर हैं? क्या मैं उन्हें उत्पादन में उपयोग कर सकता हूं? मैं पिक्सेल शेडर कैसे आयात करूं?

या तो फ़िल्टर के रूप में या तो रेंडरर प्लगइन के रूप में। वे स्थिर हैं लेकिन वेबलॉग और पिक्सी आर्किटेक्चर दोनों के बारे में गंभीर ज्ञान की आवश्यकता है।

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

एन-वें समय के लिए मैं लोगों को विश्वास दिलाता हूं कि यह v5 में आसान हो जाएगा।

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];

इतना कोड इस त्रुटि की ओर जाता है। शायद मुझे फ़िल्टर के एक अलग निर्माता के लिए जाना चाहिए? या मुझे कुछ के साथ शून्य को प्रतिस्थापित करना चाहिए?

फ़िल्टर के लिए, आपको बनावट समन्वय और नमूना का उपयोग करना होगा, अन्यथा FilterManager विशेषता का स्थान प्राप्त करने में विफल रहता है।

रेंडरर प्लगइन में वह आवश्यकता नहीं है, इसे आजमाएं। हाँ, इसकी बड़ी बॉयलरप्लेट।

उस चीज़ को आज़माएँ: https://github.com/TazOen/createShaderPlugin । हालांकि यह बनावट को अनदेखा करता है, वहां कोई bindTexture नहीं है। यदि आपको बनावट की आवश्यकता है तो संपूर्ण पिक्सी-प्लगइन-उदाहरण लें।

आप कहते हैं कि इसे बनावट के तार और "नमूना" की आवश्यकता है। नमूना था या नमूना? एक लेखन त्रुटि?
मैं इसे उदाहरण की मदद से काम करने में कामयाब रहा। धन्यवाद, लेकिन। यह पृष्ठ इन विवरणों का उल्लेख क्यों नहीं करता है?
http://pixijs.io/examples/#/basics/custom -filter.js

नमूना। हालांकि इसकी वर्दी और मुझे नहीं लगता कि कोई इसे मिस करेगा। हमारी समस्या विशेषताओं के बारे में है।

आपको धन्यवाद, यह करता है :) https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#cannot -read-property-location-of-undefined

ओह, तो वह वहीं था। मुझे विकी याद आ गई।

आपके लिए धन्यवाद, यह करता है

मैंने इसे अभी जोड़ा है।

फिल्टर-माउस डेमो में भी जोड़ा गया नोटिस। हम समस्या को v4 में ठीक नहीं कर सकते। हम इसके बारे में v5 में कुछ करेंगे।

ऐसा तब प्रतीत होता है जब फ़िल्टर प्रबंधक द्वारा आवश्यक कुछ गुणों का उपयोग शेडर में नहीं किया जाता है।

इन संपत्तियों को वहां कैसे सूचीबद्ध किया जाए?

केवल विशेषता, 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 कहता है। ऐसा लगता है जैसे मैं अधिकतम 4 में से केवल 3 कोर्ड्स ही बदल सकता हूँ। यह क्या है? गलत क्या है?

@ जर्मनसोकोलोव13 यह व्यवहार पूरी तरह से समझ में आता है। बस उसके बारे मै सोच रहा था:
जैसा कि मैंने मूल पोस्ट में उल्लेख किया है कि यह त्रुटि शेडर कोड को अनुकूलित करने वाले glsify के कारण होती है।

यदि आप gl_FragColor.a = 0.0; जोड़ते हैं तो यह आपके कॉल को texture2D अनुकूलित कर सकता है, क्योंकि यह पूरी तरह से अधिलेखित हो जाता है, लेकिन तब तक यह texture2D से अल्फा चैनल लेता है।

यदि glsify कॉल को बनावट 2D में अनुकूलित करता है, तो webgl uSampler लिए मेमोरी आवंटित नहीं करता है, इसलिए जब पिक्सी उस वर्दी में डेटा अपलोड करना चाहता है तो यह विफल हो जाता है, क्योंकि उस आवंटित के लिए बस कोई जगह नहीं है।

आपको कुछ विकल्प मिले हैं:

• उसी हैक को लागू करें जैसा मैंने किया था (अभी के लिए), जो मूल रूप से जांचता है कि डेटा अपलोड करने से पहले कोई विशेषता आवंटित की गई है या नहीं।
• uSampler का उपयोग करें, इसलिए glsify इसे ऑप्टिमाइज़ नहीं करता है।
• या बस v5 की प्रतीक्षा करें।

उम्मीद है, यह मदद करता है।

अच्छा कैच, @doebi!

या रेंडरर प्लगइन का उपयोग करें।

ओह, अब मैं उसे समझ गया! हो सकता है कि हमें Pixi.js की अगली छोटी रिलीज़ में Doebi का पैच जोड़ना चाहिए? क्या मुझे पीआर बनाना चाहिए?

हां, पीआर, लेकिन अलग जगह।

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 शेडर कोड का एक बड़ा कर्नेल और गाऊसी चर पर थोड़ा बदलाव के साथ भिन्नता है, इसलिए मुझे पूरी तरह से यकीन नहीं है कि यह क्यों काम नहीं कर रहा है।

यह विंडोज़, मैकोज़ और एंड्रॉइड पर ठीक काम कर रहा है जहां तक ​​​​मैंने परीक्षण किया है कि मेरे पास केवल आईओएस में समस्याएं हैं।
यहाँ शेडर कोड है:
शीर्ष:

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 का कर्नेल आकार आईओएस के लिए बहुत अधिक है, अगर मैं कर्नेल आकार को 7 तक कम करता हूं तो यह ठीक काम करता है।

<----- मूल पोस्ट --------->
नमस्ते,
देर से प्रतिक्रिया के लिए खेद है, मैं सप्ताहांत में कुछ स्क्रीनशॉट बनाने में सक्षम नहीं था। यह मुझे ऐसा लगता है जैसे यह एक ही पंक्ति में विफल रहता है। "विशेषता" अपरिभाषित है। रिमोट कंसोल से स्क्रीनशॉट यहां दिए गए हैं:

@ivanpopelyshev क्या हम इस मुद्दे को बंद कर देंगे ताकि दूसरों को इसी तरह के मुद्दों से इसे गर्म करने से रोका जा सके?
मैं इसे अब कोई मुद्दा नहीं मानूंगा, क्योंकि मुझे आपका वादा मिल गया है, कि इसे v5 में ठीक कर दिया जाएगा।

@doebi बंद।

@tyleet बनावट से लिए गए नमूनों की संख्या विभिन्न प्रणालियों पर सीमित की जा सकती है।

इस थ्रेड को स्वचालित रूप से लॉक कर दिया गया है क्योंकि इसे बंद करने के बाद हाल ही में कोई गतिविधि नहीं हुई है। कृपया संबंधित बग के लिए एक नया मुद्दा खोलें।