👼🏿 ♐️ 👲🏻 2 डी में हस्ताक्षरित दूरी के क्षेत्र 👨‍👨‍👧 🏡 🐚

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

ट्रेनिंग

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

मुख्य shader हम इस तरह दिखता है के साथ शुरू होगा:

Shader "Tutorial/035_2D_SDF_Combinations/Champfer Union"{ 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) { const float PI = 3.14159; float2 squarePosition = position; squarePosition = translate(squarePosition, float2(1, 0)); squarePosition = rotate(squarePosition, .125); float squareShape = rectangle(squarePosition, float2(2, 2)); float2 circlePosition = position; circlePosition = translate(circlePosition, float2(-1.5, 0)); float circleShape = circle(circlePosition, 2.5); float combination = combination_function(circleShape, squareShape); return combination; } 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 }

और shader के साथ एक ही फ़ोल्डर में 2D_SDF.cginc फ़ंक्शन, जिसे हम विस्तारित करेंगे, पहले इस तरह दिखता है:

 #ifndef SDF_2D #define SDF_2D //transforms 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; } //shapes 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

सरल संयोजन

हम दो बड़े आकार बनाने के लिए कुछ सरल तरीकों से शुरू करेंगे, एक बड़ा आकार, संयुग्मन, चौराहा और घटाव बनाने के लिए, साथ ही एक आकार को दूसरे में बदलने के लिए।

विकार

सरलतम ऑपरेटर युग्मन है। इसके साथ, हम दो आंकड़े एक साथ रख सकते हैं और जुड़े हुए आंकड़े के संकेत के साथ दूरी प्राप्त कर सकते हैं। जब हमारे पास दो आंकड़ों के संकेत के साथ एक दूरी होती है, तो हम min फ़ंक्शन का उपयोग करके दोनों को छोटा करके उन्हें जोड़ सकते हैं।

दो मूल्यों में से छोटे की पसंद के कारण, अंतिम आंकड़ा 0 से नीचे (दृश्यमान) होगा जहां दो आने वाले आंकड़ों में से एक में किनारे की दूरी 0 से कम है; वही अन्य सभी दूरी के मूल्यों पर लागू होता है, जिसमें दो आंकड़े का संयोजन होता है।

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

 //in 2D_SDF.cginc include file float merge(float shape1, float shape2){ return min(shape1, shape2); }

 //in scene function in shader float combination = merge(circleShape, squareShape);

चौराहा

आकृतियों को जोड़ने का एक और सामान्य तरीका उन क्षेत्रों का उपयोग करना है जिनमें दो आकृतियाँ ओवरलैप होती हैं। ऐसा करने के लिए, हम उन दो आंकड़ों की दूरी का अधिकतम मूल्य लेते हैं जिन्हें हम संयोजित करना चाहते हैं। दो मूल्यों में से सबसे बड़े का उपयोग करते समय, हम 0 (आंकड़ा के बाहर) से अधिक मूल्य प्राप्त करते हैं, जब दो आंकड़ों में से कोई भी दूरी आंकड़े के बाहर होती है, और अन्य दूरियां भी इसी तरह से ऊपर पंक्तिबद्ध होती हैं।

 //in 2D_SDF.cginc include file float intersect(float shape1, float shape2){ return max(shape1, shape2); }

 //in scene function in shader float combination = intersect(circleShape, squareShape);

घटाव

हालाँकि, अक्सर हम दोनों आकारों को एक ही तरह से संसाधित नहीं करना चाहते हैं, और हमें दूसरे को एक आकार से घटाना होगा। यह उस आकार के बीच में अंतर करके करना काफी आसान है जिसे हम बदलना चाहते हैं और वह सभी आकार जो हम घटाना चाहते हैं। हम आकृति के आंतरिक और बाहरी हिस्सों के लिए विपरीत मान प्राप्त करते हैं, जो संकेत के साथ दूरी प्राप्त करते हैं। आंकड़ा के बाहर 1 यूनिट क्या था अब 1 यूनिट अंदर है।

 //in 2D_SDF.cginc include file float subtract(float base, float subtraction){ return intersect(base, -subtraction); }

 //in scene function in shader float combination = subtract(squareShape, circleShape);

