👨🏼‍💻 👓 📔 ववववव वववव वव वव ⭐️ 📷 📁

स्व-अद्यतन पाठ

जब सिमुलेशन या रेंडरिंग कार्यों को समानांतर करना संभव होता है, तो आमतौर पर उन्हें GPU में चलाना सबसे अच्छा होता है। इस लेख में, मैं एक तकनीक की व्याख्या करूँगा जो इस तथ्य का उपयोग कम प्रदर्शन ओवरहेड के साथ प्रभावशाली दृश्य चालें बनाने के लिए करती है। सभी प्रभाव जो मैं प्रदर्शित करता हूं, उन्हें बनावट का उपयोग करके कार्यान्वित किया जाता है, जिसे अपडेट किए जाने पर, " खुद को प्रस्तुत करना "; जब एक नया फ़्रेम प्रदान किया जाता है, तो बनावट को अद्यतन किया जाता है, और अगली बनावट स्थिति पूरी तरह से पिछली स्थिति पर निर्भर करती है। इन बनावटों पर, आप कुछ बदलाव ला सकते हैं, और बनावट, स्वयं, प्रत्यक्ष या अप्रत्यक्ष रूप से, दिलचस्प एनिमेशन को प्रस्तुत करने के लिए इस्तेमाल किया जा सकता है। मैं उन्हें प्रशंसनीय बनावट कहता हूं।

चित्रा 1: दृढ़ संकल्प डबल बफरिंग

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

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

पिछले अवस्था को एक नए कनवल्शन टेक्सचर के साथ टुकड़े करके शेडर (या पिक्सेल शेडर ) का उपयोग करके दिलचस्प प्रभाव और एनिमेशन प्रदान करता है। शेडर निर्धारित करता है कि राज्य कैसे बदलता है। लेख से सभी उदाहरणों (साथ ही अन्य) के लिए स्रोत कोड GitHub पर भंडार में पाया जा सकता है ।

सरल आवेदन उदाहरण

इस तकनीक को प्रदर्शित करने के लिए, मैंने एक प्रसिद्ध सिमुलेशन को चुना, जिसमें, अद्यतन करते समय, स्थिति पूरी तरह से पिछली स्थिति पर निर्भर करती है: कॉनवे गेम "लाइफ" । यह अनुकरण वर्गों के एक ग्रिड में किया जाता है, जिनमें से प्रत्येक कोशिका जीवित या मृत है। निम्नलिखित सेल राज्य के नियम सरल हैं:

यदि एक जीवित कोशिका में दो से कम पड़ोसी होते हैं, लेकिन यह मृत हो जाता है।
यदि एक जीवित कोशिका में दो या तीन जीवित पड़ोसी होते हैं, तो यह जीवित रहता है।
यदि एक जीवित कोशिका में तीन से अधिक जीवित पड़ोसी होते हैं, तो यह मृत हो जाता है।
यदि एक मृत कोशिका में तीन जीवित पड़ोसी होते हैं, तो यह जीवित हो जाता है।

इस खेल को एक जटिल बनावट के रूप में लागू करने के लिए, मैं बनावट को खेल के ग्रिड के रूप में व्याख्या करता हूं, और उपरोक्त नियमों के आधार पर शेडर रेंडर करता है। एक पारदर्शी पिक्सेल एक मृत कोशिका है, और एक सफेद अपारदर्शी पिक्सेल एक जीवित कोशिका है। एक इंटरैक्टिव कार्यान्वयन नीचे दिखाया गया है। GPU तक पहुंचने के लिए, मैं myr.js का उपयोग करता हूं , जिसके लिए WebGL 2 की आवश्यकता होती है । अधिकांश आधुनिक ब्राउज़र (उदाहरण के लिए, क्रोम और फ़ायरफ़ॉक्स) इसके साथ काम कर सकते हैं, लेकिन अगर डेमो काम नहीं करता है, तो सबसे अधिक संभावना है कि ब्राउज़र इसका समर्थन नहीं करता है। बनावट पर जीवित कोशिकाओं को खींचने के लिए माउस (या टच स्क्रीन) [मूल लेख में] का उपयोग करें।

