खेल इंजन में RiME से स्टाइलिश झरना: एक पानी की धारा बनाएं

यह RiME गेम से प्रेरित होने के बाद एकता या UE4 झरना गाइड का दूसरा (और अंतिम) हिस्सा है। पहले उपकरण का पता चला, विकास के माहौल को चुना और पानी के हलकों के लिए एक शेडर बनाया। आपने इसकी शुरुआत क्यों की? सब कुछ सरल है: झरने का निर्माण करते समय अधिकांश तरीकों की आवश्यकता होती है जो वहां उपयोग किए जाते हैं। लेकिन कुछ संकेत हैं। हम नहीं खींचेंगे - चलो बिल्ली के नीचे चलते हैं।



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



यूवी सीम सबसे पीछे स्थित है। भले ही झरने में दृश्य बनावट नहीं है, फिर भी इसे सुरक्षित रूप से खेलना और यूवी सीम को खिलाड़ी के लिए कम से कम दृश्य स्थानों में रखना बेहतर है।

पानी के सर्कल जाल के साथ के रूप में, यूवी स्कैन में टाइलिंग बनावट का उपयोग करते समय मॉडल पर सबसे छोटी संख्या होनी चाहिए। यूवी शेल का एक पक्ष यू की दिशा में 0 से बंधा है, और दूसरा 1. याद रखें कि यूवी शेल की चौड़ाई यू-स्पेस के पूर्णांक मान में फिट होनी चाहिए (उदाहरण के लिए, 1, 2 या 3 को टाइल करना)। यदि हम यू दिशा में 1.2 बार टाइल करते हैं, तो जंक्शन पर एक सीवन दिखाई देगा। और हमें एक सहज टाइलिंग बनावट की आवश्यकता है।



यह है कि सामान्य नक्शा यू-दिशा में 3 बार टाइल करता है। ध्यान दें कि 3 डी छवि का दाईं ओर यू-दिशा में 1 में पूरी तरह से कैसे फिट बैठता है। U दिशा में 3 से टाइलिंग सेट करने का अर्थ है कि U दिशा में 0 से 1 के बीच की बनावट 3 बार दोहराई जाती है (नीचे दी गई छवि 0 से 1 तक UV स्पेस दिखाती है)।



उदाहरण के लिए, यहां एक ही बनावट को 2.2 बार टाइल किया गया है - एक सीम तुरंत दिखाई दिया। कई लोगों के लिए, यह स्पष्ट है, लेकिन यह समझना महत्वपूर्ण है कि आपको अपने यूवी स्कैन को कुछ परिदृश्यों में क्यों और कैसे रखना चाहिए। हम टाइलिंग बनावट के पैनिंग के साथ काम करते हैं, और इसके अलावा, हमें सीम की आवश्यकता नहीं है, इसलिए हमें यूवी स्कैन को अनुकूलित करना चाहिए।



अधिक संपूर्ण चित्र के लिए, उस जिफ़ को देखें जहां मैं यूवी मैप को स्थानांतरित करता हूं। एक के लिए, यूवी खोल की चौड़ाई ठीक 1 (पूरी तरह से टाइल की गई) है, दूसरे को छंटनी की जाती है ताकि सीम दिखाई दे। चूँकि हम केवल टाइलिंग टेक्सचर का उपयोग करते हैं, UV मैप का 0 और 1 के बीच होना आवश्यक नहीं है।



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



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


नोट: यह नई सामग्री है। एक नई सामग्री बनाएं और उस पर एक नया शेडर लागू करें ( भाग 1 देखें)।

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



मैंने सामान्य मानचित्र स्क्रॉल का भी उपयोग किया। केवल एक, क्योंकि यह भिन्नता के लिए दो पनर के साथ इतनी तेजी से आगे बढ़ता है, कि इस मामले में कोई अंतर नहीं होगा। 1 के बराबर नीले रंग के मूल्य से इसे गुणा करें (255 को gif पर इंगित किया गया है - यह तब होता है जब प्रत्येक चैनल में 256 चरण होते हैं, 0 से 255 तक), साथ ही साथ लाल और हरे रंग के मान 60 (या मान 0.23) के पैमाने का उपयोग करने पर 0 से 1)। नतीजतन, एक बहुत ही संतृप्त सामान्य नक्शा और भी अधिक और शांत हो गया है। अधिक गहन मानदंडों को वापस करने के लिए, आर और जी के मूल्यों को समान रखें और उन्हें बढ़ाएं। तो आपको shader के अंदर थोड़ा और कस्टमाइजेशन मिलता है।



हम जाल, यूवी और अन्य घटकों की स्थापना करते हैं जिन्हें काम करने के लिए झरना की आवश्यकता होगी। आइए इस GIF पर कुछ चीजों का विश्लेषण करते हैं:



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

मैं दो रंगों और एक स्क्रॉल काले और सफेद बनावट के साथ Lerp (रैखिक प्रक्षेप) का उपयोग करता हूं जो मैंने शुरुआत में एक अल्फा (इनपुट सिग्नल) के रूप में बनाया था। यह बनावट मूल रूप से नीले या सफेद दिखाने के लिए चुनने के लिए एक मुखौटा के रूप में कार्य करती है। और Add वर्टेक्स कलर नोड (नोड रंगों के साथ नोड) से जुड़ा हुआ है।



