Blending

You've already seen alpha values (alpha is the A in RGBA), but they've been ignored until now. Alpha values are specified with glColor*(), when using glClearColor() to specify a clearing color and when specifying certain lighting parameters such as a material property or light-source intensity. As you learned in Chapter 4, the pixels on a monitor screen emit red, green, and blue light, which is controlled by the red, green, and blue color values. So how does an alpha value affect what gets drawn in a window on the screen?

When blending is enabled, the alpha value is often used to combine the color value of the fragment being processed with that of the pixel already stored in the framebuffer. Blending occurs after your scene has been rasterized and converted to fragments, but just before the final pixels are drawn in the framebuffer. Alpha values can also be used in the alpha test to accept or reject a fragment based on its alpha value. (See Chapter 10 for more information about this process.)

Without blending, each new fragment overwrites any existing color values in the framebuffer, as though the fragment were opaque. With blending, you can control how (and how much of) the existing color value should be combined with the new fragment's value. Thus you can use alpha blending to create a translucent fragment that lets some of the previously stored color value "show through." Color blending lies at the heart of techniques such as transparency, digital compositing, and painting.

Note: Alpha values aren't specified in color-index mode, so blending operations aren't performed in color-index mode.

The most natural way to think of blending operations is to think of the RGB components of a fragment as representing its color and the alpha component as representing opacity. Transparent or translucent surfaces have lower opacity than opaque ones and, therefore, lower alpha values. For example, if you're viewing an object through green glass, the color you see is partly green from the glass and partly the color of the object. The percentage varies depending on the transmission properties of the glass: If the glass transmits 80 percent of the light that strikes it (that is, has an opacity of 20 percent), the color you see is a combination of 20 percent glass color and 80 percent of the color of the object behind it. You can easily imagine situations with multiple translucent surfaces. If you look at an automobile, for instance, its interior has one piece of glass between it and your viewpoint; some objects behind the automobile are visible through two pieces of glass.

The Source and Destination Factors

During blending, color values of the incoming fragment (the source) are combined with the color values of the corresponding currently stored pixel (the destination) in a two-stage process. First you specify how to compute source and destination factors. These factors are RGBA quadruplets that are multiplied by each component of the R, G, B, and A values in the source and destination, respectively. Then the corresponding components in the two sets of RGBA quadruplets are added. To show this mathematically, let the source and destination blending factors be (Sr, Sg, Sb, Sa) and (Dr, Dg, Db, Da), respectively, and the RGBA values of the source and destination be indicated with a subscript of s or d. Then the final, blended RGBA values are given by

(RsSr+RdDr, GsSg+GdDg, BsSb+BdDb, AsSa+AdDa)

Each component of this quadruplet is eventually clamped to [0,1].

Now consider how the source and destination blending factors are generated. You use glBlendFunc() to supply two constants: one that specifies how the source factor should be computed and one that indicates how the destination factor should be computed. To have blending take effect, you also need to enable it:

glEnable(GL_BLEND); 

Use glDisable() with GL_BLEND to disable blending. Also note that using the constants GL_ONE (source) and GL_ZERO (destination) gives the same results as when blending is disabled; these values are the default.

void glBlendFunc(GLenum sfactor, GLenum dfactor);

Controls how color values in the fragment being processed (the source) are combined with those already stored in the framebuffer (the destination). The argument sfactor indicates how to compute a source blending factor; dfactor indicates how to compute a destination blending factor. The possible values for these arguments are explained in Table 6-1. The blend factors are assumed to lie in the range [0,1]; after the color values in the source and destination are combined, they're clamped to the range [0,1].

Note: In Table 6-1, the RGBA values of the source and destination are indicated with the subscripts s and d, respectively. Subtraction of quadruplets means subtracting them componentwise. The Relevant Factor column indicates whether the corresponding constant can be used to specify the source or destination blend factor.

Sample Uses of Blending

Not all combinations of source and destination factors make sense. Most applications use a small number of combinations. The following paragraphs describe typical uses for particular combinations of source and destination factors. Some of these examples use only the incoming alpha value, so they work even when alpha values aren't stored in the framebuffer. Also note that often there's more than one way to achieve some of these effects.

