हस्ताक्षरित दूरी के खेतों पर 2 डी छाया

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


[GIF पुनर्संरचना के दौरान अतिरिक्त कलाकृतियों को उत्पन्न करता है।]

मूल विन्यास

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

हम shader के साथ एक फ़ोल्डर में पिछले ट्यूटोरियल से 2D_SDF.cginc फाइल कॉपी करेंगे, जिसे हम इस ट्यूटोरियल में लिखेंगे।

 Shader "Tutorial/037_2D_SDF_Shadows"{ Properties{ } 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) { float bounds = -rectangle(position, 2); float2 quarterPos = abs(position); float corner = rectangle(translate(quarterPos, 1), 0.5); corner = subtract(corner, rectangle(position, 1.2)); float diamond = rectangle(rotate(position, 0.125), .5); float world = merge(bounds, corner); world = merge(world, diamond); return world; } fixed4 frag(v2f i) : SV_TARGET{ float dist = scene(i.worldPos.xz); return dist; } ENDCG } } FallBack "Standard" //fallback adds a shadow pass so we get shadows on other objects } 

यदि हम अभी भी पिछले ट्यूटोरियल से विज़ुअलाइज़ेशन तकनीक का उपयोग करते हैं, तो आंकड़ा इस तरह दिखाई देगा:

सरल छाया

तेज छाया बनाने के लिए, हम नमूने की स्थिति से प्रकाश स्रोत की स्थिति तक चारों ओर जाते हैं। यदि हमें रास्ते में कोई वस्तु मिलती है, तो हम तय करते हैं कि पिक्सेल को छायांकित किया जाना चाहिए, और यदि हम बिना बाधा के स्रोत को प्राप्त करते हैं, तो हम कहते हैं कि यह छायांकित नहीं है।

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

 float traceShadow(float2 position, float2 lightPosition){ float direction = normalise(lightPosition - position); float distance = length(lightPosition - position); } 

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

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

 // outside of function #define SAMPLES 32 // in shadow function float rayDistance = 0; for(int i=0 ;i<SAMPLES; i++){ float sceneDist = scene(pos + direction * rayDistance); //do other stuff and move the ray further } 

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

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

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

 #define SAMPLES 32 float traceShadows(float2 position, float2 lightPosition){ float2 direction = normalize(lightPosition - position); float lightDistance = length(lightPosition - position); float rayProgress = 0; for(int i=0 ;i<SAMPLES; i++){ float sceneDist = scene(position + direction * rayProgress); if(sceneDist <= 0){ return 0; } if(rayProgress > lightDistance){ return 1; } rayProgress = rayProgress + sceneDist; } return 0; } 

इस फ़ंक्शन का उपयोग करने के लिए, हम इसे पिक्सेल की स्थिति और प्रकाश स्रोत की स्थिति के साथ एक टुकड़ा फ़ंक्शन में कहते हैं। फिर हम प्रकाश स्रोतों के रंग के साथ मिश्रण करने के लिए परिणाम को किसी भी रंग से गुणा करते हैं।

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

fixed4 frag(v2f i) : SV_TARGET{ float2 position = i.worldPos.xz;

 float2 lightPos; sincos(_Time.y, lightPos.x /*sine of time*/, lightPos.y /*cosine of time*/); float shadows = traceShadows(position, lightPos); float3 light = shadows * float3(.6, .6, 1); float sceneDistance = scene(position); float distanceChange = fwidth(sceneDistance) * 0.5; float binaryScene = smoothstep(distanceChange, -distanceChange, sceneDistance); float3 geometry = binaryScene * float3(0, 0.3, 0.1); float3 col = geometry + light; return float4(col, 1); } 

शीतल छाया

इन कठोर छायाओं से नरम और अधिक यथार्थवादी तक जाना काफी आसान है। इसी समय, shader अधिक कम्प्यूटेशनल रूप से महंगा नहीं हो जाता है।

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

 float traceShadows(float2 position, float2 lightPosition){ float2 direction = normalize(lightPosition - position); float lightDistance = length(lightPosition - position); float rayProgress = 0; float nearest = 9999; for(int i=0 ;i<SAMPLES; i++){ float sceneDist = scene(position + direction * rayProgress); if(sceneDist <= 0){ return 0; } if(rayProgress > lightDistance){ return saturate(nearest); } nearest = min(nearest, sceneDist); rayProgress = rayProgress + sceneDist; } return 0; } 

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

 float traceShadows(float2 position, float2 lightPosition, float hardness){ float2 direction = normalize(lightPosition - position); float lightDistance = length(lightPosition - position); float rayProgress = 0; float nearest = 9999; for(int i=0 ;i<SAMPLES; i++){ float sceneDist = scene(position + direction * rayProgress); if(sceneDist <= 0){ return 0; } if(rayProgress > lightDistance){ return saturate(nearest); } nearest = min(nearest, hardness * sceneDist); rayProgress = rayProgress + sceneDist; } return 0; } 

 //in fragment function float shadows = traceShadows(position, lightPos, 20); 

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

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

