👐🏻 ✊ 🎓 एकता में लेखन। GrabPass, PerRendererData ⛽️ 👸🏼 💉

नमस्ते! मैं यूनिटी में अपने अनुभव लेखन शेड्स साझा करना चाहूंगा। आइए 2 डी में विस्थापन / अपवर्तन शेडर के साथ शुरू करें, इसे लिखने के लिए उपयोग की जाने वाली कार्यक्षमता पर विचार करें (GrabPass, PerRendererData), और जरूरी समस्याओं पर भी ध्यान दें।

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

यह वह परिणाम है जिसे हम प्राप्त करना चाहते हैं।

ट्रेनिंग

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

स्प्राइट के प्रतिपादन के लिए छायादार कोड

Shader "Displacement/Displacement_Wave" { Properties { [PerRendererData] _MainTex ("Main Texture", 2D) = "white" {} _Color ("Color" , Color) = (1,1,1,1) } SubShader { Tags { "RenderType" = "Transparent" "Queue" = "Transparent" } Cull Off Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; float4 color : COLOR; }; struct v2f { float4 vertex : SV_POSITION; float2 uv : TEXCOORD0; float4 color : COLOR; }; fixed4 _Color; sampler2D _MainTex; v2f vert (appdata v) { v2f o; o.uv = v.uv; o.color = v.color; o.vertex = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag (v2f i) : SV_Target { fixed4 texColor = tex2D(_MainTex, i.uv)*i.color; return texColor; } ENDCG } } }

प्रदर्शित करने के लिए स्प्राइट

पृष्ठभूमि वास्तव में पारदर्शी है, जानबूझकर अंधेरा किया गया है।

परिणामी वर्कपीस।

GrabPass

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

बनावट के अलावा, हमें पिक्सेल रंग को पाने के लिए स्कैन के निर्देशांक की आवश्यकता होती है। ऐसा करने के लिए, अतिरिक्त बनावट निर्देशांक को टुकड़ा shader डेटा में जोड़ें। ये निर्देशांक सामान्यीकृत नहीं हैं (मान 0 से 1 तक की सीमा में नहीं हैं) और कैमरे के स्थान (प्रक्षेपण) में एक बिंदु की स्थिति का वर्णन करते हैं।

 struct v2f { float4 vertex : SV_POSITION; float2 uv : float4 color : COLOR; float4 grabPos : TEXCOORD1; };

और शीर्ष में shader उन्हें भरें।

 o.grabPos = ComputeGrabScreenPos (o.vertex);

_GrabTexture से रंग प्राप्त करने के लिए, यदि हम गैर-सामान्यीकृत निर्देशांक का उपयोग करते हैं, तो हम निम्नलिखित विधि का उपयोग कर सकते हैं

 tex2Dproj(_GrabTexture, i.grabPos)

लेकिन हम एक अलग विधि का उपयोग करेंगे और परिप्रेक्ष्य विभाजन का उपयोग करके, निर्देशांक को सामान्य करेंगे, अर्थात। अन्य सभी को w- घटक में विभाजित करना।

 tex2D(_GrabTexture, i.grabPos.xy/i.grabPos.w)

w घटक

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

परिप्रेक्ष्य विभाजन को शीर्ष के शेडर में भी प्रदर्शन किया जा सकता है, और पहले से ही तैयार डेटा को टुकड़े टुकड़े करने वाले को स्थानांतरित किया जा सकता है।

 v2f vert (appdata v) { v2f o; o.uv = v.uv; o.color = v.color; o.vertex = UnityObjectToClipPos(v.vertex); o.grabPos = ComputeScreenPos (o.vertex); o.grabPos /= o.grabPos.w; return o; }

क्रमशः एक टुकड़ा shader जोड़ें।

 fixed4 frag (v2f i) : SV_Target { fixed4 = grabColor = tex2d(_GrabTexture, i.grabPos.xy); fixed4 texColor = tex2D(_MainTex, i.uv)*i.color; return grabColor; }

निर्दिष्ट मिश्रण मोड को बंद करें, क्योंकि अब हम अपने सम्मिश्रण मोड को टुकड़े करने वाले के अंदर लागू कर रहे हैं।

 //Blend SrcAlpha OneMinusSrcAlpha Blend Off

