अवास्तविक इंजन 4 - पोस्टप्रोसेस स्कैन प्रभाव

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

इस लेख में मैं आपको बताऊंगा कि इस प्रभाव को UE4 पर कैसे लागू किया जाए। ऐसे कई तरीके हैं जिनसे आप इस प्रभाव को बना सकते हैं। इनमें से एक तरीका मेरे द्वारा चुना गया था।

आप उन्हें उच्च रिज़ॉल्यूशन में देखने के लिए एक नए टैब में चित्र खोल सकते हैं।

मुख्य घटक

इस आशय का मुख्य विचार Sobel ऑपरेटर का उपयोग करके प्रस्तुत किए गए दृश्य का एक संस्करण बनाना है, और फिर इसे एक नियमित SphereMask- आधारित दृश्य रेंडर के साथ मिश्रित करना है, जिसे हम एक स्कैनिंग प्रभाव बनाने के लिए चेतन करेंगे।

इस प्रभाव में 3 मुख्य घटक होते हैं:

• स्फीयरमास्क स्केलेबल फ़ील्ड
• सोबेल-एज फ़ंक्शन (मैं यह नहीं बताऊंगा कि यह फ़ंक्शन कैसे काम करता है, क्योंकि यह एक अलग विषय है, लेकिन मैं उस कोड का उल्लेख करूंगा जो मैंने उपयोग किया था)
• विश्व ग्रिड पर अनुमानित बनावट को ओवरले करें

स्फीयरमास्क स्केलेबल फ़ील्ड

यह हिस्सा इस बारे में है कि हम स्केलेबल स्फीयरमास्क कैसे बनाते हैं। ऐसा करने के लिए, हम सामग्री मापदंडों के सेट में ब्लूप्रिंट की स्थिति को स्थानांतरित करते हैं, जिसके बाद हम इसे निम्नानुसार उपयोग करते हैं



क्लैंप नोड के परिणाम को अपनी सामग्री के उत्सर्जक आउटपुट से कनेक्ट करें और आप कुछ इस तरह देखेंगे



"टेक्सलोक" वेक्टर 3 है , जो कि गोले के स्रोत के स्थान को निर्धारित करता है, मेरे मामले में इसे सामग्री मापदंडों के एक सेट से पढ़ा जाता है, ताकि इसे खेल से भी पढ़ा जा सके, उदाहरण के लिए, खिलाड़ी की स्थिति निर्धारित करने के लिए।

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

अब हम एक निर्धारित समय अंतराल के साथ गोले को स्केल करने के लिए समय का उपयोग करेंगे।



यह हमें निम्नलिखित परिणाम देगा



फ़्रेक (समय) मूल रूप से हमें एक निरंतर अवधि देता है जो 0-1.0-1.0-1 तक जारी है। हम स्केलिंग की गति को नियंत्रित करने के लिए समय 0.25 से गुणा करते हैं, और फिर परिणाम को क्षेत्र के त्रिज्या से गुणा करते हैं, जो 0 से 1024 तक त्रिज्या में परिवर्तन करता है, और हमें एक एनिमेटेड मुखौटा देता है।

यह एक अच्छा परिणाम है, लेकिन यह वह नहीं है जो हम प्रभाव से चाहते हैं। हमें स्केलिंग रिंग चाहिए। यह सरल गणनाओं का उपयोग करके आसानी से किया जा सकता है।



यह हमें वह देगा जो हम चाहते हैं, एक बढ़ती हुई अंगूठी, जिसमें अच्छी ग्रेडिंग लुप्त होती है जिसे नियंत्रित किया जा सकता है।



Edge_Mask ब्लॉक में गणितीय कार्य मूल रूप से ग्रेडिएंट मास्क में स्थिति का चयन करते हैं, इस मामले में मान 0.5 है, और दिए गए चौड़ाई के साथ वर्तमान स्थिति से मुखौटा के किनारे को निर्धारित करता है, जो हमें एक अंगूठी प्राप्त करने की अनुमति देता है। मैं मुखौटा के किनारों को प्राप्त करने के तकनीकी विवरण में नहीं जाऊंगा, सबसे अधिक संभावना है कि मैं इस बारे में निम्नलिखित पदों में से एक में बात करूंगा।

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

अगला कदम रिंग के नेत्रहीन दिलचस्प संस्करण बनाने के लिए शोर का उपयोग करना है।

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

