Qt OpenGL 纹理映射

这次教程中，我教会大家如何把纹理映射到立方体的六个面上。学习texture map（纹理映射）有诸多好处。比如说想让一颗导弹飞过屏幕。根据前几课的知识，我们最可行的办法可能是很多个多边形来构建导弹的轮廓并加上有趣的颜色。而使用纹理映射，我们可以使用真实的导弹图像并让它飞过屏幕。你觉得哪个更好看？使用纹理映射的好处还不止是更好看，而且程序的运行会更快。导弹贴图可能只是一个飞过窗口的四边形，而一个导弹却需要成百上千的多边形组成，很明显，纹理映射极大的节省了CPU的时间。

程序运行时效果如下：

下面进入教程：

我们这次将在第01课得到的基础框架上开始添加代码，首先打开myglwidget.h文件，我们需要增加一些变量，将类声明更改如下：

 1 #ifndef MYGLWIDGET_H
 2 #define MYGLWIDGET_H
 3  
 4 #include <QWidget>
 5 #include <QGLWidget>
 6  
 7 class MyGLWidget : public QGLWidget
 8 {
 9     Q_OBJECT
10 public:
11     explicit MyGLWidget(QWidget *parent = 0);
12     ~MyGLWidget();
13  
14 protected:
15     //对3个纯虚函数的重定义
16     void initializeGL();
17     void resizeGL(int w, int h);
18     void paintGL();
19  
20     void keyPressEvent(QKeyEvent *event);           //处理键盘按下事件
21  
22 private:
23     bool fullscreen;                                //是否全屏显示
24  
25     GLfloat m_xRot;                                 //绕x轴旋转的角度
26     GLfloat m_yRot;                                 //绕y轴旋转的角度
27     GLfloat m_zRot;                                 //绕z轴旋转的角度
28     
29     QString m_FileName;                             //图片的路径及文件名
30     GLuint m_Texture;                               //储存一个纹理
31 };
32  
33 #endif // MYGLWIDGET_H

【领QT开发教程学习资料，点击下方链接莬费领取↓↓，先码住不迷路~】

点击→领取「链接」

增加的前三个变量用来使立方体绕x、y、z轴旋转，m_FileName用于储存图片的路径及文件名，m_Texture为一个纹理分配存储空间。如果需要不止一个纹理，可以创建一个数组来储存不同的纹理。

接下来，我们需要打开myglwidget.cpp，加上声明#include <QTimer>，在构造函数中对新增变量（除了m_Texture）进行初始化，同样不作过多解释，代码如下：

 1 MyGLWidget::MyGLWidget(QWidget *parent) :
 2     QGLWidget(parent)
 3 {
 4     fullscreen = false;
 5     m_xRot = 0.0f;
 6     m_yRot = 0.0f;
 7     m_zRot = 0.0f;
 8     m_FileName = "D:/QtOpenGL/QtImage/Nehe.bmp";        //应根据实际存放图片的路径进行修改
 9  
10     QTimer *timer = new QTimer(this);                   //创建一个定时器
11     //将定时器的计时信号与updateGL()绑定
12     connect(timer, SIGNAL(timeout()), this, SLOT(updateGL()));
13     timer->start(10);                                   //以10ms为一个计时周期
14 }

然后这次我们需要对initializeGL()函数作一定的修改了，具体代码如下：

 1 void MyGLWidget::initializeGL()                         //此处开始对OpenGL进行所以设置
 2 {
 3     m_Texture = bindTexture(QPixmap(m_FileName));       //载入位图并转换成纹理
 4     glEnable(GL_TEXTURE_2D);                            //启用纹理映射
 5  
 6     glClearColor(0.0f, 0.0f, 0.0f, 0.0f);               //黑色背景
 7     glShadeModel(GL_SMOOTH);                            //启用阴影平滑
 8  
 9     glClearDepth(1.0);                                  //设置深度缓存
10     glEnable(GL_DEPTH_TEST);                            //启用深度测试
11     glDepthFunc(GL_LEQUAL);                             //所作深度测试的类型
12     glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);  //告诉系统对透视进行修正
13 }

我们增加了两行代码，首先调用了Qt提供的bindTexture()函数将图片载入并转换成纹理，然后启用2D纹理映射。如果忘记启用的话，我们的对象看起来永远都是纯白色的，这明显与我们的预期大相径庭。

