🙌🏻 🐰 👩🏽‍🚀 2D में डिस्टेंस फील्ड बेसिक्स पर हस्ताक्षर किए ▫️ 😙 🆎

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

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

फाउंडेशन की तैयारी

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

Shader "Tutorial/034_2D_SDF_Basics"{ SubShader{ //           Tags{ "RenderType"="Opaque" "Queue"="Geometry"} Pass{ CGPROGRAM #include "UnityCG.cginc" #pragma vertex vert #pragma fragment frag struct appdata{ float4 vertex : POSITION; }; struct v2f{ float4 position : SV_POSITION; float4 worldPos : TEXCOORD0; }; v2f vert(appdata v){ v2f o; //         o.position = UnityObjectToClipPos(v.vertex); //     o.worldPos = mul(unity_ObjectToWorld, v.vertex); return o; } float scene(float2 position) { //      return 0; } fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = fixed4(dist, dist, dist, 1); return col; } ENDCG } } FallBack "Standard" //fallback   ,       }

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

 // in include file // include guards that keep the functions from being included more than once #ifndef SDF_2D #define SDF_2D // functions #endif

यदि शामिल फ़ाइल मुख्य shader के समान फ़ोल्डर में स्थित है, तो हम इसे केवल प्राग्म निर्माण का उपयोग करके शामिल कर सकते हैं।

 // in main shader #include "2D_SDF.cginc"

इसलिए हम प्रदान की गई सतह पर केवल एक काली सतह देखेंगे, उस पर एक संकेत के साथ दूरी प्रदर्शित करने के लिए तैयार है।

दौर

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

 float circle(float2 samplePosition, float radius){ return length(samplePosition); }

फिर आप सर्कल फ़ंक्शन को दृश्य फ़ंक्शन में कॉल कर सकते हैं और उस दूरी को वापस कर सकते हैं जो इसे वापस करता है।

 float scene(float2 position) { float sceneDistance = circle(position, 2); return sceneDistance; }

फिर हम गणनाओं में त्रिज्या जोड़ते हैं। हस्ताक्षरित दूरी के कार्यों का एक महत्वपूर्ण पहलू यह है कि जब हम ऑब्जेक्ट के अंदर होते हैं, तो हम सतह पर नकारात्मक दूरी प्राप्त करते हैं (यह है कि हस्ताक्षर किए गए शब्द का अर्थ है हस्ताक्षर किए गए दूरस्थ क्षेत्र में अभिव्यक्ति)। सर्कल को एक त्रिज्या में बढ़ाने के लिए, हम बस त्रिज्या को लंबाई से घटाते हैं। इस प्रकार, सतह, जो हर जगह है जहां फ़ंक्शन 0 देता है, बाहर की ओर बढ़ता है। वह जो 0 के आकार के साथ एक सर्कल के लिए सतह से दूरी की दो इकाइयों में है, 1 के त्रिज्या के साथ एक सर्कल से केवल एक इकाई है, और 3 के त्रिज्या वाले सर्कल के लिए सर्कल के अंदर एक इकाई (मूल्य -1) है;

 float circle(float2 samplePosition, float radius){ return length(samplePosition) - radius; }

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

विस्थापन

"एक बिंदु के स्थान का परिवर्तन" - यह वास्तव में है की तुलना में बहुत बुरा लगता है। इसका मतलब है कि हम फ़ंक्शन को बिंदु पास करते हैं, और फ़ंक्शन इसे बदल देता है ताकि हम अभी भी भविष्य में इसका उपयोग कर सकें। स्थानांतरण के मामले में, हम बस बिंदु से ऑफसेट घटाते हैं। स्थिति को तब घटाया जाता है जब हम आकृतियों को सकारात्मक दिशा में ले जाना चाहते हैं, क्योंकि जिन आकृतियों को हम अंतरिक्ष में स्थानांतरित करते हैं, वे विपरीत दिशा में अंतरिक्ष की ओर बढ़ते हैं।

उदाहरण के लिए, यदि हम स्थिति (3, 4) में एक गोले को खींचना चाहते हैं, तो हमें स्थान बदलने की आवश्यकता है ताकि (3, 4) बदल जाए (0, 0) , और इसके लिए हमें (3, 4) को घटाना होगा। अब यदि हम एक नए बिंदु के चारों ओर एक क्षेत्र बनाते हैं, तो यह एक पुराना बिंदु (3, 4) ।

 // in sdf functions include file float2 translate(float2 samplePosition, float2 offset){ return samplePosition - offset; }

 float scene(float2 position) { float2 circlePosition = translate(position, float2(3, 2)); float sceneDistance = circle(circlePosition, 2); return sceneDistance; }

आयत

एक और सरल आकार एक आयत है। शुरू करने के लिए, हम घटकों पर अलग से विचार करते हैं। पहले हम केंद्र से दूरी प्राप्त करते हैं, निरपेक्ष मूल्य लेते हैं। फिर, एक सर्कल के समान, हम आधे आकार को घटाते हैं (जो अनिवार्य रूप से एक आयत के त्रिज्या जैसा दिखता है)। केवल यह दिखाने के लिए कि परिणाम कैसे दिखेंगे, हम अभी के लिए केवल एक घटक वापस करेंगे।

 float rectangle(float2 samplePosition, float2 halfSize){ float2 componentWiseEdgeDistance = abs(samplePosition) - halfSize; return componentWiseEdgeDistance.x; }

अब हम केवल सबसे बड़े घटक को वापस करके आयत का एक सस्ता संस्करण प्राप्त कर सकते हैं। 2. यह कई मामलों में काम करता है, लेकिन सही ढंग से नहीं, क्योंकि यह कोनों के आसपास सही दूरी प्रदर्शित नहीं करता है।

आकृति के बाहर आयत के लिए सही मान पहले किनारों और 0 की दूरी के बीच अधिकतम ले जा सकते हैं, और फिर इसकी लंबाई ले सकते हैं।

यदि हम नीचे से दूरी को 0 तक सीमित नहीं करते हैं, तो हम बस कोनों (जहां किनारे की दूरी (0, 0) ) की दूरी की गणना करते हैं, लेकिन कोनों के बीच निर्देशांक 0 से नीचे नहीं गिरेंगे, इसलिए पूरे किनारे का उपयोग किया जाएगा। इसका नुकसान यह है कि 0 का उपयोग आकृति के पूरे अंदर के लिए किनारे से दूरी के रूप में किया जाता है।

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

 float rectangle(float2 samplePosition, float2 halfSize){ float2 componentWiseEdgeDistance = abs(samplePosition) - halfSize; float outsideDistance = length(max(componentWiseEdgeDistance, 0)); float insideDistance = min(max(componentWiseEdgeDistance.x, componentWiseEdgeDistance.y), 0); return outsideDistance + insideDistance; }

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

 float scene(float2 position) { float2 circlePosition = translate(position, float2(1, 0)); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; }

मोड़

घूमती हुई आकृतियाँ हिलने के समान है। आकृति की दूरी की गणना करने से पहले, हम निर्देशांक को विपरीत दिशा में घुमाते हैं। जितना संभव हो सके घुमावों की समझ को सरल बनाने के लिए, हम कोणों को रेडियन में प्राप्त करने के लिए 2 * पीआई द्वारा रोटेशन को गुणा करते हैं। इस प्रकार, हम फ़ंक्शन के लिए एक रोटेशन पास करते हैं, जहां 0.25 एक मोड़ का एक चौथाई है, 0.5 एक मोड़ का एक आधा है, और 1 एक पूर्ण मोड़ है (यदि आप इसे अधिक स्वाभाविक लगते हैं तो आप अलग-अलग रूपांतरण कर सकते हैं)। हम रोटेशन को उल्टा भी करते हैं, क्योंकि हमें उसी दिशा में स्थिति को विपरीत दिशा में घुमाने की आवश्यकता होती है जैसे कि चलते समय।

घुमाए गए निर्देशांक की गणना करने के लिए, हम पहले कोण के आधार पर साइन और कोसाइन की गणना करते हैं। Hlsl में एक sincos फ़ंक्शन होता है जो इन दोनों मानों की गणना तब तेजी से करता है जब अलग से गणना की जाती है।

घटक x के लिए एक नया सदिश का निर्माण करते समय, हम मूल घटक x को cosine से गुणा करते हैं और घटक y को sine से गुणा करते हैं। यह आसानी से याद किया जा सकता है अगर आपको याद है कि 0 का कोसाइन 1 है, और 0 से घुमाए जाने पर, हम चाहते हैं कि नए वेक्टर का घटक x पहले की तरह ही हो (जो कि 1 से गुणा हो)। घटक y, जो पहले ऊपर की ओर इशारा करता था, ने घटक x में कोई योगदान नहीं दिया, दाईं ओर घूमता है, और इसके मान 0 से शुरू होते हैं, पहले बड़े होते जाते हैं, अर्थात, इसकी गति पूरी तरह से एक साइन द्वारा वर्णित है।

नए वेक्टर के घटक y के लिए, हम पुराने वेक्टर के घटक y द्वारा कोसाइन को गुणा करते हैं और पुराने घटक x द्वारा गुणा किए गए साइन को घटाते हैं। यह समझने के लिए कि हम साइन को जोड़ने के बजाय घटाना क्यों करते हैं, घटक x द्वारा गुणा किया जाता है, यह कल्पना करना सबसे अच्छा है कि घड़ी की दिशा में बदल जाने पर वेक्टर (1, 0) बदलता है। परिणाम का y घटक 0 से शुरू होता है और फिर 0. से कम हो जाता है। यह विपरीत है कि साइन कैसे व्यवहार करता है, इसलिए हम साइन बदलते हैं।

 float2 rotate(float2 samplePosition, float rotation){ const float PI = 3.14159; float angle = rotation * PI * 2 * -1; float sine, cosine; sincos(angle, sine, cosine); return float2(cosine * samplePosition.x + sine * samplePosition.y, cosine * samplePosition.y - sine * samplePosition.x); }

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

 float scene(float2 position) { float2 circlePosition = position; circlePosition = rotate(circlePosition, _Time.y); circlePosition = translate(circlePosition, float2(2, 0)); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; }

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

 float scene(float2 position) { float2 circlePosition = position; circlePosition = translate(circlePosition, float2(2, 0)); circlePosition = rotate(circlePosition, _Time.y); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; }

स्केलिंग

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

 float2 scale(float2 samplePosition, float scale){ return samplePosition / scale; }

 float scene(float2 position) { float2 circlePosition = position; circlePosition = translate(circlePosition, float2(0, 0)); circlePosition = rotate(circlePosition, .125); float pulseScale = 1 + 0.5*sin(_Time.y * 3.14); circlePosition = scale(circlePosition, pulseScale); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; }

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

 float scene(float2 position) { float2 circlePosition = position; circlePosition = translate(circlePosition, float2(0, 0)); circlePosition = rotate(circlePosition, .125); float pulseScale = 1 + 0.5*sin(_Time.y * 3.14); circlePosition = scale(circlePosition, pulseScale); float sceneDistance = rectangle(circlePosition, float2(1, 2)) * pulseScale; return sceneDistance; }

दृश्य

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

स्पष्ट रूप

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

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

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

 //properties Properties{ _Color("Color", Color) = (1,1,1,1) }

 //in subshader outside of pass Tags{ "RenderType"="Transparent" "Queue"="Transparent"} Blend SrcAlpha OneMinusSrcAlpha ZWrite Off

 fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); float distanceChange = fwidth(dist) * 0.5; float antialiasedCutoff = smoothstep(distanceChange, -distanceChange, dist); fixed4 col = fixed4(_Color, antialiasedCutoff); return col; }

