एकता इंटरएक्टिव मैप शेडर्स

यह ट्यूटोरियल इंटरैक्टिव मैप्स के बारे में है और शेड्स का उपयोग करके उन्हें एकता में बनाना है।

यह प्रभाव अधिक जटिल तकनीकों के लिए आधार के रूप में काम कर सकता है, जैसे कि होलोग्राफिक अनुमान या यहां तक ​​कि फिल्म "ब्लैक पैंथर्स" से एक रेत की मेज।

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



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

भाग 1. वर्टेक्स ऑफ़सेट

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

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

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

जाहिर है, एक अधिक तकनीकी दृष्टिकोण सबसे अच्छा है। सौभाग्य से, shaders का उपयोग 3D मॉडल की ज्यामिति को बदलने के लिए किया जा सकता है। उनकी मदद से, आप किसी भी विमान को उस क्षेत्र की घाटियों और पहाड़ों में बदल सकते हैं जिनकी हमें आवश्यकता है।

इस ट्यूटोरियल में, हम चिल्लोट , मिर्च के मानचित्र का उपयोग करते हैं, जो अपनी विशिष्ट पहाड़ियों के लिए प्रसिद्ध है। नीचे दी गई छवि एक गोल जाल पर प्लॉट किए गए क्षेत्र की बनावट को दर्शाती है।


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

आदर्श मानदंड

ज्यामिति को बदलने के लिए शेड्स का उपयोग करने वाला पहला कदम एक तकनीक है जिसे सामान्य एक्सट्रूज़न कहा जाता है । उसे एक शीर्ष संशोधक की आवश्यकता है : एक फ़ंक्शन जो एक 3 डी मॉडल के व्यक्तिगत कोने में हेरफेर कर सकता है।

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

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


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


एक सतह shader में extruded मानदंडों को जोड़ना बहुत आसान है। प्रत्येक सतह shader में एक #pragma , जिसका उपयोग अतिरिक्त सूचना और आदेश प्रसारित करने के लिए किया जाता है। ऐसा एक आदेश vert , जिसका अर्थ है कि 3 डी मॉडल के प्रत्येक शीर्ष को संसाधित करने के लिए vert फ़ंक्शन का उपयोग किया जाएगा।

संपादित shader इस प्रकार है:

 #pragma surface surf Standard fullforwardshadows addshadow vertex:vert ... float _Amount; ... void vert(inout appdata_base v) { v.vertex.xyz += v.normal * _Amount; } 

चूंकि हम शीर्षों की स्थिति को बदल रहे हैं, इसलिए हमें addshadow का उपयोग करने की भी आवश्यकता है यदि हम चाहते हैं कि मॉडल सही ढंग से अपने आप पर छाया डाले।

बनावट के साथ आदर्श मानदंडों को पूरा करना

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


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



मैंने ट्यूटोरियल की एक और श्रृंखला में गहराई के नक्शे की अवधारणा के बारे में विस्तार से बात की, जिसे "फेसबुक की 3 डी तस्वीरें अंदर से: लंबन शेड्स" [हैबे में अनुवाद ] कहा जाता है।

इस ट्यूटोरियल में, हम मानेंगे कि ऊंचाई का नक्शा ग्रेस्केल में एक छवि के रूप में संग्रहीत किया गया है, जहां काले और सफेद कम और अधिक ऊंचाई के अनुरूप हैं। हमें इन मूल्यों को रैखिक रूप से स्केल करने की आवश्यकता है , अर्थात् , रंग अंतर, उदाहरण के लिए, 0.1 पर 0 और 0.1 बीच या 0.9 और 1.0 बीच ऊंचाई के अंतर से मेल खाती है। गहराई के नक्शे के लिए, यह हमेशा सच नहीं होता है, क्योंकि उनमें से कई गहराई जानकारी को एक लघुगणकीय पैमाने पर संग्रहीत करते हैं।