最后我们该开始绘制贴图过的立方体了，paintGL()函数具体代码如下：

 1 void MyGLWidget::paintGL()                              //从这里开始进行所以的绘制
 2 {
 3     glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //清除屏幕和深度缓存
 4     glLoadIdentity();                                   //重置模型观察矩阵
 5     glTranslatef(0.0f, 0.0f, -5.0f);                    //移入屏幕5.0单位
 6     glRotatef(m_xRot, 1.0f, 0.0f, 0.0f);                //绕x轴旋转
 7     glRotatef(m_yRot, 0.0f, 1.0f, 0.0f);                //绕y轴旋转
 8     glRotatef(m_zRot, 0.0f, 0.0f, 1.0f);                //绕z轴旋转
 9  
10     glBindTexture(GL_TEXTURE_2D, m_Texture);            //选择纹理
11     glBegin(GL_QUADS);                                  //开始绘制立方体
12         glTexCoord2f(1.0f, 1.0f);
13         glVertex3f(1.0f, 1.0f, -1.0f);                  //右上(顶面)
14         glTexCoord2f(0.0f, 1.0f);
15         glVertex3f(-1.0f, 1.0f, -1.0f);                 //左上(顶面)
16         glTexCoord2f(0.0f, 0.0f);
17         glVertex3f(-1.0f, 1.0f, 1.0f);                  //左下(顶面)
18         glTexCoord2f(1.0f, 0.0f);
19         glVertex3f(1.0f, 1.0f, 1.0f);                   //右下(顶面)
20  
21         glTexCoord2f(0.0f, 0.0f);
22         glVertex3f(1.0f, -1.0f, 1.0f);                  //右上(底面)
23         glTexCoord2f(1.0f, 0.0f);
24         glVertex3f(-1.0f, -1.0f, 1.0f);                 //左上(底面)
25         glTexCoord2f(1.0f, 1.0f);
26         glVertex3f(-1.0f, -1.0f, -1.0f);                //左下(底面)
27         glTexCoord2f(0.0f, 1.0f);
28         glVertex3f(1.0f, -1.0f, -1.0f);                 //右下(底面)
29  
30         glTexCoord2f(1.0f, 1.0f);
31         glVertex3f(1.0f, 1.0f, 1.0f);                   //右上(前面)
32         glTexCoord2f(0.0f, 1.0f);
33         glVertex3f(-1.0f, 1.0f, 1.0f);                  //左上(前面)
34         glTexCoord2f(0.0f, 0.0f);
35         glVertex3f(-1.0f, -1.0f, 1.0f);                 //左下(前面)
36         glTexCoord2f(1.0f, 0.0f);
37         glVertex3f(1.0f, -1.0f, 1.0f);                  //右下(前面)
38  
39         glTexCoord2f(0.0f, 0.0f);
40         glVertex3f(1.0f, -1.0f, -1.0f);                 //右上(后面)
41         glTexCoord2f(1.0f, 0.0f);
42         glVertex3f(-1.0f, -1.0f, -1.0f);                //左上(后面)
43         glTexCoord2f(1.0f, 1.0f);
44         glVertex3f(-1.0f, 1.0f, -1.0f);                 //左下(后面)
45         glTexCoord2f(0.0f, 1.0f);
46         glVertex3f(1.0f, 1.0f, -1.0f);                  //右下(后面)
47  
48         glTexCoord2f(1.0f, 1.0f);
49         glVertex3f(-1.0f, 1.0f, 1.0f);                  //右上(左面)
50         glTexCoord2f(0.0f, 1.0f);
51         glVertex3f(-1.0f, 1.0f, -1.0f);                 //左上(左面)
52         glTexCoord2f(0.0f, 0.0f);
53         glVertex3f(-1.0f, -1.0f, -1.0f);                //左下(左面)
54         glTexCoord2f(1.0f, 0.0f);
55         glVertex3f(-1.0f, -1.0f, 1.0f);                 //右下(左面)
56  
57         glTexCoord2f(1.0f, 1.0f);
58         glVertex3f(1.0f, 1.0f, -1.0f);                  //右上(右面)
59         glTexCoord2f(0.0f, 1.0f);
60         glVertex3f(1.0f, 1.0f, 1.0f);                   //左上(右面)
61         glTexCoord2f(0.0f, 0.0f);
62         glVertex3f(1.0f, -1.0f, 1.0f);                  //左下(右面)
63         glTexCoord2f(1.0f, 0.0f);
64         glVertex3f(1.0f, -1.0f, -1.0f);                 //右下(右面)
65     glEnd();                                            //立方体绘制结束
66  
67     m_xRot += 0.6f;                                     //x轴旋转
68     m_yRot += 0.4f;                                     //y轴旋转
69     m_zRot += 0.8f;                                     //z轴旋转
70 }

这次我们需要让对象依次绕x、y、z轴旋转，旋转多少依赖于变量m_xRot、m_yRot、m_zRot的值。下面我们调用glBindTexture()函数来选择要绑定的纹理，第2个参数表示所要绑定的纹理。当想改变纹理时，应该绑定新的纹理，要注意的是，我们不能在glBegin()和glEnd()直接绑定纹理，那样绑定的纹理时无效的。

为了将纹理正确地映射到四边形上，我们需要将纹理的四个角对应映射到四边形的四个角上。如果映射错误的话，图像显示时可能上下颠倒，侧向一边或者什么都不是。glTexCoord2f的两个参数分别表示x、y坐标，范围从0.0f到1.0f。

最后我们让m_xRot、m_yRot、m_zRot的值增加，大家可以尝试变化每次个变量的改变值来调节立方体的旋转速度，或改变+/-号来调节立方体的旋转方向。

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