WebGL- विंड और GPU प्रोग्रामिंग। 2018 FrontTalks पर व्याख्यान

वेब पेज पर जटिल ग्राफिक्स के प्रतिपादन के लिए, वेब ग्राफिक्स लाइब्रेरी है, जिसे वेबलॉग के रूप में संक्षिप्त किया गया है। इंटरफ़ेस डिजाइनर दिमित्री वासिलिव ने एक लेआउट डिजाइनर के दृष्टिकोण से GPU प्रोग्रामिंग के बारे में बात की थी, इस बारे में कि वेबलॉग क्या है और हमने इस तकनीक का उपयोग करके बड़े मौसम डेटा की कल्पना करने की समस्या को कैसे हल किया।


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

_{^{स्लाइड से लिंक करें}}

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



तब काम और अधिक दिलचस्प शुरू हुआ। हमारी मौसम सेवाओं के रीडिजाइन में भाग लिया। डेस्कटॉप, व्हीलचेयर।





हमने मानक पूर्वानुमानों को क्रम में रखने के बाद, हमने उस पूर्वानुमान को बनाने का फैसला किया जो किसी के पास नहीं है। यह पूर्वानुमान प्रदेशों में वर्षा की गति के लिए पूर्वानुमान था।



विशेष मौसम रडार हैं जो 2000 किमी के दायरे में वर्षा का पता लगाते हैं, वे उनके घनत्व और उनसे दूरी को जानते हैं।



इस डेटा का उपयोग करना और मशीन की मदद से उनके आगे के आंदोलन की भविष्यवाणी करने के साथ, हमने मानचित्र पर इस तरह का दृश्य बनाया। आप आगे-पीछे हो सकते हैं।

_{^{स्लाइड से लिंक करें}}

हमने लोगों की समीक्षाओं को देखा। लोगों ने इसे पसंद किया। सभी प्रकार के मेमे दिखाई देने लगे, और जब मास्को में नरक में बाढ़ आ रही थी, तब शांत तस्वीरें थीं।

चूंकि सभी को प्रारूप पसंद था, हमने आगे बढ़ने का फैसला किया और निम्नलिखित पूर्वानुमान को हवा में समर्पित किया।



पवन पूर्वानुमान दिखाने वाली सेवाएँ पहले से ही हैं। यह उत्तम दर्जे का एक जोड़ा है जो बाहर खड़ा है।



उन्हें देखते हुए, हमने महसूस किया कि हम ऐसा ही करना चाहते हैं - या कम से कम बदतर नहीं।

इसलिए, हमने उन कणों की कल्पना करने का फैसला किया जो हवा की गति के आधार पर नक्शे पर आसानी से चलते हैं, और कुछ प्रकार के लूप को पीछे छोड़ देते हैं ताकि उन्हें देखा जा सके, हवा का मार्ग देखा जा सके।

चूंकि हम पहले से ही महान हैं और 2D कैनवास का उपयोग करके वर्षा के साथ एक अच्छा नक्शा बनाते हैं, इसलिए हमने कणों के साथ भी ऐसा करने का फैसला किया।



डिजाइनर के साथ परामर्श करने के बाद, हमने महसूस किया कि हमें लगभग 6% स्क्रीन को कणों के साथ भरने के लिए एक शांत प्रभाव पड़ता है।

मानक दृष्टिकोण का उपयोग करके ऐसे कई कणों को खींचने के लिए, हमारे पास न्यूनतम समय 5 एमएस था।



यदि आपको लगता है कि हमें अभी भी कणों को स्थानांतरित करने और कुछ प्रकार की सुंदरता लाने की आवश्यकता है जैसे कि कणों की पूंछ को खींचना, तो हम मान सकते हैं कि हम प्रति सेकंड कम से कम 25 फ्रेम का उत्पादन करने के लिए चिकनी एनीमेशन दिखाने के लिए न्यूनतम 40 एमएस के समय के लिए बाहर गिर जाएंगे।

समस्या यह है कि यहां हर कण को ​​क्रमिक रूप से संसाधित किया जाएगा। लेकिन क्या होगा अगर आप उन्हें समानांतर में संसाधित करते हैं?

केंद्रीय और ग्राफिक प्रोसेसर के संचालन के बीच एक स्पष्ट अंतर "लीजेंड डेस्ट्रॉयर" द्वारा एक सम्मेलन में दिखाया गया था। उन्होंने एक मशीन निकाली जिस पर एक पेंटबॉल मार्कर स्थापित किया गया था, जिसका कार्य एक रंग में एक स्माइली खींचना था। लगभग 10 सेकंड में, उन्होंने ऐसी तस्वीर खींची। ( वीडियो का लिंक - लगभग)