टुकड़ा shader कोड (GLSL में, क्योंकि मैं प्रतिपादन के लिए WebGL का उपयोग करता हूं) नीचे दिखाया गया है। सबसे पहले, मैं get फ़ंक्शन को लागू करता हूं, जो मुझे वर्तमान एक से एक विशिष्ट ऑफसेट से एक पिक्सेल पढ़ने की अनुमति देता है। pixelSize वैरिएबल एक पूर्वनिर्धारित 2D वेक्टर है जिसमें प्रत्येक पिक्सेल की UV ऑफसेट होती है, और get फ़ंक्शन इसका उपयोग पड़ोसी सेल को पढ़ने के लिए करता है। फिर main कार्य वर्तमान स्थिति ( live ) और जीवित पड़ोसियों की संख्या के आधार पर सेल के नए रंग को निर्धारित करता है।

 uniform sampler2D source; uniform lowp vec2 pixelSize; in mediump vec2 uv; layout (location = 0) out lowp vec4 color; int get(int dx, int dy) { return int(texture(source, uv + pixelSize * vec2(dx, dy)).r); } void main() { int live = get(0, 0); int neighbors = get(-1, -1) + get(0, -1) + get(1, -1) + get(-1, 0) + get(1, 0) + get(-1, 1) + get(0, 1) + get(1, 1); if (live == 1 && neighbors < 2) color = vec4(0); else if (live == 1 && (neighbors == 2 || neighbors == 3)) color = vec4(1); else if (live == 1 && neighbors == 3) color = vec4(0); else if (live == 0 && neighbors == 3) color = vec4(1); else color = vec4(0); }

एक और सरल दृढ़ बनावट, रेत गिरने के साथ एक खेल है , जिसमें उपयोगकर्ता दृश्य पर रंगीन रेत फेंक सकता है, जो नीचे गिरता है और पहाड़ों का निर्माण करता है। हालांकि इसका कार्यान्वयन थोड़ा अधिक जटिल है, नियम सरल हैं:

यदि रेत के एक दाने के नीचे रेत नहीं है, तो यह एक पिक्सेल नीचे गिरता है।
यदि रेत के एक दाने के नीचे रेत है, लेकिन यह बाईं या दाईं ओर 45 डिग्री नीचे स्लाइड कर सकता है, तो वह ऐसा करेगा।

इस उदाहरण में प्रबंधन खेल "लाइफ" के समान है। चूंकि इस तरह के नियमों के तहत, प्रक्रिया को थोड़ा गति देने के लिए रेत केवल एक पिक्सेल प्रति फ्रेम की गति से गिर सकती है, इसलिए प्रति फ्रेम बनावट तीन बार अपडेट की जाती है। आवेदन का स्रोत कोड यहाँ है ।

एक कदम आगे

चैनल	आवेदन
लाल	लहर की ऊँचाई
ग्रीन	लहर की गति
नीला	उपयोग नहीं किया गया
अल्फा	उपयोग नहीं किया गया

चित्र 2: पिक्सेल तरंगें।

ऊपर दिए गए उदाहरण सीधे-सीधे बनावट का उपयोग करते हैं; इसकी सामग्री को स्क्रीन पर प्रस्तुत किया गया है जैसा कि यह है। यदि आप केवल पिक्सेल के रूप में छवियों की व्याख्या करते हैं, तो इस तकनीक के उपयोग की सीमाएं बहुत सीमित हैं, लेकिन आधुनिक उपकरणों के लिए धन्यवाद उनका विस्तार किया जा सकता है। पिक्सल्स को रंगों के रूप में गिनने के बजाय, मैं उन्हें कुछ अलग तरीके से समझाऊंगा, जिसका उपयोग किसी अन्य बनावट या 3 डी मॉडल के एनिमेशन बनाने के लिए किया जा सकता है।

सबसे पहले, मैं एक ऊंचाई के नक्शे के रूप में दृढ़ बनावट की व्याख्या करूंगा। बनावट पानी के विमान पर तरंगों और कंपन का अनुकरण करेगी, और परिणामों का उपयोग प्रतिबिंब और छायांकित तरंगों को प्रस्तुत करने के लिए किया जाएगा। अब हमें बनावट को एक छवि के रूप में पढ़ने की आवश्यकता नहीं है, इसलिए हम किसी भी जानकारी को संग्रहीत करने के लिए इसके पिक्सेल का उपयोग कर सकते हैं। पानी की छाया के मामले में, मैं तरंग की ऊंचाई को लाल चैनल में और ग्रीन चैनल में लहर की पल्स को स्टोर करूंगा, जैसा कि चित्र 2 में दिखाया गया है। नीले और अल्फा चैनल अभी तक उपयोग नहीं किए गए हैं। लहरों को एक गोलाकार बनावट पर लाल धब्बे बनाकर बनाया जाता है।

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

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