• One way to draw a picture composed half of one image and half of another, equally blended, is to set the source factor to GL_ONE and the destination factor to GL_ZERO, and draw the first image. Then set the source factor to GL_SRC_ALPHA and destination factor to GL_ONE_MINUS_SRC_ALPHA, and draw the second image with alpha equal to 0.5. This pair of factors probably represents the most commonly used blending operation. If the picture is supposed to be blended with 0.75 of the first image and 0.25 of the second, draw the first image as before, and draw the second with an alpha of 0.25.
• To blend three different images equally, set the destination factor to GL_ONE and the source factor to GL_SRC_ALPHA. Draw each of the images with an alpha equal to 0.3333333. With this technique, each image is only one-third of its original brightness, which is noticeable where the images don't overlap.
• Suppose you're writing a paint program, and you want to have a brush that gradually adds color so that each brush stroke blends in a little more color with whatever is currently in the image (say 10 percent color with 90 percent image on each pass). To do this, draw the image of the brush with alpha of 10 percent and use GL_SRC_ALPHA (source) and GL_ONE_MINUS_SRC_ALPHA (destination). Note that you can vary the alphas across the brush to make the brush add more of its color in the middle and less on the edges, for an antialiased brush shape. (See "Antialiasing.") Similarly, erasers can be implemented by setting the eraser color to the background color.
• The blending functions that use the source or destination colors - GL_DST_COLOR or GL_ONE_MINUS_DST_COLOR for the source factor and GL_SRC_COLOR or GL_ONE_MINUS_SRC_COLOR for the destination factor - effectively allow you to modulate each color component individually. This operation is equivalent to applying a simple filter - for example, multiplying the red component by 80 percent, the green component by 40 percent, and the blue component by 72 percent would simulate viewing the scene through a photographic filter that blocks 20 percent of red light, 60 percent of green, and 28 percent of blue.
• Suppose you want to draw a picture composed of three translucent surfaces, some obscuring others, and all over a solid background. Assume the farthest surface transmits 80 percent of the color behind it, the next transmits 40 percent, and the closest transmits 90 percent. To compose this picture, draw the background first with the default source and destination factors, and then change the blending factors to GL_SRC_ALPHA (source) and GL_ONE_MINUS_SRC_ALPHA (destination). Next, draw the farthest surface with an alpha of 0.2, then the middle surface with an alpha of 0.6, and finally the closest surface with an alpha of 0.1.
• If your system has alpha planes, you can render objects one at a time (including their alpha values), read them back, and then perform interesting matting or compositing operations with the fully rendered objects. (See "Compositing 3D Rendered Images" by Tom Duff, SIGGRAPH 1985 Proceedings, p. 41­44, for examples of this technique.) Note that objects used for picture composition can come from any source - they can be rendered using OpenGL commands, rendered using techniques such as ray-tracing or radiosity that are implemented in another graphics library, or obtained by scanning in existing images.
• You can create the effect of a nonrectangular raster image by assigning different alpha values to individual fragments in the image. In most cases, you would assign an alpha of 0 to each "invisible" fragment and an alpha of 1.0 to each opaque fragment. For example, you can draw a polygon in the shape of a tree and apply a texture map of foliage; the viewer can see through parts of the rectangular texture that aren't part of the tree if you've assigned them alpha values of 0. This method, sometimes called billboarding, is much faster than creating the tree out of three-dimensional polygons. An example of this technique is shown in Figure 6-1: The tree is a single rectangular polygon that can be rotated about the center of the trunk, as shown by the outlines, so that it's always facing the viewer. (See "Texture Functions" in Chapter 9 for more information about blending textures.)

Figure 6-1 : Creating a Nonrectangular Raster Image

• Blending is also used for antialiasing, which is a rendering technique to reduce the jagged appearance of primitives drawn on a raster screen. (See "Antialiasing" for more information.)

A Blending Example

Example 6-1 draws two overlapping colored triangles, each with an alpha of 0.75. Blending is enabled and the source and destination blending factors are set to GL_SRC_ALPHA and GL_ONE_MINUS_SRC_ALPHA, respectively.

