Introduction

Vertex alpha is a technique that allows you to assign different transparency levels to individual vertices in a shape. By combining transparency with vertex coloring, you can create stunning effects such as fading gradients, semi-transparent objects, or even custom blending effects. This is especially useful for rendering realistic objects in games or simulations.

In this tutorial, we’ll demonstrate how to use vertex alpha with OpenGL by setting transparency values for each vertex of a quad. You’ll also learn how blending works in OpenGL and how to enable it for transparency effects.

What is Vertex Alpha?

Just like vertex colors define the RGB (Red, Green, Blue) components of a vertex, vertex alpha defines its transparency using an additional alpha channel (A). The alpha value determines how visible or transparent a vertex is:

• Alpha = 1.0: Fully opaque.
• Alpha = 0.0: Fully transparent.
• Alpha between 0.0 and 1.0: Semi-transparent.

OpenGL uses the glColor4f function to specify the RGBA (Red, Green, Blue, Alpha) values for a vertex. These values are interpolated across the shape to create smooth transparency effects.

Setting Up Vertex Alphas

To create a shape with vertex alpha, follow these steps:

1. Enable blending in OpenGL to support transparency.
2. Define the blending function to control how colors are combined.
3. Assign RGBA values to each vertex using glColor4f.
4. Specify the vertices of the shape with glVertex3f.

Here’s an example:

glEnable(GL_BLEND); // Enable blending
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); // Set blending function

glBegin(GL_QUADS); // Start defining the quad

glColor4f(1, 0, 0, 0.2); // Red, alpha = 0.2
glVertex3f(-0.5, -0.5, 0.0); // Bottom-left corner

glColor4f(0, 1, 0, 1); // Green, alpha = 1.0
glVertex3f(-0.5, 0.5, 0.0); // Top-left corner

glColor4f(0, 0, 1, 0.2); // Blue, alpha = 0.2
glVertex3f(0.5, 0.5, 0.0); // Top-right corner

glColor4f(1, 1, 1, 1); // White, alpha = 1.0
glVertex3f(0.5, -0.5, 0.0); // Bottom-right corner

glEnd(); // Finish the quad

How Blending Works

Blending in OpenGL is controlled by the blending function, which determines how the source color (the color of your shape) is combined with the destination color (the color already in the framebuffer).

The function glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) is commonly used for transparency:

• GL_SRC_ALPHA: Multiplies the source color by its alpha value.
• GL_ONE_MINUS_SRC_ALPHA: Multiplies the destination color by (1 – alpha).

This creates a smooth transition between the transparent and opaque parts of your shape.

Tutorial Code

Here’s the full code for creating a quad with vertex alpha:

#include <GL/gl.h>
#include <GL/glut.h>

// Function to draw a square with vertex alpha
void square(void) {
    glBegin(GL_QUADS);
    glColor4f(1, 0, 0, 0.2); // Red, alpha = 0.2
    glVertex3f(-0.5, -0.5, 0.0);

    glColor4f(0, 1, 0, 1); // Green, alpha = 1.0
    glVertex3f(-0.5, 0.5, 0.0);

    glColor4f(0, 0, 1, 0.2); // Blue, alpha = 0.2
    glVertex3f(0.5, 0.5, 0.0);

    glColor4f(1, 1, 1, 1); // White, alpha = 1.0
    glVertex3f(0.5, -0.5, 0.0);
    glEnd();
}

// Display callback function
void display(void) {
    glClearColor(0.0, 0.0, 0.0, 1.0); // Set background to black
    glClear(GL_COLOR_BUFFER_BIT);     // Clear the color buffer
    glLoadIdentity();                 // Reset transformations

    glEnable(GL_BLEND); // Enable blending
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); // Set blending function

    glTranslatef(0, 0, -1); // Move the quad into view
    square();               // Draw the quad
    glFlush();              // Render the scene
}

// Reshape callback function
void reshape(int w, int h) {
    glViewport(0, 0, (GLsizei)w, (GLsizei)h);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    gluPerspective(60, (GLfloat)w / (GLfloat)h, 1.0, 100.0);
    glMatrixMode(GL_MODELVIEW);
}

// Main function
int main(int argc, char **argv) {
    glutInit(&argc, argv);                     // Initialize GLUT
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA); // Single-buffered with RGBA colors
    glutInitWindowSize(500, 500);                 // Set window size
    glutInitWindowPosition(100, 100);             // Set window position
    glutCreateWindow("Vertex Alpha Example");     // Create the window
    glutDisplayFunc(display);                     // Register display callback