अपने शेडर में, मैं वेक्टर शोर नोड में सेलोनिज़ के लिए फ़ंक्शन पैरामीटर सेट करता हूं, अपने स्वयं के अनूठे प्रभाव को प्राप्त करने के लिए इस पैरामीटर के अन्य प्रकारों के साथ प्रयोग करने के लिए स्वतंत्र महसूस करता हूं।



परिणाम निम्नानुसार दिखेगा



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

सोबेल-एज फंक्शन

इस सुविधा के लिए कई अलग-अलग विकल्प हैं, जिनमें से कुछ दूसरों की तुलना में अधिक अनुकूलित हैं, मैं इसके सार को स्पष्ट नहीं करूंगा, क्योंकि यह एक अलग विषय है, लेकिन कीवर्ड "सोबेल एज" या "सोबेल ऑपरेटर" के साथ एक नियमित Google खोज कई विकल्प देगा। । या Gepard_vvk से हब पर लेख का उपयोग करें - छवियों के आकृति का चयन करने के लिए एल्गोरिदम ।

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

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

void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord.xy / iResolution.xy; vec3 TL = texture(iChannel0, uv + vec2(-1, 1)/ iResolution.xy).rgb; vec3 TM = texture(iChannel0, uv + vec2(0, 1)/ iResolution.xy).rgb; vec3 TR = texture(iChannel0, uv + vec2(1, 1)/ iResolution.xy).rgb; vec3 ML = texture(iChannel0, uv + vec2(-1, 0)/ iResolution.xy).rgb; vec3 MR = texture(iChannel0, uv + vec2(1, 0)/ iResolution.xy).rgb; vec3 BL = texture(iChannel0, uv + vec2(-1, -1)/ iResolution.xy).rgb; vec3 BM = texture(iChannel0, uv + vec2(0, -1)/ iResolution.xy).rgb; vec3 BR = texture(iChannel0, uv + vec2(1, -1)/ iResolution.xy).rgb; vec3 GradX = -TL + TR - 2.0 * ML + 2.0 * MR - BL + BR; vec3 GradY = TL + 2.0 * TM + TR - BL - 2.0 * BM - BR; fragColor.r = length(vec2(GradX.r, GradY.r)); fragColor.g = length(vec2(GradX.g, GradY.g)); fragColor.b = length(vec2(GradX.b, GradY.b)); } 

UE4 में, यह ऐसा दिखता है



फ़ंक्शन के कार्यान्वयन के बारे में एक त्वरित नोट - सुनिश्चित करें कि PostProcessInput0 का उपयोग करने के लिए आपके सीनटेक्स्चर नोड्स को कॉन्फ़िगर किया गया है



दो कस्टम नोड्स ग्रैडएक्स और ग्रैडी , उन्हें एक समान तरीके से कॉन्फ़िगर करें



ग्रैडएक्स :

 return -TL + TR - 2.0 * ML + 2.0 * MR - BL + BR; 

ग्रेड :

 return TL + 2.0 * TM + TR - BL - 2.0 * BM - BR; 

यह कस्टम में नहीं किया जाना है, मैंने इसे केवल सुविधा के लिए उपयोग किया है, अन्यथा बहुत अधिक नोड्स और स्पेगेटी बनेंगे।

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



हम किसी भी रंग के किनारों को बनाने के लिए नियमित वेक्टर 3 द्वारा परिणाम को गुणा करते हैं।



नतीजतन, किनारे का रंग बदल जाता है।

ग्रिड बनावट ओवरले दुनिया

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



यदि आप फ़ंक्शन के परिणाम को उत्सर्जक आउटपुट से जोड़ते हैं, तो आप देखेंगे

यह सब एक साथ रखना

अब हम अपने पोस्ट इफेक्ट के लिए सभी तीन भागों को एक साथ रखेंगे!

सबसे पहले, हम सोबेल-एज और विश्व-संरेखित-ग्रिड विशेषताओं को जोड़ते हैं, उन्हें एक साथ रखते हैं



फिर हम एक सीनटेक्स्चर नोड बनाते हैं और परिणाम को सोबेल-एज और विश्व-संरेखित-ग्रिड से जोड़ते हैं।

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



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



मुझे आशा है कि आपको यह जानकारी उपयोगी लगी, सभी को शुभकामनाएँ :)

इस shader के साथ एक उदाहरण परियोजना github पर पाई जा सकती है।