फिर लोगों ने एक डोंगी निकाली, जो एक जीपीयू है, और मोना लिसा के रूप में चित्रित कुछ थूक। यह सीपीयू और जीपीयू की गणना की गति अलग है।











एक ब्राउज़र में ऐसी सुविधाओं का लाभ उठाने के लिए, WebGL तकनीक का आविष्कार किया गया था।

यह क्या है इस सवाल के साथ, मैं इंटरनेट पर चढ़ गया। कण एनीमेशन और हवा के साथ कुछ शब्दों को जोड़कर, मुझे कुछ लेख मिले।

_{^{स्लाइड से लिंक: पहला , दूसरा}}

उनमें से एक व्लादिमीर एगाफोंकिन का एक डेमो है, जो मैपबॉक्स के एक इंजीनियर हैं, जिन्होंने वेबजीएल पर हवा बनाई और क्रिस वेल्स के ब्लॉग को संदर्भित किया, जिन्होंने GPU पर कणों के राज्य को स्थानांतरित करने और संग्रहीत करने के तरीके के बारे में बात की।

हम लेते हैं और नकल करते हैं। हम ऐसे परिणाम की उम्मीद करते हैं। यहां कण सुचारू रूप से चलते हैं।



हमें समझ नहीं आता कि क्या।



कोड का पता लगाने की कोशिश की जा रही है। सुधार करना, फिर से एक असंतोषजनक परिणाम प्राप्त करना। हम और भी गहरे चढ़ते हैं - हमें हवा के बजाय बारिश मिलती है।



ठीक है, हम इसे स्वयं करने का निर्णय लेते हैं।



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



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



ठीक है, हम पुराने सिद्ध किए गए वेबजीएल 1 का उपयोग करने का निर्णय लेते हैं, जिसमें ओपेरा मिनी के अलावा अच्छा समर्थन है, जिसकी किसी को जरूरत नहीं है।



WebGL एक दो-घटक चीज़ है। यह जेएस है जो ग्राफिक्स कार्ड पर चलने वाले कार्यक्रमों की स्थिति को निष्पादित करता है। और ऐसे घटक हैं जो सीधे ग्राफिक्स कार्ड पर चलते हैं।

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



इसलिए, WebGL के साथ काम करते समय, आपको संदर्भ के नुकसान को भी सुनना चाहिए और इसे पुनर्प्राप्त करने में सक्षम होना चाहिए। इसलिए, मैंने इस बात पर जोर दिया कि यह init है।



इसके अलावा, जेएस का सारा काम जीपीयू पर चलने वाले कार्यक्रमों को इकट्ठा करने, उन्हें ग्राफिक्स कार्ड भेजने, कुछ मापदंडों को निर्धारित करने और "ड्रा" कहने से उबलता है।



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



हम वीडियो कार्ड पर जो भी प्रदर्शन करते हैं, उसे चालू करते हैं - एक प्रोग्राम जिसमें सी-लाइक भाषा GLSL में लिखे निर्देशों के दो सेट होते हैं। इन निर्देशों को वर्टेक्स शेडर और फ्रेग्मेंट शेडर कहा जाता है। उनकी जोड़ी से एक कार्यक्रम बनाया जाता है।



इन शेड्स के बीच अंतर क्या है? शीर्ष shader सतह सेट करता है जिस पर कुछ खींचा जाना चाहिए। आदिम सेट होने के बाद, जिसे ऊपर चित्रित किया जाना चाहिए, इस सीमा में गिरने वाले टुकड़े को कहा जाता है।





कोड में, यह इस तरह दिखता है। शेडर के पास वैरिएबल घोषित करने के लिए एक खंड है जो जेएस से बाहरी रूप से सेट किया गया है, उनका प्रकार और नाम निर्धारित किया गया है। साथ ही मुख्य खंड, जो इस पुनरावृत्ति के लिए आवश्यक कोड निष्पादित करता है।

ज्यादातर मामलों में एक वर्टिकल शेडर से यह उम्मीद की जाती है कि वह gl_Position चर को चार-आयामी अंतरिक्ष में कुछ समन्वय के लिए सेट कर सकता है। यह x, y, z और अंतरिक्ष की चौड़ाई है, जो कि इस समय जानना बहुत आवश्यक नहीं है।

टुकड़ा shader एक विशिष्ट पिक्सेल का रंग सेट करने की अपेक्षा करता है।

