QML में OpenGL शेड्स का उपयोग करना

यह पोस्ट "स्मार्ट फोन फॉर स्मार्ट पोस्ट" प्रतियोगिता में भाग लेती है

यह पोस्ट घोषणात्मक QML भाषा के तत्वों के साथ OpenGL शेड का उपयोग करने के बारे में है। मेरी राय में, विषय प्रासंगिक है, क्यूएमएल 2.0 के भविष्य के संस्करण के बाद से यह ग्राफिकल इंटरफ़ेस तत्वों को प्रदान करने के लिए एक बैकेंड के रूप में ओपेनगेल का व्यापक रूप से उपयोग करने की योजना है। शेडिंग लिखना एक आसान विषय नहीं है और इस पोस्ट का लक्ष्य यह है कि, सबसे पहले, इसे पढ़ने वाला व्यक्ति तुरंत खुद के लिए कुछ दिलचस्प करने की कोशिश कर सकता है और प्रयोग कर सकता है, उदाहरण के लिए, ये उदाहरण हैं:



अंत में मैं उपयोगी लिंक प्रदान करूंगा जहां आप इस विषय के आगे के गहन अध्ययन के लिए सामग्री देख सकते हैं, अगर यह आपको निश्चित रूप से रुचिकर बनाता है, और इससे भी अधिक रोचक शेड्स कार्यान्वित करता है, क्यूएमएल भाषा के तत्वों के साथ मिलकर। उदाहरण के रूप में विभिन्न क्यूएमएल तत्वों का उपयोग करते हुए शेड्स के साथ काम करने पर विचार किया जा सकता है: ShaderEffectItem , कई Qt3D कक्षाएं जो OpenGL का उपयोग भी करती हैं, आदि। इस पोस्ट में, मैं ShaderEffectItem तत्व के साथ ShaderEffectSource के साथ कुछ उदाहरणों का प्रदर्शन करूँगा ।

इस लेख की रूपरेखा निम्नलिखित है:
ShaderEffectItem और ShaderEffectSource सेट करना
थोडा shader सिद्धांत
आदेशों के साथ QML तत्वों को जोड़ना
उदाहरण 1. शेड्स का उपयोग करके एक ढाल को लागू करना
उदाहरण 2.1 सबसे सरल एनीमेशन
उदाहरण 2.2 एनीमेशन के साथ एक मेनू बनाना
उदाहरण 3. माउस पॉइंटर के आधार पर कुछ बनावट क्षेत्र का चयन करें
उदाहरण 4. दो छवियों को मिलाना
निष्कर्ष
उपयोगी लिंक

आइए आवश्यक तत्वों को स्थापित करके शुरू करें।

आवश्यक प्लगइन्स स्थापित करना

पहले आपको यह जांचने की आवश्यकता है कि क्या आपने ओपनजीएल के सभी घटकों को स्थापित किया है।
1) लिंक का अनुसरण करें और आप git रिपॉजिटरी में पता देखेंगे जहां shadersplugin झूठ है। अगर कुछ नहीं बदला है, तो वह इस तरह है:
git://gitorious.org/qt-labs/qml1-shadersplugin.git
2) git clone git://gitorious.org/qt-labs/qml1-shadersplugin.git बनाओ git clone git://gitorious.org/qt-labs/qml1-shadersplugin.git
3) हम फ़ोल्डर में जाते हैं और इंस्टॉल करते हैं (यह है कि मैं इसे लिनक्स के तहत कैसे करता हूं, देखें कि आपके ओएस के तहत समान तत्व कैसे स्थापित होते हैं)। यदि कोई ओपनगेल घटक नहीं हैं, तो स्थापना के साथ समस्याएं हैं। यदि यह चेक आपके लिए मुश्किल है, तो बस एक खाली Qt एप्लिकेशन बनाएं और लाइन जोड़ें: प्रोजेक्ट फ़ाइल (* .pro) के QT += declarative opengl । यदि सब कुछ संकलित करता है, तो स्थापना के दौरान कोई समस्या नहीं होनी चाहिए।

थोडा shader सिद्धांत

