Per Vertex Colors | CodeSignal Learn

Per Vertex Colors | CodeSignal Learn

Introduction

Welcome back to OpenGL Fundamentals: Your First Triangle! In our previous lesson, we mastered the art of efficient geometry rendering by implementing index buffers . We successfully transformed our approach from using six duplicate vertices to just four unique vertices, learning how Element Buffer Objects eliminate redundancy and improve performance. In this sixth lesson, we're ready to add visual richness to our renders by exploring per-vertex colors . Instead of our uniform orange-red square, we'll create a vibrant, multi-colored square where each corner displays a different hue. This technique introduces us to the concept of vertex attributes beyond position and demonstrates how the GPU interpolates data smoothly across triangle surfaces. By the end of this lesson, our square will showcase beautiful color gradients, and we'll have established good habits for managing GPU memory efficiently.

Understanding Per-Vertex Colors

Per-vertex coloring represents a fundamental technique in computer graphics, where color information is stored directly with each vertex rather than applying a uniform color to entire shapes. This approach offers several compelling advantages: it requires no additional texture memory, provides smooth color gradients through GPU interpolation, and allows for rich visual variety with minimal data overhead. When we assign different colors to each vertex of a triangle, the GPU automatically performs smooth interpolation between those colors across the triangle's surface. This process, called linear interpolation or lerping, creates beautiful gradients that transition seamlessly from one vertex color to another. For our square, composed of two triangles, this means each corner can have its own distinct color, and the interior will display smooth color transitions. The beauty of per-vertex colors lies in the graphics pipeline's automatic handling of this interpolation. We simply provide color data at each vertex, and the GPU takes care of computing the appropriate color for every pixel between those vertices. This technique forms the foundation for more advanced shading effects and demonstrates how vertex attributes flow through the rendering pipeline to create rich visual results.

Updating the Vertex Shader

Our vertex shader needs to accept color data as an additional input attribute and pass it along to the fragment shader for interpolation. Let's examine how we modify our vertex shader to handle this new color information. glsl#version 450 core layout(location = 0) in vec3 aPos; layout(location = 1) in vec3 aColor; // New color input out vec3 vertexColor; // Output color to fragment shader void main() { gl_Position = vec4(aPos, 1.0); vertexColor = aColor; // Pass color through pipeline } We've added a second input attribute aColor at location 1 to receive our per-vertex color data, formatted as a 3-component vector representing RGB values. The crucial addition is the out vec3 vertexColor declaration, which creates an output variable that will be automatically interpolated across triangle surfaces. In our main function, we simply assign the input color to our output variable, allowing the graphics pipeline to handle the interpolation between vertices. This demonstrates the elegant simplicity of the vertex shader's role in per-vertex coloring: it receives the data and forwards it for interpolation.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Updating the Fragment Shader

The fragment shader receives the interpolated color values from our vertex shader and uses them directly as the final pixel color, replacing our previous hardcoded color value. #version 450 core in vec3 vertexColor; // Interpolated color from vertex shader out vec4 FragColor; void main() {FragColor = vec4(vertexColor, 1.0); // Use interpolated color} Our fragment shader now declares in vec3 vertexColor to receive the interpolated color values from the vertex shader. The variable name must match exactly between the vertex shader's output and the fragment shader's input for proper linking. Instead of our previous hardcoded color vec4(0.8, 0.3, 0.2, 1.0), we now construct the final color using vec4(vertexColor, 1.0), where we append an alpha value of 1.0 for full opacity. The GPU automatically interpolates the vertexColor values across triangle surfaces, giving us smooth color transitions from vertex to vertex without any additional work in our fragment shader.

Restructuring Vertex Data

We need to restructure our vertex data to include both position and color information for each vertex, creating an interleaved data layout that's efficient for the GPU to process. // Interleaved position and color data float verts[] = {// positions // colors 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, // top right, red 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, // bottom right, green -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, // bottom left, blue -0.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f // top left, yellow}; unsigned int idx[] = {0, 1, 2, 0, 2, 3}; // Same indices as before Our vertex data now contains six values per vertex instead of three: three for position (x, y, z), followed immediately by three for color (r, g, b). This interleaved layout keeps related data close together in memory, which improves cache performance during rendering. Each vertex has been assigned a distinct color: red for top-right, green for bottom-right, blue for bottom-left, and yellow for top-left. The color values range from 0.0 to 1.0, representing the intensity of each color component. Our index array remains unchanged since we're still drawing the same geometric shape, just with additional color information per vertex.

Configuring Color Attributes

With our interleaved vertex data uploaded to the GPU, we need to configure a second vertex attribute to tell OpenGL how to interpret the color data within our vertex buffer. // Position attribute (location = 0) glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0); glEnableVertexAttribArray(0); // Color attribute (location = 1) glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))); glEnableVertexAttribArray(1); We now configure two vertex attributes instead of one. The position attribute at location 0 remains largely the same, but notice the stride has changed from 3 * sizeof(float) to 6 * sizeof(float) to account for our interleaved data structure. The color attribute at location 1 specifies 3 components, uses the same stride of 6 floats, but starts at an offset of 3 * sizeof(float) bytes to skip over the position data. This offset calculation (void*)(3 * sizeof(float)) tells OpenGL that color data begins 3 float values into each vertex record. Both attributes must be enabled with glEnableVertexAttribArray to function properly during rendering. With everything set up correctly, OpenGL will produce the following output:

C++

// Interleaved position and color data
float verts[] = {
    // positions        // colors
     0.5f,  0.5f, 0.0f, 1.0f, 0.0f, 0.0f,   // top right, red
     0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f,   // bottom right, green
    -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f,   // bottom left, blue
    -0.5f,  0.5f, 0.0f, 1.0f, 1.0f, 0.0f    // top left, yellow
};
unsigned int idx[] = {0, 1, 2, 0, 2, 3};  // Same indices as before

C++

// Position attribute (location = 0)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

// Color attribute (location = 1)
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);