When the program starts up, a yellow triangle is drawn on the left and then a cyan triangle is drawn on the right so that in the center of the window, where the triangles overlap, cyan is blended with the original yellow. You can change which triangle is drawn first by typing `t' in the window.

Example 6-1 : Blending Example: alpha.c

#include <GL/gl.h>

#include <GL/glu.h>

#include <GL/glut.h>

#include <stdlib.h>

static int leftFirst = GL_TRUE;

/*  Initialize alpha blending function.  */

static void init(void)

{

   glEnable (GL_BLEND);

   glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

   glShadeModel (GL_FLAT);

   glClearColor (0.0, 0.0, 0.0, 0.0);

}

static void drawLeftTriangle(void)

{

/* draw yellow triangle on LHS of screen */

   glBegin (GL_TRIANGLES);

      glColor4f(1.0, 1.0, 0.0, 0.75);

      glVertex3f(0.1, 0.9, 0.0);

      glVertex3f(0.1, 0.1, 0.0);

      glVertex3f(0.7, 0.5, 0.0);

   glEnd();

}

static void drawRightTriangle(void)

{

/* draw cyan triangle on RHS of screen */

   glBegin (GL_TRIANGLES);

      glColor4f(0.0, 1.0, 1.0, 0.75);

      glVertex3f(0.9, 0.9, 0.0);

      glVertex3f(0.3, 0.5, 0.0);

      glVertex3f(0.9, 0.1, 0.0);

   glEnd();

}

void display(void)

{

   glClear(GL_COLOR_BUFFER_BIT);

   if (leftFirst) {

      drawLeftTriangle();

      drawRightTriangle();

   }

   else {

      drawRightTriangle();

      drawLeftTriangle();

   }

   glFlush();

}

void reshape(int w, int h)

{

   glViewport(0, 0, (GLsizei) w, (GLsizei) h);

   glMatrixMode(GL_PROJECTION);

   glLoadIdentity();

   if (w <= h)

      gluOrtho2D (0.0, 1.0, 0.0, 1.0*(GLfloat)h/(GLfloat)w);

   else

      gluOrtho2D (0.0, 1.0*(GLfloat)w/(GLfloat)h, 0.0, 1.0);

}

void keyboard(unsigned char key, int x, int y)

{

   switch (key) {

      case `t':

      case `T':

         leftFirst = !leftFirst;

         glutPostRedisplay();  

         break;

      case 27:  /*  Escape key  */

         exit(0);

         break;

      default:

         break;

   }

}

int main(int argc, char** argv)

{

   glutInit(&argc, argv);

   glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);

   glutInitWindowSize (200, 200);

   glutCreateWindow (argv[0]);

   init();

   glutReshapeFunc (reshape);

   glutKeyboardFunc (keyboard);

   glutDisplayFunc (display);

   glutMainLoop();

   return 0;

}

The order in which the triangles are drawn affects the color of the overlapping region. When the left triangle is drawn first, cyan fragments (the source) are blended with yellow fragments, which are already in the framebuffer (the destination). When the right triangle is drawn first, yellow is blended with cyan. Because the alpha values are all 0.75, the actual blending factors become 0.75 for the source and 1.0 - 0.75 = 0.25 for the destination. In other words, the source fragments are somewhat translucent, but they have more effect on the final color than the destination fragments.

Three-Dimensional Blending with the Depth Buffer

As you saw in the previous example, the order in which polygons are drawn greatly affects the blended result. When drawing three-dimensional translucent objects, you can get different appearances depending on whether you draw the polygons from back to front or from front to back. You also need to consider the effect of the depth buffer when determining the correct order. (See "A Hidden-Surface Removal Survival Kit" in Chapter 5 for an introduction to the depth buffer. Also see "Depth Test" in Chapter 10 for more information.) The depth buffer keeps track of the distance between the viewpoint and the portion of the object occupying a given pixel in a window on the screen; when another candidate color arrives for that pixel, it's drawn only if its object is closer to the viewpoint, in which case its depth value is stored in the depth buffer. With this method, obscured (or hidden) portions of surfaces aren't necessarily drawn and therefore aren't used for blending.

If you want to render both opaque and translucent objects in the same scene, then you want to use the depth buffer to perform hidden-surface removal for any objects that lie behind the opaque objects. If an opaque object hides either a translucent object or another opaque object, you want the depth buffer to eliminate the more distant object. If the translucent object is closer, however, you want to blend it with the opaque object. You can generally figure out the correct order to draw the polygons if everything in the scene is stationary, but the problem can quickly become too hard if either the viewpoint or the object is moving.

The solution is to enable depth buffering but make the depth buffer read-only while drawing the translucent objects. First you draw all the opaque objects, with the depth buffer in normal operation. Then you preserve these depth values by making the depth buffer read-only. When the translucent objects are drawn, their depth values are still compared to the values established by the opaque objects, so they aren't drawn if they're behind the opaque ones. If they're closer to the viewpoint, however, they don't eliminate the opaque objects, since the depth-buffer values can't change. Instead, they're blended with the opaque objects. To control whether the depth buffer is writable, use glDepthMask(); if you pass GL_FALSE as the argument, the buffer becomes read-only, whereas GL_TRUE restores the normal, writable operation.

Example 6-2 demonstrates how to use this method to draw opaque and translucent three-dimensional objects. In the program, typing `a' triggers an animation sequence in which a translucent cube moves through an opaque sphere. Pressing the `r' key resets the objects in the scene to their initial positions. To get the best results when transparent objects overlap, draw the objects from back to front.