एक बनावट का नमूना लेने के लिए, जानकारी के दो तत्वों की आवश्यकता होती है: बनावट और बिंदु के यूवी निर्देशांक जो हम नमूना करना चाहते हैं। बाद वाले को texcoord फ़ील्ड के माध्यम से एक्सेस किया जा सकता है, जिसे appdata_base संरचना में संग्रहीत किया गया है। यह वर्तमान प्रक्रिया के साथ संसाधित किए जा रहे वर्तमान शीर्ष से संबंधित यूवी समन्वय है। एक सतह फ़ंक्शन में बनावट नमूनाकरण tex2D का उपयोग करके किया जाता है, हालांकि जब हम एक , तो tex2Dlod की आवश्यकता होती है।

नीचे दिए गए कोड स्निपेट में, _HeightMap नामक एक बनावट _HeightMap उपयोग प्रत्येक शीर्ष के लिए किए गए एक्सट्रूज़न मान को संशोधित करने के लिए किया जाता है:

 sampler2D _HeightMap; ... void vert(inout appdata_base v) { fixed height = tex2Dlod(_HeightMap, float4(v.texcoord.xy, 0, 0)).r; vertex.xyz += v.normal * height * _Amount; } 

Tex2D को वर्टेक्स फ़ंक्शन के रूप में उपयोग क्यों नहीं किया जा सकता है?
यदि आप उस कोड को देखते हैं जो एकता स्टैंडर्ड सरफेस शैडर के लिए उत्पन्न करता है, तो आप देखेंगे कि इसमें पहले से ही बनावट का नमूना कैसे शामिल है। विशेष रूप से, यह मुख्य बनावट (जिसे _MainTex कहा जाता है) को एक सतह फ़ंक्शन (जिसे surf कहा जाता है) में बिल्ट-इन tex2D फ़ंक्शन का उपयोग करके tex2D है।

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

कारण यह है कि tex2D न केवल बनावट से पिक्सल पढ़ता है। वह यह भी तय करती है कि कैमरे के लिए दूरी के आधार पर बनावट के किस संस्करण का उपयोग करना है। इस तकनीक को माइपमैपिंग कहा जाता है: यह आपको एक ही बनावट के छोटे संस्करण बनाने की अनुमति देता है जिसे स्वचालित रूप से विभिन्न दूरी पर उपयोग किया जा सकता है।

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

परिणाम नीचे दी गई छवियों में स्पष्ट रूप से दिखाई दे रहा है।



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

इसलिए, आप v.normal निकाल सकते हैं और इसे float3(0, 1, 0) :

 void vert(inout appdata_base v) { float3 normal = float3(0, 1, 0); fixed height = tex2Dlod(_HeightMap, float4(v.texcoord.xy, 0, 0)).r; vertex.xyz += normal * height * _Amount; } 

हम ऐसा कर सकते हैं क्योंकि appdata_base में सभी निर्देशांक मॉडल स्थान में संग्रहीत हैं, अर्थात, वे 3 डी मॉडल के केंद्र और अभिविन्यास के सापेक्ष सेट किए गए हैं। एकता में परिवर्तन के साथ संक्रमण, रोटेशन और स्केलिंग वस्तु की स्थिति, रोटेशन और पैमाने को बदलते हैं, लेकिन मूल 3 डी मॉडल को प्रभावित नहीं करते हैं।

भाग 2. स्क्रॉलिंग प्रभाव

हमने ऊपर जो कुछ भी किया वह बहुत अच्छा काम करता है। आगे बढ़ने से पहले, हम नए वर्टेक्स की ऊँचाई को एक अलग getVertex फ़ंक्शन में गणना करने के लिए आवश्यक कोड getVertex :

 float4 getVertex(float4 vertex, float2 texcoord) { float3 normal = float3(0, 1, 0); fixed height = tex2Dlod(_HeightMap, float4(texcoord, 0, 0)).r; vertex.xyz += normal * height * _Amount; return vertex; } 

तब पूरे फ़ंक्शन vert होगा:

 void vert(inout appdata_base v) { vertex = getVertex(v.vertex, v.texcoord.xy); } 

