भाग 1: विघटन शैडर

भंग shader एक सुंदर प्रभाव देता है, इसके अलावा, इसे बनाना और समझना आसान है; आज हम इसे Unity Shader Graph में बनाएंगे , और HLSL पर भी लिखेंगे।

यहाँ एक उदाहरण है कि हम क्या बनाएंगे:

यह कैसे काम करता है

एक भंग shader बनाने के लिए, हमें "Shader ग्राफ़" shader में AlphaClipThreshold मान के साथ काम करना होगा या क्लिप नामक HLSL फ़ंक्शन का उपयोग करना होगा।

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

हम निम्नलिखित बनावट का उपयोग करेंगे:


आप अपनी खुद की - सीधी रेखाएं, त्रिकोण बना सकते हैं, लेकिन कुछ भी! बस याद रखें कि सफेद हिस्से तेजी से घुलते हैं ।

मैंने यह बनावट फ़ोटोशॉप में क्लाउड फ़िल्टर का उपयोग करके बनाई थी।

यहां तक ​​कि अगर आप केवल Shader ग्राफ़ में रुचि रखते हैं और आप HLSL के बारे में कुछ नहीं जानते हैं, तब भी मैं इस हिस्से को पढ़ने की सलाह देता हूं, क्योंकि यह समझने में उपयोगी है कि यूनिटी Shader ग्राफ़ कैसे काम करता है।

---

HLSL

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

गुण

Shader को दो गुणों की आवश्यकता होती है, Dissolve बनावट और राशि (जो संपूर्ण निष्पादन प्रक्रिया को इंगित करेगा)। अन्य गुणों और चरों के साथ, आप उन्हें अपनी पसंद की चीज़ कह सकते हैं।