Example 6-2 : Three-Dimensional Blending: alpha3D.c

#include <stdlib.h>

#include <stdio.h>

#include <GL/gl.h>

#include <GL/glu.h>

#include <GL/glut.h>

#define MAXZ 8.0

#define MINZ -8.0

#define ZINC 0.4

static float solidZ = MAXZ;

static float transparentZ = MINZ;

static GLuint sphereList, cubeList;

static void init(void)

{

   GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 0.15 };

   GLfloat mat_shininess[] = { 100.0 };

   GLfloat position[] = { 0.5, 0.5, 1.0, 0.0 };

   glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);

   glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);

   glLightfv(GL_LIGHT0, GL_POSITION, position);

   glEnable(GL_LIGHTING);

   glEnable(GL_LIGHT0);

   glEnable(GL_DEPTH_TEST);

   sphereList = glGenLists(1);

   glNewList(sphereList, GL_COMPILE);

      glutSolidSphere (0.4, 16, 16);

   glEndList();

   cubeList = glGenLists(1);

   glNewList(cubeList, GL_COMPILE);

      glutSolidCube (0.6);

   glEndList();

}

void display(void)

{

   GLfloat mat_solid[] = { 0.75, 0.75, 0.0, 1.0 };

   GLfloat mat_zero[] = { 0.0, 0.0, 0.0, 1.0 };

   GLfloat mat_transparent[] = { 0.0, 0.8, 0.8, 0.6 };

   GLfloat mat_emission[] = { 0.0, 0.3, 0.3, 0.6 };

   glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

   glPushMatrix ();

      glTranslatef (-0.15, -0.15, solidZ);

      glMaterialfv(GL_FRONT, GL_EMISSION, mat_zero);

      glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_solid);

      glCallList (sphereList);

   glPopMatrix ();

   glPushMatrix ();

      glTranslatef (0.15, 0.15, transparentZ);

      glRotatef (15.0, 1.0, 1.0, 0.0);

      glRotatef (30.0, 0.0, 1.0, 0.0);

      glMaterialfv(GL_FRONT, GL_EMISSION, mat_emission);

      glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_transparent);

      glEnable (GL_BLEND);

      glDepthMask (GL_FALSE);

      glBlendFunc (GL_SRC_ALPHA, GL_ONE);

      glCallList (cubeList);

      glDepthMask (GL_TRUE);

      glDisable (GL_BLEND);

   glPopMatrix ();

   glutSwapBuffers();

}

void reshape(int w, int h)

{

   glViewport(0, 0, (GLint) w, (GLint) h);

   glMatrixMode(GL_PROJECTION);

   glLoadIdentity();

   if (w <= h)

      glOrtho (-1.5, 1.5, -1.5*(GLfloat)h/(GLfloat)w,

             1.5*(GLfloat)h/(GLfloat)w, -10.0, 10.0);

   else

      glOrtho (-1.5*(GLfloat)w/(GLfloat)h,

             1.5*(GLfloat)w/(GLfloat)h, -1.5, 1.5, -10.0, 10.0);

   glMatrixMode(GL_MODELVIEW);

   glLoadIdentity();

}

void animate(void)

{

   if (solidZ <= MINZ || transparentZ >= MAXZ)

      glutIdleFunc(NULL);

   else {

      solidZ -= ZINC;

      transparentZ += ZINC;

      glutPostRedisplay();

   }

}

void keyboard(unsigned char key, int x, int y)

{

   switch (key) {

      case `a':

      case `A':

         solidZ = MAXZ;

         transparentZ = MINZ;

         glutIdleFunc(animate);

         break;

      case `r':

      case `R':

         solidZ = MAXZ;

         transparentZ = MINZ;

         glutPostRedisplay();

         break;

      case 27:

        exit(0);

    }

}

int main(int argc, char** argv)

{

   glutInit(&argc, argv);

   glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH);

   glutInitWindowSize(500, 500);

   glutCreateWindow(argv[0]);

   init();

   glutReshapeFunc(reshape);

   glutKeyboardFunc(keyboard);

   glutDisplayFunc(display);

   glutMainLoop();

   return 0;

}