2 डी दिशात्मक प्रकाश और छायांकन

शुभ दोपहर, खाबरवचियन!
मैं दृश्य की ज्यामिति को ध्यान में रखते हुए, 2 डी-स्पेस में प्रकाश व्यवस्था और छायांकन के तरीकों में से एक के बारे में बात करना चाहूंगा। मुझे वास्तव में गिश और सुपर मीटबोय में प्रकाश कार्यान्वयन पसंद है, हालांकि मितबा में यह केवल ढहने या चलने वाले प्लेटफार्मों के साथ गतिशील स्तरों पर देखा जा सकता है, और गुइच में यह हर जगह है। इस तरह के खेलों में प्रकाश मुझे इतना "गर्म" लगता है, दीपक, कि मैं निश्चित रूप से कुछ इसी तरह खुद को लागू करना चाहता था। और यहाँ क्या यह आया है।

यह स्पष्ट है कि क्या करना है और क्या करना है:

• एक निश्चित 2D दुनिया है जिसमें आपको गतिशील प्रकाश + छायांकन को शामिल करने की आवश्यकता है; दुनिया जरूरी टाइल नहीं है, किसी भी ज्यामिति से;
• प्रकाश स्रोतों को, सिद्धांत रूप में, एक असीमित संख्या होना चाहिए (केवल सिस्टम के प्रदर्शन द्वारा सीमित);
• एक बिंदु पर बड़ी संख्या में प्रकाश स्रोतों की उपस्थिति, या "प्रकाश" के एक बड़े गुणांक के साथ एक प्रकाश स्रोत, न केवल क्षेत्र को 100% से रोशन करना चाहिए, बल्कि इसे रोशन करना चाहिए;
• सब कुछ गणना की जानी चाहिए, निश्चित रूप से, वास्तविक समय में;

इस सभी के लिए ओपनजीएल, जीएलएसएल, फ्रेमबफ़र तकनीक और गणित की थोड़ी आवश्यकता थी। चूंकि OpenGL 3.3 और GLSL 3.30 के संस्करणों तक सीमित है मेरे सिस्टम में से एक का वीडियो कार्ड आज के मानकों (GeForce 310) द्वारा बहुत पुराना है, और 2 डी के लिए यह पर्याप्त से अधिक है (और पहले के संस्करण ओपनग्ल और जीएलएसएल के असंगत संस्करणों के कारण अस्वीकृति का कारण है)। एल्गोरिथ्म स्वयं जटिल नहीं है और 3 चरणों में किया जाता है:

1. एक बनावट को काले रेंडर क्षेत्र के आकार में उत्पन्न करें और सभी बिंदुओं के लिए एक प्रकाश कारक जमा करते समय (तथाकथित प्रकाश मानचित्र) में प्रकाशित क्षेत्रों को आकर्षित करें;
2. दृश्य को एक अलग बनावट में प्रस्तुत करना;
3. रेंडर के संदर्भ में, क्वाड प्रदर्शित करें जो इसे पूरी तरह से कवर करता है, और टुकड़े टुकड़े में परिणामी बनावट को कम करता है। इस स्तर पर, आप टुकड़े टुकड़े के साथ "चारों ओर खेल सकते हैं", उदाहरण के लिए, पानी / आग, लेंस से अपवर्तन के प्रभाव, हर स्वाद और अन्य पोस्ट-प्रोसेसिंग के लिए रंग सुधार।

1. प्रकाश नक्शा

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

1.1 जेड-बफर उर्फ ​​गहराई बफर

जेड-बफर का सार कैमरे से दृश्य तत्व की दूरस्थता को संग्रहीत कर रहा है, जो आपको करीब वस्तुओं के पीछे अदृश्य पिक्सेल को काटने की अनुमति देता है। यदि 3 डी दृश्य में गहराई बफर एक विमान है

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


बफर एल्गोरिथम:

• प्रकाश स्रोत के त्रिज्या के मूल्य के साथ भरें (जिस दूरी पर प्रकाश की तीव्रता शून्य तक पहुंचती है);
• प्रकाश स्रोत के त्रिज्या में स्थित प्रत्येक वस्तु के लिए, उन किनारों को लें जो प्रकाश स्रोत के सामने की ओर मुड़ते हैं। यदि आप किनारों को पीछे की तरफ घुमाते हैं, तो ऑब्जेक्ट अपने आप हाइलाइट हो जाएंगे, लेकिन उनके साथ खड़े लोगों के साथ एक समस्या होगी:
  
  छिपा हुआ पाठ

  
  
  