शेड्स की अवधारणा से परिचित इस छोटे अध्याय को छोड़ सकते हैं। इसमें, मैं इस विषय का संक्षिप्त विवरण दूंगा। हमें shaders की आवश्यकता क्यों है? सरल शब्दों में, शेडर प्राइमरी को प्रस्तुत करने की प्रक्रिया में प्रोग्रामर को "हस्तक्षेप" करने की अनुमति देते हैं, अर्थात। वास्तविक कोड लिखकर कन्वेयर के चरणों में परिवर्तन करें (जो नीचे चर्चा की जाएगी)। शेड्स लिखने के लिए, GLSL (OpenGL Shading Language) है, जो OpenGL समिति द्वारा बनाई गई है। इसका सिंटैक्स प्रोग्रामिंग भाषा सी। जीएलएसएल पर विशेष रूप से डिजाइन किया गया था, ताकि प्रोग्रामर का ओपनगेल पाइपलाइन के प्रोग्रामेबल पॉइंट्स पर नियंत्रण हो, जो कि चरणों का एक क्रम है, जिसके माध्यम से ओएनजीसीएल कमांड चलते हैं)। जैसा कि नीचे दिए गए चित्र में एक और विकल्प कन्वेयर दिखाया गया है:



किसी भी वस्तु का शीर्ष पाइप लाइन को पास किया जाता है। सबसे पहले, समन्वय परिवर्तन (वर्टेक्स ट्रांसफॉर्मेशन) का प्रदर्शन किया जाता है - आने वाले वर्टेक्स की दुनिया, दृश्य और प्रोजेक्शन मैट्रिसेस। यह वर्टेक्स शेडर पर लागू होता है। इन ऑपरेशनों को करने के बाद, आदिम (असेंबली) की असेंबली शुरू होती है: इस स्तर पर, स्थानिक निर्देशांक (x, y, z) आयाम के मैट्रिक्स (4 x 4) का उपयोग करके रूपांतरित होते हैं। मुख्य कार्य स्क्रीन प्राप्त करना है, त्रि-आयामी (विश्व) निर्देशांक से दो-आयामी निर्देशांक। पाइप लाइन के इस हिस्से में, वर्टिकल को त्रिकोण में बांटा जाता है और रैस्टराइजेशन (रेस्टराइजेशन) में फीड किया जाता है। रैस्टराइज़र त्रिकोण को टुकड़ों (पिक्सेल) में विभाजित करता है जिसके लिए बनावट निर्देशांक और रंग आपस में जुड़े होते हैं। फिर आता है टुकड़े टुकड़े करने का काम। वह स्क्रीन पर पेश की जा रही सतह की रूपरेखा से बंधे क्षेत्र के भीतर स्क्रीन के प्रत्येक पिक्सेल के रंग को निर्धारित करने के लिए जिम्मेदार है। इन सभी तरीकों को संसाधित करने के बाद, परिणामी टुकड़े को फ्रेम बफर में रखा जाता है, जिसे बाद में स्क्रीन (पिक्सेल अपडेट) पर प्रदर्शित किया जाता है।
जैसा कि आप पहले से ही समझ चुके हैं, दो प्रकार के शेड हैं: वर्टेक्स और टुकड़ा (या उन्हें पिक्सेल भी कहा जाता है)। वर्टेक्स शेडर को पहले निष्पादित किया जाता है और प्रत्येक वर्टेक्स को संसाधित करता है, जबकि प्रत्येक पिक्सेल के लिए टुकड़े टुकड़े करने वाले को निष्पादित किया जाता है, जो कि रंग, ( .r, .g, .b, .a ), गहराई, बनावट निर्देशांक ( .x, .y, .z, .w ) जैसी विशेषताओं के एक निश्चित समूह से जुड़ा होता है .x, .y, .z, .w .s, .t, .p, .q या .s, .t, .p, .q )। शेडर का प्रवेश बिंदु void main() फ़ंक्शन है। यदि प्रोग्राम दोनों प्रकार के शेड का उपयोग करता है, तो दो मुख्य प्रवेश बिंदु हैं। main कार्य में प्रवेश करने से पहले, वैश्विक चर को प्रारंभ किया जाता है। GLSL विशेष प्रकार के चर को परिभाषित करता है:
uniform - बाहरी डेटा के साथ shader का कनेक्शन (QML के मामले में यह तत्वों के गुण होंगे); यह ध्यान दिया जाना चाहिए कि इस प्रकार के चर केवल-पढ़ने के लिए हैं;
varying - varying - इस प्रकार के वेरिएबल को वर्टेक्स शेडर से जोड़ने के लिए आवश्यक है, यानी वर्टेक्स शेडर से डेटा को टुकड़ा शेल्डर में ट्रांसफर करना। शीर्ष की छाया में वे बदल सकते हैं, लेकिन टुकड़े की छाया में वे केवल-पढ़े जाते हैं;
attribute - वैश्विक गुंजाइश चर;
हमें जीएलएसएल भाषा के कुछ तत्वों का भी उल्लेख करना चाहिए, जो नीचे दिए गए उदाहरणों में पाए जाते हैं:
sampler2D - sampler2D भाषा के प्रकारों में से एक है जो बनावट का प्रतिनिधित्व करता है (sampler1D, sampler3D, samplerCube, sampler1Dshadow, sampler2Dshadow भी है);
vec4 texture2D(sampler2D s, vec2 coord) - बनावट s से एक पिक्सेल को पढ़ने के लिए इस्तेमाल किया जाने वाला एक फ़ंक्शन, बनावट निर्देशांक निर्देशांक के साथ।
gl_FrontColor एक वेक्टर है जिसमें अंतिम रंगीन बनावट डेटा लिखा जाता है और जो केवल टुकड़े टुकड़े में उपलब्ध है।
यह भी उल्लेख किया जाना चाहिए कि जीएलएसएल कई अंतर्निहित कार्यों को अभिकलन के लिए उन्मुख करता है, विशेष रूप से वैक्टर और मैट्रिस के साथ काम करने के लिए। नीचे दिए गए उदाहरणों के विश्लेषण के क्रम में, कुछ कार्यों का वर्णन किया जाएगा।