इस उदाहरण में, हमारे पास जुड़ा हुआ बनावट से चयनित पिक्सेल रंग है।



इसे जेएस को हस्तांतरित करने के लिए, केवल चर के स्रोत कोड को चर में लपेटें।



इसके अलावा इन चर को shaders में बदल दिया जाता है। यह एक WebGL संदर्भ है, हम स्रोत कोड से शेड बनाते हैं, समानांतर में एक प्रोग्राम बनाते हैं, और हम प्रोग्राम को कुछ जोड़े देते हैं। हमें एक व्यावहारिक कार्यक्रम मिलता है।

रास्ते में, हम सत्यापित करते हैं कि शेड्स का संकलन सफल था, कि कार्यक्रम सफलतापूर्वक बनाया गया था। हम कहते हैं कि आपको इस कार्यक्रम का उपयोग करने की आवश्यकता है, क्योंकि विभिन्न प्रतिपादन मूल्यों के लिए कई कार्यक्रम हो सकते हैं।

इसे सेट करें और ड्रा कहें। यह किसी तरह की तस्वीर निकलता है।



गहरा चढ़ गया। शीर्ष shader में, सभी गणना -1 से 1 तक अंतरिक्ष में की जाती हैं, भले ही आपका आउटपुट पॉइंट किस आकार का हो। उदाहरण के लिए, -1 से 1 तक की जगह पूरी स्क्रीन 1920x1080 पर कब्जा कर सकती है। स्क्रीन के केंद्र में एक त्रिकोण खींचने के लिए, आपको एक सतह खींचनी होगी जो समन्वय 0, 0 को कवर करती है।



टुकड़ा shader 0 से 1 तक अंतरिक्ष में काम करता है, और रंग चार घटकों द्वारा प्रदर्शित किए जाते हैं: आर, जी, बी, अल्फा।

एक उदाहरण के रूप में CSS का उपयोग करते हुए, आप प्रतिशत का उपयोग करते समय एक समान रंग संकेतन में आ सकते हैं।



कुछ आकर्षित करने के लिए, आपको यह कहना होगा कि किन आंकड़ों को खींचने की आवश्यकता है। विशेष रूप से एक त्रिभुज के लिए, हम तीन कोणों के टाइप किए गए सरणी को परिभाषित करते हैं, प्रत्येक में तीन घटक होते हैं, x, y और पर्याप्त।

इस मामले के लिए, वर्टेक्स शेडर को वर्तमान जोड़ी के अंक, निर्देशांक प्राप्त करने के साथ-साथ स्क्रीन पर इस समन्वय को स्थापित करने जैसा दिखता है। यहां, जैसा कि यह है, परिवर्तनों के बिना, हमने स्क्रीन पर एक बिंदु रखा।



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



हम जेएस पास करते हैं। हम समान शेड्स को वेरिएबल्स में असाइन करते हैं और एक फ़ंक्शन घोषित करते हैं जो इन शेड्स को बनाएंगे। यही है, एक shader बनाया जाता है, स्रोत इसमें डाला जाता है, और फिर संकलित किया जाता है।



हम दो शेड, वर्टेक्स और टुकड़ा बनाते हैं।



उसके बाद, एक प्रोग्राम बनाएं, पहले से संकलित छायांकन को अपलोड करें। हम कार्यक्रम को बांधते हैं क्योंकि शेड एक दूसरे के बीच चर का आदान-प्रदान कर सकते हैं। और इस स्तर पर, इन चरों के आदान-प्रदान के प्रकारों के पत्राचार की जाँच की जाती है।

हम कहते हैं कि इस कार्यक्रम का उपयोग करें।



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

इस बफर से पढ़ने के लिए नियमों को स्थापित करना भी आवश्यक है। यह देखा जा सकता है कि हमने छह तत्वों की एक सरणी निर्दिष्ट की है, लेकिन कार्यक्रम को यह समझाने की आवश्यकता है कि प्रत्येक शीर्ष में दो घटक होते हैं, जिनमें से एक फ्लोट है, यह अंतिम पंक्ति में किया जाता है।



रंग सेट करने के लिए, प्रोग्राम u_color चर के लिए पता खोजता है और इस चर के लिए मान सेट करता है। हम रंग लाल, 255, 0.8 हरे, 0 नीले और एक पूरी तरह से अपारदर्शी पिक्सेल सेट करते हैं - यह पीला हो जाता है। और हम कहते हैं कि इस प्रोग्राम को ट्राइएंगल प्राइमेटिव्स का उपयोग करके निष्पादित करें, WebGL में आप पॉइंट्स, लाइन्स, ट्राइएंगल, कॉम्प्लेक्स शेप के त्रिकोण और इतने पर ड्रॉ कर सकते हैं। और तीन चोटियाँ बनाते हैं।