हमने ऐसा किया क्योंकि नीचे हमें कई बिंदुओं की ऊंचाई की गणना करने की आवश्यकता है। इस तथ्य के कारण कि यह कार्यक्षमता अपने अलग कार्य में होगी, कोड बहुत सरल हो जाएगा।

यूवी समन्वय गणना

हालाँकि, यह हमें दूसरी समस्या की ओर ले जाता है। getVertex फ़ंक्शन न केवल वर्तमान शीर्ष (v.vertex) की स्थिति पर निर्भर करता है, बल्कि इसके यूवी निर्देशांक ( v.texcoord ) पर भी निर्भर करता है।

जब हम वर्टेक्स की ऊँचाई की गणना करना चाहते हैं तो यह कहते हैं कि appdata_base फंक्शन वर्तमान में प्रोसेस कर रहा है, दोनों डेटा एलिमेंट्स appdata_base स्ट्रक्चर में उपलब्ध हैं। हालाँकि, क्या होता है अगर हमें पड़ोसी बिंदु की स्थिति का नमूना लेने की आवश्यकता है? इस स्थिति में, हम मॉडल स्थान में xyz स्थिति जान सकते हैं, लेकिन हमारे पास इसके UV-निर्देशांक तक पहुंच नहीं है।

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

सबसे आसान तरीका एक 3D ऑब्जेक्ट के यूवी निर्देशांक की गणना करने का एक तरीका खोजना है, इसके शीर्ष की स्थिति को जानना। यह एक बहुत मुश्किल काम है, और इसे हल करने के लिए कई तकनीकें हैं (सबसे लोकप्रिय में से एक है ट्रिप्लानार प्रोजेक्शन )। लेकिन इस विशेष मामले में, हमें यूवी को ज्यामिति के साथ मिलान करने की आवश्यकता नहीं है। यदि हम यह मान लेते हैं कि शेड को हमेशा सपाट जाली पर लगाया जाएगा, तो कार्य तुच्छ हो जाएगा।

हम इस तथ्य के कारण यूवी-निर्देशांक (निचली छवि) की गणना इस तथ्य के कारण कर सकते हैं कि दोनों एक सपाट जाल पर रैखिक रूप से सुपरिंपोज किए गए हैं।



इसका मतलब यह है कि हमारी समस्या को हल करने के लिए, हमें शीर्ष स्थान के घटकों के XZ को इसी यूवी निर्देशांक में बदलना होगा।


इस प्रक्रिया को रैखिक प्रक्षेप कहा जाता है । मेरी वेबसाइट पर इस पर विस्तार से चर्चा की गई है (उदाहरण के लिए: द सीक्रेट्स ऑफ कलर इंटरपोलेशन )।

ज्यादातर मामलों में, यूवी मान सीमा में हैं $$$0$ को $$$1$ ; इसके विपरीत, प्रत्येक शीर्ष के निर्देशांक संभावित रूप से असीमित हैं। गणित के दृष्टिकोण से, XZ से UV में रूपांतरण के लिए, हमें केवल उनके सीमा मूल्यों की आवश्यकता है:

• $$$X_ {मिनट}$ । $$$X_ {अधिकतम}$
• $$$Z_ {मिनट}$ । $$$Z_ {अधिकतम}$
• $$$U_ {मिनट}$ । $$$U_ {अधिकतम}$
• $$$V_ {मिनट}$ । $$$V_ {अधिकतम}$

जो नीचे दिखाए गए हैं:


ये मान उपयोग की गई जाली के आधार पर भिन्न होते हैं। यूनिटी विमान पर, यूवी निर्देशांक से सीमा में हैं $$$0$ को $$$1$ , और कोने के निर्देशांक सीमा से हैं $$$-5$ को $$$+ 5$ ।

XZ को UV में परिवर्तित करने के समीकरण हैं:

(1)


