Qt5版NeHe OpenGL教程之五：紋理映射
[導(dǎo)讀]在這一課里，將學(xué)會(huì)如何將紋理映射到立方體的六個(gè)面。學(xué)習(xí)texture map紋理映射(貼圖)有很多好處。比方說您想讓一顆導(dǎo)彈飛過屏幕。根據(jù)前幾課的知識(shí)，我們最可行的辦法可能是很多個(gè)多邊形來構(gòu)建導(dǎo)彈的輪
在這一課里，將學(xué)會(huì)如何將紋理映射到立方體的六個(gè)面。
學(xué)習(xí)texture map紋理映射(貼圖)有很多好處。比方說您想讓一顆導(dǎo)彈飛過屏幕。根據(jù)前幾課的知識(shí)，我們最可行的辦法可能是很多個(gè)多邊形來構(gòu)建導(dǎo)彈的輪廓并加上有趣的顏色。使用紋理映射，您可以使用真實(shí)的導(dǎo)彈圖像并讓它飛過屏幕。您覺得哪個(gè)更好看？照片還是一大堆三角形和四邊形？使用紋理映射的好處還不止是更好看，而且您的程序運(yùn)行會(huì)更快。導(dǎo)彈貼圖可能只是一個(gè)飛過窗口的四邊形。一個(gè)由多邊形構(gòu)建而來的導(dǎo)彈卻很可能包括成百上千的多邊形。很顯然，貼圖極大的節(jié)省了CPU時(shí)間。
需要注意的是，用作紋理的圖像的寬和高必須是2的n次方；寬度和高度最小必須是64象素；并且出于兼容性的原因，圖像的寬度和高度不應(yīng)超過256象素。
如果您的原始素材的寬度和高度不是64，128，256象素的話，使用圖像處理軟件重新改變圖像的大小。
可以肯定有辦法能繞過這些限制，但現(xiàn)在我們只需要用標(biāo)準(zhǔn)的紋理尺寸。
關(guān)于紋理映射，更詳細(xì)的講解可參考：https://blog.csdn.net/caoshangpa/article/details/80318959
這一課的代碼較之前有了較大變化，全部貼出來。
lesson5.h
#ifndef?LESSON5_H
#define?LESSON5_H
#include#includeclass?QPainter;
class?QOpenGLContext;
class?QOpenGLPaintDevice;
class?Lesson5?:?public?QWindow,?QOpenGLFunctions_1_1
{
????Q_OBJECT
public:
????explicit?Lesson5(QWindow?*parent?=?0);
????~Lesson5();
????virtual?void?render(QPainter?*);
????virtual?void?render();
????virtual?void?initialize();
public?slots:
????void?renderNow();
protected:
????void?exposeEvent(QExposeEvent?*);
????void?resizeEvent(QResizeEvent?*);
private:
????void?myPerspective(?GLdouble?fov,?GLdouble?aspectRatio,?GLdouble?zNear,?GLdouble?zFar?);
????void?loadGLTexture();
private:
????QOpenGLContext?*m_context;
????GLfloat xrot; //?X?旋轉(zhuǎn)量
????GLfloat yrot; //?Y?旋轉(zhuǎn)量
????GLfloat zrot; //?Z?旋轉(zhuǎn)量
????GLuint texture[1]; //?存儲(chǔ)一個(gè)紋理
};
#endif?//?LESSON5_Hlesson5.cpp
#include?"lesson5.h"
#include#include#include#includeLesson5::Lesson5(QWindow?*parent)?:
????QWindow(parent)
??,?m_context(0)
{
????setSurfaceType(QWindow::OpenGLSurface);
????xrot=45.0f;
????yrot=45.0f;
????zrot=45.0f;
}
Lesson5::~Lesson5()
{
????glDeleteTextures(1,?&texture[0]);
}
void?Lesson5::render(QPainter?*painter)
{
????Q_UNUSED(painter);
}
void?Lesson5::myPerspective(?GLdouble?fov,?GLdouble?aspectRatio,?GLdouble?zNear,?GLdouble?zFar?)
{
????//?使用glu庫函數(shù)，需要添加glu.h頭文件
????//?gluPerspective(fov,?aspectRatio,?zNear,?zFar);
????GLdouble?rFov?=?fov?*?3.14159265?/?180.0;
????glFrustum(?-zNear?*?tan(?rFov?/?2.0?)?*?aspectRatio,
???????????????zNear?*?tan(?rFov?/?2.0?)?*?aspectRatio,
???????????????-zNear?*?tan(?rFov?/?2.0?),
???????????????zNear?*?tan(?rFov?/?2.0?),
???????????????zNear,?zFar?);
}
void?Lesson5::render()
{
????glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
????glViewport(0,0,(GLint)width(),(GLint)height());?//?重置當(dāng)前視口
????glMatrixMode(GL_PROJECTION);????????????????????//?選擇投影矩陣
????glLoadIdentity();???????????????????????????????//?重置投影矩陣為單位矩陣
????//?glu庫函數(shù)Qt不支持，但是glu庫函數(shù)是對(duì)gl庫函數(shù)的封裝，方便使用。因此我們可以自己
????//?寫一個(gè)類似gluPerspective的函數(shù)myPerspective，用于設(shè)置透視。
????//gluPerspective(45.0f,(GLfloat)width/(GLfloat)height,0.1f,100.0f);
????myPerspective(45.0,(GLfloat)width()/(GLfloat)height(),0.1,100.0);
????glMatrixMode(GL_MODELVIEW);//?選擇模型視圖矩陣
????glLoadIdentity();??????????//?重置模型視圖矩陣為單位矩陣
????glTranslatef(0.0f,0.0f,-6.0f);??//?移入屏幕6.0
????//下面三行使立方體繞X、Y、Z軸旋轉(zhuǎn)。旋轉(zhuǎn)多少依賴于變量?xrot?，?yrot?和?zrot?的值。
????glRotatef(xrot,1.0f,0.0f,0.0f);?//?X軸旋轉(zhuǎn)
????glRotatef(yrot,0.0f,1.0f,0.0f);?//?Y軸旋轉(zhuǎn)
????glRotatef(zrot,0.0f,0.0f,1.0f);?//?Z軸旋轉(zhuǎn)
????//下一行代碼選擇我們使用的紋理。
????//如果您在您的場(chǎng)景中使用多個(gè)紋理，您應(yīng)該使用來?glBindTexture(GL_TEXTURE_2D,?texture[?所使用紋理對(duì)應(yīng)的數(shù)字?])?選擇要綁定的
????//紋理。當(dāng)您想改變紋理時(shí)，應(yīng)該綁定新的紋理。有一點(diǎn)值得指出的是，您不能在?glBegin()?和?glEnd()?之間綁定紋理，必須在?glBegin()
????//之前或?glEnd()?之后綁定。注意我們?cè)诤竺媸侨绾问褂?glBindTexture?來指定和綁定紋理的。
????glBindTexture(GL_TEXTURE_2D,?texture[0]);?//?選擇紋理
????//為了將紋理正確的映射到四邊形上，您必須將紋理的右上角映射到四邊形的右上角，紋理的左上角映射到四邊形的左上角，
????//紋理的右下角映射到四邊形的右下角，紋理的左下角映射到四邊形的左下角。
????//如果映射錯(cuò)誤的話，圖像顯示時(shí)可能上下顛倒，側(cè)向一邊或者什么都不是。
????//glTexCoord2f?的第一個(gè)參數(shù)是X坐標(biāo)。?0.0f?是紋理的左側(cè)。?0.5f?是紋理的中點(diǎn)，?1.0f?是紋理的右側(cè)。
????//glTexCoord2f?的第二個(gè)參數(shù)是Y坐標(biāo)。?0.0f?是紋理的底部。?0.5f?是紋理的中點(diǎn)，?1.0f?是紋理的頂部。
????//所以紋理的左上坐標(biāo)是?X：0.0f，Y：1.0f?，四邊形的左上頂點(diǎn)是?X：?-1.0f，Y：1.0f?。其余三點(diǎn)依此類推。
????//試著玩玩?glTexCoord2f?X,?Y坐標(biāo)參數(shù)。把?1.0f?改為?0.5f?將只顯示紋理的左半部分，把?0.0f?改為?0.5f?將只顯示紋理的右半部分。
????glBegin(GL_QUADS);
????//?前面
????glTexCoord2f(0.0f,?0.0f);?glVertex3f(-1.0f,?-1.0f,??1.0f); //?紋理和四邊形的左下
????glTexCoord2f(1.0f,?0.0f);?glVertex3f(?1.0f,?-1.0f,??1.0f); //?紋理和四邊形的右下
????glTexCoord2f(1.0f,?1.0f);?glVertex3f(?1.0f,??1.0f,??1.0f); //?紋理和四邊形的右上
????glTexCoord2f(0.0f,?1.0f);?glVertex3f(-1.0f,??1.0f,??1.0f); //?紋理和四邊形的左上
????//?后面
????glTexCoord2f(1.0f,?0.0f);?glVertex3f(-1.0f,?-1.0f,?-1.0f); //?紋理和四邊形的右下
????glTexCoord2f(1.0f,?1.0f);?glVertex3f(-1.0f,??1.0f,?-1.0f); //?紋理和四邊形的右上
????glTexCoord2f(0.0f,?1.0f);?glVertex3f(?1.0f,??1.0f,?-1.0f); //?紋理和四邊形的左上
????glTexCoord2f(0.0f,?0.0f);?glVertex3f(?1.0f,?-1.0f,?-1.0f); //?紋理和四邊形的左下
????//?頂面
????glTexCoord2f(0.0f,?1.0f);?glVertex3f(-1.0f,??1.0f,?-1.0f); //?紋理和四邊形的左上
????glTexCoord2f(0.0f,?0.0f);?glVertex3f(-1.0f,??1.0f,??1.0f); //?紋理和四邊形的左下
????glTexCoord2f(1.0f,?0.0f);?glVertex3f(?1.0f,??1.0f,??1.0f); //?紋理和四邊形的右下
????glTexCoord2f(1.0f,?1.0f);?glVertex3f(?1.0f,??1.0f,?-1.0f); //?紋理和四邊形的右上
????//?底面
????glTexCoord2f(1.0f,?1.0f);?glVertex3f(-1.0f,?-1.0f,?-1.0f); //?紋理和四邊形的右上
????glTexCoord2f(0.0f,?1.0f);?glVertex3f(?1.0f,?-1.0f,?-1.0f); //?紋理和四邊形的左上
????glTexCoord2f(0.0f,?0.0f);?glVertex3f(?1.0f,?-1.0f,??1.0f); //?紋理和四邊形的左下
????glTexCoord2f(1.0f,?0.0f);?glVertex3f(-1.0f,?-1.0f,??1.0f); //?紋理和四邊形的右下
????//?右面
????glTexCoord2f(1.0f,?0.0f);?glVertex3f(?1.0f,?-1.0f,?-1.0f); //?紋理和四邊形的右下
????glTexCoord2f(1.0f,?1.0f);?glVertex3f(?1.0f,??1.0f,?-1.0f); //?紋理和四邊形的右上
????glTexCoord2f(0.0f,?1.0f);?glVertex3f(?1.0f,??1.0f,??1.0f); //?紋理和四邊形的左上
????glTexCoord2f(0.0f,?0.0f);?glVertex3f(?1.0f,?-1.0f,??1.0f); //?紋理和四邊形的左下
????//?左面
????glTexCoord2f(0.0f,?0.0f);?glVertex3f(-1.0f,?-1.0f,?-1.0f); //?紋理和四邊形的左下
????glTexCoord2f(1.0f,?0.0f);?glVertex3f(-1.0f,?-1.0f,??1.0f); //?紋理和四邊形的右下
????glTexCoord2f(1.0f,?1.0f);?glVertex3f(-1.0f,??1.0f,??1.0f); //?紋理和四邊形的右上
????glTexCoord2f(0.0f,?1.0f);?glVertex3f(-1.0f,??1.0f,?-1.0f); //?紋理和四邊形的左上
????glEnd();
}
void?Lesson5::initialize()
{
????loadGLTexture();??????????????????????//?加載紋理
????glEnable(GL_TEXTURE_2D);??????????????//?啟用紋理映射
????glShadeModel(GL_SMOOTH);??????????????//?啟用平滑著色
????glClearColor(0.0f,?0.0f,?0.0f,?0.0f);?//?黑色背景
????glClearDepth(1.0f);???????????????????//?設(shè)置深度緩存
????glEnable(GL_DEPTH_TEST);??????????????//?啟用深度測(cè)試
????glDepthFunc(GL_LEQUAL);???????????????//?深度測(cè)試類型
????//?接著告訴OpenGL我們希望進(jìn)行最好的透視修正。這會(huì)十分輕微的影響性能。但使得透視圖看起來好一點(diǎn)。
????glHint(GL_PERSPECTIVE_CORRECTION_HINT,?GL_NICEST);
}
void?Lesson5::renderNow()
{
????if?(!isExposed())
????????return;
????bool?needsInitialize?=?false;
????if?(!m_context)?{
????????m_context?=?new?QOpenGLContext(this);
????????m_context->setFormat(requestedFormat());
????????m_context->create();
????????needsInitialize?=?true;
????}
????m_context->makeCurrent(this);
????if?(needsInitialize)?{
????????initializeOpenGLFunctions();
????????initialize();
????}
????render();
????m_context->swapBuffers(this);
}
void?Lesson5::loadGLTexture()
{
????//?現(xiàn)在載入圖像，并將其轉(zhuǎn)換為紋理。
????QImage?image(":/image/NeHe.bmp");
????image?=?image.convertToFormat(QImage::Format_RGB888);
????image?=?image.mirrored();
????//?創(chuàng)建紋理
????glGenTextures(1,?&texture[0]);
????//?使用來自位圖數(shù)據(jù)生成的典型紋理
????glBindTexture(GL_TEXTURE_2D,?texture[0]);
????//?下來我們創(chuàng)建真正的紋理。下面一行告訴OpenGL此紋理是一個(gè)2D紋理?(?GL_TEXTURE_2D?)。
????//?參數(shù)“0”代表圖像的詳細(xì)程度，通常設(shè)置為0。參數(shù)三是數(shù)據(jù)的成分?jǐn)?shù)。
????//?因?yàn)閳D像是由紅色數(shù)據(jù)，綠色數(shù)據(jù)，藍(lán)色數(shù)據(jù)三種組分組成。?TextureImage[0]->sizeX?是紋理的寬度。
????//?如果您知道寬度，您可以在這里填入，但計(jì)算機(jī)可以很容易的為您指出此值。
????//?TextureImage[0]->sizey?是紋理的高度。參數(shù)零是邊框的值，一般就是“0”。
????//?GL_RGB?告訴OpenGL圖像數(shù)據(jù)由紅、綠、藍(lán)三色數(shù)據(jù)組成。
????//?GL_UNSIGNED_BYTE?意味著組成圖像的數(shù)據(jù)是無符號(hào)字節(jié)類型的。
????//?最后TextureImage[0]->data?告訴OpenGL紋理數(shù)據(jù)的來源。此例中指向存放在?TextureImage[0]?記錄中的數(shù)據(jù)。
????glTexImage2D(GL_TEXTURE_2D,?0,?GL_RGB,
?????????????????image.width(),?image.height(),?0,?GL_RGB,?GL_UNSIGNED_BYTE,
?????????????????image.bits());
????//?下面的兩行告訴OpenGL在顯示圖像時(shí)，
????//?當(dāng)它比放大得原始的紋理大?(?GL_TEXTURE_MAG_FILTER?)或縮小得比原始得紋理小(?GL_TEXTURE_MIN_FILTER?)時(shí)
????//?OpenGL采用的濾波方式。通常這兩種情況下我都采用?GL_LINEAR?。
????//?這使得紋理從很遠(yuǎn)處到離屏幕很近時(shí)都平滑顯示。使用?GL_LINEAR?需要CPU和顯卡做更多的運(yùn)算。
????//?如果您的機(jī)器很慢，您也許應(yīng)該采用?GL_NEAREST?。過濾的紋理在放大的時(shí)候，看起來斑駁的很『譯者注：馬賽克啦』。
????//?您也可以結(jié)合這兩種濾波方式。在近處時(shí)使用?GL_LINEAR?，遠(yuǎn)處時(shí)?GL_NEAREST?。
????glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); //?線形濾波
????glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR); //?線形濾波
}
void?Lesson5::exposeEvent(QExposeEvent?*event)
{
????Q_UNUSED(event);
????if?(isExposed())
????????renderNow();
}
void?Lesson5::resizeEvent(QResizeEvent?*event)
{
????Q_UNUSED(event);
????if?(isExposed())
????????renderNow();
}main.cpp
#include#includeint?main(int?argc,?char?*argv[])
{
????QGuiApplication?app(argc,?argv);
????QSurfaceFormat?format;
????format.setSamples(16);
????Lesson5?window;
????window.setFormat(format);
????window.resize(640,?480);
????window.show();
????return?app.exec();
}運(yùn)行效果
下載文檔
