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 colouring, 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 colours 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 colours 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 colour (the colour of your shape) is combined with the destination colour (the colour 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 colour by its alpha value.
• GL_ONE_MINUS_SRC_ALPHA: Multiplies the destination colour 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>

void square(void) {
    glBegin(GL_QUADS);
    glColor4f(1.0f, 0.0f, 0.0f, 0.2f);
    glVertex3f(-0.5f, -0.5f, 0.0f);

    glColor4f(0.0f, 1.0f, 0.0f, 1.0f);
    glVertex3f(-0.5f, 0.5f, 0.0f);

    glColor4f(0.0f, 0.0f, 1.0f, 0.2f);
    glVertex3f(0.5f, 0.5f, 0.0f);

    glColor4f(1.0f, 1.0f, 1.0f, 1.0f);
    glVertex3f(0.5f, -0.5f, 0.0f);
    glEnd();
}

void display(void) {
    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    glLoadIdentity();

    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    glTranslatef(0.0f, 0.0f, -1.0f);
    square();

    glFlush();
}

void reshape(int w, int h) {
    if (h == 0) h = 1;
    glViewport(0, 0, (GLsizei)w, (GLsizei)h);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    gluPerspective(60.0, (GLfloat)w / (GLfloat)h, 1.0, 100.0);
    glMatrixMode(GL_MODELVIEW);
}

int main(int argc, char **argv) {
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGBA);
    glutInitWindowSize(500, 500);
    glutInitWindowPosition(100, 100);
    glutCreateWindow("Vertex Alpha Example");
    glutDisplayFunc(display);
    glutReshapeFunc(reshape);
    glutMainLoop();
    return 0;
}

Questions or corrections? If something doesn’t work or you spot something I’ve got wrong, leave a comment below. These tutorials have been around a long time, so useful corrections are always welcome!