Sign in to follow this  

Rendering awesome Text

This topic is 388 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hey everyone,

 

eversince, I wanted to show awesome Text stuff like Quest and skill descriptions as seen in well known MMORPGs. Yet I never figured out how that is done. I ve heard of UI-Frameworks like Nifty which support css/html, but for some reason I am pretty uncomfortable with the thought of having xml elements on my screen and not being able to address them in a more "c++ish" way directly from my code.

So I wonderd, if there is some kind of well kept secret, that gives me the possibility to render nice looking text using OGL without producing like huge amounts of overhead by loading each letter as a texture.

 

Id appreciate your help and ideas!

Share this post


Link to post
Share on other sites

To your question as a whole I can't answer but to this bit

 

 

gives me the possibility to render nice looking text using OGL without producing like huge amounts of overhead by loading each

letter as a texture.

 

 

You just use one texture with all the letters you require on (one texture per font). Drawing text then can be very fast. Of course that depends on the resolution you require for each letter. Making the actual textuere before hand could be a lot of work. I've used FreeType for font rendering which uses that method but it dynamically creates the texture at runtime (depending on required resolution etc) which gives you a good balance of positives (easy to create, dynamic, good resolution, fast to render). I like it because I get crisp fonts on various screen sizes without having to have an excessively large font texture.

Edited by Nanoha

Share this post


Link to post
Share on other sites
printf("awesome");

:P
 



but for some reason I am pretty uncomfortable with the thought of having xml elements on my screen and not being able to address them in a more "c++ish" way directly from my code.


I suggest you get over your discomfort. Even if you have a "C++ish" UI you still want a layout tool and data format to describe your UI outside of your code.

Look into tool kits like CEGUI or Rocket which let you describe your UI in data and then manipulate it further with C++ if and when appropriate (which, btw, is going to be almost never).

Edited by Kylotan
fixed formatting

Share this post


Link to post
Share on other sites

The secret is you have to load each letter as texture! As Nanoha sayed, typically you have one texture per font or maybe have two fonts or different sizes of a font on one texture. Then you need to know where each characters texture coords are how large the character is. Generate a VBO/ VAO from this information depending on your text while generating triangle strips from the character lengths and font height and texcoords from the character based on your font texture. Apply Alpha Blend in the shader or use stencil mask or simply discard pixels without colors to make text transparency between character spaces.

 

This is all the magic that happens behind texture fonts.

 

In more complex UI Systems you may have the VBO/ VAO created once on UI Update so anything you have inside it will be stored in one or more huge VBOs regardless of if it is text, button or an icon

Share this post


Link to post
Share on other sites

When the layout is fixed, you can sample a padded text buffer as a texture with NN sampling and use it as an offset for where to read from the font atlas. One pixel is one character as seen on the screen. Then you only need one quad drawn to render thousands of characters and can keep the unseen text on the GPU memory while scrolling. Getting another style is as easy as changing the font atlas. You can take colors from the text buffer to change colors per character.

 

I used this method with HLSL in my exam project for colored syntax and it should be possible with GLSL as well.

The text on the tabs were rendered in advance and simply stored as plain textures and the main text is stored as buffers on the GPU.

Multi character arrows, smileys and coloring were made by tokenizing the content before deciding which characters to color or replace with larger symbols.

Everything drawn on the window is pure draw calls in my graphics engine without any flimsy dependencies.

https://sites.google.com/site/steamrollerprogramminglanguage/

PlotterCode.png

Edited by Dawoodoz

Share this post


Link to post
Share on other sites

Create a texture with all of the characters required for a certain font, load that texture uses it's texture coordinate to be able to find where each character is.

 

For 2D text, combine all of the letters from your font texture into a UI texture what has the text you want and draw that to the screen.

For 3D text, combine all of the letters from your font texture but generate geometry for each of the letters and then you draw the text. Stick the geometry letters in a single VBO rather than making draw calls to each single character. The nice thing about the 3D text (geometry) font size doesn't affect it as badly as 2D text, can save on memory as geometry is normally smaller than a texture and can have lighting or other effects applied to it.

 

Or find a library to handle this for you.

Share this post


Link to post
Share on other sites

This topic is 388 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this