लेख मुख्य रूप से GLSL शेड्स के बारे में है, और मैंने इस मिनी-डेमो गेम में उनका उपयोग कैसे किया।

लेख को निम्नलिखित क्रम में विभाजित किया गया है:

• लिंक और एक संक्षिप्त विवरण।
• खेल तर्क का एक बहुत संक्षिप्त विवरण, और गोडोट की उपयोग की गई विशेषताएं।
• उपयोग किए गए शेड के बारे में।
• गोडोट, और इसकी विशेषताओं के बारे में थोड़ा और।
• WebGL2 काम करता है
• मल्टीप्लेयर

1. लिंक और विवरण

आप itch.io के लिंक से विन / लिनक्स संस्करण डाउनलोड कर सकते हैं

संपूर्ण गेम का स्रोत कोड github या gitlab पर उपलब्ध है।

गेमप्ले:

न्यूनतम, यह एक पूर्ण खेल नहीं है। (खेल में कोई आवाज नहीं)

खेल का लक्ष्य राउंड की अधिकतम संख्या को पकड़ना है। एचपी गोले के शून्य होने और खेल में कोई रोबोट न होने पर सीमाएं शुरू हो जाती हैं।

जब टुकड़े नष्ट हो जाते हैं, तो बोनस दिखाई देते हैं, एक बार प्रति दौर , शॉट एनीमेशन की गति देते हैं, क्षति (केवल मुख्य क्षेत्र में), और रंग नीले, लाल / हरे, पीले में कूद ऊंचाई। बॉट भी बोनस देते हैं लेकिन बेतरतीब ढंग से। खिलाड़ी का चरित्र प्रत्येक नए दौर में + 1HP पुनर्स्थापित करता है।

2. खेल का तर्क, और उपयोग किए गए संसाधन

उपयोग किए गए संसाधन:

ब्लेंडर का उपयोग केवल मॉडलों पर बहुभुज की संख्या को कम करने और मॉडल के टूटे हुए टुकड़े बनाने के लिए किया गया था।

फ्यूचर-एडऑन मॉड्यूल का उपयोग किया जाता है । (मैं इसके बारे में नीचे लिखूंगा)

खेल में, दो मॉडलों में एनिमेशन हैं।
प्लेयर चरित्र आंदोलनों मैं गोडोट में बनाया गया, मूल मॉडल
दूसरा मॉडल क्षेत्र-बॉट है जिसमें उच्च गुणवत्ता वाले एनिमेशन हैं।

सभी वस्तुओं के तैयार किए गए तृतीय-पक्ष मॉडल का उपयोग यहां सूचीबद्ध किया गया है ।

खेल तर्क और गोडोट विशेषताएं:

गेम का तर्क सबसे अच्छा तरीका नहीं है, मैं उन बिंदुओं को सूचीबद्ध करूंगा जो सामान्य रूप से किए जाते हैं।

3D दृश्य के लिए केवल एक व्यूपोर्ट का उपयोग किया जाता है, और कई व्यूपोर्ट (कम रिज़ॉल्यूशन) जिसमें 2D व्यूपोर्ट (कम रिज़ॉल्यूशन) के लिए ऑर्थोगोनल कैमरे होते हैं जिसमें मल्टीपास / फीडबैक शेड्स संसाधित होते हैं, उनके बारे में नीचे और अधिक।

सभी बनावट में mipmap है , और यहां तक ​​कि ब्राउज़र में भी काम करता है। अतिरिक्त ग्राफिक्स सेटिंग्स (Esc - सेटिंग्स) हैं । उदाहरण के लिए, आप 32x32 पिक्सेल तक के गेम के लिए कोई भी रिज़ॉल्यूशन बना सकते हैं, उदाहरण के लिए, मैंने सेटिंग्स में 320x240 रिज़ॉल्यूशन सेट किया है, गेम को ब्राउज़र में चला रहा है, और अधिकतम एंटी-अलियासिंग MSAA चालू किया है।

सभी प्रकाश स्रोत वास्तविक समय में काम करते हैं, उनमें से कुल 16 हैं।

