एक एनीमेशन की कहानी

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



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

धुंधयुक्त कांच के पीछे कोबवे

किसी तरह मैं बैठ गया और एक महत्वपूर्ण परियोजना पर काम किया। फिर स्टूडियो से डिजाइनर कॉल करता है, जिसमें विशेष प्रभाव बहुत शौकीन होते हैं, और पूछता है: "क्या आप एक कोबवे बना सकते हैं, जैसे कि फॉग्ड ग्लास के पीछे?"

यह, ज़ाहिर है, पूरी समस्या का तुरंत वर्णन करता है। जैसा कि बाद में पता चला, धुंधले कांच के पीछे "कॉबवेब" यह था।



यह एक हेक्सागोनल ग्रिड है, लेकिन डिजाइनर के लिए, किसी कारण से, एक "मकड़ी का जाल।" मिस्ड ग्लास - यह ग्रिड दूरी में जाता है। संचार कठिनाइयों। कल्पना कीजिए कि अंतर्मुखी होना और एनिमेशन बनाना कितना कठिन है? लेकिन मैं ऐसा ही कर रहा हूं और मैं यही कर रहा हूं।

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

इस एनीमेशन वाली साइट पर "स्पाइडर वेब" के लिए कई और विकल्प थे: शीर्ष पर एक ग्रे पृष्ठभूमि पर, नीचे एक सफेद पर। इसे इंटरैक्टिव बनाने के लिए आवश्यक था ताकि यह उपयोगकर्ता के माउस के आंदोलन का जवाब दे।

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

मुझे अजीब कारनामों में शामिल होना पसंद है, क्योंकि जब मैं ऐसा करता हूं, तो मैं आमतौर पर पीड़ित होता हूं।

दुख के माध्यम से विकास होता है। यह अनिवार्य रूप से दुख के साथ जुड़ा हुआ है - आप हर चीज से खुश नहीं रह सकते हैं, खुशी से रह सकते हैं, और एक ही समय में पेशेवर रूप से विकसित हो सकते हैं।

Three.js

मैं तुरंत सोचने लगा कि समस्या को कैसे हल किया जाए। चूँकि यह 3 डी में था, मुझे थ्री.जेएस याद था। यह सभी सम्मेलनों में चर्चित सबसे लोकप्रिय पुस्तकालय है। यह लाइब्रेरी वेबलॉग को सरल बनाता है, सिर्फ देशी WebGL की तुलना में अधिक सुविधाजनक और सुखद।

तीन.js में कई तैयार वस्तुएं हैं। प्लेनजोमेट्री पहली वस्तु है जो मुझे एकदम सही लगती है। यह एक आदिम विमान है। पुस्तकालय में सभी प्रकार के हेक्सागोन्स, डोडेकेहेड्रॉन, आइसोसाएड्रोन, सिलेंडर हैं, लेकिन कई त्रिभुजों से एक सरल विमान है।


कई त्रिकोण हैं, क्योंकि मुझे विस्तृत तरंगों की आवश्यकता है - सतह को चिंता करनी चाहिए।

यदि आप थ्री। जेएस के अंदर देखते हैं, तो वास्तव में यह विमान एक साधारण जेएस-ऑब्जेक्ट है जिसमें अंकों के सभी निर्देशांक हैं।



मेरे मामले में, मेरे पास 50 × 50 वर्ग के विमान हैं, इसलिए मुझे 2601 कोने की आवश्यकता थी। 50 × 50 = 2601 क्यों? यह स्कूल का गणित है। समन्वय z = 0, क्योंकि विमान, y = 1, क्योंकि यह 50 टुकड़ों के कोने की पहली पंक्ति है, और एक्स बदलता है।

लेकिन मुझे विमान की आवश्यकता क्यों है, क्या मुझे इसे किसी तरह से मोड़ने की आवश्यकता है? पहली चीज़ जो आप किसी सरणी के साथ कर सकते हैं, वह है उस पर गणितीय कार्य करना। उदाहरण के लिए, for each लूप के माध्यम से जाएं और x समन्वय के साइन मान के लिए z-निर्देशांक असाइन करें।



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

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

