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

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

---

ग्रेस्केल में पोस्ट-प्रोसेसिंग का प्रभाव

बस संदर्भ के लिए, यह वही है जो एक दृश्य पोस्ट-प्रोसेसिंग प्रभाव के बिना दिखता है।


इस प्रभाव के लिए, मैंने नए यूनिटी 2018 पोस्ट-प्रोसेसिंग पैकेज का उपयोग किया, जिसे पैकेज मैनेजर से डाउनलोड किया जा सकता है। यदि आप नहीं जानते कि इसका उपयोग कैसे करना है, तो मैं इस ट्यूटोरियल की सलाह देता हूं।

मैंने C # में लिखे गए PostProcessingEffectSettings और PostProcessEffectRenderer क्लासेस को बढ़ाकर अपना प्रभाव लिखा, जिसका सोर्स कोड यहाँ देखा जा सकता है । वास्तव में, मैंने सीपीयू की तरफ (सी # कोड में) इन प्रभावों के साथ विशेष रूप से कुछ भी दिलचस्प नहीं किया, सिवाय इसके कि मैंने इंस्पेक्टर में सामान्य गुणों का एक समूह जोड़ा, इसलिए मैंने यह नहीं समझा कि ट्यूटोरियल में यह कैसे किया जाए। मुझे उम्मीद है कि मेरा कोड अपने लिए बोलता है।

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

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

हम स्केलर उत्पाद का उपयोग क्यों करते हैं? यह मत भूलो कि अदिश उत्पादों की गणना निम्न प्रकार से की जाती है:

dot(a, b) = a x * b x + a y * b y + a z * b z

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

यहाँ shader कोड कैसा दिखता है:

 float4 fullColor = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, i.screenPos); float3 weight = float3(0.299, 0.587, 0.114); float luminance = dot(fullColor.rgb, weight); float3 greyscale = luminance.xxx; return float4(greyscale, 1.0); 

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

---

विश्व अंतरिक्ष में रंग प्रभाव प्रदान करना

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

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

आमतौर पर, एक समन्वित स्थान से दूसरे में जाने के लिए, एक मैट्रिक्स की आवश्यकता होती है जो समन्वय अंतरिक्ष A से अंतरिक्ष B. में परिवर्तन को परिभाषित करता है। A से B तक जाने के लिए, हम इस रूपांतरण मैट्रिक्स द्वारा निर्देशांक स्थान A में वेक्टर को गुणा करते हैं। हमारे मामले में, हम निम्नलिखित संक्रमण का प्रदर्शन करेंगे: काटे गए निर्देशांक (क्लिप स्पेस) का स्थान -> दृश्य स्थान (दृश्य स्थान) -> विश्व स्थान (विश्व स्थान) । यही है, हमें क्लिप-टू-व्यू-स्पेस मैट्रिक्स और व्यू-टू-वर्ल्ड-स्पेस मैट्रिक्स की आवश्यकता है जो एकता प्रदान करती है।

हालाँकि, काटे गए समन्वित स्थान के एकता निर्देशांक में z मान नहीं होता है जो पिक्सेल की गहराई, या कैमरे की दूरी निर्धारित करता है। हमें इस मान की आवश्यकता है कि ट्रंकित निर्देशांक के स्थान से प्रजाति के स्थान पर जाना है। इस के साथ शुरू करते हैं!

गहराई बफर मान प्राप्त करना

यदि रेंडरिंग पाइपलाइन सक्षम है, तो यह व्यूपोर्ट में एक बनावट खींचती है जो z मानों को एक गहराई बफर नामक संरचना में संग्रहीत करती है । हम इस बफर को हमारे समन्वित अंतरिक्ष के लापता ज़ मान को प्राप्त करने के लिए नमूना कर सकते हैं!

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

Hlsl फ़ाइल में एक _CameraDepthTexture नमूना बनाएँ

 TEXTURE2D_SAMPLER2D(_CameraDepthTexture, sampler_CameraDepthTexture); 

