Introduction

Vertex colouring is a simple yet effective way to enhance the visual appeal of your OpenGL applications. By assigning colours to individual vertices of a shape, you can create gradients and dynamic colour effects. This technique is commonly used in both 2D and 3D graphics to add depth and variety to objects.

In this tutorial, you’ll learn how to apply colours to specific vertices, creating a blended effect across a quad. We’ll also discuss how this method can be applied to other shapes.

What is Vertex Colouring?

Vertex colouring involves assigning a colour to each vertex of a shape. When OpenGL renders the shape, it interpolates the colours between vertices, creating smooth gradients. This allows you to:

• Create colorful transitions and effects.
• Highlight specific parts of an object.
• Enhance visual depth and realism.

In OpenGL, vertex colours are defined using the glColor3f function, which specifies the red, green, and blue components of a colour. These colours are applied immediately to the subsequent vertex specified with glVertex3f.

Steps to Add Vertex Colours

Let’s go through the process of applying vertex colours to a quad.

1. Begin defining the shape with glBegin().
2. Set the colour for the first vertex using glColor3f().
3. Specify the vertex position using glVertex3f().
4. Repeat for each subsequent vertex, assigning a different colour to each one.
5. End the shape with glEnd().

Here’s an example:

glBegin(GL_QUADS); // Start defining the quad
glColor3f(1, 0, 0); // Red
glVertex3f(-0.5, -0.5, 0.0); // Bottom-left corner

glColor3f(0, 1, 0); // Green
glVertex3f(-0.5, 0.5, 0.0); // Top-left corner

glColor3f(0, 0, 1); // Blue
glVertex3f(0.5, 0.5, 0.0); // Top-right corner

glColor3f(1, 1, 1); // White
glVertex3f(0.5, -0.5, 0.0); // Bottom-right corner
glEnd(); // Finish the quad

Blending Colours Across the Shape

When OpenGL renders this quad, it automatically blends the colours between vertices. This creates a gradient effect, with red transitioning to green, green to blue, and so on.

Applying to Other Shapes

Vertex colouring isn’t limited to quads. You can apply it to any shape, including triangles, polygons, and even 3D models. The principle remains the same: assign a colour to each vertex and let OpenGL handle the interpolation.

Tutorial Code

Here’s the complete code for rendering a coloured quad in OpenGL:

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

// Function to draw the colored quad
void square(void) {
    glBegin(GL_QUADS); // Start defining the quad
    glColor3f(1, 0, 0); // Red
    glVertex3f(-0.5, -0.5, 0.0); // Bottom-left corner

    glColor3f(0, 1, 0); // Green
    glVertex3f(-0.5, 0.5, 0.0); // Top-left corner

    glColor3f(0, 0, 1); // Blue
    glVertex3f(0.5, 0.5, 0.0); // Top-right corner

    glColor3f(1, 1, 1); // White
    glVertex3f(0.5, -0.5, 0.0); // Bottom-right corner
    glEnd(); // Finish the quad
}

// 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

    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) {
    if (h == 0) h = 1;
    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);              // Single-buffered display
    glutInitWindowSize(500, 500);                  // Set window size
    glutInitWindowPosition(100, 100);              // Set window position
    glutCreateWindow("Vertex Coloring Example");   // Create the window
    glutDisplayFunc(display);                      // Register display callback
    glutReshapeFunc(reshape);                      // Register reshape callback
    glutMainLoop();                                // Enter the event loop
    return 0;
}

Tips for Experimentation

• Change the colours in glColor3f to see different effects.
• Try adding more vertices to create complex shapes with gradients.
• Experiment with 3D shapes like cubes or spheres for dynamic visuals.

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!