यादृच्छिकता का सार यह है कि यह यादृच्छिक और स्वतंत्र है। प्रत्येक यादृच्छिक शीर्ष किसी भी तरह से अपने पड़ोसियों पर निर्भर नहीं करता है। यादृच्छिक में, कोई पैरामीटर पारित नहीं किया जाता है, यह पड़ोसियों के बारे में परवाह नहीं करता है।



परिणाम एक टूटी हुई वक्र है जो समुद्र या वेब से केवल दूर से मिलता जुलता है। "हैकर्स" और साइबर चोरी के बारे में एक फिल्म के लिए चित्रण के रूप में अधिक उपयुक्त है।

यदि आप स्क्रीन पर प्रत्येक बिंदु के दृष्टिकोण से यादृच्छिक रूप से देखते हैं, तो यह सफेद शोर जैसा दिखता है - बहुत छोटे सफेद और काले डॉट्स। प्रत्येक बिंदु काला और सफेद है - 0 या 1।

लेकिन लहरों का सागर बनाने के लिए मुझे जो कुछ चाहिए वह इस तरह दिखना चाहिए।


यह कोहरे, और बादलों और पहाड़ों जैसा दिखता है।

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

जब रैंडम मैप्स "हीरोज ऑफ माइट्स एंड मैजिक III" (30 से अधिक लोगों के लिए) या रणनीतियों में उत्पन्न होते हैं। आप आमतौर पर कुछ समान देख सकते हैं। यह हमेशा वही फ़ंक्शन होता है जो इन शोरों को वापस करता है।

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



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


काली और सफेद बस ऊँचाई है: 0 काली घाटियाँ हैं, 1 सफेद चोटियाँ हैं। यह एक लहराती सतह में बदल जाता है।

यह फ़ंक्शन सभी पीएल पर है क्योंकि यह सिर्फ एक एल्गोरिथ्म है - साइन, कॉज़नेस, गुणा।

मैं अपने PlaneGeometry ऑब्जेक्ट के सभी कोने से गुजरते हुए विरूपण को उसी तरह कर सकता हूं, जो शोर फ़ंक्शन के प्रत्येक मान को असाइन करता है:

 geometry.vertices.forEach(v => { vz = noise(vx, vy, time); }); 

फ़ंक्शन केवल 30-40 लाइनें लेता है, लेकिन गणितीय रूप से जटिल है।

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

Three.js! == जीपीयू

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



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

यह पता चला कि शोर फ़ंक्शन, जो 2600 बार बदल गया, पहले से ही मेरे कंप्यूटर पर फ्रेम का 2/3 लेता है। और यह पूरा फ्रेम नहीं है। एनिमेशन विकसित करते समय, यह पहले से ही एक लाल झंडा है।

किसी भी एनिमेशन को आधे से अधिक फ्रेम पर कब्जा नहीं करना चाहिए।

यदि अधिक है, तो किसी भी इंटरैक्शन, किसी भी बटन, किसी भी माउसओवर के दौरान फ्रेम को खोने का एक उच्च जोखिम है।

इसलिए, यह एक कठिन लाल झंडा था। मैंने महसूस किया कि तीन.जेएस जरूरी नहीं कि वेबजीएल हो। इस तथ्य के बावजूद कि मैं थ्री.जैस का उपयोग कर रहा था, मैंने 3 डी में सब कुछ आकर्षित किया, इसे वेबजीएल में प्रस्तुत किया गया था, मुझे वेबजीएल से शानदार प्रदर्शन नहीं मिला। मेरे पास केवल 2,600 कोने हैं - यह WebGL के लिए पर्याप्त नहीं है। उदाहरण के लिए, प्रत्येक मानचित्र पर हजारों वस्तुएं होती हैं, जिनमें से प्रत्येक में दर्जनों त्रिकोण होते हैं। पैमाने का अनुमान करें: सैकड़ों हजारों सामान्य हैं, लेकिन केवल 2600 चोटियां हैं।

वर्टेक्स शेडर

फ्रेम के साथ एक समस्या के बाद, मुझे पता चला कि शेड हैं। उनमें से केवल दो प्रकार हैं:

• वर्टेक्स शेडर;
  
• घर्षण करने वाला।
  

मुझे वर्टेक्स शेदर - वर्टेक्स शेडर में दिलचस्पी थी। यदि हम इस पर एनीमेशन को फिर से लिखते हैं, तो यह इस तरह दिखता है:

 position.z = noise( vec3(position.x, position.y, time) ); 

