OpenGL（十四）——Qt OpenGL纹理

一、纹理

终于写到纹理的部分了：

纹理（Texture）的本质是一个2D图片（1D和3D），或者叫图形数据。只是在OpenGL中专业术语中称其为纹理。

你可以这样理解纹理，你家房子装修，你想要在不同的房间贴上不同风格的墙纸，有科技感的，有雍容华贵的，还有动漫的等等，此时的墙纸就是我们所说的纹理了。

二、纹理映射

纹理映射：你可以理解为把墙纸贴到墙上，因为墙纸有正反，且不能贴歪了。所以，你就需要严格对应到墙面的左上角、右上角等等。同样的，纹理映射就是纹理的坐标对应到多边形坐标上。

举个例子，将纹理正确的映射到四边形上，您必须将纹理的右上角映射到四边形的右上角，纹理的左上角映射到四边形的左上角，纹理的右下角映射到四边形的右下角，纹理的左下角映射到四边形的左下角。如果映射错误的话，图像显示时可能上下颠倒，侧向一边或者什么都不是。

所以，纹理映射功能支持将一些像素数据经过变换（即使是比较不规则的变换）将其附着到各种形状的多边形表面。

三、代码实现

学习texture map纹理映射（贴图）有很多好处。比方说您想让一颗导弹飞过屏幕。根据前几课的知识，我们最可行的办法可能是很多个多边形来构建导弹的轮廓并加上有趣的颜色。使用纹理映射，您可以使用真实的导弹图像并让它飞过屏幕。您觉得哪个更好看？照片还是一大堆三角形和四边形？使用纹理映射的好处还不止是更好看，而且您的程序运行会更快。导弹贴图可能只是一个飞过窗口的四边形。一个由多边形构建而来的导弹却很可能包括成百上千的多边形。很显然，贴图极大的节省了CPU时间。

我们要在第一课的代码上增加几行就可以了。

我们将要增加一个loadGLTextures()函数来处理有关纹理操作的。我们将在NeHeWidget类中增加三个变量xRot、yRot、zRot来处理立方体的旋转。还有一个用来存储纹理的texture[1]。

头文件：

