🈺 👲 🧑🏾‍🤝‍🧑🏼 यथार्थवादी कास्टिक प्रतिबिंब 🤬 🎟️ 🧒🏻

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

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

इस लेख के अंत में एकता पैकेज और सभी आवश्यक संपत्तियों को डाउनलोड करने के लिए एक लिंक है।

कास्टिक क्या है

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

कास्टिक अन्य रूप ले सकता है। एक इंद्रधनुष, उदाहरण के लिए, एक ऑप्टिकल घटना है जो तब होती है जब प्रकाश बारिश की बूंदों में अपवर्तित होता है। इसलिए, सख्ती से बोलना, यह कास्टिक है।

प्रभाव का एनाटॉमी

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

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

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

बनावट प्राप्त करने के बाद, फ्लोरियन ने तीन कदम उठाने का सुझाव दिया:

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

आइए देखें कि आप एकता में प्रत्येक चरण को कैसे लागू कर सकते हैं।

शेडर क्रिएशन

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

नई सतह shader में बस कुछ विशेषताएं हैं। इस प्रभाव को बनाने के लिए, हमें shader में जानकारी स्थानांतरित करने की आवश्यकता है। पहली कास्टिक बनावट है। दूसरे, यह वह पैरामीटर है जो इसे स्केल और ऑफसेट करने के लिए उपयोग किया जाता है।

