अपनी आंखों के सामने एक गेम बनाना - भाग 2: CRT / LCD के तहत चित्रों को स्टाइल करने के लिए शेड्स

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



और मैं तुरंत आरक्षण कर दूंगा - मुझे शेड्स की गहरी समझ नहीं है, लेकिन मैं पाठक से और भी कम उम्मीद करता हूं। इसलिए मैं इस आधार पर लिखूंगा कि आप shaders के बारे में कुछ भी नहीं जानते हैं, या लगभग कुछ भी नहीं है। और हाँ, मैं आपको shaders के काम के बहुत आधारों को समझाने की कोशिश करूँगा, इसलिए यदि आप उनके बारे में कुछ नहीं जानते हैं - स्वागत है!

शेड क्या हैं और वे कैसे काम करते हैं?

यहां आपको निम्नलिखित जानने की आवश्यकता है: एक shader एक छोटा प्रोग्राम है जो प्रत्येक वर्टेक्स (vertex shaders) के लिए और प्रत्येक रेंडर किए गए पिक्सेल (पिक्सेल या "फ्रेमेंटल shaders) के लिए वीडियो कार्ड प्रोसेसर पर चलता है।

वास्तव में - यहां तक ​​कि एक त्रिकोण पर एक बनावट खींचना एक shader है। इस तरह के एक शेडर में, इसका शीर्ष भाग त्रिकोण के कोने की गणना करता है, और पिक्सेल भाग सीधे बनावट के पिक्सल को खींचता है। और, तदनुसार, प्रत्येक पिक्सेल को खींचने के लिए shader को बुलाया जाता है। इसके अलावा, वे समानांतर में काम कर सकते हैं।

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

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

एकता में, आप विभिन्न shader भाषाओं का उपयोग कर सकते हैं, लेकिन मैं CG की सलाह देता हूं, क्योंकि यह OpenGL और DirectX दोनों में ठीक संकलित करता है। तदनुसार, हमें दो अलग-अलग शेड्स लिखने की आवश्यकता नहीं है।

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

तो युद्ध के लिए

पहली चीज जो हमें चाहिए वह यह है कि पूरे कैमरे के लिए एक शेडर कैसे बनाया जाए, जो कुछ भी नहीं बदलता है।

ऐसा करने के लिए, एक नया shader बनाएं (.shader एक्सटेंशन के साथ फ़ाइल) और इस डिस्क को वहां कॉपी करें:

Shader "Custom/CRTShader" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} } SubShader { Pass { ZTest Always Cull Off ZWrite Off Fog { Mode off } CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma fragmentoption ARB_precision_hint_fastest #include "UnityCG.cginc" #pragma target 3.0 struct v2f { float4 pos : POSITION; float2 uv : TEXCOORD0; }; uniform sampler2D _MainTex; v2f vert(appdata_img v) { v2f o; o.pos = mul(UNITY_MATRIX_MVP, v.vertex); o.uv = MultiplyUV(UNITY_MATRIX_TEXTURE0, v.texcoord); return o; } half4 frag(v2f i): COLOR { half4 color = tex2D(_MainTex, i.uv); return color; } ENDCG } } FallBack "Diffuse" } 

मैं मुख्य बिंदुओं की व्याख्या करूंगा:

• गुण - शेडर के इनपुट मापदंडों (बाहर से आने वाले पैरामीटर) का वर्णन करता है। फिलहाल, यह सिर्फ एक बनावट है।
• वर्टिकल - वर्टेक्स शेडर, फ़्रीज़ - पिक्सेल (ख़ुराक)
• संरचना v2f - डेटा संरचना का वर्णन शीर्ष से पिक्सेल shaders में स्थानांतरित किया गया है
• वर्दी - 1 से एक ही पैरामीटर (ओं) को shader भाषा से एक लिंक बनाता है
• हमारे उदाहरण में, वर्टेक्स शेडर बनावट के निर्देशांक और निर्देशांक की गणना के लिए मैट्रिक्स ऑपरेशन करता है। चलो यह काम करने वाले जादू के लिए लेते हैं;)
• उसी उदाहरण में, पिक्सेल शेडर वर्टेक्स शेडर ( टेक्स 2 डी कमांड) से प्राप्त निर्देशांक पर बनावट को पढ़ता है और परिणामी रंग का उत्पादन करता है, जिसका उपयोग प्रतिपादन के लिए किया जाएगा।
• शेडर भाषाओं को अक्सर मल्टीकोम्पोनेंट संरचनाओं की आवश्यकता होती है। उदाहरण के लिए, 3 निर्देशांक या 4 रंग घटक। उनका वर्णन करने के लिए, फ़्लोट 2 (जैसे दो फ़्लोट्स की संरचना) या, उदाहरण के लिए, इंट 4, जैसे प्रकारों का उपयोग किया जाता है। घटकों को बिंदु .x .y .z .w .r या .r .g .b .a के माध्यम से पहुँचा जा सकता है

बस थोड़ा सा बचा है। हमें कैमरे के लिए एक shader लागू करने की आवश्यकता है।

ऐसा करने के लिए, C # में एक और कंट्रोल स्क्रिप्ट बनाएं:

यह केवल कैमरे पर फेंकने और "shader" फ़ील्ड में हमारे shader को निर्दिष्ट करने के लिए बनी हुई है।

कैसे समझें कि यह व्यवसाय काम करता है? " return color " से पहले shader में color.r = 0; जैसा कुछ लिखने का प्रयास करें color.r = 0; और अगर सब कुछ ठीक है, तो आपको एक लाल रंग के बिना एक तस्वीर मिलती है।

इसलिए, हमने शादियों का पता लगाया।

प्रभाव के कार्यान्वयन के लिए हो रही है।

हम क्या हासिल करना चाहते हैं? शुरुआत करने के लिए, आइए उस प्रभाव को महसूस करने की कोशिश करें जब छवि में रंग आरजीबी पिक्सेल होते हैं। वह इस प्रकार है:


यह कैसे करना बहुत स्पष्ट है। 3 पिक्सेल के चक्र के साथ, आपको स्क्रीन पर प्रत्येक पिक्सेल के लिए केवल R, G और B घटक छोड़ना होगा।

कार्य संख्या 1 - पिक्सेल shader में वर्तमान बिंदु के स्क्रीन निर्देशांक प्राप्त करने के लिए।

ऐसा करने के लिए, हमें वर्टेक्स शेडर में कुछ गिनना होगा और इस चीज़ को पिक्सेल पर भेजना होगा। जैसा कि ऊपर उल्लेख किया गया है, वर्टेक्स और पिक्सेल v2f बीच डेटा के आदान-प्रदान के लिए, v2f निर्माण का v2f है जिसमें फिलहाल दो फ़ील्ड हैं - pos और uv । वहां जोड़ें:

 float4 scr_pos : TEXCOORD1; 

और वर्टेकर shader में एक पंक्ति भी जोड़ें:

 o.scr_pos = ComputeScreenPos(o.pos); 

अब पिक्सेल shader में हम स्क्रीन को 0 (1 ... 1) से सीमा में समन्वयित करते हैं। हमें पिक्सल चाहिए। यह भी बस किया जाता है:

 float2 ps = i.scr_pos.xy *_ScreenParams.xy / i.scr_pos.w; 

हुर्रे! ps हमारे पास स्क्रीन पर पिक्सेल निर्देशांक हैं। तब सब कुछ काफी सरल है। आपको कुछ इस तरह लिखना होगा:

 int pp = (int)ps.x % 3; //     3 float4 outcolor = float4(0, 0, 0, 1); if (pp == 1) outcolor.r = color.r; else if (pp == 2) outcolor.g = color.g; else outcolor.b = color.b; return outcolor; 

हमें ऐसा कुछ मिलता है:


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

मैं आर / जी / बी के अनुसार सख्त अलगाव नहीं करने का प्रस्ताव करता हूं, लेकिन किसी भी मामले में सभी घटकों को छोड़कर, बस एक अलग अनुपात में। यही है, "लाल" कॉलम में 100% आर, और लगभग 50% जी और बी। और इससे भी बेहतर अगर हम इस व्यवसाय को अनुकूलित कर सकते हैं।

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

शुरुआत करने के लिए, shader की शुरुआत में दो मापदंडों का विवरण जोड़ें:

 _VertsColor("Verts fill color", Float) = 0 _VertsColor2("Verts fill color 2", Float) = 0 

फिर लिंक लिखें:

 uniform float _VertsColor; uniform float _VertsColor2; 

अब पिक्सेल shader कोड पर जाएं और रंग में हेरफेर करें:

 if (pp == 1) { muls.r = 1; muls.g = _VertsColor2; } else if (pp == 2) { muls.g = 1; muls.b = _VertsColor2; } else { muls.b = 1; muls.r = _VertsColor2; } color = color * muls; 

यह केवल यह जानने के लिए बना हुआ है कि इन मापदंडों को एकता में कैसे प्रबंधित किया जाए। आइए उन्हें हमारे C # में लिखें:

 [Range(0, 1)] public float verts_force = 0.0f; [Range(0, 1)] public float verts_force_2 = 0.0f; 

और OnRenderImage मेथड में ग्राफिक्स से पहले जोड़ें। नोट:

 mat.SetFloat("_VertsColor", 1-verts_force); mat.SetFloat("_VertsColor2", 1-verts_force_2); 

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

यदि आपने सब कुछ सही ढंग से किया है, तो कैमरा चुनते समय यूनिटी इंस्पेक्टर में, आपको स्लाइडर्स को देखना चाहिए:


अब प्रभाव देखें:


बेहतर है, लेकिन फिर भी चमक चाहते हैं। आइए हमारे शेडर में चमक और कंट्रास्ट समायोजन जोड़ें।

 _Contrast("Contrast", Float) = 0 _Br("Brightness", Float) = 0 .... uniform float _Contrast; uniform float _Br; .... color += (_Br / 255); color = color - _Contrast * (color - 1.0) * color *(color - 0.5); 

C # स्क्रिप्ट:

  [Range(-3, 20)] public float contrast = 0.0f; [Range(-200, 200)] public float brightness = 0.0f; ... mat.SetFloat("_Contrast", contrast); mat.SetFloat("_Br", brightness); 

परिणाम:

(विपरीत = 2.1, चमक = 27)

अब स्कैनलाइन लागू करते हैं। यहां सब कुछ सरल है। हर तीसरी पंक्ति को गहरा किया जाना चाहिए।

 if ((int)ps.y % 3 == 0) muls *= float4(_ScansColor, _ScansColor, _ScansColor, 1); 

और अंतिम स्पर्श ब्लूम प्रभाव है। आप इस तरह के एक shader ले सकते हैं, उदाहरण के लिए, यहाँ ।

हो गया! लेख के शीर्ष से हमें एक तस्वीर मिलती है!



हां, और निश्चित रूप से - यह शेडर ट्रिपल पिक्सेल पर सबसे अच्छा लगेगा, जैसा कि मेरे उदाहरणों में है।

UPD : जैसा कि नीचे टिप्पणियों में सुझाया गया है, आप इस पूरी समस्या को केवल एक बनावट को दूसरे से गुणा करके हल कर सकते हैं। यानी बैंड की तीव्रता के निर्दिष्ट मापदंडों के अनुसार, हम बनावट-टेम्पलेट को प्रस्तुत करते हैं, और फिर गुणा करते हैं। यह गति के मामले में तेज होगा, लेकिन इस लेख का लक्ष्य इष्टतम shader लिखना नहीं था, बल्कि सामान्य सिद्धांत को दिखाना था।

श्रृंखला के सभी लेख:

1. विचार, दृष्टि, सेटिंग का विकल्प, मंच, वितरण मॉडल, आदि।
2. CRT / LCD के अंतर्गत चित्रों को स्टाइल करने के लिए शेड्स
3. हम एकता (UniLua) के लिए एक पटकथा भाषा उपवास
4. पैलेट द्वारा फीका के लिए छाया (एक ला NES)
5. सबटोटल (प्रोटोटाइप)
6. आइए पीआर इंडी गेम्स के बारे में बात करते हैं
7. एकता में 2 डी एनिमेशन ("फ्लैश की तरह")
8. एकता (कटक) में कट दृश्यों की दृश्य पटकथा