2012-01-13 16 views
27

मेरे पास opengl विधियों के अलावा अन्य उपयोग करने के विकल्प नहीं हैं (जो glxxx() विधियां() है)। मुझे केवल ग्लू विधियों का उपयोग करके टेक्स्ट खींचना होगा। लाल किताब पढ़ने के बाद मैं समझता हूं कि यह केवल glBitmap() विधि के माध्यम से संभव है। यदि यह एकमात्र संभव तरीका है, तो क्या कोई भी सभी पात्रों के लिए पिक्सेल सरणी जानकारी के साथ मेरी सहायता कर सकता है। क्या टेक्स्ट खींचने का कोई और तरीका है?केवल ओपनजीएल विधियों का उपयोग करके टेक्स्ट कैसे आकर्षित करें?

उत्तर

5

This article वर्णन करता है कि विभिन्न तकनीकों का उपयोग करके ओपनजीएल में टेक्स्ट कैसे प्रस्तुत किया जाए।

  • glBitmap
  • का उपयोग कर बनावट
  • का उपयोग कर प्रदर्शन सूचियों का उपयोग कर
7

सादा ओपन में पाठ आकर्षित एक straigth- नहीं है:

केवल ओपन का उपयोग कर के साथ, वहाँ कई तरीके हैं आगे का काम आपको ऐसा करने के लिए शायद पुस्तकालयों पर एक नज़र रखना चाहिए (या तो पुस्तकालय का उपयोग करके या उदाहरण कार्यान्वयन के रूप में)।

कुछ अच्छे शुरुआती बिंदु GLFont, OpenGL Font Survey और NeHe Tutorial for Bitmap Fonts (Windows) हो सकते हैं।

ध्यान दें कि फ़ॉन्ट सर्वेक्षण में उल्लिखित ओपनजीएल में टेक्स्ट प्राप्त करने का एकमात्र तरीका बिटमैप नहीं है।

+0

Nehe ट्यूटोरियल लिंक – befzz

1