उपयोग किए गए शीर्ष रंग नीचे दिखाए गए हैं। वे पहले भाग से वर्टेक्स रंगों की तरह काम करते हैं - अर्थात, एक ढाल के रूप में। यह सुनिश्चित करने के लिए रंगों की आवश्यकता होती है कि पानी झरने के नीचे की ओर फुसफुसाए। चूंकि हम मौजूदा रंग (सबसे सफेद बिंदु शीर्ष रंग = 1) पर शीर्ष रंग जोड़ते हैं, आप आसानी से मूल्य 1 से अधिक हो सकते हैं। यदि ऐसा होता है, तो हमें बहुत उज्ज्वल और ओवरसेट किए गए परिणाम मिलेंगे। इसलिए, क्लैम्प अंत में है, ताकि अधिकतम मान 1 से अधिक न हो (क्लैम्प के लिए, न्यूनतम = 0, और अधिकतम = 1)। सफेद और नीले रंगों का उपयोग यह सुनिश्चित करता है कि जब पानी "टूटता" है, तो यह जाल के सफेद (झाग) क्षेत्र में होगा और पारदर्शी क्षेत्रों के चारों ओर एक सफेद सीमा प्राप्त करेगा। लाईट वर्टेक्स कलर, अधिक वर्टिस बाहर की ओर फैलती है। इस प्रकार, झरना का अंत, जो कि शीर्ष रंग में हल्का है, अधिक अनियमित रूप से चलता है। झरने का मोड़ भी थोड़ा हल्का है - इसलिए इसकी गति।



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



इसके अतिरिक्त, पानी से गुजरने वाली नकली रोशनी बनाने के लिए उत्सर्जन चैनल में फ्रेस्नेल को कनेक्ट करें। Fresnel पिक्सेल को इतना हल्का बनाता है कि 3D ऑब्जेक्ट की सतह पर सामान्य वेक्टर कैमरे से भटक जाता है और सामान्य वेक्टर के रूप में अंधेरा कैमरे के लिए निर्देशित होता है (कैमरे के लिए लंबवत)।

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



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



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

यह शीर्ष विस्थापन के बिना एक झरना है:



और यहाँ शीर्ष विस्थापन के साथ:



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

तो हमें कैसे पता चलेगा कि चोटियाँ किस दिशा में चलेंगी? ऊपर और नीचे क्या है?

हमारे मामले में, हम जाली को सतह की सतह से दूर ले जाना चाहते हैं। एक नकारात्मक दिशा का मतलब होगा कि सतह पर सामान्य की दिशा की दिशा में "गति" आवक चलती है, और एक सकारात्मक दिशा "बाहर की ओर" जाएगी। केवल इस तरह के एक शीर्ष आंदोलन के लिए, हम शीर्ष मानदंडों का उपयोग कर सकते हैं। प्रत्येक वर्टेक्स, भले ही यह 3 डी स्पेस में केवल एक "पॉइंट" हो, को एक दिशा दी गई है - वर्टेक्स सामान्य। इसका उपयोग यह गणना करने के लिए किया जाता है कि मेष की सतह को कैसे छायांकित किया जाना चाहिए। इस उदाहरण में, मैंने एक गेंद बनाई और माया को वर्टेक्स नॉर्म्स (प्रदर्शन> पॉलीगोन> वर्टेक्स नॉर्म्स) प्रदर्शित करने के लिए सेट किया। प्रत्येक शीर्ष पर एक दिशा है जो डिफ़ॉल्ट रूप से, सतह से दूरी को इंगित करता है। आप किसी भी शीर्ष को सामान्य रूप से संपादित कर सकते हैं और उसकी दिशा बदल सकते हैं, लेकिन अब वर्तमान हमें सूट करता है। अब आप इसे shader में उपयोग कर सकते हैं और कोने को स्थानांतरित करने के लिए किस दिशा में निर्दिष्ट कर सकते हैं।



वर्टेक्स सामान्य नोड आरजीबी मानों का उत्पादन करता है जो मेष वर्टीकल की सामान्य दिशा पर आधारित होते हैं। सामान्य तौर पर शेड्स में और मानदंडों के साथ, 2 डी अंतरिक्ष में एक 3 डी एक्सवाईजेड समन्वित वस्तु को व्यक्त करने के लिए आरजीबी मूल्यों का उपयोग किया जाता है। ताकि छाया में हमारा काला और सफेद पैननर एक 3 डी ऑब्जेक्ट की सतह के साथ आगे बढ़ सके, हम RGB वर्टेक्स सामान्य मान का उपयोग कर सकते हैं। मैंने जाल के तल को और अधिक उत्तल बनाने के लिए शीर्ष पर वर्टेक्स रंग जोड़ा। और ऑफसेट मान को नियंत्रित करने के लिए कुछ नोड्स भी (यह सामान्य है यदि आपके मान 0 या 1 से नीचे हैं)।



प्रदर्शित करने के लिए, मैं मुख्य नोड के सीधे एल्बिडो (रंग) आउटपुट पर लागू एक शीर्ष सामान्य नोड के साथ एक गोला दूंगा।



वर्टेक्स नॉर्मल नोड का RGB (XYZ) आउटपुट मेष के शीर्ष मानदंडों पर आधारित है, जो हमें यह परिणाम देता है।

यहाँ नोड्स की पूरी संरचना है। यह दिखाता है कि सब कुछ कहां और कैसे जोड़ता है।



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

विषय पर कुछ और उपयोगी लिंक:

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