Properties { //Your other properties //[...] //Dissolve shader properties _DissolveTexture("Dissolve Texture", 2D) = "white" {} _Amount("Amount", Range(0,1)) = 0 } 

CGPROGRAM SubShader (दूसरे शब्दों में, चर घोषित) के बाद निम्नलिखित जोड़ना सुनिश्चित करें:

 sampler2D _DissolveTexture; half _Amount; 

इसके अलावा, मत भूलना। उनके नाम गुण अनुभाग में नामों से मेल खाना चाहिए।

समारोह

हम विघटन की बनावट का नमूना और लाल का मान प्राप्त करके भूतल या विखंडन कार्य शुरू करते हैं। PS हमारी बनावट ग्रेस्केल में संग्रहीत है, अर्थात, R , G और B के मूल्य समान हैं, और आप उनमें से किसी को भी चुन सकते हैं । उदाहरण के लिए, सफेद (1,1,1) है , काला है (0,0,0) ।

मेरे उदाहरण में, मैं एक सतह shader का उपयोग करता हूं:

 void surf (Input IN, inout SurfaceOutputStandard o) { half dissolve_value = tex2D(_DissolveTexture, IN.uv_MainTex).r; //Get how much we have to dissolve based on our dissolve texture clip(dissolve_value - _Amount); //Dissolve! //Your shader body, you can set the Albedo etc. //[...] } 

और यह बात है! हम इस प्रक्रिया को किसी भी मौजूदा shader पर लागू कर सकते हैं और इसे एक विघटन shader में बदल सकते हैं!

यहाँ दो इंजनों में विघटित शैडर में बदल गया, एकता इंजन का मानक भूतल शेडर है:

 Shader "Custom/DissolveSurface" { Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("Albedo (RGB)", 2D) = "white" {} _Glossiness ("Smoothness", Range(0,1)) = 0.5 _Metallic ("Metallic", Range(0,1)) = 0.0 //Dissolve properties _DissolveTexture("Dissolve Texutre", 2D) = "white" {} _Amount("Amount", Range(0,1)) = 0 } SubShader { Tags { "RenderType"="Opaque" } LOD 200 Cull Off //Fast way to turn your material double-sided CGPROGRAM #pragma surface surf Standard fullforwardshadows #pragma target 3.0 sampler2D _MainTex; struct Input { float2 uv_MainTex; }; half _Glossiness; half _Metallic; fixed4 _Color; //Dissolve properties sampler2D _DissolveTexture; half _Amount; void surf (Input IN, inout SurfaceOutputStandard o) { //Dissolve function half dissolve_value = tex2D(_DissolveTexture, IN.uv_MainTex).r; clip(dissolve_value - _Amount); //Basic shader function fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = ca; } ENDCG } FallBack "Diffuse" } 

---

छायादार ग्राफ

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

AlphaClipThreshold फ़ंक्शन शैडर को उन सभी पिक्सेल को छोड़ने का निर्देश देता है, जिनका मूल्य उसके अल्फा मान से कम है। उदाहरण के लिए, यदि यह 0.3f है , और हमारा अल्फा मान 0.2f है , तो shader इस पिक्सेल को रेंडर नहीं करेगा । AlphaClipThreshold फ़ंक्शन को एकता दस्तावेज़ में पाया जा सकता है: PBR मास्टर नोड और अनलिमिटेड मास्टर नोड ।

यहाँ हमारे तैयार shader है:


हम विघटन बनावट का नमूना लेते हैं और लाल मूल्य प्राप्त करते हैं , और फिर इसे राशि मान में जोड़ते हैं (जो कि एक संपत्ति है जिसे मैंने समग्र निष्पादन प्रक्रिया को इंगित करने के लिए जोड़ा है, 1 का अर्थ है पूर्ण विघटन) और इसे अल्फ़ाक्लिपट्रशोल्ड से कनेक्ट करें। हो गया!

यदि आप इसे किसी भी मौजूदा shader में लागू करना चाहते हैं, तो बस नोड कनेक्शनों को AlphaClipThreshold पर कॉपी करें (आवश्यक गुणों को याद न करें!)। आप इसे दो तरफा भी बना सकते हैं और एक और भी सुंदर परिणाम प्राप्त कर सकते हैं!

---

समोच्च विघटन shader

और अगर आप इसमें कंटूर जोड़ने की कोशिश करते हैं? चलो यह करते हैं!


हम पहले से ही भंग पिक्सेल के साथ काम नहीं कर सकते, क्योंकि उन्हें छोड़ने के बाद वे हमेशा के लिए गायब हो जाते हैं । इसके बजाय, हम "लगभग भंग" मूल्यों के साथ काम कर सकते हैं!

HLSL में, यह बहुत सरल है, बस क्लिप की गणना के बाद कोड की कुछ पंक्तियाँ जोड़ें:

 void surf (Input IN, inout SurfaceOutputStandard o) { //[...] //After our clip calculations if (dissolve_value - _Amount < .05f) //outline width = .05f o.Emission = fixed3(1, 1, 1); //emits white color //Your shader body, you can set the Albedo etc. //[...] } 

हो गया!

शेडर ग्राफ के साथ काम करते समय , तर्क थोड़ा अलग होता है। यहाँ समाप्त shader है:

---

हम एक साधारण विघटन शैडर के साथ बहुत ठंडा प्रभाव बना सकते हैं; आप अलग-अलग बनावट और मूल्यों के साथ प्रयोग कर सकते हैं , साथ ही साथ कुछ और भी कर सकते हैं!

भाग 2: विश्व अन्वेषण shader

एक विश्व अन्वेषण shader (या एक " विश्व विघटनकर्ता shader , या वैश्विक विघटन ") हमें स्थिति में उनकी दूरी के आधार पर दृश्य में सभी वस्तुओं को समान रूप से छिपाने की अनुमति देता है; अब हम इस तरह के शेड को Unity Shader Graph में बनाएंगे और इसे HLSL में लिखेंगे ।

यहाँ एक उदाहरण है कि हम क्या बनाएंगे:

---

एक पैरामीटर के रूप में दूरी

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

ऐसा करने के लिए, हमें प्लेयर और ऑब्जेक्ट की स्थिति लेनी होगी।

खिलाड़ी की स्थिति

यह प्रक्रिया यूनिटी शेडर ग्राफ और एचएलएसएल दोनों के लिए समान होगी: हमें कोड में खिलाड़ी की स्थिति को स्थानांतरित करना होगा।

 private void Update() { //Updates the _PlayerPos variable in all the shaders //Be aware that the parameter name has to match the one in your shaders or it wont' work Shader.SetGlobalVector("_PlayerPos", transform.position); //"transform" is the transform of the Player } 

---

छायादार ग्राफ

वस्तु स्थिति और उससे दूरी

Shader Graph का उपयोग करके, हम स्थिति और दूरी नोड का उपयोग कर सकते हैं।

• स्थिति नोड के लिए प्रलेखन ।
• दूरी नोड के लिए प्रलेखन ।

PS इस सिस्टम के लिए स्प्राइट रेंडरर्स के साथ काम करने के लिए, आपको _MainTex प्रॉपर्टी को जोड़ना होगा, उसका सैंपल लेना होगा और उसे एल्बिडो से कनेक्ट करना होगा। आप मेरे पिछले स्प्राइट्स डिफ्यूज़ शेडर ट्यूटोरियल (जो शेडर ग्राफ़ का उपयोग करते हैं) पढ़ सकते हैं।

---

एचएलएसएल (सतह)

वस्तु स्थिति

एचएलएसएल में, हम वस्तुओं के कोने की स्थिति प्राप्त करने के लिए अपने इनपुट संरचना में वर्ल्डपोस चर जोड़ सकते हैं।

 struct Input { float2 uv_MainTex; float3 worldPos; //add this and Unity will set it automatically }; 

यूनिटी डॉक्यूमेंटेशन पेज पर, आप यह जान सकते हैं कि इनपुट संरचना में आप कौन से अन्य अंतर्निहित पैरामीटर जोड़ सकते हैं।

दूरी लागू करें

हमें विघटन की मात्रा के रूप में वस्तुओं और खिलाड़ी के बीच की दूरी का उपयोग करने की आवश्यकता है। ऐसा करने के लिए, आप अंतर्निहित दूरस्थ फ़ंक्शन ( Microsoft प्रलेखन ) का उपयोग कर सकते हैं।

 void surf (Input IN, inout SurfaceOutputStandard o) { half dissolve_value = tex2D(_DissolveTexture, IN.uv_MainTex).x; float dist = distance(_PlayerPos, IN.worldPos); clip(dissolve_value - dist/ 6f); //"6" is the maximum distance where your object will start showing //Set albedo, alpha, smoothness etc[...] } 

परिणाम (3 डी)

परिणाम (2D)

जैसा कि आप देख सकते हैं, वस्तुएं "स्थानीय रूप से" भंग होती हैं, हमें एक सजातीय प्रभाव नहीं मिला, क्योंकि हम प्रत्येक वस्तु के यूवी का उपयोग करके बनावट से "विघटन मूल्य" प्राप्त करते हैं। (2 डी में, यह कम ध्यान देने योग्य है)।

---

HLSL पर 3 डी लोकलयूवी डिसॉल्व्ड शेडर

 Shader "Custom/GlobalDissolveSurface" { Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("Albedo (RGB)", 2D) = "white" {} _Glossiness("Smoothness", Range(0,1)) = 0.5 _Metallic("Metallic", Range(0,1)) = 0.0 _DissolveTexture("Dissolve texture", 2D) = "white" {} _Radius("Distance", Float) = 1 //distance where we start to reveal the objects } SubShader{ Tags { "RenderType" = "Opaque" } LOD 200 Cull off //material is two sided CGPROGRAM #pragma surface surf Standard fullforwardshadows #pragma target 3.0 sampler2D _MainTex; sampler2D _DissolveTexture; //texture where we get the dissolve value struct Input { float2 uv_MainTex; float3 worldPos; //Built-in world position }; half _Glossiness; half _Metallic; fixed4 _Color; float3 _PlayerPos; //"Global Shader Variable", contains the Player Position float _Radius; void surf (Input IN, inout SurfaceOutputStandard o) { half dissolve_value = tex2D(_DissolveTexture, IN.uv_MainTex).x; float dist = distance(_PlayerPos, IN.worldPos); clip(dissolve_value - dist/ _Radius); fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = ca; } ENDCG } FallBack "Diffuse" } 

स्प्राइट्स डिफ्यूज़ - एचएलएसएल पर लोकलयूवी डिसॉल्व्ड शेडर

 Shader "Custom/GlobalDissolveSprites" { Properties { [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {} _Color("Tint", Color) = (1,1,1,1) [MaterialToggle] PixelSnap("Pixel snap", Float) = 0 [HideInInspector] _RendererColor("RendererColor", Color) = (1,1,1,1) [HideInInspector] _Flip("Flip", Vector) = (1,1,1,1) [PerRendererData] _AlphaTex("External Alpha", 2D) = "white" {} [PerRendererData] _EnableExternalAlpha("Enable External Alpha", Float) = 0 _DissolveTexture("Dissolve texture", 2D) = "white" {} _Radius("Distance", Float) = 1 //distance where we start to reveal the objects } SubShader { Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" "PreviewType" = "Plane" "CanUseSpriteAtlas" = "True" } Cull Off Lighting Off ZWrite Off Blend One OneMinusSrcAlpha CGPROGRAM #pragma surface surf Lambert vertex:vert nofog nolightmap nodynlightmap keepalpha noinstancing #pragma multi_compile _ PIXELSNAP_ON #pragma multi_compile _ ETC1_EXTERNAL_ALPHA #include "UnitySprites.cginc" struct Input { float2 uv_MainTex; fixed4 color; float3 worldPos; //Built-in world position }; sampler2D _DissolveTexture; //texture where we get the dissolve value float3 _PlayerPos; //"Global Shader Variable", contains the Player Position float _Radius; void vert(inout appdata_full v, out Input o) { v.vertex = UnityFlipSprite(v.vertex, _Flip); #if defined(PIXELSNAP_ON) v.vertex = UnityPixelSnap(v.vertex); #endif UNITY_INITIALIZE_OUTPUT(Input, o); o.color = v.color * _Color * _RendererColor; } void surf(Input IN, inout SurfaceOutput o) { half dissolve_value = tex2D(_DissolveTexture, IN.uv_MainTex).x; float dist = distance(_PlayerPos, IN.worldPos); clip(dissolve_value - dist / _Radius); fixed4 c = SampleSpriteTexture(IN.uv_MainTex) * IN.color; o.Albedo = c.rgb * ca; o.Alpha = ca; } ENDCG } Fallback "Transparent/VertexLit" } 

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

---

प्रभाव को सजातीय बनाना

प्रभाव को सजातीय बनाने के लिए, हम वैश्विक निर्देशांक (दुनिया में स्थिति) का उपयोग कर सकते हैं क्योंकि विघटन बनावट के यूवी निर्देशांक। रैप को सेट करना भी महत्वपूर्ण है = विघटन बनावट के मापदंडों में दोहराएं ताकि हम बनावट को बिना नोटिस किए दोहरा सकें (सुनिश्चित करें कि बनावट सहज है और अच्छी तरह से दोहराता है!)

एचएलएसएल (सतह)

 half dissolve_value = tex2D(_DissolveTexture, IN.worldPos / 4).x; //I modified the worldPos to reduce the texture size 

छायादार ग्राफ

परिणाम (2D)

यह परिणाम है: हम देख सकते हैं कि विघटन की बनावट अब पूरी दुनिया के लिए समान है।

यह shader पहले से ही 2D गेम्स के लिए आदर्श है , लेकिन 3D ऑब्जेक्ट्स के लिए इसे बेहतर बनाने की आवश्यकता है।

3D ऑब्जेक्ट्स के साथ समस्या

जैसा कि आप देख सकते हैं, शेडर "गैर-ऊर्ध्वाधर" चेहरे के लिए काम नहीं करता है, और बनावट को बहुत विकृत करता है। यही कारण है कि यह पता चला है। यूवी निर्देशांक को मान फ्लोट 2 की आवश्यकता होती है, और यदि हम वर्ल्डपोस पास करते हैं, तो यह केवल एक्स और वाई प्राप्त करता है।

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

समाधान को समझना शुरुआती लोगों के लिए मुश्किल होगा: बनावट से छुटकारा पाना, दुनिया में त्रि-आयामी शोर उत्पन्न करना और इससे "विघटन का मूल्य" प्राप्त करना आवश्यक है। इस पोस्ट में मैं 3 डी शोर की पीढ़ी की व्याख्या नहीं करूंगा, लेकिन आप उपयोग करने के लिए तैयार कार्यों का एक गुच्छा पा सकते हैं!

यहाँ एक उदाहरण शोर shader है: https://github.com/keijiro/NoiseShader । आप यहां शोर उत्पन्न करने का तरीका भी सीख सकते हैं: https://thebookofshaders.com/11/ और यहाँ: https://catlikecoding.com/unity/tutorials/noise/

मैं अपने सतह कार्य को इस तरह सेट करूँगा (यह मानते हुए कि आपने पहले से ही शोर वाला भाग लिखा है):

 void surf (Input IN, inout SurfaceOutputStandard o) { float dist = distance(_PlayerPos, IN.worldPos); //"abs" because you have to make sure that the noise is between the range [0,1] //you can remove "abs" if your noise function returns a value between [0,1] //also, replace "NOISE_FUNCTION_HERE" with your 3D noise function. half dissolve_value = abs(NOISE_FUNCTION_HERE(IN.worldPos)); if (dist > _Radius) { float clip_value = dissolve_value - ((dist - _Radius) / _Radius); clip(clip_value); if (clip_value < 0.05f) o.Emission = float3(1, 1, 1); } fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = ca; } 

HLSL का एक संक्षिप्त अनुस्मारक: किसी फ़ंक्शन का उपयोग / कॉल करने से पहले, इसे लिखा / घोषित किया जाना चाहिए।

PS यदि आप एकता शेडर ग्राफ़ का उपयोग करके एक शेडर बनाना चाहते हैं, तो आपको कस्टम नोड्स का उपयोग करने की आवश्यकता है (और उनमें एचएलएसएल कोड लिखकर शोर उत्पन्न करें)। मैं भविष्य के ट्यूटोरियल में कस्टम नोड्स के बारे में बात करूंगा।

परिणाम (3 डी)

---

कंट्रास्ट जोड़ना

आकृति जोड़ने के लिए, आपको ट्यूटोरियल के पिछले भाग से प्रक्रिया को दोहराना होगा।

---

उलटा असर

और अगर हम इस प्रभाव को उलटना चाहते हैं? (किसी खिलाड़ी के पास होने पर ऑब्जेक्ट गायब हो जाना चाहिए)

यह हमारे लिए एक पंक्ति को बदलने के लिए पर्याप्त है:

 float dist = _Radius - distance(_PlayerPos, IN.worldPos); 

(यही प्रक्रिया Shader Graph पर लागू होती है)।