मुझे लगता है कि ओपनजीएल में पाठ खींचने का सबसे अच्छा समाधान बनावट फोंट है, मैं उनके साथ लंबे समय तक काम करता हूं। वे लचीले, तेज़ और अच्छे लग रहे हैं (कुछ पीछे अपवादों के साथ)। मैं बनावट के लिए फ़ॉन्ट फ़ाइलों (उदाहरण के लिए .ttf) को परिवर्तित करने के लिए विशेष कार्यक्रम का उपयोग करता हूं, जो कुछ आंतरिक "फ़ॉन्ट" प्रारूप की फ़ाइल में सहेजा जाता है (मैंने http://content.gpwiki.org/index.php/OpenGL:Tutorials:Font_System पर आधारित प्रारूप और प्रोग्राम विकसित किया है, हालांकि मेरा संस्करण मूल समर्थन से बहुत दूर चला गया है यूनिकोड और इतने पर)। मुख्य ऐप शुरू करते समय, फोंट को इस "आंतरिक" प्रारूप से लोड किया जाता है। अधिक जानकारी के लिए उपरोक्त लिंक देखें।

इस तरह के दृष्टिकोण के साथ मुख्य ऐप फ्रीटाइप जैसी किसी भी विशेष पुस्तकालय का उपयोग नहीं करता है, जो मेरे लिए भी अवांछनीय है। मानक ओपनजीएल कार्यों का उपयोग कर पाठ तैयार किया जा रहा है।

+0

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

8

enter image description here

उपयोग glutStrokeCharacter(GLUT_STROKE_ROMAN, myCharString)

एक उदाहरण: एक स्टार वार्स स्क्रॉलर।

#include <windows.h> 
#include <string.h> 
#include <GL\glut.h> 
#include <iostream.h> 
#include <fstream.h> 

GLfloat UpwardsScrollVelocity = -10.0; 
float view=20.0; 

char quote[6][80]; 
int numberOfQuotes=0,i; 

//********************************************* 
//* glutIdleFunc(timeTick);     * 
//********************************************* 

void timeTick(void) 
{ 
    if (UpwardsScrollVelocity< -600) 
     view-=0.000011; 
    if(view < 0) {view=20; UpwardsScrollVelocity = -10.0;} 
    // exit(0); 
    UpwardsScrollVelocity -= 0.015; 
    glutPostRedisplay(); 

} 


//********************************************* 
//* printToConsoleWindow()    * 
//********************************************* 

void printToConsoleWindow() 
{ 
    int l,lenghOfQuote, i; 

    for( l=0;l<numberOfQuotes;l++) 
    { 
     lenghOfQuote = (int)strlen(quote[l]); 

     for (i = 0; i < lenghOfQuote; i++) 
     { 
      //cout<<quote[l][i]; 
     } 
      //out<<endl; 
    } 

} 

//********************************************* 
//* RenderToDisplay()      * 
//********************************************* 

void RenderToDisplay() 
{ 
    int l,lenghOfQuote, i; 

    glTranslatef(0.0, -100, UpwardsScrollVelocity); 
    glRotatef(-20, 1.0, 0.0, 0.0); 
    glScalef(0.1, 0.1, 0.1); 



    for( l=0;l<numberOfQuotes;l++) 
    { 
     lenghOfQuote = (int)strlen(quote[l]); 
     glPushMatrix(); 
     glTranslatef(-(lenghOfQuote*37), -(l*200), 0.0); 
     for (i = 0; i < lenghOfQuote; i++) 
     { 
      glColor3f((UpwardsScrollVelocity/10)+300+(l*10),(UpwardsScrollVelocity/10)+300+(l*10),0.0); 
      glutStrokeCharacter(GLUT_STROKE_ROMAN, quote[l][i]); 
     } 
     glPopMatrix(); 
    } 

} 
//********************************************* 
//* glutDisplayFunc(myDisplayFunction);  * 
//********************************************* 

void myDisplayFunction(void) 
{ 
    glClear(GL_COLOR_BUFFER_BIT); 
    glLoadIdentity(); 
    gluLookAt(0.0, 30.0, 100.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); 
    RenderToDisplay(); 
    glutSwapBuffers(); 
} 
//********************************************* 
//* glutReshapeFunc(reshape);    * 
//********************************************* 

void reshape(int w, int h) 
{ 
    glViewport(0, 0, w, h); 
    glMatrixMode(GL_PROJECTION); 
    glLoadIdentity(); 
    gluPerspective(60, 1.0, 1.0, 3200); 
    glMatrixMode(GL_MODELVIEW); 
} 

//********************************************* 
//* int main()        * 
//********************************************* 


int main() 
{ 
    strcpy(quote[0],"Luke, I am your father!."); 
    strcpy(quote[1],"Obi-Wan has taught you well. "); 
    strcpy(quote[2],"The force is strong with this one. "); 
    strcpy(quote[3],"Alert all commands. Calculate every possible destination along their last known trajectory. "); 
    strcpy(quote[4],"The force is with you, young Skywalker, but you are not a Jedi yet."); 
    numberOfQuotes=5; 

    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH); 
    glutInitWindowSize(800, 400); 
    glutCreateWindow("StarWars scroller"); 
    glClearColor(0.0, 0.0, 0.0, 1.0); 
    glLineWidth(3); 

    glutDisplayFunc(myDisplayFunction); 
    glutReshapeFunc(reshape); 
    glutIdleFunc(timeTick); 
    glutMainLoop(); 

    return 0; 
} 
+46

glutStrokeCharacter एक opengl फ़ंक्शन नहीं है –

+15

यह glxxx() ओपी आवश्यकता में फिट बैठता है :) – AndroidGecko

+1

यहां उबंटू (glutInit, शामिल) पर काम करने के लिए संशोधित कोड है: https://gist.github.com/tgandor/3963f112324030a2c833 –

2

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

ग्लूट या किसी अन्य एक्सटेंशन का उपयोग करने की आवश्यकता नहीं है, केवल मूल ओपनजीएल ऑपरेटिबिलिटी। यह काम पूरा हो जाता है, यह उल्लेख न करें कि यह पेशेवर प्रोग्रामर द्वारा कई सफल खेलों और अन्य अनुप्रयोगों में दशकों तक ऐसा किया गया है।

+1

ऐसे प्रोग्राम भी हैं जिनका उपयोग आप अपने लिए छवि बनावट उत्पन्न करने के लिए कर सकते हैं। – fintelia

36

थ्योरी

यह मुश्किल

ट्रू टाइप और ओपन टाइप की तरह लोकप्रिय फ़ॉन्ट प्रारूपों वेक्टर रूपरेखा स्वरूप हैं क्यों है: वे पत्र की सीमा को परिभाषित करने के बेज़ियर घटता का उपयोग करें।

Image source