फर्श और बाड़ सबसे सरल कण हैं जो एक ही मॉडल को कई बार नकल करते हैं, कोड तुच्छ है ।

मेरे शेड्स में कण रोटेशन मैट्रिक्स (फर्श के टुकड़े) इस सूत्र से केवल एक छोटी प्रविष्टि है:

 mat4 rotationAxisAngle( vec3 v, float angle ) { float s = sin( angle ); float c = cos( angle ); float ic = 1.0 - c; return mat4( vx*vx*ic + c, vy*vx*ic - s*vz, vz*vx*ic + s*vy, 0.0, vx*vy*ic + s*vz, vy*vy*ic + c, vz*vy*ic - s*vx, 0.0, vx*vz*ic - s*vy, vy*vz*ic + s*vx, vz*vz*ic + c, 0.0, 0.0, 0.0, 0.0, 1.0 ); } 

उदाहरण के लिए, v=vec3(0.0,0.0,1.0) z अक्ष के साथ रोटेशन है, और angle=PI/2. उन्हें स्थानापन्न करें और वांछित मोड़ प्राप्त करें।

विनाशकारी ब्लॉकों का एनीमेशन एक वास्तविक समय भौतिकी इंजन माना जाता है

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

जड़ता की भौतिकी और गतिशील वस्तुओं के साथ खिलाड़ी के चरित्र की बातचीत। इसे गोडोट में डिफ़ॉल्ट रूप से बंद कर दिया जाता है, मैंने एक न्यूनतम इंटरैक्शन, फ़ाइलों में कोड लिखा है:

bot_hit.gd _integrate_forces फ़ंक्शन और इसके लिए कहा जाने वाला सभी प्रतिकूल-बॉट आंदोलनों है
player_l.gd सबसे पहले, move_and_slide फ़ंक्शन अनंत जड़ता को बंद move_and_slide है, और process_collision फ़ंक्शन ऑब्जेक्ट को process_collision करता है।

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

कई डुप्लिकेट ऑब्जेक्ट्स एक, और कई Giprobe में, प्रकाश स्रोतों के आकार और पैरामीटर सभी का इरादा है , ओपनग्ल की सीमाओं या गोडोट में प्रतिबंधों को बायपास करने के लिए बनाया गया है।

3. इस्तेमाल किए गए शेड्स

पर्यावरण पैनोरमा:

यह खेल एक स्थिर चित्रमाला का उपयोग करता है, चित्र इस shader (c1 c2 रंग, ldir स्थिति) से प्राप्त किया गया है

 vec3 sky(vec3 d, vec3 c1, vec3 c2) { vec3 ldir = normalize(vec3(0.,0.,-1.)); vec3 col = mix(c1*100., c2*100., min(abs(dy)*2. + .5, 1.)) / 255.*.5; col *= (1. + vec3(1., .7, .3) / sqrt(length(d - ldir))*2.); //sun return clamp(col,vec3(0.),vec3(1.)); } 

एक पैनोरमा प्राप्त करने के लिए, लाइन 57 panorama_uv(fragCoord,ro,rd); से टिप्पणी हटा दें panorama_uv(fragCoord,ro,rd); और लाइन 58 पर एक टिप्पणी डाल दी

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

उदाहरण के लिए एक और दिन / रात पैनोरमा , shadertoy पर मैंने इसका कहीं भी उपयोग नहीं किया

यदि आपको गोडोट के लिए क्यूबपैप को पर्यावरण के पैनोरमा में बदलने की आवश्यकता है, तो मैंने एक साधारण वेब कनवर्टर बनाया।

बहुत ही सरल शेड:

कण शेड्स सांख्यिकीय रूप से एनीमेशन के लिए अपनी स्थिति निर्धारित करते हैं या नहीं। उदाहरण के लिए स्पॉन.शेयर)

वस्तुओं के चारों ओर एक अतिरिक्त चमक के लिए, न केवल गेंदों, यह gglow.shader की एक पंक्ति है (संख्या को आवश्यकतानुसार बदला जा सकता है)

 float intensity = pow(0.122 + max(dot(NORMAL, normalize(VIEW)),0.), 010.85); 