अब GetWorldFromViewPosition फ़ंक्शन को लिखते हैं और अब हम इसका उपयोग गहराई बफ़र की जांच करने के लिए करेंगे। (बाद में हम इसे दुनिया में स्थान पाने के लिए विस्तारित करेंगे।)

 float3 GetWorldFromViewPosition (VertexOutput i) { float z = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.screenPos).r; return z.xxx; } 

टुकड़ा shader में, गहराई बनावट नमूने के मूल्य आकर्षित।

 float3 depth = GetWorldFromViewPosition(i); return float4(depth, 1.0); 

यह मेरा परिणाम है जब दृश्य में केवल एक पहाड़ी मैदान है (मैंने विश्व अंतरिक्ष के मूल्यों के परीक्षण को और सरल बनाने के लिए सभी पेड़ों को बंद कर दिया)। आपका परिणाम समान दिखना चाहिए। ब्लैक एंड व्हाइट मान ज्यामिति से कैमरे की दूरी का वर्णन करते हैं।


यदि आप समस्याओं का सामना करते हैं, तो यहां कुछ कदम उठाए जा सकते हैं:

• सुनिश्चित करें कि कैमरे में गहराई से रेंडरिंग सक्षम है।
• सुनिश्चित करें कि कैमरे में MSAA सक्षम है।
• कैमरे के पास और दूर विमान को बदलने की कोशिश करें।
• सुनिश्चित करें कि आप जिन वस्तुओं को गहराई से बफर में देखने की उम्मीद करते हैं, वे एक गहराई पास के साथ एक शेडर का उपयोग करते हैं। यह सुनिश्चित करता है कि ऑब्जेक्ट गहराई बफ़र पर आ जाता है। LWRP में सभी मानक शेड्स ऐसा करते हैं।

विश्व अंतरिक्ष में मूल्य प्राप्त करना

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

ध्यान दें कि इन परिचालनों के लिए आवश्यक परिवर्तन मैट्रिक्स एसआरपी पुस्तकालय में पहले से ही हैं। हालाँकि, वे यूनिटी इंजन के C # लाइब्रेरी में समाहित हैं, इसलिए मैंने उन्हें ColorSpreadRenderer स्क्रिप्ट के रेंडर फ़ंक्शन में शेडर में डाला:

 sheet.properties.SetMatrix("unity_ViewToWorldMatrix", context.camera.cameraToWorldMatrix); sheet.properties.SetMatrix("unity_InverseProjectionMatrix", projectionMatrix.inverse); 

अब अपने GetWorldFromViewPosition फ़ंक्शन का विस्तार करते हैं।

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