हम एक और मामूली बदलाव भी करेंगे: चूंकि हम रेप्रोग्रेड द्वारा विभाजित कर रहे हैं, आपको 0 से शुरू नहीं करना चाहिए (शून्य से विभाजित करना लगभग हमेशा विभाजन का एक बुरा विचार है)। एक शुरुआत के रूप में, आप किसी भी बहुत छोटी संख्या को चुन सकते हैं।

 float traceShadows(float2 position, float2 lightPosition, float hardness){ float2 direction = normalize(lightPosition - position); float lightDistance = length(lightPosition - position); float rayProgress = 0.0001; float shadow = 9999; for(int i=0 ;i<SAMPLES; i++){ float sceneDist = scene(position + direction * rayProgress); if(sceneDist <= 0){ return 0; } if(rayProgress > lightDistance){ return saturate(shadow); } shadow = min(shadow, hardness * sceneDist / rayProgress); rayProgress = rayProgress + sceneDist; } return 0; } 

एकाधिक प्रकाश स्रोत

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

 fixed4 frag(v2f i) : SV_TARGET{ float2 position = i.worldPos.xz; float2 lightPos1 = float2(sin(_Time.y), -1); float shadows1 = traceShadows(position, lightPos1, 20); float3 light1 = shadows1 * float3(.6, .6, 1); float2 lightPos2 = float2(-sin(_Time.y) * 1.75, 1.75); float shadows2 = traceShadows(position, lightPos2, 10); float3 light2 = shadows2 * float3(1, .6, .6); float sceneDistance = scene(position); float distanceChange = fwidth(sceneDistance) * 0.5; float binaryScene = smoothstep(distanceChange, -distanceChange, sceneDistance); float3 geometry = binaryScene * float3(0, 0.3, 0.1); float3 col = geometry + light1 + light2; return float4(col, 1); } 

स्रोत कोड

दो-आयामी एसडीएफ पुस्तकालय (नहीं बदला है, लेकिन यहां उपयोग किया जाता है)

• https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/037_SDF_2D_Shadows/2D_SDF.cginc

द्वि-आयामी नरम छाया

• https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/037_SDF_2D_Shadows/2D_SDF_Shadows.shader

 Shader "Tutorial/037_2D_SDF_Shadows"{ Properties{ } 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) { float bounds = -rectangle(position, 2); float2 quarterPos = abs(position); float corner = rectangle(translate(quarterPos, 1), 0.5); corner = subtract(corner, rectangle(position, 1.2)); float diamond = rectangle(rotate(position, 0.125), .5); float world = merge(bounds, corner); world = merge(world, diamond); return world; } #define STARTDISTANCE 0.00001 #define MINSTEPDIST 0.02 #define SAMPLES 32 float traceShadows(float2 position, float2 lightPosition, float hardness){ float2 direction = normalize(lightPosition - position); float lightDistance = length(lightPosition - position); float lightSceneDistance = scene(lightPosition) * 0.8; float rayProgress = 0.0001; float shadow = 9999; for(int i=0 ;i<SAMPLES; i++){ float sceneDist = scene(position + direction * rayProgress); if(sceneDist <= 0){ return 0; } if(rayProgress > lightDistance){ return saturate(shadow); } shadow = min(shadow, hardness * sceneDist / rayProgress); rayProgress = rayProgress + max(sceneDist, 0.02); } return 0; } fixed4 frag(v2f i) : SV_TARGET{ float2 position = i.worldPos.xz; float2 lightPos1 = float2(sin(_Time.y), -1); float shadows1 = traceShadows(position, lightPos1, 20); float3 light1 = shadows1 * float3(.6, .6, 1); float2 lightPos2 = float2(-sin(_Time.y) * 1.75, 1.75); float shadows2 = traceShadows(position, lightPos2, 10); float3 light2 = shadows2 * float3(1, .6, .6); float sceneDistance = scene(position); float distanceChange = fwidth(sceneDistance) * 0.5; float binaryScene = smoothstep(distanceChange, -distanceChange, sceneDistance); float3 geometry = binaryScene * float3(0, 0.3, 0.1); float3 col = geometry + light1 + light2; return float4(col, 1); } ENDCG } } FallBack "Standard" } 

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