एकता या UE4 में सीधे RiME से एक स्टाइलिश झरना बनाएं

ऐसे यादगार दृश्य के साथ खेल हैं जो अपने विकास पर खर्च किए गए समय पर विचार करने के लिए डरावना है, कम से कम अंतिम युद्ध के देवता या आरडीआर 2 को लें। और ऐसी परियोजनाएं हैं जो अपने वायुमंडलीय के साथ घूस देती हैं, भले ही वे एएए से दूर हों। एक उदाहरण के रूप में, RiME को शैली, ध्वनि और इतिहास के लिए एक से अधिक बार प्रशंसा की गई है। और हाल ही में, खेल के स्तर के डिजाइनर ने साइबर प्रॉपर 2077 पर काम करने के लिए सीडी प्रॉजेक्ट रेड टीम में शामिल हो गए । RiME ने अपनी कला बनाने के लिए 3D कलाकार Math Roodhuizen को भी प्रेरित किया।

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


सबसे पहले, टीकम गेम्स के एक कलाकार साइमन ट्रम्पलर का धन्यवाद, जिन्होंने रीएमई पर काम किया। जब मैंने उनकी सामग्री पाई और सोचा तो मैं अभी भी shaders और VFX के लिए नया था: "वाह, क्या मैं भी ऐसा कर सकता हूं?" मेरा सुझाव है कि आप स्टाइल प्रभाव (जैसे आग, उदाहरण के लिए) बनाने के तरीकों के बारे में अधिक जानने के लिए रिपोर्ट पढ़ें।

अब एक झरना बनाने की बात करते हैं। यह उन लोगों के लिए विशेष रूप से उपयोगी होगा जो शैडर ग्राफ सिस्टम से परिचित नहीं हैं। हमारा लक्ष्य: काम करने के नए तरीके सीखना और बेहतर तरीके से समझना।

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

तो आपको आवश्यकता होगी:

• एकता 2018।
• Shaderify Shader Editor (यूनिटी प्लगइन)। लेकिन अगर आप इस पर पैसा खर्च नहीं करना चाहते हैं, तो एकता 2017 स्थापित करें और एसेट स्टोर से मुफ्त Shaderforge डाउनलोड करें (इंजन का नया संस्करण इस प्लगइन का समर्थन नहीं करता है, लेकिन यह अभी भी एकता 2017 में काम करता है)। दोनों उपकरण लगभग समान हैं, सिवाय इसके कि कुछ बिंदुओं को अलग-अलग कहा जाता है।
• ऑटोडेस्क माया।
• बनावट बनाने या संपादित करने के लिए कुछ भी। मैं फ़ोटोशॉप का उपयोग करता हूं, और कभी-कभी पदार्थ डिज़ाइनर भी (लेकिन आपको निश्चित रूप से इस झरने के लिए इसकी आवश्यकता नहीं है)।

सबसे पहले, "लहर प्रभाव" के बारे में जो तब होता है जब एक झरना सतह पर गिरता है। इसका उपयोग अन्य उद्देश्यों के लिए भी किया जा सकता है, उदाहरण के लिए, पानी में वस्तुओं के आसपास तरंग बनाने के लिए।



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

एक नई सामग्री बनाएं और इसे एक नाम दें (मेरे पास MAT_WaterWrinkles है)। फिर प्रोजेक्ट टैब में सामग्री पर राइट-क्लिक करें और Create> Amplify Shader> Surface Shader पर जाएं। इस मामले में, नया शेडर स्वचालित रूप से लागू होगा।

आप सामग्री टैब> शेडर्स की ड्रॉप-डाउन सूची के लिए किसी भी समय एक शेडर का चयन कर सकते हैं (Shaderforge के लिए PBL shader जैसा कुछ होगा)। याद रखें कि शेडर को फ़ोल्डर सूची में और नाम खोलने के बाद दोनों ही शेडर में होना चाहिए।



जैसे ही आप एक नया शेडर खोलते हैं, आपको कुछ इस तरह दिखाई देगा:



मैं Shader Graph के उपयोग पर एक विस्तृत मार्गदर्शिका नहीं लिखूंगा, और यदि आप पूरी तरह से नए हैं, तो पहले परिचयात्मक मार्गदर्शिका पढ़ें।

किसी भी मामले में, वांछित प्रभाव प्राप्त करने के लिए, पहले हमें एक नियमित पनर की आवश्यकता होती है। यहाँ यह विमान पर परीक्षण बनावट के साथ है:



Panner ने UV निर्देशांक को स्थानांतरित किया। सुनिश्चित करें कि रैप मोड बनावट रिपीट पर सेट है। Shaderforge में, आपको एक अस्थायी नोड को Panner इनपुट से कनेक्ट करने की आवश्यकता हो सकती है, Amplify के लिए इनमें से कुछ मूल मान पहले से ही नोड में शामिल हैं।

तो हम एक चलती बनावट है। लेकिन हम इस प्रभाव को प्राप्त करना चाहते हैं:



और इसके लिए यह आवश्यक है कि यह इस तरह स्क्रॉल हो:



जैसा कि आप देख सकते हैं, नोड की संरचना समान है - पनेर केवल यू और वी (या एक्स और वाई) दिशाओं में यूवी निर्देशांक को स्थानांतरित करता है। वांछित पैन दिशा पाने के लिए, हमें यूवी के साथ एक कस्टम जाल बनाने की आवश्यकता है। स्पष्टता के लिए Gif:

उसी सामग्री को दूसरे जाल पर लागू करना, हम यूवी अंतरिक्ष में स्थानांतरित होने पर 3 डी अंतरिक्ष में बनावट की दिशा को नियंत्रित कर सकते हैं।



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



एक महत्वपूर्ण निष्कर्ष इस प्रकार है: अच्छा प्रभाव शायद ही कभी एक प्रणाली से मिलकर बनता है और अक्सर कई का संयोजन होता है।

हमें एक बनावट सही दिशा में सही गति से चलती हुई मिली। यूवी स्कैन को तैनात किया गया है ताकि पैन स्पेस के साथ यूवी स्पेस में दाईं ओर से बाईं ओर बढ़ते हुए 3 डी स्पेस में आवक और जावक आंदोलन हो। 3D मॉडल पर बनावट में सीम से बचने के लिए, आपको यूवी स्‍कैन (ग्रिड के लिए X हॉटकी के लिए X हॉटकी) को स्‍पष्‍ट रूप से बनावट वाले स्थान के शीर्ष पर पिन करने की आवश्यकता है। नतीजतन, हमने वांछित प्रभाव हासिल किया।

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



हम एक कदम के साथ एक ढाल बनावट लेते हैं और इसे shader में रखते हैं। यहां यह मुख्य नोड के अल्बेडो आउटपुट (रंग) से जुड़ता है।



और यहां यह ओपेसिटी मास्क के आउटपुट से जुड़ा है (यह पैरामीटर सक्षम है जब रेंडरिंग प्रकार पारदर्शी कटआउट है)।



यह देखा जा सकता है कि ढाल बनावट पारदर्शिता या अस्पष्टता निर्धारित करने के लिए काले और सफेद पिक्सेल मूल्यों का उपयोग करती है। 1 (सफेद) से 0.5 (ग्रे) तक सब कुछ अपारदर्शी हो जाता है, और 0.5 (ग्रे) से 1 (काला) तक सब कुछ पूरी तरह से पारदर्शी हो जाता है (या बिल्कुल भी प्रदर्शित नहीं होता है)। अपारदर्शिता मास्क एक कठिन रेखा बनाता है और मानों को 0 या 1 पर गोल करता है, जिसके आधार पर संख्या करीब है।

एक और ग्रेस्केल बनावट:



अस्पष्टता मास्क से जुड़ा:



आपको विचार आया। और आपको लगता है कि इसका उपयोग कैसे किया जा सकता है:



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