आप यह भी निर्दिष्ट कर सकते हैं कि जिस सरणी पर हम प्रतिपादन कर रहे हैं, उसे शुरू से ही गिना जाना चाहिए।

_{^{स्लाइड से लिंक करें}}

यदि आप उदाहरण को थोड़ा जटिल करते हैं, तो आप कर्सर स्थिति पर एक रंग निर्भरता जोड़ सकते हैं। उसी समय, एफपीएस छत से गुजरता है।



दुनिया भर में कणों को आकर्षित करने के लिए, आपको इस दुनिया में हर बिंदु पर हवा की गति को जानना होगा।

विस्तार करने और किसी तरह नक्शे को स्थानांतरित करने के लिए, आपको कंटेनर बनाने की ज़रूरत है जो मानचित्र की वर्तमान स्थिति से मेल खाती है।

कणों को स्वयं स्थानांतरित करने के लिए, आपको एक डेटा प्रारूप के साथ आने की आवश्यकता है जिसे GPU का उपयोग करके अपडेट किया जा सकता है। ड्राइंग खुद बनाएं और लूप को ड्रा करें।



हम सभी डेटा बनावट के माध्यम से करते हैं। हम क्षैतिज और ऊर्ध्वाधर गति निर्धारित करने के लिए 22 चैनलों का उपयोग करते हैं, जहां शून्य हवा की गति रंग सीमा के मध्य से मेल खाती है। यह लगभग 128 है। चूंकि गति नकारात्मक और सकारात्मक हो सकती है, इसलिए हम रेंज के मध्य के सापेक्ष रंग सेट करते हैं।

यह इस तरह की तस्वीर निकलता है।



इसे कार्ड पर लोड करने के लिए, हमें इसे काटने की आवश्यकता है। चित्र को मानचित्र से जोड़ने के लिए, हम मानक Yandex.Map परत उपकरण का उपयोग करेंगे, जिसमें हम उस पते का निर्धारण करते हैं जिसमें से टाइलों को काटना है, और इस परत को मानचित्र में जोड़ना है।

_{^{स्लाइड से लिंक करें}}

हमें एक तस्वीर मिलती है जहां अप्रिय हरे रंग की हवा की गति कोडित होती है।



अगला, आपको एक ऐसी जगह प्राप्त करने की आवश्यकता है जहां हम एनीमेशन को स्वयं आकर्षित करेंगे, जबकि इस स्थान को मानचित्र के निर्देशांक, इसके आंदोलनों और अन्य कार्यों के अनुरूप होना चाहिए।

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

_{^{स्लाइड से लिंक करें}}

इसलिए, हमने फलक का उपयोग किया, ये लेआउट के लिए कंटेनर हैं, और हमारे कैनवास को वहां जोड़ा गया है, जिसमें से हमने पहले से ही आवश्यक संदर्भ लिया।



किसी तरह से स्क्रीन पर कणों को व्यवस्थित करने और उन्हें स्थानांतरित करने में सक्षम होने के लिए, बनावट में कणों की स्थिति का प्रारूप इस्तेमाल किया गया था।

यह कैसे काम करता है? अनुकूलन के लिए एक वर्ग बनावट बनाई जाती है, और यहाँ इसके पक्ष का आकार ज्ञात है।



कणों को क्रम में खींचने और कण के क्रम संख्या और बनावट के आकार को जानने के द्वारा जिसमें वे संग्रहीत हैं, आप एक विशिष्ट पिक्सेल की गणना कर सकते हैं जिसमें वास्तविक स्क्रीन पर स्थिति एन्कोडेड है।





शेडर में, यह प्रदान किए गए सूचकांक, बनावट को कणों की वर्तमान स्थिति और पक्ष के आकार के साथ पढ़ने जैसा दिखता है। अगला, हम इस कण के लिए x, y निर्देशांक निर्धारित करते हैं, इस मान को पढ़ें और इसे डीकोड करें। यह किस तरह का जादू है: आरजी / 255 + बा?

कणों की स्थिति के लिए हम 20 डबल चैनलों का उपयोग करते हैं। कलर चैनल का मान 0 से 255 तक है, और 1080 स्क्रीन के लिए हम कणों को स्क्रीन की किसी भी स्थिति में थोड़ा सा नहीं डाल सकते हैं, क्योंकि हम कण को ​​अधिकतम 255 पिक्सेल पर रख सकते हैं। इसलिए, एक चैनल में हम इस बात का ज्ञान रखते हैं कि किसी कण ने कितनी बार 255 पिक्सल पार किए हैं, और दूसरे चैनल में हम यह मान लेते हैं कि यह कितने समय बाद गुजरा है।