3D में पाठ-अंक प्रदर्शित करना , जैसा कि मैं गोडोट में समझता हूं, इसके लिए कोई साधन नहीं है (बिना अतिरिक्त FBO (व्यूपोर्ट बनाए)) एक बनावट से एक साधारण shader मुद्रण संख्या (ताकि यह mipmapping हो ), shader कोड

UI तत्व:

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

फ्यूचर-एडऑन मॉड्यूल के बारे में:

यह वीडियो में 2D कणों के लिए लगभग इसी प्रकार काम करता है (1:41 से देखें)।

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

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

इसके अलावा, हवा (मेरे 2 डी उदाहरण में, हवा को जोड़ना बहुत सरल है, क्योंकि गति के साथ एक और बनावट है - और गति बस इस स्थिति में इस नक्शे से गति मान जोड़ते हैं)।

फ़्यूचर-एडोन मॉड्यूल बहुत अच्छा है , इसका उपयोग उसने स्वयं कण प्रणाली बनाने के बजाय किया।

शील्ड प्रभाव:

कण जिसमें क्षेत्र और खिलाड़ी की स्थिति पर प्रभाव के निर्देशांक होते हैं, और परिवर्तन प्रतिक्रिया बफर का उपयोग करके विलुप्त होते हैं। En_m.shader फ़ाइल में shader कोड

बॉट्स शील्ड:

तीन आयामी शोर sheild.shader के रूप में shader अनिवार्य रूप से सब कुछ flow मूल यहाँ करने के लिए धन्यवाद काम करता है
पृष्ठभूमि gl_FrontFacing द्वारा निर्धारित की गई है, और गहरे नीले रंग की नहीं, बल्कि गहरे रंग की है।
एक पंच के जवाब - झटका घटना टाइमर बस प्रेषित होता है।

उनके अंतिम फ्रेम, या फीडबैक / मल्टीपेस शेड्स को पढ़ने वाले शेड:

इस तर्क का उपयोग करके लगभग सभी प्रभाव बनाए जाते हैं।
खेल से shaders में से एक ।
एक स्रोत के रूप में, मैंने एक ऑर्थोगोनल कैमरा सेट किया है जो एक निश्चित समूह में कम दूरी पर वस्तुओं को शूट करता है (पूरे दृश्य को संसाधित किए बिना)
।

आइस फील्ड प्रभाव:

Shader ऊपर इंगित किया गया है, प्रोजेक्ट फ़ाइल में ice_feedback.shader है , और उस विमान के लिए एक टुकड़ा shader है जो एक साधारण गहराई लूप का उपयोग करके फर्श की गहराई का भ्रम पैदा करता है:

 while(current_depth < depth){ ofs -= delta; depth = textureLod(texture_depth, ofs,0.0).r; current_depth += layer_depth; } 

कण क्षेत्र प्रभाव:

शेडर समान होता है , शेप से फ्रेम बफर के रंग की चमक के अनुसार कणों का y निर्देशांक (ऊंचाई), रंग भी चमक के अनुसार होता है ( मैंने कण shader को अलग से नहीं बचाया था, यह ऑब्जेक्ट floor/visible_/floor3/grass/grass में प्रोजेक्ट में है )।

गतिशील ध्वज एनीमेशन:

गॉडोट में फैब्रिक को एनिमेट करने के लिए सॉफ्टबॉडी है, लेकिन यह सीपीयू है, इसलिए मैंने इसका इस्तेमाल नहीं किया है। मैंने मूल के लिए एक रेडीमेड कोड लिंक का उपयोग किया । इस ध्वज को तीन गेंदों की तरफ से धकेला गया है और पात्र का सिर चौथी गेंद है।
मल्टीपर्स शेडर का तर्क, जैसा कि ऊपर दिए गए उदाहरण में है, केवल तीन अक्षों के साथ, शेडर (1) फ्लैग.शेयर का मल्टीपर्स कोड , ध्वज को खींचने वाले शेड को सिर्फ बनावट दिखाता है और प्लेन (2) फ्लैगशिप का ज्यामिति बदलता है ।

