Jump to content
  • Advertisement
Sign in to follow this  
NordCoder

OpenGL Understanding loading of OpenGL textures from FreeType2

This topic is 2828 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

Hi Gamedev,

I am writing a simple OpenGL/Freetype2 font engine for a project I am working on. I got it up and running so far, but there are a couple of things I hope someone can explain to me since I used some code I copied from the internet, and could not fully understand it.

I was unable to color my fonts using the original method (it was always black) and I don't understand how the new loading technique (gotten from NeHe tut #43) works to solve this. Moreover, why didn't the original method work? Could I still do it somehow by passing some other combination of GL enums to glTexImage2D? I am also not sure I understand the GL_* enums I pass. I would appreciate it if someone could explain it to me :)

Here's my new and current loading code which works:


bool Font::Load(const char* fontFilePath, int pixelSize)
{
// Error checking
if (fontFilePath == "")
{
std::cerr << "sl::Font: Empty file path passed as argument" << std::endl;
return false;
}

if (pixelSize == 0)
{
std::cerr << "sl::Font: Passed a zero character size" << std::endl;
return false;
}

if (!Font::library)
{
std::cerr << "sl::Font: FreeType2 library not initialized properly (" << ErrorString() << ")" << std::endl;
return false;
}

if (error = (FT_New_Face(Font::library, fontFilePath, 0, &face)))
{
std::cerr << "sl::Font: Unable to create new face (" << ErrorString() << ")" << std::endl;
return false;
}

source.assign(fontFilePath);
this->pixelSize = pixelSize;

// Warn the user if the font is not scalable (i.e. vector graphics/outline font)
if(!(face->face_flags & FT_FACE_FLAG_SCALABLE) || !(face->face_flags & FT_FACE_FLAG_HORIZONTAL))
std::cerr << "sl::Font warning: Font is not scalable (" << fontFilePath << ")" << std::endl;

FT_Set_Pixel_Sizes(face, pixelSize, pixelSize);

int textureWidth = 0;
int textureHeight = 0;

for(int c = 0; c < 256; ++c)
{
// Load the character into the face's glyph slot
FT_Load_Char(face, (char)c, FT_LOAD_RENDER);

// Save glyph stats
Glyph glyph;
glyph.Advance = face->glyph->advance.x >> 6;
glyph.Width = face->glyph->bitmap.width;
glyph.Height = face->glyph->bitmap.rows;
glyph.LeftBearing = face->glyph->bitmap_left;
glyph.TopBearing = face->glyph->bitmap_top;

textureWidth = NextPowerOf2(glyph.Width);
textureHeight = NextPowerOf2(glyph.Height);

// Adjust texture coordinate for glyph
glyph.texCoordX = (float)glyph.Width/(float)textureWidth;
glyph.texCoordY = (float)glyph.Height/(float)textureHeight;

// Array to hold pixel data
GLubyte* data = new GLubyte[2 * textureWidth * textureHeight];

// Pixel positions out of range (in padding area) are set to zero
for (int y = 0; y < textureHeight; ++y)
{
for (int x = 0; x < textureWidth; ++x)
{
//data[x + y * textureWidth] =
// (x >= glyph.Width || y >= glyph.Height) ?
// 0 :
// face->glyph->bitmap.buffer[x + y * glyph.Width];

data[2 * (x + y * textureWidth)] = data[2 * (x + y * textureWidth) + 1] =
(x >= glyph.Width || y >= glyph.Height) ?
0 : face->glyph->bitmap.buffer[x + glyph.Width * y];
}
}

if (!data)
{
std::cerr << "sl::Font: Font data is corrupt" << std::endl;
return false;
}

glGenTextures(1, &glyph.TextureID);
glBindTexture(GL_TEXTURE_2D, glyph.TextureID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textureWidth, textureHeight, 0, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, data);

glyphList.push_back(glyph);

delete[] data;
}

std::cout << "Size: " << glyphList.size() << std::endl;

return true;
}


This is part of the original loading code (everything else is identical to the above):


// Same code here as above

// Array to hold pixel data
GLubyte* data = new GLubyte[textureWidth * textureHeight];

for (int y = 0; y < textureHeight; ++y)
{
for (int x = 0; x < textureWidth; ++x)
{
//data[x + y * textureWidth] =
// (x >= glyph.Width || y >= glyph.Height) ?
// 0 :
// face->glyph->bitmap.buffer[x + y * glyph.Width];

data[(x + y * textureWidth)] =
(x >= glyph.Width || y >= glyph.Height) ?
0 : face->glyph->bitmap.buffer[x + glyph.Width * y];
}
}

// Same code here, but different call to glTexImage2D
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textureWidth, textureHeight, 0, GL_ALPHA, GL_UNSIGNED_BYTE, data);

Share this post


Link to post
Share on other sites
Advertisement
From the documentation for glTexImage2D:

format determines the composition of each element in pixels. It can assume one of the following symbolic values:

GL_ALPHA
Each element is a single alpha component. The GL converts it to floating point and assembles it into an RGBA element by attaching 0 for red, green, and blue.[/quote]

You could try using GL_ALPHA as your internal texture format, though that would rely on hardware support.

For the GL_LUMINANCE_ALPHA input, you should store 255 for the luminance value. You might be able to use GL_LUMINANCE_ALPHA for your internal texture format, too. Try it and see. :)

...

As an aside, you should combine all your glyph bitmaps into one texture so you can avoid texture changes while drawing text.

My suggestion is to pick a texture width proportional to the size of your font. For example, you could add up the width of all your glyphs, divide by eight, and rounding up to the next power of two. Alternatively, you could pick it based on font height, such as 2048 for 60+, 1024 for 30-59, 512 for 15-29, and 256 for 0-14). Whatever method you choose, the next step is to fit the glyphs into rows in reading order (across, then down), leaving a bit of padding between them. Once you've laid them all out, you can measure how tall your texture will need to be and allocate it. Then just copy the glyph bitmaps to the proper locations.

When drawing text, use texture coordinates based on the generated positions.

(Incidentally, you should apply a half-pixel shift toward the upper-left when drawing the text instead of the traditional half-texel shift. While both work just fine without antialiasing, the half-pixel shift works with antialiasing in D3D9 while the half-texel shift doesn't. I only found this out recently...)

Share this post


Link to post
Share on other sites
I read the docs, but I wasn't sure I understood it all.

For the GL_LUMINANCE_ALPHA input, you should store 255 for the luminance value.[/quote]

Could you clarify that? I am still somewhat new to OpenGL texture loading...at least with FreeType2 :)

You might be able to use GL_LUMINANCE_ALPHA for your internal texture format, too. Try it and see. :)[/quote]

Yep. Works with GL_LUMINANCE_ALPHA as the internal format.

I plan on recoding my texture loading to load all fonts into a single texture in the future, but I thought I would try and load them separately first, but thanks for the note, it is very helpful :)

When I load my fonts using the original method, the program crashes with an "Unhandled exception at...Access violation reading location..." message and points to the call to glTexImage2D. Why is that and why do I need to make my array twice as big in the current method as opposed to the original method?

I.e.:
GLubyte* data = new GLubyte[2 * textureWidth * textureHeight]
VS.
GLubyte* data = new Glubyte[textureWidth * textureHeight]

Share this post


Link to post
Share on other sites
GL_LUMINANCE_ALPHA has two channels so it needs two bytes per pixel. :)

You can set the luminance for each pixel to white like this:

// Pixel positions out of range (in padding area) are set to zero
for (int y = 0; y < textureHeight; ++y)
{
for (int x = 0; x < textureWidth; ++x)
{
//data[x + y * textureWidth] =
// (x >= glyph.Width || y >= glyph.Height) ?
// 0 :
// face->glyph->bitmap.buffer[x + y * glyph.Width];

// luminance
data[2 * (x + y * textureWidth)] = 255;

// alpha
data[2 * (x + y * textureWidth) + 1] =
(x >= glyph.Width || y >= glyph.Height) ?
0 : face->glyph->bitmap.buffer[x + glyph.Width * y];
}
}

Share this post


Link to post
Share on other sites
I get a much nicer and smooth result if I set the luminance channel to 255, thanks :D Afaik, I'm simply setting the perceived brightness of the texture to "100%" and storing the colors in the second channel (converted to floating numbers by OpenGL), right?

Still have a couple of questions though :rolleyes: .
Is this the "only" way of loading FreeType2 image information in OpenGL (possibly because of the way they are loaded)? A vague question, I know...

I also tried the following using 4 channels:


GLubyte* data = new GLubyte[4 * textureWidth * textureHeight];

// Pixel positions out of range (in padding area) are set to zero
for (int y = 0; y < textureHeight; ++y) {
for (int x = 0; x < textureWidth; ++x) {
// read in r, g, b and a components
data[4 * (x + y * textureWidth)] = (x >= glyph.Width || y >= glyph.Height) ? 0 : face->glyph->bitmap.buffer[x + glyph.Width * y];
data[4 * (x + y * textureWidth) + 1] = (x >= glyph.Width || y >= glyph.Height) ? 0 : face->glyph->bitmap.buffer[x + glyph.Width * y];
data[4 * (x + y * textureWidth) + 2] = (x >= glyph.Width || y >= glyph.Height) ? 0 : face->glyph->bitmap.buffer[x + glyph.Width * y];
data[4 * (x + y * textureWidth) + 3] = (x >= glyph.Width || y >= glyph.Height) ? 0 : face->glyph->bitmap.buffer[x + glyph.Width * y];
}
}


While it worked, but yielded a less satisfying result for some reason...
Thanks for all your help so far! I think I'm beginning to grasp the concepts :D

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!