• किनारों की परिणामी सूची को प्रोजेक्ट करें, उनके कार्टेशियन निर्देशांक को ध्रुवीय प्रकाश स्रोतों में परिवर्तित करें। पुनर्गणना बिंदु (x; y) में (); r):
  φ = arccos (xAxis • सामान्यीकृत करें (बिंदु))
  जहां:
  • - वैक्टर के स्केलर उत्पाद;
  एक्सएक्सिस एक्स अक्ष (1; 0) के अनुरूप इकाई वेक्टर है, क्योंकि सर्कल के केंद्र से बिंदु के दाईं ओर 0 डिग्री;
  बिंदु - किनारे से संबंधित बिंदु तक प्रकाश स्रोत के केंद्र से निर्देशित एक वेक्टर (प्रकाश स्रोत के समन्वय प्रणाली में किनारे के बिंदु के निर्देशांक);
  normalize - वेक्टर का सामान्यीकरण;
  आर = | बिंदु | - बिंदु तक दूरी;
  हम किनारे और मध्यवर्ती के दो चरम बिंदुओं को प्रोजेक्ट करते हैं। अंकन के लिए आवश्यक अंकों की संख्या किनारे के प्रक्षेपण द्वारा कवर किए जाने वाले बफर कोशिकाओं की संख्या से मेल खाती है।
  कोण of के अनुरूप बफर सूचकांक की गणना:
  सूचकांक = Buff / (2 * *) * बफर आकार;
  इस प्रकार, हम किनारे के चरम बिंदुओं के अनुरूप बफर के दो चरम सूचकांक पाते हैं। प्रत्येक मध्यवर्ती सूचकांक के लिए, कोण मूल्य में अनुवाद करें:
  φ = सूचकांक * 2 * er / बफर आकार
  , हम इस कोण पर (0; 0) से एक वेक्टर खंड बनाते हैं जिसकी लंबाई प्रकाश स्रोत के त्रिज्या के बराबर या उससे अधिक है।
  v = vec2 (cos (φ), sin ())) * त्रिज्या
  और प्राप्त खंड और किनारे के प्रतिच्छेदन बिंदु को खोजें, उदाहरण के लिए, इस तरह:
  
  • गुणांक ए ₁ , बी ₁ , सी ₁ और ए ₂ , बी ₂ , सी _{2 के} साथ 2 लाइनें
    
    
  • समीकरणों की इस प्रणाली को हल करने के लिए Cramer पद्धति का उपयोग करके, हमें प्रतिच्छेदन बिंदु मिलता है:
    
    
    
  • यदि भाजक शून्य है (हमारे मामले में, यदि भाजक का मान त्रुटि के पूर्ण मान से कम है, क्योंकि फ्लोट), तो कोई समाधान नहीं हैं - लाइनें या तो संयोग करती हैं या समानांतर होती हैं;
  • दोनों खंडों में परिणामी बिंदु के स्थान के लिए जाँच करें।
  
  और अंतिम चरण सभी प्राप्त मध्यवर्ती बिंदुओं को ध्रुवीय निर्देशांक में अनुवाद करना है। यदि वर्तमान सूचकांक पर बिंदु की दूरी बफर के मूल्य से कम है, तो बफर को लिखें। बफर अब उपयोग के लिए तैयार है। इस पर, सिद्धांत रूप में, सभी गणित समाप्त होते हैं।
  

1.2 वर्टेक्स फ्रेम

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

बहुभुज पहले बिंदु, पिछले और वर्तमान से बनता है। तदनुसार, पहला बिंदु प्रकाश स्रोत का केंद्र है, और शेष बिंदुओं के निर्देशांक:

for( unsigned int index = 0; index < bufferSize; ++index ) { float alpha = float( index ) / float( bufferSize ) * Math::TWO_PI; float value = buffer[ index ]; Vec2 point( Math::Cos( alpha ) * value, Math::Sin( alpha ) * value ); Vec4 pointColor( color.R. color.G, color.B, ( 1.0f - value / range ) * color.A ); ... } 

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

1.3 फ़्रेमबफ़र

फ़्रेमबफ़र के लिए बाध्य बस एक बनावट - GL_RGBA16F प्रारूप पर्याप्त है, यह प्रारूप आपको [0.0 के बाहर के मूल्यों को संग्रहीत करने की अनुमति देगा; 1.0] आधे-सटीक फ्लोटिंग-पॉइंट की सटीकता के साथ।

बफर को बांधें, additive मिश्रण glBlendFunc (GL_ONE, GL_ONE) सेट करें और रोशन क्षेत्रों को "ड्रा" करें। इस प्रकार, अल्फा चैनल रोशनी की डिग्री जमा करेगा। आप संपूर्ण विंडो में एक क्वाड ड्राइंग करके वैश्विक प्रकाश व्यवस्था भी जोड़ सकते हैं।

