अपने ग्राफिक एडवेंचर के कुछ बिंदु पर, आप OpenGL के माध्यम से टेक्स्ट आउटपुट करना चाहेंगे। आप जो अपेक्षा कर सकते हैं, उसके विपरीत, एक निम्न-स्तरीय लाइब्रेरी जैसे ओपनजीएल के साथ स्क्रीन पर एक सरल रेखा प्राप्त करना काफी कठिन है। यदि आपको पाठ आकर्षित करने के लिए 128 से अधिक विभिन्न वर्णों की आवश्यकता नहीं है, तो यह मुश्किल नहीं होगा। कठिनाइयाँ तब आती हैं जब पात्र ऊँचाई, चौड़ाई और ऑफसेट से मेल नहीं खाते। आप कहां रहते हैं इसके आधार पर, आपको 128 से अधिक वर्णों की आवश्यकता हो सकती है। लेकिन क्या होगा यदि आप विशेष वर्ण, गणितीय या संगीत वर्ण चाहते हैं? जैसे ही आप समझते हैं कि पाठ को खींचना सबसे आसान काम नहीं है, तो आपको इस बात का अहसास होगा कि यह सबसे अधिक संभावना है कि ओपन-लेग जैसे निम्न-स्तरीय एपीआई से संबंधित नहीं होना चाहिए।

चूंकि ओपनजीएल पाठ को प्रस्तुत करने के लिए कोई साधन प्रदान नहीं करता है, इसलिए इस मामले की सभी कठिनाइयां हम पर हैं। चूंकि कोई ग्राफिक आदिम "सिंबल" नहीं है, इसलिए हमें खुद ही इसका आविष्कार करना होगा। पहले से तैयार उदाहरण हैं: GL_LINES माध्यम से एक प्रतीक GL_LINES , प्रतीकों के 3 डी मॉडल बनाएं, या त्रि-आयामी अंतरिक्ष में फ्लैट चतुष्कोण पर प्रतीकों को आकर्षित करें।

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

क्लासिक: रेखापुंज फ़ॉन्ट

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

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

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

यह तकनीक बहुत पहले से लोकप्रिय नहीं थी (और अभी भी अपनी लोकप्रियता बरकरार रखती है), क्योंकि यह बहुत तेज़ है और किसी भी प्लेटफ़ॉर्म पर काम करती है। लेकिन आज तक, पाठ प्रदान करने के लिए अन्य दृष्टिकोण हैं। उनमें से एक FreeType का उपयोग करके ट्रू टाइप फ़ॉन्ट प्रदान कर रहा है।

आधुनिकता: फ्री टाइप

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

ट्रू टाइप फ़ॉन्ट ग्लिफ़ का एक संग्रह है जो पिक्सेल द्वारा परिभाषित नहीं है, लेकिन गणितीय सूत्रों द्वारा। वेक्टर छवियों के साथ, पसंदीदा फ़ॉन्ट आकार के आधार पर एक रेखापुंज फ़ॉन्ट छवि उत्पन्न की जा सकती है। ट्रू टाइप फोंट का उपयोग करके, आप गुणवत्ता के नुकसान के बिना विभिन्न आकारों के ग्लिफ़ को आसानी से प्रस्तुत कर सकते हैं।

FreeType को आधिकारिक साइट से डाउनलोड किया जा सकता है। आप या तो FreeType को स्वयं संकलित कर सकते हैं, या साइट पर, यदि कोई हो, तो precompiled संस्करण का उपयोग कर सकते हैं। याद रखें कि अपने प्रोग्राम को freetype.lib से लिंक करें और सुनिश्चित करें कि कंपाइलर को पता है कि हेडर फ़ाइलों को कहाँ देखना है।

फिर सही हेडर फाइलें संलग्न करें:

 #include <ft2build.h> #include FT_FREETYPE_H 