आदेशों के साथ QML तत्वों को जोड़ना

QML तत्वों के साथ काम करने के लिए शेडर्स के लिए एक अनिवार्य आवश्यकता QDeclarativeView श्रेणी की वस्तु में रेंडर करने के लिए OpenGL स्थापित करना है:

 QmlApplicationViewer viewer; ... QGLWidget* glWidget = new QGLWidget(format); ... viewer.setViewport(glWidget); ... 

कोड का यह टुकड़ा QmlApplicationViewer (Qt क्विक एप्लिकेशन विज़ार्ड द्वारा) में उत्पन्न एप्लिकेशन के मुख्य फ़ंक्शन से लिया गया है - main , QmlApplicationViewer वर्ग QmlApplicationViewer विरासत QmlApplicationViewer मिला है। प्रत्येक उदाहरण के बाद, मैं पूर्ण स्रोत कोड का लिंक प्रदान करूंगा।

जैसा कि ऊपर उल्लेख किया गया है, ओपनजीएल ShaderEffectItem साथ काम प्रदर्शित करने के लिए, ShaderEffectItem तत्व का उपयोग किया जाएगा, जो आपको OpenGL तंत्र का उपयोग करके स्क्रीन पर विभिन्न QML तत्वों के प्रदर्शन में बदलाव करने की अनुमति देता है। यह Qt.labs.shaders 1.0 मॉड्यूल में उपलब्ध है (जैसा कि यह विकास के अधीन है), लेकिन अब आप इसका उपयोग करने का प्रयास कर सकते हैं। वर्टेक्स और टुकड़ा शेड कोड लिखने के लिए, गुणों (प्रकार string ) के टुकड़े क्रमशः शेडर और वर्टेक्शडर को परिभाषित किए जाते हैं।

ShaderEffectSource उस QML घटक को निर्दिष्ट करने के लिए आवश्यक है जो shader में उपलब्ध होगा। यह मुख्य रूप से sourceItem और HideSource गुणों का उपयोग करेगा। पहले एक विशिष्ट क्यूएमएल तत्व (इसकी पहचानकर्ता) को इंगित करता है जो शेडर्स द्वारा "प्रभावित" होगा, और hideSource "कहता है" कि मूल तत्व छिपा दिया जाएगा जब शेडर प्रभाव लागू किया जाएगा।

आप किसी अन्य ShaderEffectItems के लिए स्रोत के रूप में एक या अधिक ShaderEffectItems को परिभाषित कर सकते हैं, लेकिन आपको source में परिभाषित तत्व के एक बच्चे के रूप में ShaderEffectItems घोषणा नहीं करनी चाहिए, क्योंकि यह सबसे अधिक एक redraw लूप का नेतृत्व करेगा।

क्यूएमएल में एक तत्व ( property का उपयोग करके) के लिए अपने स्वयं के गुणों को परिभाषित करने की क्षमता है, और वे shader कार्यक्रमों में चर के रूप में भी उपलब्ध होंगे। यह स्वचालित रूप से होता है यदि उनके नाम मेल खाते हैं और छाया में चर पहले से उल्लेख किए गए uniform स्पेसियर के साथ घोषित किया जाता है - तथाकथित बाध्यकारी। जब हम उदाहरणों से मिलेंगे, तो यह क्षण तुरंत स्पष्ट हो जाएगा।