Position.z - घटक z अपने डेटा प्रकारों के साथ प्रत्येक बिंदु का निर्देशांक करता है। vec3 इंगित करता है कि तीन पैरामीटर होंगे।

शेडर में कोई लूप नहीं है।

इससे पहले, स्क्रिप्ट में, मैंने for each लूप के for each रखा, और प्रत्येक शीर्ष के लिए, गणना एक लूप में हुई। शेड्स और नॉन-शेडर्स के बीच का अंतर एक चक्र की अनुपस्थिति है।

शेडर - यह चक्र है।

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

मुख्य प्रोसेसर सीपीयू के विपरीत, वीडियो कार्ड पर GPU का एक बड़ा कोर है। प्रोसेसर पर उनमें से बहुत कम हैं, लेकिन यह तेजी से सार्वभौमिक गणना करने में सक्षम है। वीडियो कार्ड पर बहुत सरल गणनाएं उपलब्ध हैं, लेकिन कई कोर हैं, इसलिए यह आपको कई गणनाओं को समानांतर करने की अनुमति देता है। यह आमतौर पर shaders में होता है। वर्टेक्स शेडर का अर्थ यह है कि शोर की गणना वीडियो कार्ड पर शेडर में 2600 कोने के समानांतर की जाएगी।

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



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

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


परिणाम एक ऐसी सतह है - यह सामान्य पेर्लिन-शोर है। यदि आप इसे शुरू करते हैं और केवल समय बदलते हैं, तो ठंडी लहरें प्राप्त होती हैं।

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



पहली नज़र में, आपको क्या चाहिए! लेकिन केवल पहली बार में। यह मेरे अनुकूल नहीं था, क्योंकि क्रिप्टोक्यूरेंसी साइट के लिए एनीमेशन की आवश्यकता थी - सब कुछ "महंगा, समृद्ध" होना चाहिए।

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

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

घर्षण करने वाला

यह shader वही करता है जो वर्टेक्स वन है। लेकिन, यदि शीर्ष प्रत्येक पाली के लिए गणना करते हुए, पॉलीलाइन सतह का निर्माण करता है, तो फ्रैग्मेंट शेडर सतह के प्रत्येक पिक्सेल के लिए रंग की गणना करता है।

सबसे बुनियादी fragment shader – step(a,b) फ़ंक्शन fragment shader – step(a,b) । यह केवल 0 और 1 देता है:

• अगर एक> बी, तो 0;
  
• यदि एक <b, तो 1।
  

मैंने जेएस में एक छद्म कार्यान्वयन किया जिससे यह स्पष्ट हो सके कि यह कार्य कितना सरल है।

 function step(a, b) { if (a < b) return 0 else return 1 } 

जब आप WebGL में काम करते हैं, तो आमतौर पर किसी भी ऑब्जेक्ट पर एक समन्वय प्रणाली होती है। यदि यह एक वर्ग वस्तु है, तो समन्वय प्रणाली आदिम है: अंक (0,0), (0,1), (1,0), (1,1)।

प्रत्येक पिक्सेल के लिए एक फ़्रैगमेंट शैडर निष्पादित किया जाता है। यदि वर्टेक्स शेडर प्रति फ्रेम 2600 गुना है, तो फ्रेग्मेंट शेडर को कई बार निष्पादित किया जाता है जैसे कि पिक्सेल होते हैं। शायद प्रत्येक फ्रेम के लिए एक लाख बार, अगर सतह 1000 × 1000 पीएक्स है। यह डरावना लगता है, लेकिन सिर्फ इसलिए कि कुछ लोग हमारे समय में वीडियो कार्ड के संसाधनों से परिचित हैं।

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

यह पता चला है कि 0.4 से कम सब कुछ 0 होगा, जो सब कुछ 1 से अधिक है। वेबलॉग में, संख्याएं और रंग एक समान हैं। प्रत्येक रंग एक नंबर है। सफेद - 1, काला - 0. आरजीबी में उनमें से तीन हैं, लेकिन यह अभी भी 0.0.0 और 1.1.1 है।



यदि हम इस फ़ंक्शन को अधिक जटिल तरीके से निष्पादित करते हैं, तो हम बाईं ओर सफेद हो जाते हैं। यह फ़ंक्शन स्क्रीन पर प्रत्येक बिंदु के लिए निष्पादित किया जाएगा और विचार करेगा कि यह या तो 0 है या 1. यह सामान्य है, इस बारे में चिंता न करें।