और GrabPass के परिणाम को देखें ।

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

 Properties { [PerRendererData] _MainTex ("Main Texture", 2D) = "white" {} _Color ("Color" , Color) = (1,1,1,1) _DisplacementPower ("Displacement Power" , Float) = 0 } SubShader { Pass { ... float _DisplacementPower; ... } }

और फिर से, टुकड़ा shader में परिवर्तन करें।

 fixed4 grabColor = tex2d(_GrabTexture, i.grabPos.xy + _DisplaccementPower);

ओप हॉप और परिणाम! एक बदलाव के साथ छवि।

एक सफल बदलाव के बाद, आप अधिक जटिल विकृति के लिए आगे बढ़ सकते हैं। हम पूर्व-तैयार बनावट का उपयोग करते हैं जो निर्दिष्ट बिंदु पर विस्थापन बल को संग्रहीत करेगा। X अक्ष पर ऑफसेट मान के लिए लाल रंग, और y अक्ष पर हरा।

विरूपण के लिए इस्तेमाल किए गए बनावट

चलिए शुरू करते हैं। बनावट को संग्रहीत करने के लिए एक नई संपत्ति जोड़ें।

 _DisplacementTex ("Displacement Texture", 2D) = "white" {}

और एक चर।

 sampler2D _DisplacementTex;

टुकड़े की छाया में हम बनावट से ऑफसेट मान प्राप्त करते हैं और उन्हें बनावट निर्देशांक में जोड़ते हैं।

 fixed4 displPos = tex2D(_DisplacementTex, i.uv); float2 offset = (displPos.xy*2 - 1) * _DisplacementPower * displPos.a; fixed4 grabColor = tex2D (_GrabTexture, i.grabPos.xy + offset);

अब, _DisplacementPower पैरामीटर के मूल्यों को बदलते हुए, हम केवल मूल छवि को स्थानांतरित नहीं करते हैं, लेकिन इसे विकृत करते हैं।

ओवरले

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

जहां S मूल छवि है, C सुधारात्मक है, अर्थात हमारा स्प्राइट, R परिणाम है।

इस फॉर्मूले को हमारे shader में स्थानांतरित करें।

 fixed4 color = grabColor < 0.5 ? 2*grabColor*texColor : 1-2*(1-texColor)*(1-grabColor);

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

 c = step ( y, x); r = c * a + (1 - c) * b;

कदम समारोह

चरण फ़ंक्शन 1 वापस आ जाएगा यदि x y से अधिक या बराबर है। और 0 अगर x y से कम है।

उदाहरण के लिए, यदि x = 1, और y = 0.5 है, तो c का परिणाम 1. होगा और निम्न अभिव्यक्ति की तरह दिखेगा
आर = 1 * ए + 0 * बी
क्योंकि 0 से गुणा करना 0 देता है, तो परिणाम केवल a का मान होगा।
अन्यथा, यदि c 0 है,
r = 0 * a + 1 * b
और अंतिम परिणाम बी होगा।

ओवरले मोड के लिए रंग को फिर से लिखें।

 fixed s = step(grabColor, 0.5); fixed4 color = s * (2 * grabColor * texColor) + (1 - s) * (1 - 2 * (1 - texColor) * (1 - grabColor));

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

 color = lerp(grabColor, color ,texColor.a);

पूर्ण टुकड़ा shader कोड।

 fixed4 frag (v2f i) : SV_Target { fixed4 displPos = tex2D(_DisplacementTex, i.uv); float2 offset = (displPos.xy*2 - 1) * _DisplacementPower * displPos.a; fixed4 texColor = tex2D(_MainTex, i.uv + offset)*i.color; fixed4 grabColor = tex2D (_GrabTexture, i.grabPos.xy + offset); fixed s = step(grabColor, 0.5); fixed4 color = s * (2 * grabColor * texColor) + (1 - s) * (1 - 2 * (1 - texColor) * (1 - grabColor)); color = lerp(grabColor, color ,texColor.a); return color; }

और हमारे काम का नतीजा है।

GrabPass फ़ीचर

यह ऊपर उल्लेख किया गया था कि GrabPass पास {} स्क्रीन की सामग्री को _GrabTexture बनावट में कैप्चर करता है। उसी समय, हर बार इस मार्ग को कहा जाता है, बनावट की सामग्री को अपडेट किया जाएगा।
बनावट के नाम को निर्दिष्ट करके निरंतर अद्यतन से बचा जा सकता है जिसमें स्क्रीन की सामग्री कैप्चर की जाएगी।

 GrabPass{"_DisplacementGrabTexture"}