इन समीकरणों को कोड में लागू किया जा सकता है:

 float2 _VertexMin; float2 _VertexMax; float2 _UVMin; float2 _UVMax; float2 vertexToUV(float4 vertex) { return (vertex.xz - _VertexMin) / (_VertexMax - _VertexMin) * (_UVMax - _UVMin) + _UVMin; } 

अब हम getVertex फ़ंक्शन को v.texcoord पास किए बिना कॉल कर सकते हैं:

 float4 getVertex(float4 vertex) { float3 normal = float3(0, 1, 0); float2 texcoord = vertexToUV(vertex); fixed height = tex2Dlod(_HeightMap, float4(texcoord, 0, 0)).r; vertex.xyz += normal * height * _Amount; return vertex; } 

तब पूरे फंक्शन vert का रूप लेता है:

 void vert(inout appdata_base v) { v.vertex = getVertex(v.vertex); } 

स्क्रॉल प्रभाव

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

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


इस क्षेत्र को दो मूल्यों द्वारा परिभाषित किया जा सकता है: इसका आकार ( _CropSize ) और मानचित्र पर स्थान ( _CropOffset ), शीर्ष स्थान में मापा गया ( _VertexMin से _VertexMax )।

 // Cropping float2 _CropSize; float2 _CropOffset; 

इन दो मूल्यों को प्राप्त करने के बाद, हम एक बार फिर रैखिक प्रक्षेप का उपयोग कर सकते हैं ताकि getVertex 3D मॉडल के शीर्ष की वर्तमान स्थिति के लिए नहीं, बल्कि स्केल और स्थानांतरित बिंदु के लिए कहा जाए।


