[導讀]在這一課里，將學會如何將紋理映射到立方體的六個面。學習texture map紋理映射(貼圖)有很多好處。比方說您想讓一顆導彈飛過屏幕。根據(jù)前幾課的知識，我們最可行的辦法可能是很多個多邊形來構建導彈的輪
在這一課里，將學會如何將紋理映射到立方體的六個面。
學習texture map紋理映射(貼圖)有很多好處。比方說您想讓一顆導彈飛過屏幕。根據(jù)前幾課的知識，我們最可行的辦法可能是很多個多邊形來構建導彈的輪廓并加上有趣的顏色。使用紋理映射，您可以使用真實的導彈圖像并讓它飛過屏幕。您覺得哪個更好看？照片還是一大堆三角形和四邊形？使用紋理映射的好處還不止是更好看，而且您的程序運行會更快。導彈貼圖可能只是一個飛過窗口的四邊形。一個由多邊形構建而來的導彈卻很可能包括成百上千的多邊形。很顯然，貼圖極大的節(jié)省了CPU時間。
需要注意的是，用作紋理的圖像的寬和高必須是2的n次方；寬度和高度最小必須是64象素；并且出于兼容性的原因，圖像的寬度和高度不應超過256象素。
如果您的原始素材的寬度和高度不是64，128，256象素的話，使用圖像處理軟件重新改變圖像的大小。
可以肯定有辦法能繞過這些限制，但現(xiàn)在我們只需要用標準的紋理尺寸。
關于紋理映射，更詳細的講解可參考：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?旋轉量
????GLfloat yrot; //?Y?旋轉量
????GLfloat zrot; //?Z?旋轉量
????GLuint texture[1]; //?存儲一個紋理
};
#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());?//?重置當前視口
????glMatrixMode(GL_PROJECTION);????????????????????//?選擇投影矩陣
????glLoadIdentity();???????????????????????????????//?重置投影矩陣為單位矩陣
????//?glu庫函數(shù)Qt不支持，但是glu庫函數(shù)是對gl庫函數(shù)的封裝，方便使用。因此我們可以自己
????//?寫一個類似gluPerspective的函數(shù)myPerspective，用于設置透視。
????//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軸旋轉。旋轉多少依賴于變量?xrot?，?yrot?和?zrot?的值。
????glRotatef(xrot,1.0f,0.0f,0.0f);?//?X軸旋轉
????glRotatef(yrot,0.0f,1.0f,0.0f);?//?Y軸旋轉
????glRotatef(zrot,0.0f,0.0f,1.0f);?//?Z軸旋轉
????//下一行代碼選擇我們使用的紋理。
????//如果您在您的場景中使用多個紋理，您應該使用來?glBindTexture(GL_TEXTURE_2D,?texture[?所使用紋理對應的數(shù)字?])?選擇要綁定的
????//紋理。當您想改變紋理時，應該綁定新的紋理。有一點值得指出的是，您不能在?glBegin()?和?glEnd()?之間綁定紋理，必須在?glBegin()
????//之前或?glEnd()?之后綁定。注意我們在后面是如何使用?glBindTexture?來指定和綁定紋理的。
????glBindTexture(GL_TEXTURE_2D,?texture[0]);?//?選擇紋理
????//為了將紋理正確的映射到四邊形上，您必須將紋理的右上角映射到四邊形的右上角，紋理的左上角映射到四邊形的左上角，
????//紋理的右下角映射到四邊形的右下角，紋理的左下角映射到四邊形的左下角。
????//如果映射錯誤的話，圖像顯示時可能上下顛倒，側向一邊或者什么都不是。
????//glTexCoord2f?的第一個參數(shù)是X坐標。?0.0f?是紋理的左側。?0.5f?是紋理的中點，?1.0f?是紋理的右側。
????//glTexCoord2f?的第二個參數(shù)是Y坐標。?0.0f?是紋理的底部。?0.5f?是紋理的中點，?1.0f?是紋理的頂部。
????//所以紋理的左上坐標是?X：0.0f，Y：1.0f?，四邊形的左上頂點是?X：?-1.0f，Y：1.0f?。其余三點依此類推。
????//試著玩玩?glTexCoord2f?X,?Y坐標參數(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);???????????????????//?設置深度緩存
????glEnable(GL_DEPTH_TEST);??????????????//?啟用深度測試
????glDepthFunc(GL_LEQUAL);???????????????//?深度測試類型
????//?接著告訴OpenGL我們希望進行最好的透視修正。這會十分輕微的影響性能。但使得透視圖看起來好一點。
????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)在載入圖像，并將其轉換為紋理。
????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此紋理是一個2D紋理?(?GL_TEXTURE_2D?)。
????//?參數(shù)“0”代表圖像的詳細程度，通常設置為0。參數(shù)三是數(shù)據(jù)的成分數(shù)。
????//?因為圖像是由紅色數(shù)據(jù)，綠色數(shù)據(jù)，藍色數(shù)據(jù)三種組分組成。?TextureImage[0]->sizeX?是紋理的寬度。
????//?如果您知道寬度，您可以在這里填入，但計算機可以很容易的為您指出此值。
????//?TextureImage[0]->sizey?是紋理的高度。參數(shù)零是邊框的值，一般就是“0”。
????//?GL_RGB?告訴OpenGL圖像數(shù)據(jù)由紅、綠、藍三色數(shù)據(jù)組成。
????//?GL_UNSIGNED_BYTE?意味著組成圖像的數(shù)據(jù)是無符號字節(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在顯示圖像時，
????//?當它比放大得原始的紋理大?(?GL_TEXTURE_MAG_FILTER?)或縮小得比原始得紋理小(?GL_TEXTURE_MIN_FILTER?)時
????//?OpenGL采用的濾波方式。通常這兩種情況下我都采用?GL_LINEAR?。
????//?這使得紋理從很遠處到離屏幕很近時都平滑顯示。使用?GL_LINEAR?需要CPU和顯卡做更多的運算。
????//?如果您的機器很慢，您也許應該采用?GL_NEAREST?。過濾的紋理在放大的時候，看起來斑駁的很『譯者注：馬賽克啦』。
????//?您也可以結合這兩種濾波方式。在近處時使用?GL_LINEAR?，遠處時?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();
}運行效果
下載文檔