यह ध्यान देने योग्य है कि ऊपर दिखाए गए उदाहरण के दोषपूर्ण बनावट में पिक्सेल कभी-कभी बहुत छोटे मूल्यों को संग्रहीत करते हैं जो गोल त्रुटियों के कारण गायब नहीं होना चाहिए। इसलिए, इस बनावट के रंग चैनलों में एक उच्च रिज़ॉल्यूशन होना चाहिए, न कि मानक 8 बिट्स। इस उदाहरण में, मैंने प्रत्येक रंगीन चैनल का आकार 16 बिट तक बढ़ा दिया, जिससे काफी सटीक परिणाम मिले। यदि आप पिक्सेल संग्रहीत नहीं कर रहे हैं, तो आपको अक्सर बनावट की सटीकता बढ़ाने की आवश्यकता होती है। सौभाग्य से, आधुनिक ग्राफिक्स एपीआई इस सुविधा का समर्थन करते हैं।

हम सभी चैनल का उपयोग करते हैं

चैनल	आवेदन
लाल	एक्स ऑफ़सेट
ग्रीन	Y ऑफसेट
नीला	एक्स स्पीड
अल्फा	Y ऑफसेट

चित्र 3: पिक्सेल घास।

पानी के उदाहरण में, केवल लाल और हरे रंग के चैनलों का उपयोग किया जाता है, लेकिन अगले उदाहरण में, हम सभी चारों को लागू करेंगे। घास (या पेड़ों) के साथ एक क्षेत्र नकली है, जिसे कर्सर का उपयोग करके स्थानांतरित किया जा सकता है। चित्र 3 दिखाता है कि पिक्सेल में कौन सा डेटा संग्रहीत है। ऑफसेट लाल और हरे चैनलों में संग्रहीत किया जाता है, और गति नीले और अल्फा चैनलों में संग्रहीत की जाती है। इस गति को धीरे-धीरे लुप्त होती लहर गति के साथ आराम की स्थिति में स्थानांतरित करने के लिए अद्यतन किया जाता है।

पानी के साथ उदाहरण में, तरंगों का निर्माण काफी सरल है: बनावट पर धब्बे खींचे जा सकते हैं, और अल्फा सम्मिश्रण चिकनी आकृति प्रदान करता है। आप आसानी से कई ओवरलैपिंग स्पॉट बना सकते हैं। इस उदाहरण में, सब कुछ पेचीदा है क्योंकि अल्फा चैनल पहले से ही उपयोग में है। हम केंद्र से 1 और किनारे से 0 के अल्फा मान के साथ एक स्पॉट नहीं खींच सकते, क्योंकि इससे घास को एक अनावश्यक आवेग मिलेगा (चूंकि ऊर्ध्वाधर आवेग अल्फा चैनल में संग्रहीत होता है)। इस मामले में, एक अलग shader को लिखा गया था जो कि आकृतिक बनावट पर प्रभाव को आकर्षित करे। यह शेडर सुनिश्चित करता है कि अल्फा सम्मिश्रण अप्रत्याशित प्रभाव पैदा नहीं करता है।

आवेदन का स्रोत कोड यहां पाया जा सकता है ।

घास 2 डी में बनाई गई है, लेकिन प्रभाव 3 डी वातावरण में काम करेगा। पिक्सेल विस्थापन के बजाय, कोने को स्थानांतरित कर दिया जाता है, जो तेज भी है। इसके अलावा, चोटियों की मदद से, एक और प्रभाव महसूस किया जा सकता है: शाखाओं की अलग-अलग ताकत - घास थोड़ी सी हवा के साथ आसानी से झुक जाती है, और मजबूत पेड़ केवल तूफानों के दौरान उतार-चढ़ाव करते हैं।

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

अन्य उपयोग के मामले और दोष

आप प्रौद्योगिकी के कई अन्य अनुप्रयोगों के साथ आ सकते हैं, उदाहरण के लिए:

एक दृढ़ बनावट का उपयोग करके, आप हवा की गति का अनुकरण कर सकते हैं। बनावट पर, आप उन बाधाओं को आकर्षित कर सकते हैं जो हवा को उनके चारों ओर जाते हैं। कण (बारिश, बर्फ और पत्तियां) इस बनावट का उपयोग बाधाओं के चारों ओर उड़ने के लिए कर सकते हैं।
आप धुएं या आग के प्रसार का अनुकरण कर सकते हैं।
बनावट बर्फ या रेत की एक परत की मोटाई को एन्कोड कर सकती है। परत के साथ निशान और अन्य इंटरैक्शन परत पर डेंट्स और प्रिंट बना सकते हैं।