अब बनावट की सामग्री केवल GrabPass पास प्रति फ्रेम के पहले कॉल पर अपडेट की जाएगी। यह संसाधनों को बचाता है अगर GrabPass {} का उपयोग करने वाले बहुत सारे ऑब्जेक्ट हैं। लेकिन अगर दो वस्तुएं ओवरलैप होती हैं, तो कलाकृतियां ध्यान देने योग्य होंगी, क्योंकि दोनों ऑब्जेक्ट एक ही छवि का उपयोग करेंगे।

GrabPass {"_ DisplacementGrabTexture"} का उपयोग करना।

GrabPass {} का उपयोग करना।

एनीमेशन

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

एनीमेशन के लिए स्क्रिप्ट

 public class Wave : MonoBehaviour { private float _elapsedTime; private SpriteRenderer _renderer; public float Duration; [Space] public AnimationCurve ScaleProgress; public Vector3 ScalePower; [Space] public AnimationCurve PropertyProgress; public float PropertyPower; [Space] public AnimationCurve AlphaProgress; private void Start() { _renderer = GetComponent<SpriteRenderer>(); } private void OnEnable() { _elapsedTime = 0f; } void Update() { if (_elapsedTime < Duration) { var progress = _elapsedTime / Duration; var scale = ScaleProgress.Evaluate(progress) * ScalePower; var property = PropertyProgress.Evaluate(progress) * PropertyPower; var alpha = AlphaProgress.Evaluate(progress); transform.localScale = scale; _renderer.material.SetFloat("_DisplacementPower", property); var color = _renderer.color; color.a = alpha; _renderer.color = color; _elapsedTime += Time.deltaTime; } else { _elapsedTime = 0; } } }

और इसकी सेटिंग्स

एनीमेशन का परिणाम है।

PerRendererData

नीचे की रेखा पर ध्यान दें।

 _renderer.material.SetFloat("_DisplacementPower", property);

यहां हम केवल सामग्री के गुणों में से एक को नहीं बदल रहे हैं, बल्कि स्रोत सामग्री (केवल इस पद्धति के पहले कॉल पर) की एक प्रति बना रहे हैं और पहले से ही इसके साथ काम कर रहे हैं। यह काफी काम करने वाला विकल्प है, लेकिन अगर मंच पर एक से अधिक ऑब्जेक्ट हैं, उदाहरण के लिए, एक हजार, तो बहुत सारी प्रतियां बनाने से कुछ भी अच्छा नहीं होगा। एक बेहतर विकल्प है - यह shader में [PerRendererData] विशेषता का उपयोग करना है, और स्क्रिप्ट में MaterialPropertyBlock ऑब्जेक्ट।

ऐसा करने के लिए, shader में _DisplacementPower गुण के लिए एक विशेषता जोड़ें।

 [PerRendererData] _DisplacementPower ("Displacement Power" , Range(-.1,.1)) = 0

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