यदि हम पूरी प्रक्रिया को यथासंभव सार मानते हैं, तो QML तत्व का ग्राफिक प्रतिनिधित्व बनावट द्वारा वर्टेक्स और फ्रेगमेंट शेड्स में प्रेषित होता है और फिर अंतिम परिणाम प्रदर्शित होता है, जिसे स्क्रीन पर प्रदर्शित किया जाएगा। तदनुसार, आप shader कार्यक्रमों में इस बनावट के प्रतिपादन में परिवर्तन कर सकते हैं (यह फिर से हम वापसी करते हैं कि क्यों shaders की आवश्यकता है)।

अगला, कई उदाहरणों पर विचार किया जाएगा और कुछ स्पष्टीकरण उन्हें दिए जाएंगे। सामग्री को जटिल नहीं करने के लिए, वे हर जगह टुकड़े टुकड़े लिखने के उदाहरण पर काम दिखाएंगे, अर्थात, हम पिक्सेल के साथ काम करेंगे।

उदाहरण 1. शेड्स का उपयोग करके एक ढाल को लागू करना

चलिए एक बहुत ही सरल उदाहरण से शुरू करते हैं। QML में एक काफी सामान्य आयत तत्व है और इसमें एक gradient गुण है। नीचे दिए गए उदाहरण में, मैं यह दिखाना चाहता हूं कि आप shader तंत्र का उपयोग करके ढाल कैसे प्राप्त कर सकते हैं। तो, 360 बाय 360 Rectangle एलिमेंट बनाया जाएगा। ShaderEffectItem में एक बच्चे के रूप में ShaderEffectItem एलिमेंट को जोड़ना भी आवश्यक है, जिसमें anchors.fill प्रॉपर्टी के साथ parent वैल्यू निर्दिष्ट है। इस प्रकार, हम कहते हैं कि shader संपूर्ण मूल तत्व को "कवर" करता है। कोड नीचे प्रस्तुत किया गया है:

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Rectangle { width: 360 height: 360 ShaderEffectItem { anchors.fill: parent fragmentShader: " varying highp vec2 qt_TexCoord0; void main(void) { lowp vec4 c0 = vec4( 1.0, 1.0, 1.0, 1.0 ); lowp vec4 c1 = vec4( 1.0, 0.0, 0.0, 1.0 ); gl_FragColor = mix( c0, c1, qt_TexCoord0.y ); } " } } 

अब आइए fragmentShader प्रॉपर्टी पर ध्यान दें - इसमें फ्रेगरेंस शेडर प्रोग्राम का टेक्स्ट होता है। सबसे पहले, हम उच्च चर varying highp vec2 qt_TexCoord0 के चर को परिभाषित करते हैं, जो कि हम शीर्ष varying highp vec2 qt_TexCoord0 से प्राप्त करते हैं, हालांकि यह हमारे साथ परिभाषित नहीं है, इसका डिफ़ॉल्ट कार्यान्वयन है और हम वहां से डेटा प्राप्त कर सकते हैं। qt_TexCoord0 यह निर्धारित करता है, जैसा कि मैं इसे समझता हूं, बनावट एक पूरे के रूप में दृश्य का समन्वय करती है (मुझे खुशी होगी अगर कोई मुझे qt_TexCoord0 है और कहता है कि इसे सही ढंग से कैसे कहा जाता है, कंप्यूटर ग्राफिक्स के दृष्टिकोण से)। अब main समारोह की ओर मुड़ते हैं। हम इसमें परिभाषित करते हैं कि दो वैक्टर c0 युक्त सफ़ेद (रंग को आरजीबीए के रूप में दर्शाया गया है) और c1 - लाल, और फिर हम mix फंक्शन का उपयोग करके प्रत्येक पिक्सेल के लिए प्राप्त मूल्य को असाइन करते हैं, आउटपुट gl_FragColor करने के लिए दो मूल्यों के बीच एक रैखिक प्रक्षेप फ़ंक्शन:

mix (vec4 x, vec4 y, float a) - सूत्र द्वारा व्यक्त किया गया है: x * ( 1.0 - a )+y * a

यहाँ a चर पैरामीटर होगा जिसका मूल्य। Y अक्ष के साथ सदिश समन्वय के अनुरूप बनावट वेक्टर का होगा। तदनुसार, निष्पादन का परिणाम निम्नानुसार होगा:


चूंकि qt_TexCoord0.y y अक्ष के साथ सदिश समन्वय का प्रतिनिधित्व करता है, इसलिए ग्रेडिएंट ऊपर से नीचे तक होगा, यदि, उदाहरण के लिए, हम ग्रेडिएंट को बाएं से दाएं चाहते हैं, तो पंक्ति को प्रतिस्थापित करें:

 gl_FragColor = mix( c0, c1, qt_TexCoord0.y ); 