ऊँचाई की रेखाएँ

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

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

 Properties{ _InsideColor("Inside Color", Color) = (.5, 0, 0, 1) _OutsideColor("Outside Color", Color) = (0, .5, 0, 1) }

 //global shader variables float4 _InsideColor; float4 _OutsideColor;

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

 fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = lerp(_InsideColor, _OutsideColor, step(0, dist)); return col; }

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

 //Properties _LineDistance("Mayor Line Distance", Range(0, 2)) = 1 _LineThickness("Mayor Line Thickness", Range(0, 0.1)) = 0.05

 //shader variables float _LineDistance; float _LineThickness;

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

 float distanceChange = fwidth(dist) * 0.5;

फिर हम दूरी लेते हैं और इसे बदल देते हैं ताकि दोहराए जाने वाले बिंदुओं पर समान व्यवहार हो। ऐसा करने के लिए, हम पहले इसे लाइनों के बीच की दूरी से विभाजित करते हैं, जबकि हमें प्रत्येक पहले चरण में पूर्ण संख्याएं नहीं मिलेंगी, लेकिन केवल हमारे द्वारा निर्धारित दूरी के आधार पर पूर्ण संख्याएं।

फिर हम संख्या में 0.5 जोड़ते हैं, आंशिक भाग लेते हैं और 0.5 फिर से घटाते हैं। भिन्नात्मक भाग और घटाव की यहाँ आवश्यकता होती है ताकि पंक्ति दोहराव पैटर्न में शून्य से गुज़रे। 0.5 के आगे घटाव को बेअसर करने के लिए हम 0.5 जोड़ते हैं - शिफ्ट इस तथ्य को जन्म देगा कि इस तथ्य को जन्म दिया जाएगा कि जिन मूल्यों पर ग्राफ 0 है, वे 0, 1, 2, आदि पर हैं, और 0.5, 1.5 पर नहीं। आदि

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

 float majorLineDistance = abs(frac(dist / _LineDistance + 0.5) - 0.5) * _LineDistance;

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

 fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = lerp(_InsideColor, _OutsideColor, step(0, dist)); float distanceChange = fwidth(dist) * 0.5; float majorLineDistance = abs(frac(dist / _LineDistance + 0.5) - 0.5) * _LineDistance; float majorLines = smoothstep(_LineThickness - distanceChange, _LineThickness + distanceChange, majorLineDistance); return col * majorLines; }

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

 //properties [IntRange]_SubLines("Lines between major lines", Range(1, 10)) = 4 _SubLineThickness("Thickness of inbetween lines", Range(0, 0.05)) = 0.01

 //shader variables float _SubLines; float _SubLineThickness;

 fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = lerp(_InsideColor, _OutsideColor, step(0, dist)); float distanceChange = fwidth(dist) * 0.5; float majorLineDistance = abs(frac(dist / _LineDistance + 0.5) - 0.5) * _LineDistance; float majorLines = smoothstep(_LineThickness - distanceChange, _LineThickness + distanceChange, majorLineDistance); float distanceBetweenSubLines = _LineDistance / _SubLines; float subLineDistance = abs(frac(dist / distanceBetweenSubLines + 0.5) - 0.5) * distanceBetweenSubLines; float subLines = smoothstep(_SubLineThickness - distanceChange, _SubLineThickness + distanceChange, subLineDistance); return col * majorLines * subLines; }