यदि आप इन दो अभिव्यक्तियों को गुणा करते हैं, तो आपको एक ऊर्ध्वाधर सफेद पट्टी मिलती है। यदि आप एक अलग अक्ष पर एक ही करते हैं, तो आप एक सफेद वर्ग बना सकते हैं:


यह चरमोत्कर्ष होना चाहिए - हमने एक सफेद वर्ग को आकर्षित किया!

सिर्फ एक फंक्शन के कॉम्बिनेशन का इस्तेमाल करके आप मनचाही चीज खींच सकते हैं।

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

Smoothstep

शेड्स का एक स्मूथस्टेप फ़ंक्शन है। यह कदम के रूप में एक ही काम करता है, लेकिन 0 और 1 के बीच इंटरपोल करता है ताकि एक ढाल हो।


अधिकतम संपीड़न के बाद बाएं से दाएं।

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

इसलिए मैं चिकनी किनारों के साथ एक सफेद वर्ग बनाने में सक्षम था। यदि एक सफेद वर्ग है, तो आप 3 सफेद वर्ग बना सकते हैं।


वर्गों को घुमाया जा सकता है, साइन और कोसाइन के कार्यों का उपयोग करें।

फिर मुझे अपने पैटर्न को तोड़ने के लिए कागज और एक पत्ती का उपयोग करना पड़ा।


उत्पादन से स्क्रीनशॉट।

वहां सब कुछ 23 विभिन्न डिग्री के साथ जुड़ा हुआ है, इसलिए इन सभी बिंदुओं के निर्देशांक की गणना करना बहुत मुश्किल नहीं था। और फिर आप इस तरह के एक पैटर्न प्राप्त कर सकते हैं।



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

मैंने मापदंडों को घुमा दिया और कई अनंत पैटर्न पाए। यह "जनरेटिव आर्ट" है - यह स्पष्ट नहीं है कि क्या किया गया है, लेकिन खूबसूरती से।

एसडीएफ

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



यह एक गणितीय प्रारूप है जिसे वेबजीएल के बाहर उपयोग करना कठिन है। विचार सरल है, लेकिन सुरुचिपूर्ण है और एक सुंदर प्रभाव देता है।

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

उदाहरण के लिए, यदि आप 128 × 128 पीएक्स के आकार के साथ एक तस्वीर लेते हैं, तो एक छोटे आकार में एक तस्वीर से आप स्रोत से कई गुना बड़ी एक स्पष्ट छवि प्राप्त कर सकते हैं। यह एक कारण है कि वे एसडीएफ का उपयोग क्यों करते हैं - एक धुंधली फ़ॉन्ट अक्सर एक अनुकूलित वेक्टर प्रारूप की तुलना में कम होता है।

बेशक, एक सीमा है। अक्षरों को 1000 पीएक्स तक बढ़ाना असंभव है, यहां तक ​​कि 100 पीएक्स भी बदसूरत दिखेंगे। लेकिन कितनी बार इस आकार के फोंट की आवश्यकता होती है?

टुकड़े टुकड़े करना, ड्राइंग आयताकार, फैल गया - इन गड़बड़ियों की मदद से, मैं आखिरकार वांछित सतह को खोजने में कामयाब रहा।

नई शर्तें

वह जैसा था वैसा ही होना चाहिए: कुश्ती, सभी तत्व स्पष्ट थे। सब कुछ जैसा मैं चाहता था, लेकिन यह पता चला कि इसमें कुछ और भी था:

- और उसे माउस के साथ जाने दिया और एक नया रास्ता बिछाया जा रहा है। और छत्ते पर प्रकाश डाला जाता है!

यह माना जाता था कि जब उपयोगकर्ता माउस को स्थानांतरित करता है, तो वह सेवा का उपयोग करके टूटे हुए "कॉबवेब" के साथ अपने कांटेदार पथ को रूपक देता है।



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

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


यदि आप पहले से ही एक हेक्सागोनल झल्लाहट के लिए तैयार हैं - महल को देखें। अन्य बनावटों पर, एक हेक्सागोनल ग्रिड का भी अनुमान लगाया गया है।


"सभ्यता" में सब कुछ आम तौर पर स्पष्ट है।