पिक्सल के सरणियों (रैस्टराइज़ेशन) में उन स्वरूपों को बदलने भी विशिष्ट और ओपन के दायरे से बाहर है, विशेष रूप से ओपन गैर सीधे पुरातन नहीं है क्योंकि (जैसे Why is there no circle or ellipse primitive in OpenGL? देखें)

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

ओपनजीएल तब जानता है कि बनावट के माध्यम से पिक्सेल के सरणी के साथ कैसे निपटें।

बनावट एटलस

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

अधिक कुशल दृष्टिकोण उन सभी पात्रों को रास्टर करना है जो आप योजना बनाते हैं और उन्हें एक बनावट पर क्रैम करते हैं।

और फिर इसे एक बार GPU में स्थानांतरित करें, और सही वर्ण चुनने के लिए कस्टम यूवी निर्देशांक के साथ बनावट का उपयोग करें।

इस दृष्टिकोण को https://en.wikipedia.org/wiki/Texture_atlas कहा जाता है और इसका उपयोग न केवल बनावट के लिए किया जा सकता है बल्कि अन्य बार-बार उपयोग किए जाने वाले बनावट भी हो सकता है, जैसे 2 डी गेम या वेब यूआई आइकन में टाइल्स।

पूर्ण बनावट के विकिपीडिया चित्र, जो अपने आप में freetype-जीएल से लिया जाता है, यह अच्छी तरह से दिखाता है:

मुझे लगता है कि छोटी से छोटी बनावट समस्या का चरित्र प्लेसमेंट को अनुकूलित एक एनपी कठिन है समस्या, देखें: What algorithm can be used for packing rectangles of different sizes into the smallest rectangle possible in a fairly optimal way?

उसी तकनीक का एक ही बार में (प्रतीक) की तरह कई छोटे चित्रों को भेजने की वेब विकास में प्रयोग किया जाता है, लेकिन वहां यह कहा जाता है "CSS स्प्राइट": https://css-tricks.com/css-sprites/ और नेटवर्क की विलंबता को छिपाने के लिए उपयोग किया जाता है इसके बजाय सीपीयू/जीपीयू संचार।

गैर सीपीयू रेखापुंज तरीकों

वहाँ भी तरीके है जिसके बनावट के लिए CPU रेखापुंज का प्रयोग नहीं करते मौजूद हैं।

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

यह FOSDEM 2014 वीडियो https://youtu.be/LZis03DXWjE?t=886 अन्य मौजूदा तकनीक बताते हैं:

  • tesselation: छोटे त्रिकोण के लिए फ़ॉन्ट परिवर्तित। GPU तब त्रिकोणों को चित्रित करने में वाकई अच्छा होता है।Downsides:
    • त्रिकोण
    • हे का एक समूह उत्पन्न करता है (एन लॉग इन करें n) त्रिकोण shaders पर
  • calculate घटता के सीपीयू गणना। ब्लिन-लूप द्वारा 2005 के एक पेपर ने इस विधि को मानचित्र पर रखा। डाउनसाइड: जटिल। देखें: Resolution independent cubic bezier drawing on GPU (Blinn/Loop)
  • ओपनवीजी https://en.wikipedia.org/wiki/OpenVG जैसे प्रत्यक्ष हार्डवेयर कार्यान्वयन। नकारात्मक: कुछ कारणों से बहुत व्यापक रूप से लागू नहीं किया गया है। देखें:

फ़ॉन्ट्स 3 डी ज्यामिति के अंदर परिप्रेक्ष्य के साथ

परिप्रेक्ष्य के साथ 3 डी ज्यामिति के अंदर फोंट प्रतिपादन (एक ओर्थोगोनल HUD की तुलना) बहुत जटिल है, क्योंकि परिप्रेक्ष्य चरित्र के एक और चरित्र के लायक चरित्र का एक हिस्सा बना सकता है एक समान सीपीयू विघटन (उदा। रास्टर, टेस्सेलेशन) निकट भाग पर बुरा लग रहा है।

enter image description here

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

क्रियान्वयन

उदाहरण का पालन करें कि सभी उबंटू 15.10 पर परीक्षण किया गया।

क्योंकि यह एक जटिल समस्या है जैसा कि पहले चर्चा की गई थी, अधिकांश उदाहरण बड़े हैं, और इस उत्तर की 30k चार सीमा को उड़ा देंगे, इसलिए संकलित करने के लिए संबंधित गिट भंडारों को क्लोन करें।

हालांकि वे सभी पूरी तरह से खुले स्रोत हैं, इसलिए आप केवल आरटीएफएस कर सकते हैं।