पर

 gl_FragColor = mix( c0, c1, qt_TexCoord0.x ); 

.x अर्थ है कि वेक्टर x साथ समन्वय करता है। और अगर हम बिना किसी ढाल के लाल रंग में सब कुछ पेंट करना चाहते हैं, तो एक ऐसा कोड होगा (यहां बिल्कुल सभी पिक्सेल लाल रंग में चित्रित किए गए हैं):

 void main(void) { gl_FragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 ); } 

वेक्टर के निर्देशांक x और y बजाय, आप क्रमशः बनावट s और t उपयोग कर सकते हैं। परिणाम समान होगा। स्रोत कोड यहां उपलब्ध है।
आइए shader तंत्र का उपयोग करके किसी प्रकार का एनीमेशन करने का प्रयास करें।

उदाहरण 2.1 सबसे सरल एनीमेशन

आइए ग्रह की छवि के साथ काम करने के लिए रंगों का उपयोग करें:


हम इसे करेंगे, बेशक थोड़ा बेवकूफ प्रभाव, लेकिन फिर भी ... जैसे कि ग्रह दिल की तरह धड़कता है। सबसे पहले, आपको Item तत्व में एक संपत्ति को परिभाषित करने के लिए ShaderEffectSource का उपयोग करने की आवश्यकता है, उदाहरण के लिए, जिसे source कहा जाता source । शेडर में ही, uniform lowp sampler2D source; निर्दिष्ट करें uniform lowp sampler2D source; इस प्रकार हमारी बनावट (ग्रह छवि) को shader कोड और उसके रेंडरिंग में परिवर्तन करने की क्षमता के साथ बाध्यकारी बना दिया गया है। किसी भी एनीमेशन को बनाने के लिए, आपको समय के साथ कुछ डेटा बदलने की आवश्यकता है। इसके लिए, मैं QML प्रॉपर्टी एनिमीशन तत्व का उपयोग करूंगा। और हमें क्या डेटा बदलने की आवश्यकता है? यहां मैं एक उदाहरण दिखाना चाहता हूं कि कैसे, एक पिक्सेल के डेटा के बजाय, हम दूसरे के डेटा को स्थानापन्न कर सकते हैं और इस तरह एक एनीमेशन प्रभाव प्राप्त कर सकते हैं। यानी उदाहरण के लिए, हमारे पास एक बनावट है जिसमें x, y (साथ ही रंग डेटा) का समन्वय है, और इसके बजाय हम कुछ पड़ोसी पिक्सेल (अपने स्वयं के रंग डेटा के साथ) को प्रतिस्थापित करते हैं और हम इसे कुछ प्रकार के वेतन वृद्धि के रूप में चुनेंगे कार्य, यह एक sin कार्य है। इसलिए, चर डेटा के रूप में, 0 से 360 डिग्री के कोण के लिए वांछनीय है। इस प्रकार, यदि आप PropertyAnimation में नीचे दिए गए कोड को देखते हैं PropertyAnimation कोण संपत्ति 0.0 से 360.0 बदलने के लिए निर्धारित है।

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Item { width: img.width height: img.height Image { id: img source: "images/space.jpg" } ShaderEffectItem { property variant source: ShaderEffectSource { sourceItem: img; hideSource: true } anchors.fill: img fragmentShader: " varying highp vec2 qt_TexCoord0; uniform lowp sampler2D source; uniform highp float angle; void main() { highp float wave = 0.01; highp float wave_x = qt_TexCoord0.x + wave * sin( radians( angle + qt_TexCoord0.x * 360.0 ) ); highp float wave_y = qt_TexCoord0.y + wave * sin( radians( angle + qt_TexCoord0.y * 360.0 ) ); highp vec4 texpixel = texture2D( source, vec2( wave_x, wave_y ) ); gl_FragColor = texpixel; }" property real angle : 0.0 PropertyAnimation on angle { to: 360.0 duration: 800 loops: Animation.Infinite } } } 

हम उच्च highp float wave = 0.01 का उपयोग कर दोलन आयाम निर्धारित करते हैं। मुझे radians फ़ंक्शन की आवश्यकता क्यों है, मुझे लगता है कि समझाने की आवश्यकता नहीं है। लेकिन अगर हम एंगल angle के मान को बदल देते हैं angle तस्वीर अलग-अलग तरफ बढ़ेगी, लेकिन हमें कुछ और शानदार चाहिए- एक “शानदार कंट्रोवर्सी”। बनावट निर्देशांक क्रमशः 0 से 1 तक भिन्न होते हैं, प्रत्येक पिक्सेल के लिए "360 के कोण से पाप फ़ंक्शन में अपना गुणन" होगा। wave_x और wave_y मैं क्रमशः x अक्ष और y अक्ष के साथ लिया गया, कुछ पड़ोसी पड़ोस से पिक्सेल के निर्देशांक रिकॉर्ड करूंगा। texture2D( source, vec2( wave_x, wave_y ) ); हम इस नए पिक्सेल के मान लेते हैं और उन्हें gl_FragColor में लिखते हैं gl_FragColor हम पहले से जानते हैं।
यहाँ ग्रह की तस्वीर के लिए इस तरह के एक टुकड़े टुकड़े का उपयोग कर वीडियो परिणाम है:

स्रोत कोड यहां उपलब्ध है।

उदाहरण 2.2 एनीमेशन के साथ एक मेनू बनाना

यह काफी सुंदर लग रहा है और मैंने मेनू बटन पर समान प्रभाव लागू करने का प्रयास करने का फैसला किया है। इसलिए जब आप बटन पर मंडराते हैं तो एक ग्रह के समान प्रभाव होता है। यह विवरण इस गाइड से QML में मेनू बनाने का एक उदाहरण प्रदान करता है। प्रत्येक बटन Button.qml में वर्णित है। मैंने शेड्स के साथ काम करने के उनके विवरण में थोड़ा सा जोड़ा। टुकड़ा shader कोड लगभग ऊपर के उदाहरण से भिन्न नहीं होता है, केवल मैंने थोड़ा सा दोलन आयाम wave = 0.02 बढ़ाया है:
Button.qml फ़ाइल:

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Item { width: but.width height: but.height property alias text: textItem.text Rectangle { id: but width: 130; height: 40 border.width: 1 radius: 5 smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "darkGray" } GradientStop { position: 0.5; color: "black" } GradientStop { position: 1.0; color: "darkGray" } } Text { id: textItem anchors.centerIn: parent font.pointSize: 20 color: "white" } MouseArea { property bool ent: false id: moousearea anchors.fill: parent onEntered: { ent = true } onExited: { ent = false effect.angle = 0.0 } hoverEnabled: true } } ShaderEffectItem { id: effect property variant source: ShaderEffectSource { sourceItem: but; hideSource: true } anchors.fill: but property real angle : 0.0 PropertyAnimation on angle { id: prop1 to: 360.0 duration: 800 loops: Animation.Infinite running: moousearea.ent } fragmentShader: " varying highp vec2 qt_TexCoord0; uniform lowp sampler2D source; uniform highp float angle; void main() { highp float wave = 0.02; highp float wave_x = qt_TexCoord0.x + wave * sin( radians( angle + qt_TexCoord0.x * 360.0 ) ); highp float wave_y = qt_TexCoord0.y + wave * sin( radians( angle + qt_TexCoord0.y * 360.0 ) ); highp vec4 texpixel = texture2D( source, vec2( wave_x, wave_y ) ); gl_FragColor = texpixel; }" } } 

खैर, menu.qml फ़ाइल ही

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Item { width: 150 height: 190 Column { anchors.horizontalCenter: parent.horizontalCenter Button { text: "Apple" } Button { text: "Red" } Button { text: "Green" } Button { text: "Blue" } } } 

मैं इस तथ्य पर ध्यान देना चाहता हूं कि onExited घटना में effect तत्व की कोण angle संपत्ति को 0.0 में रीसेट करना आवश्यक है, अन्यथा पड़ोसी पिक्सेल की गणना में प्रतिस्थापित कोण को 0 से नहीं, बल्कि अंतिम मान से गणना करना शुरू हो जाएगा और यह वह नहीं होगा जो हम उम्मीद करते हैं। परिणाम यह प्रभाव है:



स्रोत कोड यहां उपलब्ध है।

उदाहरण 3. माउस पॉइंटर के आधार पर कुछ बनावट क्षेत्र का चयन करें