1.4 शेड

प्रकाश स्रोतों से किरणों के प्रतिपादन के लिए वर्टेक्स शेड्स मानक हैं, कैमरे की स्थिति को ध्यान में रखते हुए, और टुकड़े टुकड़े में हम रंग की चमक को ध्यान में रखते हुए जमा करते हैं:

  layout(location = 0) out vec4 fragData; in vec4 vColor; ... void main() { fragData = vColor * vColor.a; } 

अंत में, हमें कुछ इस तरह से मिलना चाहिए:

2. दृश्य को बनावट में प्रस्तुत करना

दृश्य को एक अलग बनावट में प्रस्तुत करना आवश्यक है, जिसके लिए हम एक और फ्रेम बफ़र बनाते हैं, सामान्य GL_RGBA बनावट संलग्न करते हैं और सामान्य तरीके से प्रस्तुत करते हैं।
मान लीजिए कि कुख्यात प्लेटफ़ॉर्मर से ऐसा दृश्य है:

3. दृश्य के साथ प्रकाश मानचित्र का संयोजन

टुकड़ा shader कुछ इस तरह होना चाहिए:

  uniform sampler2D texture0; uniform sampler2D texture1; ... vec4 color0 = texture( texture0, texCoords ); //     vec4 color1 = texture( texture1, texCoords ); //    fragData0 = color0 * color1; 

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

और फिर ...

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

  vec2 offset = oneByWindowCoeff.xy * 1.5f; //  fragData = ( texture( texture1, texCoords ) + texture( texture1, vec2( texCoords.x - offset.x, texCoords.y - offset.y ) ).r + texture( texture1, vec2( texCoords.x, texCoords.y - offset.y ) ).r + texture( texture1, vec2( texCoords.x + offset.x, texCoords.y - offset.y ) ).r + texture( texture1, vec2( texCoords.x - offset.x, texCoords.y ) ).r + texture( texture1, vec2( texCoords.x + offset.x, texCoords.y ) ).r + texture( texture1, vec2( texCoords.x - offset.x, texCoords.y + offset.y ) ).r + texture( texture1, vec2( texCoords.x, texCoords.y + offset.y ) ).r + texture( texture1, vec2( texCoords.x + offset.x, texCoords.y + offset.y ) ).r ) / 9.0; 

जहाँ oneByWindowCoeff पिक्सेल निर्देशांक को टेक्‍सेल में परिवर्तित करने के लिए गुणांक है।
वैश्विक रोशनी की अनुपस्थिति में, इस तरह के "पात्रों" के लिए छाया को बंद करना या उन्हें खुद को चमक (एक आदर्श विकल्प, मेरी राय में) बनाना, या भ्रमित होना और सभी एनिमेशन के लिए ऑब्जेक्ट की ज्यामिति का वर्णन करना बेहतर हो सकता है।

मैंने एक छोटा सा प्रदर्शन दर्ज किया जो इन सभी प्रतिबिंबों और पूर्णताओं में से निकला:

4. अनुकूलन

जैसा कि कहा जाता है, "पहले लिखें, और फिर अनुकूलन करें।" प्रारंभिक कोड जल्दी और मोटे तौर पर स्केच किया गया था, इसलिए अनुकूलन के लिए पर्याप्त जगह थी। पहली बात जो दिमाग में आई, वह थी बहु-संख्या में बहुसंख्यकों से छुटकारा पाना जो रोशनी वाले क्षेत्रों को आकर्षित करते हैं। यदि प्रकाश स्रोत की त्रिज्या में कोई बाधाएं नहीं हैं, तो इसका कोई मतलब नहीं है कि 1000+ बहुभुज खींचे, हमें इस तरह के एक पूर्ण चक्र की आवश्यकता नहीं है, आंख को बस अंतर नहीं पता है (या शायद यह मॉनिटर मेरे लिए बहुत गंदा है)
उदाहरण के लिए, अनुकूलन के बिना आयाम 1024 की गहराई बफर के लिए:

और अनुकूलन के साथ:

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

5. निष्कर्ष

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

6. सन्दर्भ

• परिणाम का वीडियो प्रदर्शन ;
• गहराई बफ़र का स्रोत कोड (github) ;
• गैर-गेम डेमो का स्रोत कोड (गिथब) (हालांकि खेल में फिलहाल मैं अधिक डोप किए गए संस्करण का उपयोग करता हूं, विशेष रूप से इसके लिए अनुकूलित);
• Win32- मिनी-डेमो का निर्माण ;
• ओपनजीएल 3.3 विनिर्देश ;
• GLSL 3.3 विनिर्देश ।