Click to choose your tutorial
Tutorial 1: SDK
Tutorial 2: Creating a Window
Tutorial 3: Vulkan Instance
Tutorial 4: Supported Extensions
Tutorial 5: Drawing Points
Tutorial 6: Drawing Lines
Tutorial 7: Drawing Triangles
Tutorial 8: Introduction to Shaders
Tutorial 9: Loading Shaders
Tutorial 10: Using Multiple Shaders
Tutorial 11: Loading 3D Model
Tutorial 12: Displaying 3D Model
Tutorial 13: Vertex Animation
Tutorial 14: Bone Animation
OpenGL Tutorials
site is v0.1a build Sep 11, 2016
Join to be notified of new tutorials

Tutorial 4 - Using glColor3f function it is possible to color vertices of 3 dimensional primitives.

Written by staff. Contact us to submit your article for review.
Sep 13, 2016
tags Tags keywords
Post #29

In my previous OpenGL tutorial we learned how to draw OpenGL primitives with glVertex. This tutorial introduces you to OpenGL color using glColor command. As with the previous tutorial I will only use a single triangle to demonstrate the use of color.

The same rules still apply to all other types of 3D primitives. It is possible to draw plain non-textured triangles of any color as well as triangles with a different color specified for each vertex. But lets begin with the function we will use to specify color which is glColor.

Since I, like many people, prefer using floating-point variables when dealing with OpenGL parameters we will use the function glColor3f which takes the R, G and B components of the color in the following manner.

glColor3f(R, G, B);

Each color component can range from 0.0f to 1.0f where 0.0f is no color and 1.0f is full color. For example to specify pure red you would do the following:

glColor3f(1.0f, 0.0f, 0.0f);

How can this function be used to draw colored primitives? This requires a little explanation on how OpenGL deals with colors. OpenGL doesn't have a specific function to assign a color to a specific vertex for instance, or a triangle at the time of the function call.

However, OpenGL has a CURRENT color which is always stored somewhere and all you can do is modify that current color. To explain this in more detail in contrast to something else, imagine a different, non-OpenGL program (most people including yourself might have worked on before), which requires drawing pixels of different colors on the screen.

You specify the address someplace in the video memory and place a value of your color into that address, instantly the pixel lights up on the screen.

OpenGL, in contrast, doesn't work that way. It always stores a "current" color value at some place else that you don't need to worry about. What you do need to worry about is actually changing that value. All vertices of any primitive are drawn using the current color.

Just remember that that value is always stored somewhere and you need to modify it every time you need a new color. Initially OpenGL sets that current color value to white (R = 1.0f, G = 1.0f, B = 1.0f). That's exactly the reason why without specifying the color in previous tutorial the triangles you drew appeared white.

Lets practice by drawing a red triangle. Remember that all of this should be typed inside the RenderFrame function just like in previous tutorial.

glColor3f(1.0f, 0.0f, 0.0f); glBegin(GL_TRIANGLES); glVertex3f(-1.0f, -0.5f, -4.0f); // A glVertex3f( 1.0f, -0.5f, -4.0f); // B glVertex3f( 0.0f, 0.5f, -4.0f); // C glEnd();

This will result in a red triangle rendered on the screen. Note how the current color is assigned to red, before drawing the triangle. It is possible to assign color outside the glBegin-glEnd block as well as inside. The following code assigns color to each vertex which results in a smoothly shaded triangle as illustrated below.

glBegin(GL_TRIANGLES); glColor3f(1.0f, 0.0f, 0.0f); glVertex3f(-1.0f, -0.5f, -4.0f); // A glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( 1.0f, -0.5f, -4.0f); // B glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( 0.0f, 0.5f, -4.0f); // C glEnd();

And here is a graphical example of the outcome:

Drawing a triangle using glVertex3f and glColor3f, with red, blue and green colors applied to each of the 3 vertices. Smooth blending rendering is done automatically by OpenGL.

As you can see, you can change current color between calls to glVertex which in return assigns that color to the following vertex. This technique is called smooth-shading and can be somehwat considered the next step after flat-shading (when a triangle has only one color).

Smooth shading is only possible if the smooth shade model is enabled by OpenGL which is accomplished by a call to glShadeModel(GL_SMOOTH). Please take your time and find that call in my base code, it is located in the InitOpenGL function. This call is what makes it possible to draw smoothly shaded triangles.

Try changing GL_SMOOTH to GL_FLAT and recompile the same code; you will end up with a blue triangle. Why? Because when we use the flat shading model to draw a triangle, if colors are specified for each or some vertices of that triangle, OpenGL picks the LAST specified color for the last vertex (in our case it is the vertex C) to color the whole triangle. And since vertex C was assigned blue color, the whole triangle is colored blue.

That's how all primitives will work (with flat shading), the only EXCEPTION is when drawing polygons (e.g. using the GL_POLYGONS flag). When drawing polygons (as opposed to any other primitive, lines, quads, etc.), the FIRST vertex color will be used. You can as well write an e-mail to the OpenGL folks and ask them why!

Luckily, you don't have to worry about how light and shading works at this time because I will cover everything in one of the following tutorials. This tutorial was is here only to introduce you to how to draw colored or "shaded" polygons. Well, this rounds up our discussion of color.

It is really trivial to use after just a few minutes of practice. At this point you can draw colored primitives of any shape in your 3D world. But that's not enough; you need to light them, move them, rotate them... My next tutorial will cover movement in 3D space and only then I will cover the OpenGL light model.

It would be silly to write source code for this tutorial since it's extremely easy. Just follow the code explanation! © 2016 OpenGL Tutorials.

article tab
Follow OpenGL Tutorials
You will only receive important news about OpenGL tutorial updates.
Who is joining?
  • Programmers You want to stay in touch to receive OpenGL tutorial updates.
  • Game Devs You're a game developer, and you also want to learn more about OpenGL!
  • Supporters You have invested interest in supporting OpenGL tutorial site.
Follow OpenGL Tutorials