这次教程中，我们将在第02课的基础上，教大家如何使用颜色。我们将一起理解两种着色模式（光滑着色与平面着色），并运用这两种模式分别给第02课的三角形和正方形着色。我们将使用平面着色给四边形着色，即给三角形涂上一种固定的颜色；使用平滑着色给三角形着色，将三角形的三个顶点的不同颜色混合在一起，创建漂亮的色彩混合。


程序运行时效果如下：


Qt OpenGL 添加颜色_程序运行


下面进入教程：


要对三角形和四边形进行着色，只需在第02课代码的基础上，对paintGL()函数作一定的修改。


下面我将重写整个paintGL()函数，具体代码如下：




1 void MyGLWidget::paintGL()                              //从这里开始进行所以的绘制
 2 {
 3     glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //清除屏幕和深度缓存
 4     glLoadIdentity();                                   //重置当前的模型观察矩阵
 5  
 6     glTranslatef(-1.5f, 0.0f, -6.0f);                   //左移1.5单位，并移入屏幕6.0单位
 7     glBegin(GL_TRIANGLES);                              //开始绘制三角形
 8         glColor3f(1.0f, 0.0f, 0.0f);                    //设置当前色为红色
 9         glVertex3f(0.0f, 1.0f, 0.0f);                   //上顶点
10         glColor3f(0.0f, 1.0f, 0.0f);                    //设置当前色为绿色
11         glVertex3f(-1.0f, -1.0f, 0.0f);                 //左下
12         glColor3f(0.0f, 0.0f, 1.0f);                    //设置当前色为蓝色
13         glVertex3f(1.0f, -1.0f, 0.0f);                  //右下
14     glEnd();                                            //三角形绘制结束
15  
16     glTranslatef(3.0f, 0.0f, 0.0f);                     //右移3.0单位
17     glColor3f(0.5f, 0.5f, 1.0f);                        //一次性将当前色设置为蓝色
18     glBegin(GL_QUADS);                                  //开始绘制四边形
19         glVertex3f(-1.0f, 1.0f, 0.0f);                  //左上
20         glVertex3f(1.0f, 1.0f, 0.0f);                   //右上
21         glVertex3f(1.0f, -1.0f, 0.0f);                  //左下
22         glVertex3f(-1.0f, -1.0f, 0.0f);                 //右下
23     glEnd();                                            //四边形绘制结束
24 }


其实与第02课相比，只是增加了4行代码而已。我们利用glColor3f(r, g, b)函数来选择颜色进行着色，该函数三个参数依次是红、绿、蓝三色分量，范围从0.0到1.0之间，类似于之前所讲的清除屏幕背景函数。当我们将颜色设为某种颜色时，接下来的代码绘制出的对象的颜色就都是对应颜色的。


对于用光滑着色的三角形，我们需要分别对于3个顶点分别选择颜色，再分别进行绘点。故我们在每次绘点之前都需要调用一次glColor3f(r, g, b)进行选色，glEnd()之后，三角形将被填充，但因为每个顶点有不同的颜色，因此看起来颜色从每个顶点喷出，并刚好在三角形的中心汇合，三种颜色相互混合，这就是平滑着色；而对于使用平面着色的四边形，我只需要在一开始就选择好颜色，直接绘制四边形即可。


还有一点值得提的是，顺时针绘制图形时，意味着我们所看见的是图形的背景，这在后面对图形有一定影响。


现在就可以运行程序查看效果了！