Font rendering transparency

I have written a font class, which uses a jpg texture containing all of the characters

it is 256x256 pixels, with each character being (16x16 pixels ) layed out as a grid
on the texture.

Basically, I draw a billboarded quad to the screen, for each character in strings I want to display, and I pull out 16x16 ‘sub-textures’ from the overall texture, for each quad.

I would like to use black to be transparent
when drawing these textures, and am struggling with the blending functions to use to achieve this…

What is the simplest way to draw my quads,
whilst getting the scene to show through the transparent parts of the font?


GL_ONE,GL_ONE adds them into the scene…

if you have black and white chars that should work

ah…but the font is not straight black and white…it is pre-coloured i.e I want the colours to be stored in the texture, not applied using glColor4f…

should this still work?


just tried GL_ONE,GL_ONE, but the coloured section of the font appears to be transparent
as well as the black sections of the font…


when you load your image you should use the alpha channel of the texture. Just assign it the luminance of your font. Then you can use alphatest and blending:

glAlphaFunc(GL_GREATER, 0.0f);

the alpha test rejects fragments with alpha > 0 so your black parts, where alpha is also 0 are not drawn. the blending makes the edges smooth


Thanks for the help so far…
How do i set the alpha channel in a jpeg?

I know tga supports it…does jpg?


you load the jpg into a buffer of this type normally:
unsigned char imagedata[width][height][3]; or so…
just add the alpha channel onto it. by hand.

where the image is black, make alpha to 0, where it is not, set it to 1… or other way around, you can set your blending equation /alpha test how ever you want.

Yep doggy, adding the alpha channel by hand is a good way (unless you want to use TGAs) - it’s also not that hard once you get over thinking about it (I used to think it was a strange way to do things, but it turns out pretty good). However, you’re touching each pixel in the image again so it may slow down your loading (although that won’t be too much of a problem if you’re caching your textures on startup).