प्रक्षेप

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

 //in 2D_SDF.cginc include file float interpolate(float shape1, float shape2, float amount){ return lerp(shape1, shape2, amount); }

 //in scene function in shader float pulse = sin(_Time.y) * 0.5 + 0.5; float combination = interpolate(circleShape, pulse);

अन्य यौगिक

सरल कनेक्शन प्राप्त करने के बाद, हमारे पास पहले से ही आंकड़ों के एक साधारण संयोजन के लिए आवश्यक सब कुछ है, लेकिन दूरी के संकेत क्षेत्रों की अद्भुत संपत्ति यह है कि हम इस तक सीमित नहीं हो सकते हैं, उनके कनेक्शन के स्थानों पर आंकड़े गठबंधन करने और दिलचस्प क्रियाएं करने के कई अलग-अलग तरीके हैं। यहाँ मैं इनमें से कुछ तकनीकों को फिर से समझाऊँगा, लेकिन आप http://mercury.sexy/hg_sdf लाइब्रेरी में कई अन्य लोगों को पा सकते हैं (यदि आप अन्य उपयोगी एसडीएफ पुस्तकालयों को जानते हैं तो मुझे लिखें)।

गोलाई

हम समन्वय प्रणाली में स्थिति के x- अक्ष और y- अक्ष के रूप में दो संयोजन आंकड़ों की सतह की व्याख्या कर सकते हैं, और फिर इस स्थिति के समन्वय मूल की दूरी की गणना कर सकते हैं। यदि हम ऐसा करते हैं, तो हमें एक बहुत ही अजीब आंकड़ा मिलेगा, लेकिन अगर हम अक्ष को 0 से नीचे के मूल्यों तक सीमित करते हैं, तो हमें कुछ ऐसा मिलता है जो दो आंकड़ों की आंतरिक दूरी के सुगम संयुग्म के समान होता है।

 float round_merge(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1, shape2); intersectionSpace = min(intersectionSpace, 0); return length(intersectionSpace); }

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

 float radius = max(sin(_Time.y * 5) * 0.5 + 0.4, 0); float combination = round_intersect(squareShape, circleShape, radius);

 float round_merge(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 - radius, shape2 - radius); intersectionSpace = min(intersectionSpace, 0); return length(intersectionSpace); }

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

 float round_merge(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 - radius, shape2 - radius); intersectionSpace = min(intersectionSpace, 0); return length(intersectionSpace) - radius; }

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

 float round_merge(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 - radius, shape2 - radius); intersectionSpace = min(intersectionSpace, 0); float insideDistance = -length(intersectionSpace); float simpleUnion = merge(shape1, shape2); float outsideDistance = max(simpleUnion, radius); return insideDistance + outsideDistance; }

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

 float round_intersect(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 + radius, shape2 + radius); intersectionSpace = max(intersectionSpace, 0); float outsideDistance = length(intersectionSpace); float simpleIntersection = intersect(shape1, shape2); float insideDistance = min(simpleIntersection, -radius); return outsideDistance + insideDistance; }

और एक अंतिम बिंदु के रूप में, घटाव को फिर से आधार आकृति और सब कुछ के बीच चौराहे के रूप में वर्णित किया जा सकता है, केवल उस आंकड़े को छोड़कर जिसे हम घटा रहे हैं।

 float round_subtract(float base, float subtraction, float radius){ round_intersect(base, -subtraction, radius); }

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