#include <QObject>
#include <QWidget>
#include <qgl.h>
#include <QTimer>
/*
*绘制纹理.
*/class NeHe_6_Widget : public QGLWidget
{Q_OBJECT
public:NeHe_6_Widget(QWidget *parent = 0);~NeHe_6_Widget();public slots:void slotTimer();protected:void initializeGL(); void paintGL();      void resizeGL( int width, int height ); void loadGLTextures(); //在这个函数中我们会载入指定的图片并生成相应当纹理。GLfloat xRot, yRot, zRot ;GLuint texture[1];private:QTimer* m_timer;};

cpp文件实现：

#include "nehe_6_widget.h"
#include <GL/glu.h>
#include <qimage.h>
#include <QImage>NeHe_6_Widget::NeHe_6_Widget(QWidget *parent):QGLWidget(parent)
{xRot = yRot = zRot = 0.0;setGeometry( 0, 0, 640, 480 );//setCaption( "NeHe's Texture Mapping Tutorial" );m_timer = new QTimer(this);m_timer->setInterval(50);connect(m_timer,SIGNAL(timeout()),this,SLOT(slotTimer()));m_timer->start();
}NeHe_6_Widget::~NeHe_6_Widget()
{
}void NeHe_6_Widget::initializeGL()
{loadGLTextures();//载入纹理.glEnable( GL_TEXTURE_2D );//启用纹理。如果没有启用的话,你的对象看起来永远都是纯白色glShadeModel( GL_SMOOTH );glClearColor( 0.0, 0.0, 0.0, 0.5 );glClearDepth( 1.0 );glEnable( GL_DEPTH_TEST );glDepthFunc( GL_LEQUAL );//所作深度测试的类型。glHint( GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST );
}void NeHe_6_Widget::resizeGL( int width, int height )
{if ( height == 0 ){height = 1;}//防止height为0。glViewport( 0, 0, (GLint)width, (GLint)height );//重置当前的视口（Viewport）。glMatrixMode( GL_PROJECTION );//选择投影矩阵。glLoadIdentity();//重置投影矩阵。gluPerspective( 45.0, (GLfloat)width/(GLfloat)height, 0.1, 100.0 );//建立透视投影矩阵。glMatrixMode( GL_MODELVIEW );//选择模型观察矩阵。glLoadIdentity();//重置模型观察矩阵。}void NeHe_6_Widget::paintGL()
{glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );//清楚屏幕和深度缓存。glLoadIdentity();//重置当前的模型观察矩阵。glTranslatef(  0.0,  1.0, -5.0 );glRotatef( xRot,  1.0,  0.0,  0.0 );glRotatef( yRot,  0.0,  1.0,  0.0 );glRotatef( zRot,  0.0,  0.0,  1.0 );//根据xRot、yRot、zRot的实际值来旋转正方体。glBindTexture( GL_TEXTURE_2D, texture[0] );//选择我们使用的纹理。如果您在您的场景中使用多个纹理，您应该使用来glBindTexture(GL_TEXTURE_2D, texture[所使用纹理对应的数字]) \选择要绑定的纹理。当您想改变纹理时，应该绑定新的纹理。有一点值得指出的是，您不能在glBegin()和glEnd()之间绑定纹理，必须在glBegin()\之前或glEnd()之后绑定。注意我们在上面是如何使用glBindTexture来指定和绑定纹理的。glBegin( GL_QUADS );//为了将纹理正确的映射到四边形上，您必须将纹理的右上角映射到四边形的右上角，纹理的左上角映射到四边形的左上角，纹理的右下角映射到四边形的右下角，\纹理的左下角映射到四边形的左下角。如果映射错误的话，图像显示时可能上下颠倒，侧向一边或者什么都不是。//glTexCoord2f的第一个参数是X坐标。0.0是纹理的左侧。0.5是纹理的中点，1.0是纹理的右侧。glTexCoord2f的第二个参数是Y坐标。0.0是纹理的底部。\0.5是纹理的中点，1.0是纹理的顶部。//所以纹理的左上坐标是X：0.0，Y：1.0f，四边形的左上顶点是X：-1.0，Y：1.0。其余三点依此类推。//试着玩玩glTexCoord2f的X、Y坐标参数。把1.0改为0.5将只显示纹理的左半部分，把0.0改为0.5将只显示纹理的右半部分。glTexCoord2f( 0.0, 0.0 ); glVertex3f( -1.0, -1.0,  1.0 ); //前面.glTexCoord2f( 1.0, 0.0 ); glVertex3f(  1.0, -1.0,  1.0 );glTexCoord2f( 1.0, 1.0 ); glVertex3f(  1.0,  1.0,  1.0 );glTexCoord2f( 0.0, 1.0 ); glVertex3f( -1.0,  1.0,  1.0 );glTexCoord2f( 1.0, 0.0 ); glVertex3f( -1.0, -1.0, -1.0 ); //后面glTexCoord2f( 1.0, 1.0 ); glVertex3f( -1.0,  1.0, -1.0 );glTexCoord2f( 0.0, 1.0 ); glVertex3f(  1.0,  1.0, -1.0 );glTexCoord2f( 0.0, 0.0 ); glVertex3f(  1.0, -1.0, -1.0 );glTexCoord2f( 0.0, 1.0 ); glVertex3f( -1.0,  1.0, -1.0 ); //顶面glTexCoord2f( 0.0, 0.0 ); glVertex3f( -1.0,  1.0,  1.0 );glTexCoord2f( 1.0, 0.0 ); glVertex3f(  1.0,  1.0,  1.0 );glTexCoord2f( 1.0, 1.0 ); glVertex3f(  1.0,  1.0, -1.0 );glTexCoord2f( 1.0, 1.0 ); glVertex3f( -1.0, -1.0, -1.0 ); //底面glTexCoord2f( 0.0, 1.0 ); glVertex3f(  1.0, -1.0, -1.0 );glTexCoord2f( 0.0, 0.0 ); glVertex3f(  1.0, -1.0,  1.0 );glTexCoord2f( 1.0, 0.0 ); glVertex3f( -1.0, -1.0,  1.0 );glTexCoord2f( 1.0, 0.0 ); glVertex3f(  1.0, -1.0, -1.0 ); //右面glTexCoord2f( 1.0, 1.0 ); glVertex3f(  1.0,  1.0, -1.0 );glTexCoord2f( 0.0, 1.0 ); glVertex3f(  1.0,  1.0,  1.0 );glTexCoord2f( 0.0, 0.0 ); glVertex3f(  1.0, -1.0,  1.0 );glTexCoord2f( 0.0, 0.0 ); glVertex3f( -1.0, -1.0, -1.0 ); //左面glTexCoord2f( 1.0, 0.0 ); glVertex3f( -1.0, -1.0,  1.0 );glTexCoord2f( 1.0, 1.0 ); glVertex3f( -1.0,  1.0,  1.0 );glTexCoord2f( 0.0, 1.0 ); glVertex3f( -1.0,  1.0, -1.0 );glEnd();
}//loadGLTextures()函数就是用来载入纹理的。
void NeHe_6_Widget::loadGLTextures()
{QImage tex,buf;if (!buf.load(":/data/pg001.jpeg")){qWarning( "Could not read image file, using single-color instead." );QImage dummy( 128, 128, QImage::Format_RGB32 );dummy.fill( Qt::green );buf = dummy;//如果载入不成功，自动生成一个128*128的32位色的绿色图片。}tex = QGLWidget::convertToGLFormat(buf);//这里使用了QGLWidget类中提供的一个静态函数converToGLFormat()，专门用来转换图片的.glGenTextures( 1, &texture[0] );//创建一个纹理。告诉OpenGL我们想生成一个纹理名字(如果您想载入多个纹理，加大数字)。值得注意的是，\开始我们使用 GLuint texture[1] 来创建一个纹理的存储空间，您也许会认为第一个纹理就是存放在 &texture[1] 中的，\但这是错的。正确的地址应该是 &texture[0] 。同样如果使用 GLuint texture[2] 的话，第二个纹理存放在 texture[1] 中。glBindTexture( GL_TEXTURE_2D, texture[0] );//使用来自位图数据生成的典型纹理。告诉OpenGL将纹理名字texture[0]绑定到纹理目标上。\2D纹理只有高度（在Y轴上）和宽度（在X轴上）。主函数将纹理名字指派给纹理数据。本例中我们告知OpenGL，\&texture[0]处的内存已经可用。我们创建的纹理将存储在&texture[0]的指向的内存区域。glTexImage2D( GL_TEXTURE_2D, 0, 3, tex.width(), tex.height(), 0,GL_RGBA, GL_UNSIGNED_BYTE, tex.bits() );//这里真正的创建纹理。GL_TEXTURE_2D告诉OpenGL此纹理是一个2D纹理。数字零代表图像的详细程度，通常就由它为零去了。\数字三是数据的成分数。因为图像是由红色数据，绿色数据，蓝色数据三种组分组成。 tex.width()是纹理的宽度。\tex.height()是纹理的高度。数字零是边框的值，一般就是零。GL_RGBA 告诉OpenGL图像数据由红、绿、蓝三色数据\以及alpha通道数据组成，这个是由于QGLWidget类的converToGLFormat()函数的原因。 GL_UNSIGNED_BYTE 意味着\组成图像的数据是无符号字节类型的。最后tex.bits()告诉OpenGL纹理数据的来源。glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );//上面的两行告诉OpenGL在显示图像时，当它比放大得原始的纹理大（GL_TEXTURE_MAG_FILTER）或缩小得比原始得\纹理小（GL_TEXTURE_MIN_FILTER）时OpenGL采用的滤波方式。通常这两种情况下我都采用GL_LINEAR。这使得纹理\从很远处到离屏幕很近时都平滑显示。使用GL_LINEAR需要CPU和显卡做更多的运算。如果您的机器很慢，您也许应该采用\GL_NEAREST。过滤的纹理在放大的时候，看起来斑驳的很。您也可以结合这两种滤波方式。在近处时使用GL_LINEAR，\远处时GL_NEAREST。
}void NeHe_6_Widget::slotTimer()
{xRot += 0.3;yRot += 0.2;zRot += 0.4;//现在改变xRot、yRot、zRot的值。尝试变化每次各变量的改变值来调节立方体的旋转速度，或改变+/-号来调节立方体的旋转方向。update();
}

现在您应该比较好的理解纹理映射（贴图）了。您应该掌握了给任意四边形表面贴上您所喜爱的图像的技术。
一旦您对2D纹理映射的理解感到自信的时候，试试给立方体的六个面贴上不同的纹理。

当您理解纹理坐标的概念后，纹理映射并不难理解。

四、运行效果

动态的图：

项目中，资源文件使用的pg001.jpeg，是下面这张图：

上一篇：OpenGL（十三）——Qt OpenGL绘制三维图形

下一篇：OpenGL（十五）——Qt OpenGL三种不同的纹理滤波方式、光照、物体的移动

本文原创作者：冯一川（ifeng12358@163.com），未经作者授权同意，请勿转载。