चूंकि FreeType को थोड़े अजीब तरीके से डिज़ाइन किया गया है (मूल लिखने के समय, मुझे बताएं कि क्या कुछ बदल गया है), आप इसकी हेडर फ़ाइलों को हेडर फ़ाइलों के साथ केवल फ़ोल्डर्स की जड़ में रख सकते हैं। FreeType को किसी अन्य तरीके से कनेक्ट करना (उदाहरण के लिए, #include <3rdParty/FreeType/ft2build.h> ) हैडर फ़ाइल संघर्ष को भड़का सकता है।

FreeType क्या करता है? ट्रू टाइप फ़ॉन्ट को लोड करता है और प्रत्येक ग्लिफ़ के लिए एक बिटमैप छवि बनाता है और कुछ ग्लिफ़ मेट्रिक्स की गणना करता है। हम प्राप्त मीट्रिक्स के आधार पर बनावट उत्पन्न करने और प्रत्येक ग्लिफ़ की स्थिति के लिए बिटमैप चित्र प्राप्त कर सकते हैं।

फ़ॉन्ट डाउनलोड करने के लिए, हमें FreeType को इनिशियलाइज़ करना होगा और फ़ॉन्ट को फेस के रूप में लोड करना होगा (जैसा कि FreeType फ़ॉन्ट को कॉल करता है)। इस उदाहरण में, हम ट्रू टाइप फ़ॉन्ट arial.ttf लोड करते हैं, जिसे C: / Windows / फ़ॉन्ट्स फ़ोल्डर से कॉपी किया जाता है।

 FT_Library ft; if (FT_Init_FreeType(&ft)) std::cout << "ERROR::FREETYPE: Could not init FreeType Library" << std::endl; FT_Face face; if (FT_New_Face(ft, "fonts/arial.ttf", 0, &face)) std::cout << "ERROR::FREETYPE: Failed to load font" << std::endl; 

इनमें से प्रत्येक फ्री टाइप कार्य विफलता के मामले में एक नॉनजरो मूल्य देता है।

एक बार जब हम फेस फॉन्ट फेस लोड कर लेते हैं, तो हमें वांछित फॉन्ट साइज़ निर्दिष्ट करना होगा, जिसे हम निकालेंगे:

 FT_Set_Pixel_Sizes(face, 0, 48); 

यह फ़ंक्शन ग्लिफ़ की चौड़ाई और ऊंचाई निर्धारित करता है। चौड़ाई को 0 (शून्य) पर सेट करके हम फ्री टाइप को सेट ऊंचाई के आधार पर चौड़ाई की गणना करने की अनुमति देते हैं।

फेस फ्री टाइप में ग्लिफ़ का संग्रह होता है। हम FT_Load_Char को कॉल करके कुछ ग्लिफ़ को सक्रिय बना सकते हैं। यहाँ हम ग्लिफ़ X को लोड करने का प्रयास करते हैं:

 if (FT_Load_Char(face, 'X', FT_LOAD_RENDER)) std::cout << "ERROR::FREETYTPE: Failed to load Glyph" << std::endl; 

FT_LOAD_RENDER को एक डाउनलोड फ़्लैग के रूप में सेट करके, हम FreeType को एक 8-बिट ग्रेस्केल बिटमैप बनाने के लिए कहते हैं, जिसे हम बाद में इस तरह प्राप्त कर सकते हैं:

 face->glyph->bitmap; 

फ्री टाइप के साथ भरी हुई ग्लिफ़ बिटमैप फ़ॉन्ट के मामले में समान आकार की नहीं हैं। FreeType के साथ उत्पन्न एक बिटमैप किसी दिए गए फ़ॉन्ट आकार के लिए न्यूनतम आकार है और केवल एक वर्ण रखने के लिए पर्याप्त है। उदाहरण के लिए, एक ग्लिफ़ की एक बिटमैप छवि . ग्लिफ़ X के बिटमैप की तुलना में बहुत छोटा है। इस कारण से, FreeType कुछ मेट्रिक्स भी डाउनलोड करता है जो बताते हैं कि किसी एकल वर्ण को किस आकार और कहाँ स्थित होना चाहिए। नीचे एक छवि दिखाई जा रही है जो प्रत्येक ग्लिफ़ के लिए मैट्रिक्स फ्रीटाइप की गणना करता है।

प्रत्येक ग्लिफ़ बेसलाइन (एक तीर के साथ क्षैतिज रेखा) पर स्थित है। कुछ बेसलाइन ( X ) पर हैं, कुछ नीचे ( g , p ) हैं। ये मेट्रिक्स बेसलाइन पर ग्लिफ़ की सही स्थिति के लिए ऑफ़सेट्स को सटीक रूप से निर्धारित करते हैं, ग्लिफ़ के आकार को समायोजित करते हैं और यह पता लगाने के लिए कि अगले ग्लिफ़ को खींचने के लिए आपको कितने पिक्सेल छोड़ने की ज़रूरत है। निम्नलिखित उन मैट्रिक्स की सूची है जिनका हम उपयोग करेंगे:

• चौड़ाई : पिक्सेल में ग्लिफ़ की चौड़ाई, face->glyph->bitmap.width द्वारा face->glyph->bitmap.width
• ऊँचाई : पिक्सेल में ग्लिफ़ की ऊँचाई, face->glyph->bitmap.rows द्वारा face->glyph->bitmap.rows
• बेयरिंगएक्स : ग्लिफ़ के ऊपरी बाएँ बिंदु की क्षैतिज ऑफसेट उत्पत्ति के सापेक्ष, face->glyph->bitmap_left द्वारा face->glyph->bitmap_left
• बियरिंग : ग्लिफ़ के ऊपरी बाएँ बिंदु की ऊर्ध्वाधर ऑफसेट उत्पत्ति के सापेक्ष, face->glyph->bitmap_top द्वारा face->glyph->bitmap_top
• अग्रिम : मूल के सापेक्ष 1/64 पिक्सल में अगले ग्लिफ़ की शुरुआत की क्षैतिज ऑफसेट, face->glyph->advance.x द्वारा face->glyph->advance.x

हम एक प्रतीक के ग्लिफ़ को लोड कर सकते हैं, इसकी मीट्रिक प्राप्त कर सकते हैं और हर बार जब हम इसे स्क्रीन पर खींचना चाहते हैं तो एक बनावट उत्पन्न करते हैं, लेकिन प्रत्येक फ्रेम पर प्रत्येक प्रतीक के लिए बनावट बनाने के लिए एक अच्छी विधि नहीं है। बेहतर है कि हम उत्पन्न डेटा को कहीं और सहेजेंगे और जब हमें उनकी आवश्यकता होगी, तो उनसे अनुरोध करेंगे। हम एक सुविधाजनक संरचना को परिभाषित करते हैं जिसे हम std::map में संचित करेंगे:

 struct Character { GLuint TextureID; // ID   glm::ivec2 Size; //   glm::ivec2 Bearing; //      GLuint Advance; //       }; std::map<GLchar, Character> Characters; 

इस लेख में, हम अपने जीवन को सरल बनाएंगे और केवल पहले 128 अक्षरों का उपयोग करेंगे। प्रत्येक वर्ण के लिए, हम एक बनावट उत्पन्न करेंगे और प्रकार के ढांचे में आवश्यक डेटा को सहेजेंगे, जिसे हम प्रकार std::map Characters जोड़ेंगे। इस प्रकार, एक चरित्र को खींचने के लिए आवश्यक सभी डेटा भविष्य के उपयोग के लिए सहेजे जाते हैं।

 glPixelStorei(GL_UNPACK_ALIGNMENT, 1); // Disable byte-alignment restriction for (GLubyte c = 0; c < 128; c++) { // Load character glyph if (FT_Load_Char(face, c, FT_LOAD_RENDER)) { std::cout << "ERROR::FREETYTPE: Failed to load Glyph" << std::endl; continue; } // Generate texture GLuint texture; glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); glTexImage2D( GL_TEXTURE_2D, 0, GL_RED, face->glyph->bitmap.width, face->glyph->bitmap.rows, 0, GL_RED, GL_UNSIGNED_BYTE, face->glyph->bitmap.buffer ); // Set texture options glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); // Now store character for later use Character character = { texture, glm::ivec2(face->glyph->bitmap.width, face->glyph->bitmap.rows), glm::ivec2(face->glyph->bitmap_left, face->glyph->bitmap_top), face->glyph->advance.x }; Characters.insert(std::pair<GLchar, Character>(c, character)); // Characters[c] = character; } 

लूप के अंदर, पहले 128 अक्षरों में से प्रत्येक के लिए, हम एक ग्लिफ़ प्राप्त करते हैं, एक बनावट उत्पन्न करते हैं, इसकी सेटिंग्स सेट करते हैं और मैट्रिक्स को बचाते हैं। यह ध्यान रखना दिलचस्प है कि हम GL_RED उपयोग internalFormat और format बनावट के तर्क के रूप में करते हैं। एक ग्लिफ़-जनित बिटमैप एक 8-बिट ग्रेस्केल छवि है, जिसके प्रत्येक पिक्सेल में 1 बाइट होती है। इस कारण से, हम बिटमैप बफर को बनावट रंग मान के रूप में संग्रहीत करेंगे। यह एक बनावट बनाकर प्राप्त किया जाता है जिसमें प्रत्येक बाइट रंग के लाल घटक से मेल खाती है। यदि हम बनावट रंगों का प्रतिनिधित्व करने के लिए 1 बाइट का उपयोग करते हैं, तो OpenGL की सीमाओं के बारे में न भूलें:

 glPixelStorei(GL_UNPACK_ALIGNMENT, 1); 

ओपनजीएल को 4-बाइट ऑफसेट के लिए सभी बनावट की आवश्यकता होती है, अर्थात्। उनका आकार 4 बाइट्स (जैसे 8 बाइट्स, 4000 बाइट्स, 2048 बाइट्स) या (और) का एक से अधिक होना चाहिए, उन्हें पिक्सेल प्रति 4 बाइट्स (जैसे आरजीबीए प्रारूप में) का उपयोग करना चाहिए, लेकिन चूंकि हम 1 बाइट प्रति पिक्सेल का उपयोग करते हैं, वे अलग-अलग हो सकते हैं विस्तृत। अनपैक एलाइनमेंट ऑफ़सेट्स को सेट करके (क्या कोई बेहतर अनुवाद है?) 1 से, हम उन ऑफसेट त्रुटियों को समाप्त करते हैं जो सीगफॉल्ट का कारण बन सकती हैं।

इसके अलावा, जब हमने फ़ॉन्ट के साथ काम करना समाप्त कर लिया, तो हमें फ्री टाइप संसाधनों को साफ करना चाहिए:

 FT_Done_Face(face); //     face FT_Done_FreeType(ft); //   FreeType 

shaders

ग्लिफ़ को आकर्षित करने के लिए, निम्नलिखित शीर्ष शैडर का उपयोग करें:

 #version 330 core layout (location = 0) in vec4 vertex; // <vec2 pos, vec2 tex_coord> out vec2 TexCoords; uniform mat4 projection; void main() { gl_Position = projection * vec4(vertex.xy, 0.0, 1.0); TexCoords = vertex.zw; } 

हम एक vec4 में प्रतीक की स्थिति और बनावट का समन्वय vec4 । वर्टेक्स शेडर प्रक्षेपण मैट्रिक्स के साथ निर्देशांक के उत्पाद की गणना करता है और बनावट समन्वयक को टुकड़े टुकड़े करने वाले को स्थानांतरित करता है:

 #version 330 core in vec2 TexCoords; out vec4 color; uniform sampler2D text; uniform vec3 textColor; void main() { vec4 sampled = vec4(1.0, 1.0, 1.0, texture(text, TexCoords).r); color = vec4(textColor, 1.0) * sampled; } 

टुकड़ा shader 2 वैश्विक चर को स्वीकार करता है - ग्लिफ़ की एक मोनोक्रोम छवि और स्वयं ग्लिफ़ का रंग। सबसे पहले, हम ग्लिफ़ के रंग मूल्य का नमूना लेते हैं। चूंकि बनावट डेटा बनावट के लाल घटक में संग्रहीत होता है, इसलिए हम केवल r घटक को पारदर्शिता मूल्य के रूप में नमूना लेते हैं। रंग की पारदर्शिता को बदलने से, परिणामी रंग ग्लिफ़ और अपारदर्शी की पृष्ठभूमि पर ग्लिफ़ के सच्चे पिक्सेल में पारदर्शी होगा। हम टेक्स्ट के रंग बदलने के लिए टेक्स्ट कलर के वेरिएबल के साथ आरजीबी रंग भी गुणा करते हैं।

लेकिन हमारे तंत्र के काम करने के लिए, आपको मिश्रण को सक्षम करने की आवश्यकता है:

 glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 

एक प्रक्षेपण मैट्रिक्स के रूप में, हमारे पास एक ऑर्थोग्राफ़िक प्रक्षेपण मैट्रिक्स होगा। पाठ को आकर्षित करने के लिए, वास्तव में, एक परिप्रेक्ष्य मैट्रिक्स की आवश्यकता नहीं होती है और ऑर्थोग्राफिक प्रक्षेपण का उपयोग भी हमें स्क्रीन निर्देशांक में सभी शीर्ष निर्देशांक निर्दिष्ट करने की अनुमति देता है यदि हम मैट्रिक्स को इस तरह सेट करते हैं:

 glm::mat4 projection = glm::ortho(0.0f, 800.0f, 0.0f, 600.0f); 

हम मैट्रिक्स के निचले भाग को 0.0f सेट करते हैं, जो खिड़की की ऊंचाई के ऊपर है। परिणामस्वरूप, y निर्देशांक स्क्रीन के नीचे ( y = 0 ) से स्क्रीन के शीर्ष ( y = 600 ) तक मान लेता है। इसका मतलब यह है कि डॉट (0, 0) इंगित करता है और स्क्रीन के निचले बाएं कोने।

अंत में, चतुष्कोण खींचने के लिए VBO और VAO बनाएं। यहां हम वीबीओ में पर्याप्त मेमोरी आरक्षित करते हैं ताकि हम वर्णों को खींचने के लिए डेटा को अपडेट कर सकें।

 GLuint VAO, VBO; glGenVertexArrays(1, &VAO); glGenBuffers(1, &VBO); glBindVertexArray(VAO); glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat) * 6 * 4, NULL, GL_DYNAMIC_DRAW); glEnableVertexAttribArray(0); glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, 4 * sizeof(GLfloat), 0); glBindBuffer(GL_ARRAY_BUFFER, 0); glBindVertexArray(0); 