हम स्क्रिप्ट पर लौटते हैं और उसमें बदलाव करते हैं।

 private MaterialPropertyBlock _propertyBlock; private void Start() { _renderer = GetComponent<SpriteRenderer>(); _propertyBlock = new MaterialPropertyBlock(); } void Update() { ... //_renderer.material.SetFloat("_DisplacementPower", property); _renderer.GetPropertyBlock(_propertyBlock); _propertyBlock.SetFloat("_DisplacementPower", property); _renderer.SetPropertyBlock(_propertyBlock); ... }

अब, संपत्ति को बदलने के लिए, हम सामग्री की प्रतियां बनाए बिना अपनी वस्तु के MaterialPropertyBlock को अपडेट करेंगे।

SpriteRenderer के बारे में

आइए इस रेखा को shader में देखें।

 [PerRendererData] _MainTex ("Main Texture", 2D) = "white" {}

स्प्राइट रेंडरर स्प्राइट्स के साथ इसी तरह काम करता है । यह MaterialPropertyBlock का उपयोग करके अपने मूल्य के लिए _MainTex संपत्ति सेट करता है। इसलिए, निरीक्षक में, _MainTex संपत्ति को सामग्री के लिए प्रदर्शित नहीं किया जाता है, और SpriteRenderer घटक में हम उस बनावट को निर्दिष्ट करते हैं जिसकी हमें आवश्यकता है। इसी समय, मंच पर कई अलग-अलग स्प्राइट हो सकते हैं, लेकिन उनके प्रतिपादन के लिए केवल एक सामग्री का उपयोग किया जाएगा (यदि आप इसे स्वयं नहीं बदलते हैं)।

PerRendererData फ़ीचर

आप रेंडर से संबंधित लगभग सभी घटकों से MaterialPropertyBlock प्राप्त कर सकते हैं। उदाहरण के लिए, SpriteRenderer , ParticleRenderer , MeshRenderer और अन्य Renderer घटक। लेकिन हमेशा एक अपवाद होता है, यह कैनवस रेंडरर है । इस पद्धति का उपयोग करके गुणों को प्राप्त करना और बदलना असंभव है। इसलिए, यदि आप UI घटकों का उपयोग करके 2 डी गेम लिखते हैं, तो आप शेडर्स लिखते समय इस समस्या का सामना करेंगे।

रोटेशन

एक अप्रिय प्रभाव तब होता है जब छवि को घुमाया जाता है। एक गोल लहर के उदाहरण पर, यह विशेष रूप से ध्यान देने योग्य है।

मोड़ (90 डिग्री) पर सही तरंग एक और विकृति देती है।

लाल बनावट में एक ही बिंदु से प्राप्त वैक्टर को इंगित करता है, लेकिन इस बनावट के एक अलग रोटेशन के साथ। ऑफ़सेट मान समान रहता है और रोटेशन के लिए खाता नहीं है।

इस समस्या को हल करने के लिए, हम unity_ObjectToWorld परिवर्तन मैट्रिक्स का उपयोग करेंगे। यह हमारे वेक्टर को स्थानीय निर्देशांक से दुनिया के निर्देशांक तक पुनरावृत्ति करने में मदद करेगा।

 float2 offset = (displPos.xy*2 - 1) * _DisplacementPower * displPos.a; offset = mul( unity_ObjectToWorld, offset);

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

 _propertyBlock.SetFloat("_DisplacementPower", property/transform.localScale.x);

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

क्लिप

हमारी बनावट में पर्याप्त पारदर्शी पिक्सेल हैं (विशेषकर यदि हम Rect mesh प्रकार का उपयोग करते हैं)। शेडर उन्हें संसाधित करता है, जो इस मामले में समझ में नहीं आता है। इसलिए, हम अनावश्यक गणनाओं की संख्या को कम करने का प्रयास करेंगे। हम क्लिप (x) विधि का उपयोग करके पारदर्शी पिक्सेल के प्रसंस्करण को बाधित कर सकते हैं। यदि इसमें दिया गया पैरामीटर शून्य से कम है, तो शेडर समाप्त हो जाएगा। लेकिन चूंकि अल्फा मान 0 से कम नहीं हो सकता है, इसलिए हम उससे एक छोटा मूल्य घटाएंगे। इसे गुणों ( कटआउट ) में भी डाला जा सकता है और इसका उपयोग छवि के पारदर्शी भागों को काटने के लिए किया जा सकता है। इस मामले में, हमें एक अलग पैरामीटर की आवश्यकता नहीं है, इसलिए हम बस संख्या 0.01 का उपयोग करेंगे।

पूर्ण टुकड़ा shader कोड।

 fixed4 frag (v2f i) : SV_Target { fixed4 displPos = tex2D(_DisplacementTex, i.uv); float2 offset = (displPos.xy * 2 - 1) * _DisplacementPower * displPos.a; offset = mul( unity_ObjectToWorld,offset); fixed4 texColor = tex2D(_MainTex, i.uv + offset)*i.color; clip(texColor.a - 0.01); fixed4 grabColor = tex2D (_GrabTexture, i.grabPos.xy + offset); fixed s = step(grabColor, 0.5); fixed4 color = s * 2 * grabColor * texColor + (1 - s) * (1 - 2 * (1 - texColor) * (1 - grabColor)); color = lerp(grabColor, color ,texColor.a); return color; }

पुनश्च: शेडर और स्क्रिप्ट के लिए स्रोत कोड गिट की एक कड़ी है । विरूपण के लिए परियोजना में एक छोटा बनावट जनरेटर भी है। कुरसी के साथ क्रिस्टल संपत्ति - 2 डी गेम किट से लिया गया था।

एकता में लेखन। GrabPass, PerRendererData