इस पद्धति का उपयोग करते समय, कठिनाइयाँ और सीमाएँ हैं:

फ्रेम दर बदलने के लिए एनिमेशन को समायोजित करना कठिन है। उदाहरण के लिए, गिरते रेत के साथ एक आवेदन में, रेत के अनाज एक स्थिर गति से गिरते हैं - प्रति अपडेट एक पिक्सेल। एक संभावित समाधान निरंतर आवृत्ति के साथ दृढ़ बनावट को अद्यतन करने के लिए हो सकता है, जो कि अधिकांश भौतिक इंजनों के समान है; भौतिकी इंजन एक निरंतर आवृत्ति पर चलता है, और इसके परिणाम प्रक्षेपित होते हैं।
जीपीयू में डेटा ट्रांसफर करना एक त्वरित और आसान प्रक्रिया है, हालांकि, डेटा वापस पाना इतना आसान नहीं है। इसका मतलब यह है कि इस तकनीक द्वारा उत्पन्न अधिकांश प्रभाव अप्रत्यक्ष हैं; वे GPU में स्थानांतरित हो गए हैं, और GPU आगे के हस्तक्षेप और प्रतिक्रिया के बिना अपना काम करता है। अगर मैं भौतिक गणना में पानी के उदाहरण से तरंग दैर्ध्य को एम्बेड करना चाहता था (उदाहरण के लिए, ताकि जहाज लहरों के साथ-साथ दोलन कर सकें), तो मुझे दृढ़ बनावट से मूल्यों की आवश्यकता होगी। GPU से बनावट डेटा पुनर्प्राप्त करना एक भयानक धीमी प्रक्रिया है जिसे वास्तविक समय में करने की आवश्यकता नहीं है। इस समस्या का समाधान दो सिमुलेशन का कार्यान्वयन हो सकता है: एक पानी के ग्राफिक्स के लिए एक उच्च संकल्प के साथ एक दृढ़ बनावट के रूप में, दूसरा पानी के भौतिकी के लिए सीपीयू में कम संकल्प के साथ। यदि एल्गोरिदम समान हैं, तो विसंगतियां काफी स्वीकार्य हो सकती हैं।

इस लेख में डेमो आगे अनुकूलित किया जा सकता है। घास के उदाहरण में, आप ध्यान देने योग्य दोषों के बिना बहुत कम रिज़ॉल्यूशन वाली बनावट का उपयोग कर सकते हैं; इससे बड़े दृश्यों में बहुत मदद मिलेगी। एक और अनुकूलन: आप कम ताज़ा दर का उपयोग कर सकते हैं, उदाहरण के लिए, प्रत्येक चौथे फ्रेम में, या एक चौथाई प्रति फ्रेम (क्योंकि यह तकनीक खंडित अपडेट के साथ समस्याओं का कारण नहीं है)। एक चिकनी फ्रेम दर बनाए रखने के लिए, अवक्षेपित बनावट की पिछली और वर्तमान स्थिति को प्रक्षेपित किया जा सकता है।

चूंकि दृढ़ पाठ आंतरिक आंतरिक बफरिंग का उपयोग करते हैं, आप प्रतिपादन के लिए एक ही समय में दोनों बनावट का उपयोग कर सकते हैं। प्राथमिक बफर वर्तमान स्थिति है, और माध्यमिक पिछले एक है। यह समय के साथ बनावट को प्रक्षेपित करने या बनावट मूल्यों के लिए कंप्यूटिंग डेरिवेटिव के लिए उपयोगी हो सकता है।

निष्कर्ष

जीपीयू, विशेष रूप से 2 डी कार्यक्रमों में, अक्सर निष्क्रिय होते हैं। हालांकि ऐसा लगता है कि इसका उपयोग केवल जटिल 3 डी दृश्यों को प्रस्तुत करने में किया जा सकता है, इस लेख में प्रदर्शित तकनीक GPU की शक्ति का उपयोग करने के कम से कम एक अन्य तरीके को दिखाती है। उन क्षमताओं का उपयोग करना जिनके लिए GPU विकसित किया गया था, आप दिलचस्प प्रभावों और एनिमेशन को लागू कर सकते हैं जो आमतौर पर सीपीयू के लिए बहुत महंगा हैं।