एक समतल चतुर्भुज के लिए 4 फ़्लोटिंग पॉइंट नंबरों के 6 सिरों की आवश्यकता होती है, इसलिए हम 6 * 4 = 24 मेमोरी फ़्लोट्स आरक्षित करते हैं। चूँकि हम बहुत बार शीर्ष डेटा को बदलने जा रहे हैं, हम GL_DYNAMIC_DRAW का उपयोग करके मेमोरी आवंटित करते हैं।

स्क्रीन पर पाठ की एक पंक्ति प्रदर्शित करें

पाठ की एक पंक्ति प्रदर्शित करने के लिए, हम प्रतीक के अनुरूप Character संरचना को निकालते हैं और प्रतीक के मैट्रिक्स से चतुष्कोण के आयामों की गणना करते हैं। चतुष्कोण की गणना के आयामों से, मक्खी पर हम 6 कोने का एक सेट बनाते हैं और glBufferSubData का उपयोग करके शीर्ष डेटा को अपडेट करते हैं।

सुविधा के लिए, RenderText फंक्शन RenderText एक स्ट्रिंग तैयार करेगा:

 void RenderText(Shader &s, std::string text, GLfloat x, GLfloat y, GLfloat scale, glm::vec3 color) { // Activate corresponding render state s.Use(); glUniform3f(glGetUniformLocation(s.Program, "textColor"), color.x, color.y, color.z); glActiveTexture(GL_TEXTURE0); glBindVertexArray(VAO); // Iterate through all characters std::string::const_iterator c; for (c = text.begin(); c != text.end(); c++) { Character ch = Characters[*c]; GLfloat xpos = x + ch.Bearing.x * scale; GLfloat ypos = y - (ch.Size.y - ch.Bearing.y) * scale; GLfloat w = ch.Size.x * scale; GLfloat h = ch.Size.y * scale; // Update VBO for each character GLfloat vertices[6][4] = { { xpos, ypos + h, 0.0, 0.0 }, { xpos, ypos, 0.0, 1.0 }, { xpos + w, ypos, 1.0, 1.0 }, { xpos, ypos + h, 0.0, 0.0 }, { xpos + w, ypos, 1.0, 1.0 }, { xpos + w, ypos + h, 1.0, 0.0 } }; // Render glyph texture over quad glBindTexture(GL_TEXTURE_2D, ch.textureID); // Update content of VBO memory glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(vertices), vertices); glBindBuffer(GL_ARRAY_BUFFER, 0); // Render quad glDrawArrays(GL_TRIANGLES, 0, 6); // Now advance cursors for next glyph (note that advance is number of 1/64 pixels) x += (ch.Advance >> 6) * scale; // Bitshift by 6 to get value in pixels (2^6 = 64) } glBindVertexArray(0); glBindTexture(GL_TEXTURE_2D, 0); } 

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

कोड की इस लाइन को कुछ ध्यान देने की आवश्यकता है:

 GLfloat ypos = y - (ch.Size.y - ch.Bearing.y); 

कुछ वर्णों, जैसे कि p और g , को आधार रेखा के नीचे से विशेष रूप से खींचा जाता है, जिसका अर्थ है कि RenderText फ़ंक्शन के y पैरामीटर की तुलना में काफी कम होना चाहिए। सटीक ऑफसेट y_offset को ग्लिफ़ मेट्रिक्स से व्यक्त किया जा सकता है:

ऑफसेट की गणना करने के लिए, हमें आधार रेखा के नीचे स्थित दूरी पर यह पता लगाने के लिए सीधे हथियारों की आवश्यकता है। यह दूरी लाल तीर द्वारा दर्शाई गई है। जाहिर है, y_offset = bearingY - height और ypos = y + y_offset ।

यदि सब कुछ सही ढंग से किया गया है, तो आप इस तरह से पाठ को स्क्रीन पर प्रदर्शित कर सकते हैं:

 RenderText(shader, "This is sample text", 25.0f, 25.0f, 1.0f, glm::vec3(0.5, 0.8f, 0.2f)); RenderText(shader, "(C) LearnOpenGL.com", 540.0f, 570.0f, 0.5f, glm::vec3(0.3, 0.7f, 0.9f)); 

परिणाम इस तरह दिखना चाहिए:

एक उदाहरण कोड यहां है (मूल लेखक की साइट के लिए लिंक)

यह समझने के लिए कि कौन से चतुर्भुज खींचे गए हैं, सम्मिश्रण बंद करें:

इस आंकड़े से, यह स्पष्ट है कि अधिकांश चतुर्भुज एक काल्पनिक आधार रेखा के ऊपर हैं, हालांकि कुछ वर्ण, जैसे ( और p नीचे स्थानांतरित किए जाते हैं।

आगे क्या?

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

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

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