आंकड़ों की उपस्थिति:

आकृतियों में यूवी नहीं होता है, इसलिए बनावट मैपिंग के लिए ट्रिप्लानार-टेक्सचर-मैपिंग, और त्रिकोण ( वर्टेक्स ), cchess.shader में सभी कोड होते हैं।

हिटबॉक्स (लाल फ्रेम) का एनीमेशन जो खिलाड़ी के चरित्र को नुकसान पहुंचाता है, और फ्रेम से एक निशान (कण स्पष्ट होते हैं):

यह केवल पहले से निर्दिष्ट shader gglow.shader का उपयोग करता है।
पीएस एक shader में एक ही एनीमेशन बनाया , shadertoy के लिए लिंक

कणों के लिए, केवल दो बनावट का उपयोग किया जाता है, एक चक्र और एक वर्ग।

4. गोडोट, और इसकी विशेषताओं के बारे में

गोडोट बहुत अच्छा और सरल है (शुरुआत के लिए नहीं)। मुझे वास्तव में इसकी विशेषताओं के लिए गोडोट पसंद है।

बहुत सारे कीड़े हैं, गोडोट प्रलेखन अपूर्ण है और कभी-कभी त्रुटियों के कारण भ्रामक होता है और महत्वपूर्ण बिंदुओं (मेरे लिए स्पष्ट नहीं) का संकेत देता है, यह समझने के लिए कि गोडोट स्रोत कोड को कई बार फिर से पढ़ना पड़ा (कोड बड़ा और अच्छी तरह से लिखा नहीं गया है)।
यह सिर्फ मेरी धारणा है, यह गलत हो सकता है, मैं किसी को गुमराह नहीं करना चाहता।

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

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

लैग्स - प्रबंधन के साथ एक बड़ी समस्या है, गोडोट की तरफ यह 100% है, मैंने इसे ठीक नहीं किया। (एफपीएस शेड्स और लैग्स के संकलन के दौरान नियंत्रण wedges (उदाहरण के लिए, ब्राउज़र में)), गोडोट में 3 डी रेंडरिंग की सुविधाओं से संबंधित अन्य लैग्स, मैंने उनमें से कुछ का चक्कर लगाया, लेकिन वे अभी भी मौजूद हैं / हो सकते हैं।

5. WebGL2 काम करता है केवल लिनक्स

यदि आपके पास विंडोज़ है तो लिंक से गेम शुरू न करें । WebGL2 / WASM संस्करण से लिंक करें।

सूचना अद्यतन : वेबलॉग संस्करण एक सुपर-शक्तिशाली पीसी (i9 / 16 जीबी रैम / 8 जीबी वीडियो) पर विंडोज 10 (केवल फ़ायरफ़ॉक्स में, एंग्ली बंद के साथ) लॉन्च किया गया था, हालांकि मंजिल अब और किसी कारण से प्रस्तुत नहीं किया गया है, और फ़ायरफ़ॉक्स मेमोरी लीक कर रहा है (> 16 जीबी) ) पाँच मिनट में ... यह बेहतर नहीं है कि आप अपनी जोखिम और जोखिम पर ही चलें

केवल क्रोम 76+ और फ़ायरफ़ॉक्स (लिनक्स) पर काम करता है।

विंडोज के बारे में एक बग्रेपोर्ट (लिंक) भेजा गया था , अगर यह एक ब्राउज़र बग है, तो Google 2 महीने बाद प्रतिक्रिया करता है। लेकिन जाहिरा तौर पर यह ANGLE में एक बग है, और यह लगभग निश्चित रूप से wontfix है।
Bugreport पहले से ही बंद है, और ANGLE को भी संपादित नहीं किया जाएगा। इसलिए विंडोज पर, ब्राउज़र काम नहीं करेगा।

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

6. मल्टीप्लेयर

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

जैसे ही गोडोट 3.2 सामने आया, मैं वेबआरटीसी को परीक्षण के लिए भी जोड़ दूंगा।