प्रासंगिक कोड:

 void vert(inout appdata_base v) { float2 croppedMin = _CropOffset; float2 croppedMax = croppedMin + _CropSize; // v.vertex.xz: [_VertexMin, _VertexMax] // cropped.xz : [croppedMin, croppedMax] float4 cropped = v.vertex; cropped.xz = (v.vertex.xz - _VertexMin) / (_VertexMax - _VertexMin) * (croppedMax - croppedMin) + croppedMin; v.vertex.y = getVertex(cropped); } 

यदि हम स्क्रॉल करना चाहते हैं, तो यह स्क्रिप्ट के माध्यम से _CropOffset को अपडेट करने के लिए पर्याप्त होगा। इसके कारण, ट्रंकेशन क्षेत्र हिल जाएगा, वास्तव में परिदृश्य के माध्यम से स्क्रॉल करना।

 public class MoveMap : MonoBehaviour { public Material Material; public Vector2 Speed; public Vector2 Offset; private int CropOffsetID; void Start () { CropOffsetID = Shader.PropertyToID("_CropOffset"); } void Update () { Material.SetVector(CropOffsetID, Speed * Time.time + Offset); } } 

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

ज़ूम / ज़ूम प्रभाव के लिए, बस _CropSize बदलना _CropSize ।

भाग 3. इलाके की छायांकन

सपाट छायांकन

हमारे द्वारा लिखे गए सभी कोड काम करते हैं, लेकिन एक गंभीर समस्या है। मॉडल को छायांकन करना कुछ अजीब है। सतह ठीक से घुमावदार है, लेकिन प्रकाश पर प्रतिक्रिया करता है जैसे कि यह सपाट था।

यह नीचे की छवियों में बहुत स्पष्ट रूप से देखा जाता है। शीर्ष छवि एक मौजूदा shader को दिखाती है; नीचे दिखाया गया है कि यह वास्तव में कैसे काम करता है।



इस समस्या को हल करना एक बड़ी चुनौती हो सकती है। लेकिन पहले, हमें यह पता लगाने की आवश्यकता है कि त्रुटि क्या है।

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


हालांकि, हमारे मामले में विपरीत होता है। ज्यामिति घुमावदार और चिकनी है, लेकिन चूंकि सभी मानदंडों को ऊपर की ओर निर्देशित किया गया है, प्रकाश मॉडल से परिलक्षित होता है जैसे कि यह सपाट था (नीचे देखें):


आप सामान्य मैपिंग (बम्प मैपिंग) पर लेख में ऑब्जेक्ट छायांकन में मानदंडों की भूमिका के बारे में अधिक पढ़ सकते हैं, जहां समान सिलेंडर बहुत अलग दिखते हैं, वही 3D मॉडल के बावजूद, वर्टिकल नॉर्म्स (नीचे देखें) की गणना करने के विभिन्न तरीकों के कारण।



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

सामान्य गणना

छायांकन समस्या को ठीक करने का एकमात्र तरीका सतह ज्यामिति के आधार पर मानदंडों की मैन्युअल रूप से गणना करना है। इसी तरह के कार्य को वर्टेक्स विस्थापन - मेल्टिंग शेडर पार्ट 1 द्वारा एक पोस्ट में चर्चा की गई थी, जहां इसका उपयोग कोन वार्स में 3 डी मॉडल के पिघलने का अनुकरण करने के लिए किया गया था।

हालांकि समाप्त कोड को 3 डी निर्देशांक में काम करना होगा, आइए अब केवल दो आयामों के लिए कार्य को प्रतिबंधित करें। कल्पना करें कि आपको 2 डी वक्र (नीचे दिए गए आरेख में बड़ा नीला तीर) पर बिंदु के समान सामान्य की दिशा की गणना करने की आवश्यकता है।


एक ज्यामितीय दृष्टिकोण से, सामान्य (बड़ा नीला तीर) की दिशा हमारे लिए ब्याज की बिंदु (एक पतली नीली रेखा) से गुजरती स्पर्शरेखा के लिए एक लंबवत लंबवत है। स्पर्शरेखा को मॉडल की वक्रता पर स्थित रेखा के रूप में दर्शाया जा सकता है। एक स्पर्शरेखा वेक्टर एक इकाई वेक्टर है जो एक स्पर्शरेखा पर स्थित होता है।

इसका मतलब है कि सामान्य की गणना करने के लिए, आपको दो कदम उठाने की आवश्यकता है: सबसे पहले, वांछित बिंदु पर स्पर्शरेखा को ढूंढें; इसके बाद वेक्टर लंब की गणना करें (जो सामान्य की आवश्यक दिशा होगी)।

स्पर्शरेखा गणना

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

तीन चरणों की आवश्यकता है:

• चरण 1. एक सपाट सतह पर एक छोटी राशि ले जाएँ
• चरण 2. नए बिंदु की ऊंचाई की गणना करें।
• चरण 3. स्पर्शरेखा की गणना करने के लिए वर्तमान बिंदु की ऊंचाई का उपयोग करें

यह सब नीचे दी गई छवि में देखा जा सकता है:


इसके लिए काम करने के लिए, हमें एक नहीं बल्कि दो बिंदुओं की ऊंचाइयों की गणना करने की आवश्यकता है। सौभाग्य से, हम पहले से ही जानते हैं कि यह कैसे करना है। ट्यूटोरियल के पिछले भाग में, हमने एक फ़ंक्शन बनाया जो एक जाल बिंदु के आधार पर एक परिदृश्य की ऊंचाई का नमूना लेता है। हमने इसे getVertex कहा है।

हम वर्तमान बिंदु पर और फिर दो अन्य स्थानों पर नए शीर्ष मान ले सकते हैं। एक स्पर्शरेखा के लिए होगा, दूसरा स्पर्शरेखा के लिए दो बिंदुओं पर होगा। उनकी मदद से, हम सामान्य हो जाते हैं। यदि प्रभाव पैदा करने के लिए इस्तेमाल किया जाने वाला मूल जाल सपाट है (और हमारे मामले में यह है), तो हमें v.normal तक पहुंच की आवश्यकता नहीं है और हम float3(0, 0, 1) और स्पर्शरेखा के लिए दो बिंदुओं पर क्रमशः उपयोग कर सकते हैं float3(0, 0, 1) और float3(1, 0, 0) । यदि हम ऐसा ही करना चाहते थे, लेकिन, उदाहरण के लिए, एक गोले के लिए, तो स्पर्शरेखा और स्पर्शरेखा की गणना दो बिंदुओं के लिए दो उपयुक्त बिंदुओं को खोजना अधिक कठिन होगा।

वेक्टर कलाकृति

दो बिंदुओं के लिए उपयुक्त स्पर्शरेखा और स्पर्शरेखा वैक्टर प्राप्त करने के बाद, हम वेक्टर उत्पाद नामक एक ऑपरेशन का उपयोग करके सामान्य की गणना कर सकते हैं। एक वेक्टर काम की कई परिभाषाएं और स्पष्टीकरण हैं और यह क्या करता है।

एक वेक्टर उत्पाद दो वैक्टर प्राप्त करता है और एक नया लौटाता है। यदि दो प्रारंभिक वैक्टर यूनिट थे (उनकी लंबाई एकता के बराबर है), और वे 90 के कोण पर स्थित हैं, तो परिणामस्वरूप वेक्टर दोनों के सापेक्ष 90 डिग्री पर स्थित होगा।

सबसे पहले, यह भ्रामक हो सकता है, लेकिन ग्राफिक रूप से इसे निम्नानुसार दर्शाया जा सकता है: दो अक्षों का वेक्टर उत्पाद एक तीसरा बनाता है। वह है $$$X \ गुना Y = Z$ लेकिन यह भी $$$X \ गुना Z = Y$ , और इसी तरह।

यदि हम पर्याप्त रूप से छोटा कदम उठाते हैं (कोड में, यह offset ), तो दो बिंदुओं पर स्पर्शरेखा और स्पर्शरेखा के वैक्टर 90 डिग्री के कोण पर होंगे।सामान्य वेक्टर के साथ मिलकर, वे तीन लंबवत अक्षों को मॉडल की सतह के साथ उन्मुख बनाते हैं।

यह जानकर, हम सामान्य वेक्टर की गणना और अद्यतन करने के लिए सभी आवश्यक कोड लिख सकते हैं।

 void vert(inout appdata_base v) { float3 bitangent = float3(1, 0, 0); float3 tangent = float3(0, 0, 1); float offset = 0.01; float4 vertexBitangent = getVertex(v.vertex + float4(bitangent * offset, 0) ); float4 vertex = getVertex(v.vertex); float4 vertexTangent = getVertex(v.vertex + float4(tangent * offset, 0) ); float3 newBitangent = (vertexBitangent - vertex).xyz; float3 newTangent = (vertexTangent - vertex).xyz; v.normal = cross(newTangent, newBitangent); v.vertex.y = vertex.y; } 

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

अब जब सब कुछ काम कर रहा है, हम स्क्रॉल प्रभाव वापस कर सकते हैं।

 void vert(inout appdata_base v) { // v.vertex.xz: [_VertexMin, _VertexMax] // cropped.xz : [croppedMin, croppedMax] float2 croppedMin = _CropOffset; float2 croppedMax = croppedMin + _CropSize; float4 cropped = v.vertex; cropped.xz = (v.vertex.xz - _VertexMin) / (_VertexMax - _VertexMin) * (croppedMax - croppedMin) + croppedMin; float3 bitangent = float3(1, 0, 0); float3 normal = float3(0, 1, 0); float3 tangent = float3(0, 0, 1); float offset = 0.01; float4 vertexBitangent = getVertex(cropped + float4(bitangent * offset, 0) ); float4 vertex = getVertex(cropped); float4 vertexTangent = getVertex(cropped + float4(tangent * offset, 0) ); float3 newBitangent = (vertexBitangent - vertex).xyz; float3 newTangent = (vertexTangent - vertex).xyz; v.normal = cross(newTangent, newBitangent); v.vertex.y = vertex.y; v.texcoord = float4(vertexToUV(cropped), 0,0); } 

और इस पर हमारा प्रभाव अंततः पूरा हो गया है।

आगे कहाँ जाना है

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

एकता पैकेज

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