freetype समाधान

FreeType, प्रमुख खुला स्रोत फ़ॉन्ट रैस्टराइज़ेशन पुस्तकालय की तरह दिखता है तो यह, हमें ट्रू टाइप और ओपन टाइप फ़ॉन्ट का उपयोग करने की अनुमति होगी यह सबसे सुरुचिपूर्ण समाधान बना रही है।

  • https://github.com/rougier/freetype-gl

    उदाहरण ओपन और freetype का एक सेट था, लेकिन और अधिक या कम एक पुस्तकालय है कि यह करता है और एक सभ्य एपीआई को उजागर करता है में विकसित हो रहा है।

    किसी भी मामले में, कुछ स्रोत कोड चिपकाने की प्रतिलिपि बनाकर इसे अपने प्रोजेक्ट पर एकीकृत करना संभव होना चाहिए।

    यह बॉक्स के बाहर बनावट एटलस और दूरी क्षेत्र तकनीक दोनों प्रदान करता है। के तहत

    डेमो: https://github.com/rougier/freetype-gl/tree/master/demos

    एक Debian पैकेज नहीं है, और यह एक दर्द उबंटू 15.10 पर संकलित करने के लिए: https://github.com/rougier/freetype-gl/issues/82#issuecomment-216025527 (पैकेजिंग के मुद्दों, कुछ नदी के ऊपर), लेकिन यह 16.10 के रूप में बेहतर हो गया।

    एक अच्छा स्थापना विधि नहीं है:

    enter image description here

  • libdgx https://github.com/libgdx/libgdx/tree/1.9.2/extensions/gdx-freetype

उदाहरण/ट्यूटोरियल:

इस डेमो की तरह सुंदर आउटपुट उत्पन्न करता है

अन्य फ़ॉन्ट rasterizers

उन freetype से कम अच्छा लगता है, लेकिन अधिक हल्के हो सकता है:

एंटोन के ओपन 4 ट्यूटोरियल उदाहरण 26 "बिटमैप फ़ॉन्ट"

फ़ॉन्ट मैन्युअल लेखक द्वारा बनाई गई और एक भी .png फ़ाइल में संग्रहीत किया गया था। पत्र छवि के अंदर एक सरणी रूप में संग्रहीत हैं।

यह विधि बिल्कुल सामान्य नहीं है, और आपको अंतर्राष्ट्रीयकरण के साथ कठिनाइयों का सामना करना पड़ेगा।

बिल्ड के साथ:

make -f Makefile.linux64 

आउटपुट पूर्वावलोकन:

enter image description here

ओपन-ट्यूटोरियल अध्याय 11 "2 डी फोंट"

बनावट DDS files से उत्पन्न होते हैं।

ट्यूटोरियल बताता है कि CBFG और Paint.Net का उपयोग करके डीडीएस फाइलें कैसे बनाई गईं।

आउटपुट पूर्वावलोकन:

enter image description here

किसी कारण सुजान मेरे लिए याद आ रही है के लिए, लेकिन समय काउंटर ठीक काम करता है: https://github.com/opengl-tutorials/ogl/issues/15

FreeGLUT

भरमार glutStrokeCharacter है और FreeGLUT है खुला स्रोत ... https://github.com/dcnieho/FreeGLUT/blob/FG_3_0_0/src/fg_font.c#L255

OpenGLText

https://github.com/tlorach/OpenGLText

ट्रू टाइप रेखापुंज। एनवीआईडीआईए कर्मचारी द्वारा। पुन: प्रयोज्यता के लिए लक्ष्य। अभी तक कोशिश नहीं की है।

एआरएम माली GLES एसडीके नमूना

http://malideveloper.arm.com/resources/sample-code/simple-text-rendering/ एक PNG पर सभी पात्रों सांकेतिक शब्दों में बदलना है, और उन्हें वहाँ से कटौती करने के लिए लगता है।

SDL_ttf

enter image description here

स्रोत: एसडीएल के लिए एक अलग पेड़ में https://github.com/cirosantilli/cpp-cheat/blob/d36527fe4977bb9ef4b885b1ec92bd0cd3444a98/sdl/ttf.c

जीवन, और आसानी से एकीकृत करता है।

लेकिन एक बनावट एटलस कार्यान्वयन प्रदान नहीं करता है, तो प्रदर्शन सीमित हो जाएगा: Rendering fonts and text with SDL2 efficiently

संबंधित धागे

संबंधित मुद्दे