अगला, मैं छवि के एक निश्चित हिस्से के पिक्सल के रंग को बदलने का एक उदाहरण देना चाहता हूं। क्षेत्र माउस पॉइंटर की स्थिति से निर्धारित होगा, जो 50 पिक्सल के त्रिज्या के साथ सर्कल का केंद्र होगा। और इस सर्कल में मूल से अलग पिक्सेल रंग होंगे।
सबसे पहले, इस उदाहरण में, आपको ShaderEffectItem तत्व में 3 गुणों को परिभाषित करने की आवश्यकता है:
property real xPos: 65.0
property real yPos: 65.0
property real radius: 50
वे क्रमशः मूडर कोड और सर्कल के त्रिज्या में स्थानांतरित माउस के निर्देशांक का निर्धारण करेंगे। माउस आंदोलन को ट्रैक करने के लिए, MouseArea तत्व और onPositionChanged इवेंट के प्रसंस्करण को onPositionChanged । नीचे स्रोत कोड है और आगे स्पष्टीकरण दिए गए हैं:

 Rectangle { width: img.width height: img.height Image { id: img source: "images/nature.jpg" } ShaderEffectItem { id: effect anchors.fill: parent MouseArea { id: coords anchors.fill: parent onPositionChanged: { effect.xPos = mouse.x effect.yPos = coords.height - mouse.y } } property real xPos: 65.0 property real yPos: 65.0 property real radius: 50 property int widthImage: img.width property int heightImage: img.height property variant source: ShaderEffectSource { sourceItem: img; hideSource: true } fragmentShader: "varying highp vec2 qt_TexCoord0; uniform highp float xPos; uniform highp float yPos; uniform highp float radius; uniform highp int widthImage; uniform highp int heightImage; highp vec2 pixcoords = qt_TexCoord0.st * vec2( widthImage, heightImage ); uniform sampler2D source; void main(void) { lowp vec4 texColor = texture2D(source, qt_TexCoord0.st); lowp float gray = dot( texColor, vec4( 0.6, 0.5, 0.1, 0.0 ) ); if ( ( pow( ( xPos - pixcoords.x ), 2 ) + pow( ( yPos - pixcoords.y ), 2 ) ) < pow( radius, 2 ) ) { gl_FragColor = vec4( gray, gray, gray, texColor.a) ; } else { gl_FragColor = texture2D( source, qt_TexCoord0 ); } }" } } 

आप देख सकते हैं कि पॉव स्क्वेरिंग फ़ंक्शन लागू किया गया है (यह गणित पुस्तकालय से सी / सी ++ में एक ही नाम के साथ फ़ंक्शन के समान कार्य करता है) यह निर्धारित करने के लिए कि क्या एक निर्देशांक ( pixcoords.x; pixcoords.y ) के साथ दिए गए पिक्सेल का एक बिंदु एक सर्कल के साथ pixcoords.x; pixcoords.y केंद्र में yPos और yPos और त्रिज्या radius ।
तदनुसार, यदि पिक्सेल समन्वय हमारे सर्कल में आता है, तो परिणाम एक ग्रे रंग को परिभाषित करने वाले वेक्टर द्वारा गुणा एक पिक्सेल स्केलरली है ( dot फ़ंक्शन स्केलर उत्पाद करता है)। यदि नहीं, तो विशिष्ट पिक्सेल बिल्कुल नहीं बदलता है। फिर, आप यह नोटिस कर सकते हैं कि चर QML तत्व शैडर चर के साथ कैसे जुड़े हैं - उनका एक ही नाम और समतुल्य प्रकार है: real highp float बराबर है।
निष्पादन का परिणाम इस प्रकार है:



यह ध्यान देने योग्य है कि यहां हम सशर्त संचालकों (सी के समान ही) का उपयोग करते हैं जो जीएलएसएल में उपलब्ध हैं।
स्रोत कोड यहां उपलब्ध है।

उदाहरण 4. दो छवियों को मिलाना (बनावट)

आइए हम दो तस्वीरें:
कॉफी मग

और कॉफी बीन्स:

हम कॉफी बीन्स और उस पर कॉफी मग के रूप में एक पृष्ठभूमि बनाना चाहते हैं। इस समस्या को हल करने के लिए, हमें फिर से बनावट निर्देशांक के साथ काम करने की आवश्यकता होगी। texture1 के तत्वों के रूप में texture1 में दो चित्र texture0 और ShaderEffectItem को परिभाषित किया जाएगा। टुकड़ा shader कोड में, इन दो छवियों को uniform sampler2D texture0 बनावट uniform sampler2D texture0 और uniform sampler2D texture1 बनावट 1 में दो बनावट के रूप में संग्रहीत किया जाएगा।चरों में s1और s2हमें क्रमशः पहले चित्र के प्रत्येक पिक्सेल के बनावट निर्देशांक मिलते हैं और दूसरे, क्रमशः, जैसा कि नीचे दिए गए कोड में दिखाया गया है:

 import QtQuick 1.0 import Qt.labs.shaders 1.0 Rectangle { width: coffee.width height: coffee.height Image { id: coffee source: "images/coffee.jpg" } Image { id: granules source: "images/granules.jpg" } ShaderEffectItem { anchors.fill: parent id: effect property variant texture0: ShaderEffectSource { sourceItem: coffee; hideSource: true } property variant texture1: ShaderEffectSource { sourceItem: granules; hideSource: true } fragmentShader: " varying highp vec2 qt_TexCoord0; uniform sampler2D texture0; uniform sampler2D texture1; void main(void) { vec4 s1 = texture2D( texture0, qt_TexCoord0.st ); vec4 s2 = texture2D( texture1, qt_TexCoord0.st ) ; gl_FragColor = mix( vec4( s1.r, s1.g, s1.b, 1.0 ), vec4( s2.r * 0.6, s2.g * 0.6, s2.b * 0.6, 0.4 ), 0.35 ); }" } } 