झुकना

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

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

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

 float champferSize = sin(_Time.y * 5) * 0.3 + 0.3; float combination = champfer_merge(circleShape, squareShape, champferSize);

 float champfer_merge(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleMerge = merge(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer - champferSize; return merge(simpleMerge, champfer); }

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

 float champfer_intersect(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleIntersect = intersect(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer + champferSize; return intersect(simpleIntersect, champfer); }

और पिछले घटाव के समान, हम यहां दूसरे उल्टे आकृति के साथ चौराहे का प्रदर्शन भी कर सकते हैं।

 float champfer_subtract(float base, float subtraction, float champferSize){ return champfer_intersect(base, -subtraction, champferSize); }

गोल चौराहा

अब तक, हमने केवल बूलियन ऑपरेटरों (प्रक्षेप के अलावा) का उपयोग किया है। लेकिन हम अन्य तरीकों से आकृतियों को जोड़ सकते हैं, उदाहरण के लिए, उन स्थानों पर नए गोल आकार बनाकर जहां दो आकृतियों की सीमाएं ओवरलैप होती हैं।

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

 float round_border(float shape1, float shape2, float radius){ float2 position = float2(shape1, shape2); float distanceFromBorderIntersection = length(position); return distanceFromBorderIntersection - radius; }

बॉर्डर नॉच

आखिरी चीज जो मैं समझाऊंगा वह है एक सीमा में एक आकार में दूसरे आकार की सीमा बनाने का तरीका।

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

 float depth = max(sin(_Time.y * 5) * 0.5 + 0.4, 0); float combination = groove_border(squareShape, circleShape, .3, depth);

 float groove_border(float base, float groove, float width, float depth){ float circleBorder = abs(groove) - width; return circleBorder; }

अब हमें केवल हमारे द्वारा निर्दिष्ट मूल्य से गहराई तक जाने के लिए सर्कल की सीमा की आवश्यकता है। ऐसा करने के लिए, हम इसे आधार आकृति के एक कम संस्करण से घटाते हैं। आधार आकार में कमी की मात्रा पायदान की गहराई है।

 float groove_border(float base, float groove, float width, float depth){ float circleBorder = abs(groove) - width; float grooveShape = subtract(circleBorder, base + depth); return grooveShape; }

अंतिम चरण आधार आकार से पायदान को घटाना और परिणाम वापस करना है।

 float groove_border(float base, float groove, float width, float depth){ float circleBorder = abs(groove) - width; float grooveShape = subtract(circleBorder, base + depth); return subtract(base, grooveShape); }

स्रोत कोड

पुस्तकालय

https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/035_SDF_combining_repeating/Fancy/2D_SDF.cginc

 #ifndef SDF_2D #define SDF_2D //transforms 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; } //combinations ///basic float merge(float shape1, float shape2){ return min(shape1, shape2); } float intersect(float shape1, float shape2){ return max(shape1, shape2); } float subtract(float base, float subtraction){ return intersect(base, -subtraction); } float interpolate(float shape1, float shape2, float amount){ return lerp(shape1, shape2, amount); } /// round float round_merge(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 - radius, shape2 - radius); intersectionSpace = min(intersectionSpace, 0); float insideDistance = -length(intersectionSpace); float simpleUnion = merge(shape1, shape2); float outsideDistance = max(simpleUnion, radius); return insideDistance + outsideDistance; } float round_intersect(float shape1, float shape2, float radius){ float2 intersectionSpace = float2(shape1 + radius, shape2 + radius); intersectionSpace = max(intersectionSpace, 0); float outsideDistance = length(intersectionSpace); float simpleIntersection = intersect(shape1, shape2); float insideDistance = min(simpleIntersection, -radius); return outsideDistance + insideDistance; } float round_subtract(float base, float subtraction, float radius){ return round_intersect(base, -subtraction, radius); } ///champfer float champfer_merge(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleMerge = merge(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer - champferSize; return merge(simpleMerge, champfer); } float champfer_intersect(float shape1, float shape2, float champferSize){ const float SQRT_05 = 0.70710678118; float simpleIntersect = intersect(shape1, shape2); float champfer = (shape1 + shape2) * SQRT_05; champfer = champfer + champferSize; return intersect(simpleIntersect, champfer); } float champfer_subtract(float base, float subtraction, float champferSize){ return champfer_intersect(base, -subtraction, champferSize); } /// round border intersection float round_border(float shape1, float shape2, float radius){ float2 position = float2(shape1, shape2); float distanceFromBorderIntersection = length(position); return distanceFromBorderIntersection - radius; } float groove_border(float base, float groove, float width, float depth){ float circleBorder = abs(groove) - width; float grooveShape = subtract(circleBorder, base + depth); return subtract(base, grooveShape); } //shapes 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

छायादार आधार

 Shader "Tutorial/035_2D_SDF_Combinations/Round"{ 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) { const float PI = 3.14159; float2 squarePosition = position; squarePosition = translate(squarePosition, float2(1, 0)); squarePosition = rotate(squarePosition, .125); float squareShape = rectangle(squarePosition, float2(2, 2)); float2 circlePosition = position; circlePosition = translate(circlePosition, float2(-1.5, 0)); float circleShape = circle(circlePosition, 2.5); float combination = /* combination calculation here */; return combination; } 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 }

2 डी में हस्ताक्षरित दूरी के क्षेत्र