स्रोत कोड

2 डी एसडीएफ सुविधाएँ

https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/034_2D_SDF/2D_SDF.cginc

 #ifndef SDF_2D #define SDF_2D float2 rotate(float2 samplePosition, float rotation){ const float PI = 3.14159; float angle = rotation * PI * 2 * -1; float sine, cosine; sincos(angle, sine, cosine); return float2(cosine * samplePosition.x + sine * samplePosition.y, cosine * samplePosition.y - sine * samplePosition.x); } float2 translate(float2 samplePosition, float2 offset){ //move samplepoint in the opposite direction that we want to move shapes in return samplePosition - offset; } float2 scale(float2 samplePosition, float scale){ return samplePosition / scale; } float circle(float2 samplePosition, float radius){ //get distance from center and grow it according to radius return length(samplePosition) - radius; } float rectangle(float2 samplePosition, float2 halfSize){ float2 componentWiseEdgeDistance = abs(samplePosition) - halfSize; float outsideDistance = length(max(componentWiseEdgeDistance, 0)); float insideDistance = min(max(componentWiseEdgeDistance.x, componentWiseEdgeDistance.y), 0); return outsideDistance + insideDistance; } #endif

वृत्त उदाहरण

https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/034_2D_SDF/Circle.shader

 Shader "Tutorial/034_2D_SDF_Basics/Rectangle"{ SubShader{ //the material is completely non-transparent and is rendered at the same time as the other opaque geometry Tags{ "RenderType"="Opaque" "Queue"="Geometry"} Pass{ CGPROGRAM #include "UnityCG.cginc" #include "2D_SDF.cginc" #pragma vertex vert #pragma fragment frag struct appdata{ float4 vertex : POSITION; }; struct v2f{ float4 position : SV_POSITION; float4 worldPos : TEXCOORD0; }; v2f vert(appdata v){ v2f o; //calculate the position in clip space to render the object o.position = UnityObjectToClipPos(v.vertex); //calculate world position of vertex o.worldPos = mul(unity_ObjectToWorld, v.vertex); return o; } float scene(float2 position) { float2 circlePosition = position; circlePosition = rotate(circlePosition, _Time.y * 0.5); circlePosition = translate(circlePosition, float2(2, 0)); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; } fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = fixed4(dist, dist, dist, 1); return col; } ENDCG } } FallBack "Standard" //fallback adds a shadow pass so we get shadows on other objects }

आयत का उदाहरण

https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/034_2D_SDF/Rectangle.shader

 Shader "Tutorial/034_2D_SDF_Basics/Rectangle"{ SubShader{ //the material is completely non-transparent and is rendered at the same time as the other opaque geometry Tags{ "RenderType"="Opaque" "Queue"="Geometry"} Pass{ CGPROGRAM #include "UnityCG.cginc" #include "2D_SDF.cginc" #pragma vertex vert #pragma fragment frag struct appdata{ float4 vertex : POSITION; }; struct v2f{ float4 position : SV_POSITION; float4 worldPos : TEXCOORD0; }; v2f vert(appdata v){ v2f o; //calculate the position in clip space to render the object o.position = UnityObjectToClipPos(v.vertex); //calculate world position of vertex o.worldPos = mul(unity_ObjectToWorld, v.vertex); return o; } float scene(float2 position) { float2 circlePosition = position; circlePosition = rotate(circlePosition, _Time.y * 0.5); circlePosition = translate(circlePosition, float2(2, 0)); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; } fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = fixed4(dist, dist, dist, 1); return col; } ENDCG } } FallBack "Standard" //fallback adds a shadow pass so we get shadows on other objects }

कटऑफ

https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/034_2D_SDF/Cutoff.shader

 Shader "Tutorial/034_2D_SDF_Basics/Cutoff"{ Properties{ _Color("Color", Color) = (1,1,1,1) } SubShader{ Tags{ "RenderType"="Transparent" "Queue"="Transparent"} Blend SrcAlpha OneMinusSrcAlpha ZWrite Off Pass{ CGPROGRAM #include "UnityCG.cginc" #include "2D_SDF.cginc" #pragma vertex vert #pragma fragment frag struct appdata{ float4 vertex : POSITION; }; struct v2f{ float4 position : SV_POSITION; float4 worldPos : TEXCOORD0; }; fixed3 _Color; v2f vert(appdata v){ v2f o; //calculate the position in clip space to render the object o.position = UnityObjectToClipPos(v.vertex); //calculate world position of vertex o.worldPos = mul(unity_ObjectToWorld, v.vertex); return o; } float scene(float2 position) { float2 circlePosition = position; circlePosition = rotate(circlePosition, _Time.y * 0.5); circlePosition = translate(circlePosition, float2(2, 0)); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; } fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); float distanceChange = fwidth(dist) * 0.5; float antialiasedCutoff = smoothstep(distanceChange, -distanceChange, dist); fixed4 col = fixed4(_Color, antialiasedCutoff); return col; } ENDCG } } FallBack "Standard" //fallback adds a shadow pass so we get shadows on other objects }

दूरी की रेखाएँ

https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/034_2D_SDF/DistanceLines.shader

 Shader "Tutorial/034_2D_SDF_Basics/DistanceLines"{ Properties{ _InsideColor("Inside Color", Color) = (.5, 0, 0, 1) _OutsideColor("Outside Color", Color) = (0, .5, 0, 1) _LineDistance("Mayor Line Distance", Range(0, 2)) = 1 _LineThickness("Mayor Line Thickness", Range(0, 0.1)) = 0.05 [IntRange]_SubLines("Lines between major lines", Range(1, 10)) = 4 _SubLineThickness("Thickness of inbetween lines", Range(0, 0.05)) = 0.01 } SubShader{ //the material is completely non-transparent and is rendered at the same time as the other opaque geometry Tags{ "RenderType"="Opaque" "Queue"="Geometry"} Pass{ CGPROGRAM #include "UnityCG.cginc" #include "2D_SDF.cginc" #pragma vertex vert #pragma fragment frag struct appdata{ float4 vertex : POSITION; }; struct v2f{ float4 position : SV_POSITION; float4 worldPos : TEXCOORD0; }; v2f vert(appdata v){ v2f o; //calculate the position in clip space to render the object o.position = UnityObjectToClipPos(v.vertex); //calculate world position of vertex o.worldPos = mul(unity_ObjectToWorld, v.vertex); return o; } float scene(float2 position) { float2 circlePosition = position; circlePosition = rotate(circlePosition, _Time.y * 0.2); circlePosition = translate(circlePosition, float2(2, 0)); float sceneDistance = rectangle(circlePosition, float2(1, 2)); return sceneDistance; } float4 _InsideColor; float4 _OutsideColor; float _LineDistance; float _LineThickness; float _SubLines; float _SubLineThickness; fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); fixed4 col = lerp(_InsideColor, _OutsideColor, step(0, dist)); float distanceChange = fwidth(dist) * 0.5; float majorLineDistance = abs(frac(dist / _LineDistance + 0.5) - 0.5) * _LineDistance; float majorLines = smoothstep(_LineThickness - distanceChange, _LineThickness + distanceChange, majorLineDistance); float distanceBetweenSubLines = _LineDistance / _SubLines; float subLineDistance = abs(frac(dist / distanceBetweenSubLines + 0.5) - 0.5) * distanceBetweenSubLines; float subLines = smoothstep(_SubLineThickness - distanceChange, _SubLineThickness + distanceChange, subLineDistance); return col * majorLines * subLines; } ENDCG } } FallBack "Standard" //fallback adds a shadow pass so we get shadows on other objects }

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

2D में डिस्टेंस फील्ड बेसिक्स पर हस्ताक्षर किए