gl_FrontColorपिक्सेल रंग मापदंडों वाले दो वैक्टर के रैखिक प्रक्षेप का परिणाम परिणामी वेक्टर में लिखा जाएगा , जो पहले से ही हमारे लिए (ढाल के निर्माण के दौरान) परिचित है। इसके अलावा, s2 बनावट में प्रत्येक रंग चैनल (कॉफी बीन्स को 0.6 से गुणा किया जाएगा, क्योंकि हमें पृष्ठभूमि के रूप में इसकी आवश्यकता है)। परिणामस्वरूप, हमारे पास यह परिणाम है: यहां आप



मिक्स फ़ंक्शन के मापदंडों और वैक्टर के मूल्यों के साथ बहुत सारे प्रयोगात्मक विकल्प बना सकते हैं (उदाहरण के लिए, वेक्टर का चौथा तत्व पारदर्शिता के लिए जिम्मेदार, ऊपर के उदाहरण में 1.0 और 0.4) और अलग-अलग, दिलचस्प मिश्रित बनावट प्राप्त करें।

स्रोत कोड यहां उपलब्ध है।

अंत में, मैं कहना चाहता हूं कि मुझे लगता है कि उपरोक्त उदाहरण काफी सरल और तुच्छ हैं, लेकिन दूसरी ओर, वे उन लोगों के लिए उपयोगी हो सकते हैं जो इस विषय से बिल्कुल परिचित नहीं हैं और कुछ इसी तरह की कोशिश करना चाहते हैं।

निष्कर्ष

सारांशित करते हुए, हम कह सकते हैं कि shader प्रोग्राम लिखने की संभावना के कारण, QML तत्वों को रेंडर करते समय OpenGL ग्राफिक्स को संसाधित करने के सबसे महत्वपूर्ण चरणों के साथ काम करने के लिए हमें बहुत लचीले तंत्र मिलते हैं। यह भी ध्यान देने योग्य है कि जीएलएसएल भाषा, जैसा कि पहले ही उल्लेख किया गया है, सी के समान है, लेकिन जैसा कि आधिकारिक विनिर्देश में कहा गया है कि मतभेद हैं। उदाहरण के लिए, कोई संकेत नहीं हैं (डेटा को मान से फ़ंक्शन में पास किया जाता है), आप पुनरावृत्ति का उपयोग नहीं कर सकते हैं, आदि। यह याद रखना चाहिए कि खराब या गलत तरीके से लिखा गया शेडर प्रोग्राम प्रदर्शन को बहुत प्रभावित कर सकता है। इन प्लगइन्स का काम प्लेटफार्मों पर परीक्षण किया गया है: सिम्बियन ^ 3, मैमो 5, मैक ओएस एक्स, विंडोज 7 और उबंटू। मंच की आवश्यकताएं स्वयं Qt SDK 4.7.x संस्करण और QtOpenGL समर्थन हैं।QML का भावी संस्करण - QML2 इसके दृश्य ग्राफ़ में API को QML कोड के साथ GL / GLES शेड के संयोजन का समर्थन करेगा। आप क्यूटी 5.0 में तत्व पर विचार कर सकते हैंShaderEffect । यदि मैं इसे सही ढंग से समझता हूं, तो मैंने जो कुछ ऊपर लिखा है, उसमें कुछ समानता है।

उपयोगी लिंक

• मेरा सुझाव है कि आप खुद को OpenGL ES के आधिकारिक विनिर्देश के साथ परिचित करें ।
• QGraphicsView पर QML ShaderEffectItem - यहां आप नोकिया N8 पर वीडियो, उदाहरणों के काम देख सकते हैं।
• GLSL मैनुअल , शेड के काम का सिद्धांत बहुत अच्छी तरह से वर्णित है (कभी-कभी उनके पास एक वेबसाइट होती है, इसलिए डरा नहीं होगा :))
• 6 दिलचस्प shader कार्यान्वयन
• क्यूटी क्विक 2 क्यूएमएल सीन ग्राफ जीएलएसएल टुकड़ा शेडर ट्यूटोरियल