चलो दो shader गुण बनाते हैं :

 Properties { ... [Header(Caustics)] _CausticsTex("Caustics (RGB)", 2D) = "white" {} // Tiling X, Tiling Y, Offset X, Offset Y _Caustics_ST("Caustics ST", Vector) = (1,1,0,0) }

और इसी Cg चर :

 sampler2D _CausticsTex; float4 _Caustics_ST;

शेडर गुण एकता सामग्री निरीक्षक में प्रदर्शित क्षेत्रों के अनुरूप हैं। संबंधित Cg चर स्वयं मान हैं, जिनका उपयोग shader कोड में किया जा सकता है।

जैसा कि आप ऊपर दिए गए कोड से देख सकते हैं, _Caustics_ST है, _Caustics_ST इसमें चार मान हैं। हम उन्हें कास्टिक बनावट के नमूने को नियंत्रित करने के लिए उपयोग करेंगे। अर्थात्:

_Caustics_ST.x : एक्स अक्ष के साथ कास्टिक बनावट का पैमाना;
_Caustics_ST.y : Y अक्ष के साथ कास्टिक बनावट का पैमाना;
_Caustics_ST.z : एक्स अक्ष के साथ कास्टिक बनावट का विस्थापन;
_Caustics_ST.w : Y अक्ष के साथ कास्टिक बनावट का विस्थापन;

वैरिएबल को _Caustics_ST क्यों कहा जाता है?

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

उदाहरण के लिए, यदि आप _MainTex_ST वेरिएबल _MainTex_ST , तो आप इसका उपयोग मॉडल को बनावट लागू करते समय आकार और ऑफसेट सेट करने के लिए कर सकते हैं।

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

नमूने की बनावट

प्रत्येक सतह शेडर में एक फ़ंक्शन होता है, जिसे आमतौर पर surf कहा जाता है, जिसका उपयोग प्रत्येक प्रदान किए गए पिक्सेल के रंग को निर्धारित करने के लिए किया जाता है। "मानक" surf फ़ंक्शन इस तरह दिखता है:

 void surf (Input IN, inout SurfaceOutputStandard o) { // Albedo comes from a texture tinted by color fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; // Metallic and smoothness come from slider variables o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = ca; }

अंतिम रंग फ़ील्ड की संख्या से निर्धारित होता है जिसे शेडर को SurfaceOutputStandard नामक संरचना में शुरू और वापस करना होगा। हमें Albedo को बदलने की जरूरत है, जो सफेद रोशनी से रोशन की गई वस्तु के रंग से मेल खाता है।

नव निर्मित सतह शेडर में, एल्बिडो को _MainTex नामक बनावट से लिया गया है। चूंकि कास्टिक प्रभाव मौजूदा बनावट के शीर्ष पर है, इसलिए हमें _CausticsTex में बनावट के अतिरिक्त नमूने का प्रदर्शन करना होगा।

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

हमारा विचार है कि मॉडल पर कास्टिक बनावट को फैलाने और स्थानांतरित करने के लिए _Caustics_ST को स्केल और ऑफ़सेट करने के लिए _Caustics_ST का उपयोग _Caustics_ST है।

 void surf (Input IN, inout SurfaceOutputStandard o) { // Albedo comes from a texture tinted by color fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; // Caustics sampling fixed2 uv = IN.uv_MainTex * _Caustics_ST.xy + _Caustics_ST.zw; fixed3 caustics = tex2D(_CausticsTex, uv).rgb; // Add o.Albedo.rgb += caustics; // Metallic and smoothness come from slider variables o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = ca; }

यदि अल्बेडो 1 से अधिक हो जाए तो क्या होगा?

उपरोक्त कोड में, हम दो बनावट जोड़ते हैं। रंग आमतौर पर के बीच है

0

$0$ को

1

$1$ हालांकि, इसमें कोई गारंटी नहीं है कि परिणामस्वरूप, कुछ मूल्य इस अंतराल से अधिक नहीं होंगे।

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

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

1

$1$ । इसके अलावा, पड़ोसी पिक्सल पर अत्यधिक मात्रा में रंगों को धुंधला करने के लिए, बाद के प्रसंस्करण प्रभाव की आवश्यकता होती है।

एकता का अपना स्वयं का पोस्ट-प्रोसेसिंग स्टैक है, जिसमें एक ब्लूम फ़िल्टर है जो बस ऐसा करता है। आप इसके बारे में यूनिटी ब्लॉग पर अधिक पढ़ सकते हैं: PostFX v2 - अद्भुत दृश्य, उन्नत ।

प्रारंभिक परिणाम नीचे दिखाए गए हैं:

एनिमेटेड कास्टिक

कास्टिक की सबसे महत्वपूर्ण विशेषताओं में से एक यह कैसे चलती है। फिलहाल, वे केवल एक दूसरी बनावट के रूप में मॉडल की सतह पर सांख्यिकीय रूप से अनुमानित हैं।

_Time में सामग्रियों का एनीमेशन एकता संपत्ति _Time का उपयोग करके लागू किया जा सकता है। इसका उपयोग वर्तमान गेम समय तक पहुंचने के लिए किया जा सकता है, अर्थात समीकरणों में समय जोड़ें।

सबसे आसान तरीका है कि मौजूदा समय के आधार पर केवल बनावट को ऑफसेट किया जाए।

 // Caustics UV fixed2 uv = IN.uv_MainTex * _Caustics_ST.xy + _Caustics_ST.zw; uv += _CausticsSpeed * _Time.y; // Sampling fixed3 caustics = tex2D(_CausticsTex, uv).rgb; // Add o.Albedo.rgb += caustics;

_Time.y फ़ील्ड में सेकंड में वर्तमान खेल का समय होता है। यदि प्रतिबिंब बहुत तेज चलता है, तो आप इसे एक कारक से गुणा कर सकते हैं। इसके लिए, टाइप float2 के _CausticsSpeed वैरिएबल को ऊपर प्रस्तुत कोड में उपयोग किया जाता है।

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

नीचे दिखाए गए परिणाम अभी भी बहुत औसत दर्जे के हैं। यह सामान्य है: प्रतिबिंबों को सुंदर बनाने के लिए हमारे पास अभी भी बहुत कुछ है।

कई नमूने

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

सबसे पहले, हम _Caustics_ST और _CausticsSpeed गुणों की नकल करते हैं ताकि दो बनावटों के नमूनों में अलग-अलग पैमाने, विस्थापन और गति हो:

 [Header(Caustics)] _CausticsTex("Caustics (RGB)", 2D) = "white" {} // Tiling X, Tiling Y, Offset X, Offset Y _Caustics1_ST("Caustics 1 ST", Vector) = (1,1,0,0) _Caustics2_ST("Caustics 1 ST", Vector) = (1,1,0,0) // Speed X, Speed Y _Caustics1_Speed("Caustics 1 Speed", Vector) = (1, 1, 0 ,0) _Caustics2_Speed("Caustics 2 Speed", Vector) = (1, 1, 0 ,0)

अब जब हमारे पास दो कास्टिक नमूने हैं, तो उन्हें min ऑपरेटर का उपयोग करके मिलाया जा सकता है। यदि आप केवल औसत मूल्य लेते हैं, तो परिणाम बहुत अच्छा नहीं होगा।

 // Caustics samplings fixed3 caustics1 = ... fixed3 caustics2 = ... // Blend o.Albedo.rgb += min(caustics1, caustics2);

इस तरह के एक छोटे से बदलाव से बहुत फर्क पड़ता है:

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

 // Caustics fixed3 c1 = causticsSample(_CausticsTex, IN.uv_MainTex, _Caustics1_ST, _Caustics1_Speed); fixed3 c2 = causticsSample(_CausticsTex, IN.uv_MainTex, _Caustics2_ST, _Caustics2_Speed); o.Albedo.rgb += min(c1, c2);

RGB पृथक्करण

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

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

आइए _SplitRGB संपत्ति को जोड़कर शुरू करें, जो _SplitRGB : _SplitRGB प्रभाव की ताकत को इंगित करता है:

 // Caustics UV fixed2 uv = IN.uv_MainTex * _Caustics_ST.xy + _Caustics_ST.zw; uv += _CausticsSpeed * _Time.y; // RGB split fixed s = _SplitRGB; fixed r = tex2D(tex, uv + fixed2(+s, +s)).r; fixed g = tex2D(tex, uv + fixed2(+s, -s)).g; fixed b = tex2D(tex, uv + fixed2(-s, -s)).b; fixed3 caustics = fixed3(r, g, b);

आरजीबी चैनलों की ऑफसेट की राशि को मनमाने ढंग से चुना जा सकता है, लेकिन इस सरल ऑफसेट के साथ भी, एक बहुत ही ठोस चित्र प्राप्त होता है:

निष्कर्ष और डाउनलोड

यदि आप सीखना चाहते हैं कि सहज कास्टिक बनावट कैसे बनाएं, तो आपको दिलचस्प लेख आवधिक कास्टिक बनावट पढ़ना चाहिए।

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

इस ट्यूटोरियल के लिए एक पूरा पैकेज पैट्रियन पर उपलब्ध है, इसमें इस तकनीक को फिर से बनाने के लिए सभी आवश्यक संपत्ति शामिल हैं। पैकेज को यूनिटी 2019.2 से निर्यात किया गया था और इसके लिए पोस्टप्रोसेसिंग स्टैक v2 की आवश्यकता है।

मानक एसेट : केवल शैडर फ़ाइल
भुगतान की गई संपत्ति : कास्टिक बनावट और सामग्री सहित पूर्ण दृश्य।

यथार्थवादी कास्टिक प्रतिबिंब