अंत में, हम ViewToWorldMatrix द्वारा व्यूपोर्ट में स्थिति को विश्व अंतरिक्ष में स्थान प्राप्त करने के लिए गुणा कर सकते हैं ।

 float3 GetWorldFromViewPosition (VertexOutput i) { //    float z = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, i.screenPos).r; //      float4 result = mul(unity_InverseProjectionMatrix, float4(2*i.screenPos-1.0, z, 1.0)); float3 viewPos = result.xyz / result.w; //      float3 worldPos = mul(unity_ViewToWorldMatrix, float4(viewPos, 1.0)); return worldPos; } 

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


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


यह पूरी तरह से मेरे द्वारा लिखे गए टेस्ट शैडर के समान है, अर्थात्, विश्व अंतरिक्ष की गणना सबसे अधिक सही है!

विश्व अंतरिक्ष में एक वृत्त खींचना

अब जब हमारे पास विश्व स्थान है , तो हम दृश्य में रंग का एक वृत्त खींच सकते हैं! हमें त्रिज्या सेट करने की आवश्यकता है जिसके भीतर प्रभाव रंग खींचेगा। बाहर, प्रभाव ग्रेस्केल में चित्र को प्रस्तुत करेगा। इसे सेट करने के लिए, आपको प्रभाव त्रिज्या ( _MaxSize ) और सर्कल के केंद्र ( _enter ) के मूल्यों को समायोजित करने की आवश्यकता है। मैंने इन मानों को C # ColorSpread वर्ग में सेट किया ताकि वे निरीक्षक में दिखाई दें। चलिए यह जाँचने के लिए मजबूर करते हैं कि वर्तमान पिक्सेल सर्कल के दायरे में है या नहीं

 float4 Frag(VertexOutput i) : SV_Target { float3 worldPos = GetWorldFromViewPosition(i); // ,      .  //   ,   ,  ,   float dist = distance(_Center, worldPos); float blend = dist <= _MaxSize? 0 : 1; //   float4 fullColor = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, i.screenPos); //   float luminance = dot(fullColor.rgb, float3(0.2126729, 0.7151522, 0.0721750)); float3 greyscale = luminance.xxx; // ,       float3 color = (1-blend)*fullColor + blend*greyscale; return float4(color, 1.0); } 

अंत में, हम इस आधार पर रंग खींच सकते हैं कि क्या यह विश्व अंतरिक्ष में एक त्रिज्या के अंदर है । यह आधार प्रभाव जैसा दिखता है!

---

विशेष प्रभाव जोड़ना

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

सर्कल इज़ाफ़ा एनीमेशन

हम चाहते हैं कि प्रभाव पूरे विश्व में फैले, जैसे कि बढ़ रहा है। ऐसा करने के लिए, आपको समय के आधार पर त्रिज्या को बदलने की आवश्यकता है।

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

_GrowthSpeed ​​सर्कल बढ़ाने की गति निर्धारित करता है।

 //           float timeElapsed = _Time.y - _StartTime; float effectRadius = min(timeElapsed * _GrowthSpeed, _MaxSize); //  ,      effectRadius = clamp(effectRadius, 0, _MaxSize); 

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

 // ,         //   ,   ,  ,   float dist = distance(_Center, worldPos); float blend = dist <= effectRadius? 0 : 1; //     ... 

यहाँ परिणाम कैसा दिखना चाहिए:

शोर की त्रिज्या में जोड़ना

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

पहले हमें विश्व अंतरिक्ष में बनावट का नमूना लेना होगा। I.screenPos के यूवी निर्देशांक स्क्रीन स्पेस में स्थित हैं, और अगर हम उनके आधार पर नमूना लेते हैं, तो प्रभाव का आकार कैमरा के साथ चलेगा; तो चलो विश्व अंतरिक्ष में निर्देशांक का उपयोग करें। मैंने शोर बनावट के नमूने के पैमाने को नियंत्रित करने के लिए _NoiseTexScale पैरामीटर जोड़ा, क्योंकि विश्व अंतरिक्ष में निर्देशांक काफी बड़ा है।

 //          float2 worldUV = worldPos.xz; worldUV *= _NoiseTexScale; 

अब चलो शोर बनावट का नमूना लें और इस मूल्य को प्रभाव की त्रिज्या में जोड़ें। मैंने शोर आकार पर अधिक नियंत्रण के लिए _NoiseSize स्केल का उपयोग किया।

 //     float noise = SAMPLE_TEXTURE2D(_NoiseTex, sampler_NoiseTex, worldUV).r; effectRadius -= noise * _NoiseSize; 

यहाँ कुछ ट्वीकिंग के बाद के परिणाम दिखते हैं:

---

निष्कर्ष में

आप मेरे ट्विटर पर ट्यूटोरियल के अपडेट का पालन कर सकते हैं, और ट्विच पर मैं कोडिंग स्ट्रीम खर्च करता हूं! (इसके अलावा, मैं समय-समय पर खेलों को स्ट्रीम करता हूं, इसलिए अगर आप मुझे मेरे पजामे में बैठते हैं और किंगडम सीट 3 खेलते हैं तो आश्चर्यचकित न हों।)

धन्यवाद:

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