इसके बाद, वर्टेकर शेडर को इन मानों को अपने कार्य स्थान पर परिवर्तित करना होगा, अर्थात -1 से 1 तक, और इस बिंदु को डिस्प्ले पर सेट करें।



हमारे कणों को देखने के लिए, बस उन्हें सफेद रंग से रंग दें। जीएलएसएल में ऐसी चीनी होती है कि यदि हम एक चर के प्रकार को परिभाषित करते हैं और इसे एक स्थिरांक में पास करते हैं, तो यह स्थिरांक सभी चार घटकों पर वितरित किया जाएगा, उदाहरण के लिए।



इस तरह के कार्यक्रम को तैयार करने के बाद, हम समान वर्गों का एक सेट देखते हैं। आइए उनके साथ सुंदरता जोड़ने की कोशिश करें।



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



इसके अलावा, वर्गों को न खींचने के लिए, टुकड़े टुकड़े करने वाले में हमने रेडियस के बाहर गिरने वाले सभी पिक्सेल काट दिए, जो कि उत्कीर्ण सर्कल के त्रिज्या में शामिल नहीं हैं। यानी हमारा शेडर ऐसी चीज में बदल जाता है।



हम केंद्र से प्रदान किए गए पिक्सेल की दूरी की गणना करते हैं। यदि यह आधे स्थान से अधिक है, तो हम इसे नहीं दिखाते हैं।



हमें और अधिक विविध चित्र मिलते हैं।

अगला, आपको किसी तरह इन चीजों को स्थानांतरित करने की आवश्यकता है। चूंकि WebGL 1 को यह नहीं पता है कि किसी चीज़ की गणना कैसे करें, सीधे डेटा के साथ काम करें, हम प्रोग्राम को विशेष घटकों, फ्रेम बफ़र्स में रेंडर करने की क्षमता का लाभ उठाएंगे।

फ़्रेम बफ़र्स को मैप किया जा सकता है, उदाहरण के लिए, बनावट को अद्यतन किया जा सकता है। यदि फ्रेम बफर घोषित नहीं किया गया है, तो डिफ़ॉल्ट रूप से ड्राइंग स्क्रीन पर किया जाता है।

आउटपुट को एक स्थिति बनावट से दूसरे स्थान पर स्विच करना, हम उन्हें एक-एक करके अपडेट कर सकते हैं और फिर उन्हें रेंडर करने के लिए उपयोग कर सकते हैं।





स्थिति को अपडेट करने की प्रक्रिया स्वयं इस तरह दिखती है: वर्तमान स्थिति पढ़ें, इसे वर्तमान वेग वेक्टर में जोड़ें और इसे जोड़ें, इसे एक नए रंग में एन्कोड करें।



कोड में, यह वर्तमान स्थिति को पढ़ने, डिकोडिंग, वर्तमान गति को पढ़ने, गति को सामान्य करने, दो घटकों को मोड़ने, रंग में कोडिंग करने जैसा दिखता है।



यह इस तरह की तस्वीर निकलता है। कणों की स्थिति लगातार बदल रही है, और किसी प्रकार का एनीमेशन दिखाई देता है।

यदि आप 5-10 मिनट के लिए ऐसा एनीमेशन चलाते हैं, तो यह स्पष्ट हो जाएगा कि सभी कण अपने अंतिम गंतव्य पर पहुंच जाएंगे। वे सभी फ़नल में स्लाइड करते हैं। आपको ऐसी तस्वीर मिलती है।



इससे बचने के लिए, हम एक यादृच्छिक स्थान पर कण क्रमचय का एक कारक पेश करते हैं।

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



इस उदाहरण में, हम कण की अनुमानित स्थिति, यादृच्छिक स्थिति की गणना करते हैं, और रीसेट कारक के आधार पर या तो एक या दूसरे का चयन करते हैं।

_{^{स्लाइड से लिंक: पहला , दूसरा , तीसरा , चौथा}}

, , . , WebGL, . Khronos, , , .



— . , , , , , , , .



.





WebGL 2D canvas, . 64 . 2D canvas, 25 , WebGL 0,3 . .

, WebGL , , .

, , , - break points, - , . WebGL — .



, . , Firefox «», WebGL-, , , . , .



, , Spector.js. canvas WebGL- canvas, .



. , , , WebGL, , . .