यह जानना भी दिलचस्प था कि यदि आप त्रि-आयामी घन के विकर्ण के साथ एक क्रॉस सेक्शन बनाते हैं, जिसमें कई छोटे क्यूब्स होते हैं, तो, एक तरफ, ये क्यूब्स होते हैं, और दूसरे पर, नियमित हेक्सागोन्स होते हैं।



त्रि-आयामी घन का क्रॉस-सेक्शन एक दो-आयामी हेक्सागोनल ग्रिड देता है। यह जानना मजेदार था कि तीन-आयामी क्यूब्स किसी भी तरह दो-आयामी हेक्सागोन्स के साथ जुड़े हुए हैं।

सहित लेख में, हेक्सागोनल ग्रिड के साथ रास्ता खोजने के लिए एक एल्गोरिथ्म था। मुझे माउस के माध्यम से ऊंचाई के लिए रास्ता देखना था।

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


मुझे ऐसा कुछ चाहिए था।

लेकिन वह नहीं है जो मुझे चाहिए। यहां मार्ग हेक्सागोन्स के क्षेत्रों के साथ रखा गया है, और मुझे किनारों के साथ की आवश्यकता है। मुझे समस्या को अलग तरीके से हल करना था।

Canvas2D

शायद बेहतर तरीके हैं, लेकिन मेरा अधिक दिलचस्प है। सबसे पहले मैंने सिर्फ अपने डिबग के लिए Canvas2D खींचा - चरण # 1।



इससे पहले, WebGL, Three.js, shaders थे, और यह सिर्फ Canvas2D है! मैंने इस पर हेक्स ग्रिड के सभी बिंदुओं को आकर्षित किया। यदि आप बारीकी से देखते हैं, तो ये समान षट्भुज हैं। फिर मैंने उन ग्राफ़ को याद किया जो इस बात की जानकारी संग्रहीत करते हैं कि अंक एक दूसरे से कैसे जुड़े हैं, और प्रत्येक बिंदु को तीन पड़ोसी के साथ जोड़ा और एक ग्राफ मिला - चरण संख्या 2. इसके लिए मैंने ओपन सोर्स ब्यूटीफुल ग्राफ़ का उपयोग किया।

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

यह कुछ इस तरह दिखता है।

 graph = createGraph( ); graph.addNode(..); // 1000 nodes graph.addLink(..); // 3000 links graph.pathFinder(Start, Finish); //0.01s 

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

यह एल्गोरिथ्म एक फ्रेम से कम चलता है। बेशक, यह किसी प्रकार का संसाधन लेता है, लेकिन आपको इसे हर 16 एमएस पर निष्पादित करने की आवश्यकता नहीं है, लेकिन केवल तभी जब पथ बदलता है।

इसलिए मैं चरण 3 में इस मार्ग का निर्माण करने में सक्षम था। कैनवस 2 डी में, यह इस तरह दिखना शुरू हुआ: बिंदु ए से बिंदु बी तक का सबसे छोटा रास्ता - सब कुछ, जैसा कि जीवन में। पहली नज़र में ऐसा लगता है कि यह सबसे छोटा रास्ता नहीं है, लेकिन यह पता चला है कि हेक्सागोनल ग्रिड के साथ बिंदु ए से बिंदु बी तक बहुत कम रास्ते हैं।

WebGL में, सभी चित्र संख्याएँ हैं। वहाँ आप shader में बनावट स्थानांतरित कर सकते हैं, उदाहरण के लिए, मैंने png को स्थानांतरित करने का प्रयास किया। ब्राउज़र के लिए कोई अंतर नहीं है - यह png या Canvas2D है। Canvas2D ब्राउज़र के लिए, यह समाप्त चित्र, बिटमैप के समान है। इसलिए, मैंने पहली बार इस तस्वीर को सांप के रूप में आकर्षित किया। № 4.

Canvas2D . Canvas2D , — . , . , Canvas2D 3D, , .

, , WebGL — , «, », .

, , Canvas2D, , , . Canvas2D , WebGL, .


: , , .

, --. , , «» .

?

: « ? ?» , : «, !». , . .

, WebGL. , . , WebGL. 2 — , .

, , . , .

, . , , , 3D — .

, . , , .

FrontendConf . , Canvas , RxJS JSX React .

30 . , , .