रिपल इफेक्ट एक अच्छी शुरुआत है, लेकिन यह बेहतर हो सकता है। रिपल इफेक्ट को अधिक यादृच्छिक बनाने के लिए एक दूसरे के ऊपर दो ग्रेस्केल टेक्सचर को स्टैक क्यों नहीं किया जाता है?



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

अगले gif पर, एक और बात है जिस पर हमने अभी तक चर्चा नहीं की है - इसलिए आपका संस्करण थोड़ा अलग दिखाई दे सकता है:



आप देख सकते हैं, उदाहरण के लिए कि एक पिक्सेल 0.2 (जो रेंडर नहीं करता है) के साथ एक पिक्सेल 0.4 के मान के साथ गुजरता है (जो भी रेंडर नहीं करता है) और अचानक 0.6 के मान के साथ एक पिक्सेल बन जाता है - क्योंकि हम एक अतिरिक्त नोड (0.2 का उपयोग कर रहे हैं) जोड़ा गया 0.4 और 0.6)। विभिन्न गति पर एक दूसरे के ऊपर इन दो तरंग ग्रेस्केल बनावट को जोड़ने से वांछित प्रभाव के करीब पहुंच जाता है।



यहां, परिणाम प्रदर्शित करने के लिए, मैंने फ़ोटोशॉप में एक-दूसरे के लिए ग्रेस्केल टेक्सचर जोड़े।



हालांकि, जाल के अंत में सीम अभी भी अलग है। और हमें इसे प्राप्त करने की आवश्यकता है:



इसके बजाय:



दो जीआईएफ में से पहली पर, ग्रिड के किनारे पर पहुंचने पर धीरे-धीरे लहरें कम हो जाती हैं और छोटी हो जाती हैं। ऐसा करने का सबसे आसान तरीका वर्टेक्स कलर (वर्टेक्स कलर) का उपयोग करना है।

मॉडल के प्रत्येक शीर्ष पर अपना स्वयं का डेटा होता है (उदाहरण के लिए, X, Y और Z निर्देशांक), साथ ही एक रंग जिसका मान 0 से 1. होता है। कोने का रंग 3D संपादक में भी सेट किया जा सकता है।
अधिकांश बाहरी कोने काले हैं (अर्थात, उनका मान 0 है)। वे केंद्र के पास पहुंचने पर सफेद (1 के करीब) हो जाते हैं। ध्यान दें कि आपको रंगीन बनाने के लिए अतिरिक्त उपखंडों की आवश्यकता होगी।



उदाहरण के लिए, माया में, रंग भरने के लिए, आप मेनू मेष डिस्प्ले> पेंट वर्टेक्स कलर पर जा सकते हैं और अधिक विकल्प फ़ील्ड पर क्लिक कर सकते हैं।

अब हम अपने शेप में Multtexly का उपयोग करके वर्टेक्स कलर को मिला सकते हैं।



मैंने उपयोग किए गए बनावट के शीर्ष पर एक ढाल लागू किया और परत मोड को गुणा करने के लिए सेट किया।



ग्रेडिएंट ग्रे मान को 0 (काला) तक बढ़ाता है, इसलिए पिक्सल को प्रदान करना अधिक कठिन होगा (वे 0.5 के मूल्य से नीचे नहीं दिखाई देते हैं)। यह इस तथ्य की ओर जाता है कि धड़कन की रेखाएं किनारे के करीब संपीड़ित होती हैं (कोने के रंग मुख्य रूप से एक ढाल के रूप में कार्य करते हैं)।



मैंने तरंग रेखाओं की मोटाई को नियंत्रित करने के लिए कुछ और नोड जोड़े। ये रहा पूरा ग्राफ:



बस स्क्रॉलिंग की गति / दिशा के साथ प्रयोग करें, बनावट को समायोजित करें और प्रभाव से अधिकतम लाभ प्राप्त करने के लिए टाइलिंग को बदलने का प्रयास करें।

यह हमें और अधिक जटिल छाया बनाने में मदद करेगा - एक झरना। हम उसके बारे में अगले भाग में बात करेंगे।