Lesson 14: Advanced Blending
"Blending": A word that strikes fear into the hearts of the bravest warriors. Just mutter "blending" and many will cower in fear. Okay, not really. But now that you've learned a bit more, I'm going to go over some more advanced facets of blending. So there.
Theory
As you have previously learned, there are many factors that can be supplied to glBlendFunc(). Some factors can only be used as a source factor, some can only be used as a destination factor, and some can be used for either. So, without further ado, here are some informative tables for your learning pleasure explaining which factors can be used for what and what they mean - the information in these tables are, by the way, taken more or less directly from the OpenGL Red Book.
For help deciphering these tables, look back to this paragraph from lesson 8:
Sr, Sg, Sb, and Sa are the source factors specified in the blending function;
Rd, Gd, Bd, and Ad are the color components of the destination pixel;
and Dr, Dg, Db, and Da are the destination factors specified in the blending function.
| Source factors | |
|---|---|
| Factor name | Blending factors(Sr, Sg, Sb, Sa) |
| GL_DST_COLOR | (Rd, Gd, Bd, Ad) |
| GL_ONE_MINUS_DST_COLOR | (1 - Rd, 1 - Gd, 1 - Bd, 1 - Ad) |
| GL_SRC_ALPHA_SATURATE | (f, f, f, 1); [f = min(As, 1 - Ad)] |
| Destination factors | |
|---|---|
| Factor name | Blending factors(Dr, Dg, Db, Da) |
| GL_SRC_COLOR | (Rs, Gs, Bs, As) |
| GL_ONE_MINUS_SRC_COLOR | (1 - Rs, 1 - Gs, 1 - Bs, 1 - As) |
| Source or Destination factors | |
|---|---|
| Factor name | Blending factors({S|D}r, {S|D}g, {S|D}b, {S|D}a) |
| GL_ONE | (1, 1, 1, 1) |
| GL_ZERO | (0, 0, 0, 0) |
| GL_SRC_ALPHA | (As, As, As, As) |
| GL_ONE_MINUS_SRC_ALPHA | (1 - As, 1 - As, 1 - As, 1 - As) |
| GL_DST_ALPHA | (Ad, Ad, Ad, Ad) |
| GL_ONE_MINUS_DST_ALPHA | (1 - Ad, 1 - Ad, 1 - Ad, 1 - Ad) |
As you can tell, there are a whole lot of different combinations of blending factors. Several of them end up looking similar or completely alike, and many of them have no real practical use. In fact, for the most part, there are only two blending modes that most games will ever use - translucent blending and additive blending.
Translucent blending is represented by the factor pair (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA). This type of blending is often used to render translucent objects, such as windows or water particles.
Additive blending is represented by the factor pair (GL_SRC_ALPHA, GL_ONE). This type of blending is often used in particle engines where the particles have to be "glowing" - this effect can be used for sparks, fire, blasts of glowy magic, etc. It's called additive blending because, basically, the source color is added to whatever colour already exists, then clamped to 1.0.
Implementation
The following program allows you to cycle through every single blending mode available and see firsthand what they look like. There are three textures - a background checkerboard pattern which is drawn without blending, the layer above it, which acts as a sort of background and is drawn with translucency over the background, and the top layer, which is drawn with the blending function that you tell it to be drawn with. Since the example runs in 32 bit color, you should probably set your desktop color depth to 32 if it isn't set to that already.
In case you didn't download the full issue, the three textures can be found here, here and here.
Listing 14-1: agl14.cpp
#include <allegro.h>
#include <alleggl.h>
// The texture handles
GLuint Tex[3];
// The texture filenames
const char* TexFiles[3] =
{
"layer0.bmp",
"layer1.bmp",
"layer2.bmp"
};
// The font we will be using
FONT* Font;
// Possible source factors
const int NumSourceFactors = 9;
const int SourceFactors[NumSourceFactors] =
{
GL_ONE, GL_ZERO, GL_DST_COLOR, GL_ONE_MINUS_DST_COLOR,
GL_SRC_ALPHA_SATURATE, GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_DST_ALPHA,
GL_ONE_MINUS_DST_ALPHA
};
// Source factor names
const char* SourceNames[NumSourceFactors] =
{
"GL_ONE", "GL_ZERO", "GL_DST_COLOR", "GL_ONE_MINUS_DST_COLOR",
"GL_SRC_ALPHA_SATURATE", "GL_SRC_ALPHA", "GL_ONE_MINUS_SRC_ALPHA",
"GL_DST_ALPHA", "GL_ONE_MINUS_DST_ALPHA"
};
// Possible destination factors
const int NumDestFactors = 8;
const int DestFactors[NumDestFactors] =
{
GL_ONE, GL_ZERO, GL_SRC_COLOR, GL_ONE_MINUS_SRC_COLOR, GL_SRC_ALPHA,
GL_ONE_MINUS_SRC_ALPHA, GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA
};
// Destination factor names
const char* DestNames[NumDestFactors] =
{
"GL_ONE", "GL_ZERO", "GL_SRC_COLOR", "GL_ONE_MINUS_SRC_COLOR",
"GL_SRC_ALPHA", "GL_ONE_MINUS_SRC_ALPHA", "GL_DST_ALPHA",
"GL_ONE_MINUS_DST_ALPHA"
};
void Init()
{
// Start up Allegro and AllegroGL systems
allegro_init();
install_allegro_gl();
install_keyboard();
// Set the color depth to 32 - needed for some blending modes
allegro_gl_set(AGL_COLOR_DEPTH, 32);
allegro_gl_set(AGL_SUGGEST, AGL_COLOR_DEPTH);
// Set up a suitable viewing window
set_color_depth(32);
set_gfx_mode(GFX_OPENGL_WINDOWED, 256, 300, 0, 0);
// Enable texturing and blending
glEnable(GL_TEXTURE_2D);
glEnable(GL_BLEND);
// We are using 24 bit textures in this case.
allegro_gl_set_texture_format(GL_RGB8);
// Load the textures
for(int i = 0; i < 3; i++)
{
BITMAP* temp_bmp = load_bitmap(TexFiles[i], 0);
Tex[i] = allegro_gl_make_texture(temp_bmp);
glTexEnvi(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexEnvi(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
destroy_bitmap(temp_bmp);
}
// Convert the default Allegro font to an AllegroGL font
Font = allegro_gl_convert_allegro_font(font, AGL_FONT_TYPE_TEXTURED, 1.0);
// Set up coordinates that mimic a per-pixel style
glOrtho(0, SCREEN_W, 0, SCREEN_H, 1.0, -1.0);
// Set the background color to black
glClearColor(0.0, 0.0, 0.0, 0.0);
}
int main()
{
Init();
bool quit = false;
int src_f = 0, dst_f = 0;
float layer_alpha[3] = { 1.0, 0.8, 0.6 };
int key = 0;
while(!quit)
{
// Clear the window
glClear(GL_COLOR_BUFFER_BIT);
// Draw the three layers
for(int i = 0; i < 3; i++)
{
if(i == 0)
glBlendFunc(GL_ONE, GL_ZERO);
else if(i == 1)
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
else
glBlendFunc(SourceFactors[src_f], DestFactors[dst_f]);
glBindTexture(GL_TEXTURE_2D, Tex[i]);
glBegin(GL_QUADS);
glColor4f(1.0, 1.0, 1.0, layer_alpha[i]);
glTexCoord2i(0, 0);
glVertex2i(0, 0);
glTexCoord2i(1, 0);
glVertex2i(255, 0);
glTexCoord2i(1, 1);
glVertex2i(255, 255);
glTexCoord2i(0, 1);
glVertex2i(0, 255);
glEnd();
}
glBlendFunc(GL_ONE, GL_ZERO);
allegro_gl_printf(Font, 0, 300, 0, makeacol(255, 255, 255, 255),
"SRC: %s", SourceNames[src_f]);
allegro_gl_printf(Font, 0, 290, 0, makeacol(255, 255, 255, 255),
"DST: %s", DestNames[dst_f]);
allegro_gl_printf(Font, 0, 278, 0, makeacol(255, 255, 255, 255),
"Top layer alpha: %f", layer_alpha[2]);
allegro_gl_printf(Font, 0, 268, 0, makeacol(255, 255, 255, 255),
"Bottom layer alpha: %f", layer_alpha[1]);
glFlush();
// Wait for a keypress
clear_keybuf();
key = readkey() >> 8;
// Cycle through the different blending modes.
if(key == KEY_S) src_f++;
if(key == KEY_D) dst_f++;
if(src_f >= NumSourceFactors) { src_f = 0; dst_f++; }
if(dst_f >= NumDestFactors) { dst_f = 0; }
// Adjust alpha of the two top layers.
if(key == KEY_RIGHT)
layer_alpha[2] += 0.05;
if(key == KEY_LEFT)
layer_alpha[2] -= 0.05;
if(key == KEY_UP)
layer_alpha[1] += 0.05;
if(key == KEY_DOWN)
layer_alpha[1] -= 0.05;
// Quit if ESC is pressed
if(key == KEY_ESC)
{
quit = true;
}
}
return 0;
}
END_OF_MAIN();
Finally something long and interesting :) You'll notice that I actually commented this one, too.
Anyhow, in the example program, you can use the arrow keys left and right to adjust the alpha of the top layer, the arrow keys up and down to adjust the alpha of the lower layer, 'S' to change the source blending factor, and 'D' to change the destination blending factor. You can just keep pressing 'S' to cycle through all the modes, because once the source factor loops, it increments the destination factor as well. Get it? :)
Analyzing agl14.cpp
First, we declare three texture handles, their file names, a font to use, and then the blending modes and their names for both source and destination factors are listed.
Then we set up everything in Init(). This code should look pretty familiar to you.
In the main function, quit is used to determine whether or not to quit the main loop, src_f and dst_f are the factors to be used for the source and destination blending factors, layer_alpha is an array of the alpha values used for each layer, and key is used to store the current keypress.
In the main loop, the color buffer is cleared, then the three layers are drawn. The if() construct inside the for() loop that draws the three layers is used to determine which blending mode to use for each layer. The bottom checkerboard layer is drawn with no blending, the middle layer is drawn with transparency, and the top layer is drawn with whatever blending mode has been selected. The reason the middle layer is drawn transparent is because some blending modes actually rely on the alpha level of the destination pixel. This is also why we are running the program in 32-bit color mode.
Next, information about the selected blending modes is displayed, and we call glFlush() to flush the layers to the frame buffer.
Then, the blending modes and the alpha levels of the top and middle layers are changed based on any keys that have been pressed. Simple, no?
In the Next Lesson...
In the next lesson, you will learn about camera movement, a way of translating and rotating a scene to make it look as if your perspective is changing.
|
