Qt5版NeHe OpenGL教程之十:飄動(dòng)的旗幟
這一課將把如下圖片做成一個(gè)飄動(dòng)的旗幟,其實(shí)主要還是用到了紋理映射。
lesson10.h
#ifndef?LESSON10_H #define?LESSON10_H #include#include#includeclass?QPainter; class?QOpenGLContext; class?QOpenGLPaintDevice; class?Lesson10?:?public?QWindow,?QOpenGLFunctions_1_1 { ????Q_OBJECT public: ????explicit?Lesson10(QWindow?*parent?=?0); ????~Lesson10(); ????virtual?void?render(QPainter?*); ????virtual?void?render(); ????virtual?void?initialize(); public?slots: ????void?renderNow(); protected: ????void?exposeEvent(QExposeEvent?*); ????void?resizeEvent(QResizeEvent?*); ????void?keyPressEvent(QKeyEvent?*);?//?鍵盤事件 ????void?timerEvent(QTimerEvent?*);??//?定時(shí)器 private: ????void?loadGLTexture(); private: ????QOpenGLContext?*m_context; ????GLfloat?m_x_rotate; ????GLfloat?m_y_rotate; ????GLfloat?m_z_rotate; ????GLuint?m_texture[1]; ????//我們將使用points數(shù)組來(lái)存放網(wǎng)格各頂點(diǎn)獨(dú)立的x,y,z坐標(biāo)。這里網(wǎng)格由45×45點(diǎn)形成, ????//換句話說(shuō)也就是由44格×44格的小方格子依次組成了。 ????float?m_points[45][45][3];?//?Points網(wǎng)格頂點(diǎn)數(shù)組 }; #endif?//?LESSON10_H
lessson10.cpp
#include?"lesson10.h" #include#include#include#include#include#includeLesson10::Lesson10(QWindow?*parent)?: ????QWindow(parent) ??,?m_context(0) ??,?m_x_rotate(0.0f) ??,?m_y_rotate(0.0f) ??,?m_z_rotate(0.0f) { ????setSurfaceType(QWindow::OpenGLSurface); ????startTimer(20); } Lesson10::~Lesson10() { ????glDeleteTextures(1,?&m_texture[0]); } void?Lesson10::render(QPainter?*painter) { ????Q_UNUSED(painter); } void?Lesson10::render() { ????glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); ????glViewport(0,0,(GLint)width(),(GLint)height());?//?重置當(dāng)前視口 ????glMatrixMode(GL_PROJECTION);????????????????????//?選擇投影矩陣 ????glLoadIdentity();???????????????????????????????//?重置投影矩陣為單位矩陣 ????gluPerspective(45.0f,(GLdouble)width()/(GLdouble)height(),0.1f,100.0f); ????glMatrixMode(GL_MODELVIEW);?//?選擇模型視圖矩陣 ????glLoadIdentity();???????????//?重置模型視圖矩陣為單位矩陣 ????float?float_x,?float_y,?float_xb,?float_yb; //?用來(lái)將旗形的波浪分割成很小的四邊形 ????glTranslatef(0.0f,0.0f,-12.0f); ????//?移入屏幕12個(gè)單位 ????glRotatef(m_x_rotate,1.0f,0.0f,0.0f); //?繞?X?軸旋轉(zhuǎn) ????glRotatef(m_y_rotate,0.0f,1.0f,0.0f); //?繞?Y?軸旋轉(zhuǎn) ????glRotatef(m_z_rotate,0.0f,0.0f,1.0f); //?繞?Z?軸旋轉(zhuǎn) ????glBindTexture(GL_TEXTURE_2D,?m_texture[0]); //?選擇紋理 ????glBegin(GL_QUADS); ????????????//?四邊形繪制開(kāi)始 ????for(int?x?=?0;?x?<?44;?x++?) ????//?沿X平面0-44循環(huán)(45點(diǎn)) ????{ ????????for(int?y?=?0;?y?<?44;?y++?) ????//?沿Y平面0-44循環(huán)(45點(diǎn)) ????????{ ????????????//接著開(kāi)始使用循環(huán)進(jìn)行多邊形繪制。這里使用整型可以避免我以前所用的int()強(qiáng)制類型轉(zhuǎn)換。 ????????????float_x?=?float(x)/44.0f; //?生成X浮點(diǎn)值 ????????????float_y?=?float(y)/44.0f; //?生成Y浮點(diǎn)值 ????????????float_xb?=?float(x+1)/44.0f; //?X浮點(diǎn)值+0.0227f ????????????float_yb?=?float(y+1)/44.0f; //?Y浮點(diǎn)值+0.0227f ????????????//上面我們使用4個(gè)變量來(lái)存放紋理坐標(biāo)。每個(gè)多邊形(網(wǎng)格之間的四邊形)分別映射了紋理的1/44×1/44部分。 ????????????//循環(huán)首先確定左下頂點(diǎn)的值,然后我們據(jù)此得到其他三點(diǎn)的值。 ????????????glTexCoord2f(?float_x,?float_y); //?第一個(gè)紋理坐標(biāo)?(左下角) ????????????glVertex3f(?m_points[x][y][0],?m_points[x][y][1],?m_points[x][y][2]?); ????????????glTexCoord2f(?float_x,?float_yb?); //?第二個(gè)紋理坐標(biāo)?(左上角) ????????????glVertex3f(?m_points[x][y+1][0],?m_points[x][y+1][1],?m_points[x][y+1][2]?); ????????????glTexCoord2f(?float_xb,?float_yb?); //?第三個(gè)紋理坐標(biāo)?(右上角) ????????????glVertex3f(?m_points[x+1][y+1][0],?m_points[x+1][y+1][1],?m_points[x+1][y+1][2]?); ????????????glTexCoord2f(?float_xb,?float_y?); //?第四個(gè)紋理坐標(biāo)?(右下角) ????????????glVertex3f(?m_points[x+1][y][0],?m_points[x+1][y][1],?m_points[x+1][y][2]?); ????????} ????} ????glEnd(); ?????????????????//?四邊形繪制結(jié)束 } void?Lesson10::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ì)十分輕微的影響性能。但使得透視圖看起來(lái)好一點(diǎn)。 ????glHint(GL_PERSPECTIVE_CORRECTION_HINT,?GL_NICEST); ????glPolygonMode(?GL_BACK,?GL_FILL?); //?后表面完全填充 ????glPolygonMode(?GL_FRONT,?GL_LINE?); //?前表面使用線條繪制 ????//?上面的代碼指定使用完全填充模式來(lái)填充多邊形區(qū)域的背面(后面)。 ????//?相反,多邊形的正面(表面)則使用輪廓線填充了。這些方式完全取決于您的個(gè)人喜好。并且與多邊形的方位或者頂點(diǎn)的方向有關(guān)。 ????for(int?x=0;?x<45;?x++) ????{ ????????for(int?y=0;?ysetFormat(requestedFormat()); ????????m_context->create(); ????????needsInitialize?=?true; ????} ????m_context->makeCurrent(this); ????if?(needsInitialize)?{ ????????initializeOpenGLFunctions(); ????????initialize(); ????} ????render(); ????m_context->swapBuffers(this); } void?Lesson10::loadGLTexture() { ????//現(xiàn)在載入圖像,并將其轉(zhuǎn)換為紋理。 ????QImage?image(":/image/Tim.bmp"); ????image?=?image.convertToFormat(QImage::Format_RGB888); ????image?=?image.mirrored(); ????glGenTextures(1,?&m_texture[0]);//創(chuàng)建紋理 ????//使用來(lái)自位圖數(shù)據(jù)生成的典型紋理 ????glBindTexture(GL_TEXTURE_2D,?m_texture[0]); ????glTexImage2D(GL_TEXTURE_2D,?0,?3,image.width(),?image.height(), ?????????????????0,?GL_RGB,?GL_UNSIGNED_BYTE,image.bits()); ????glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); //?線形濾波 ????glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR); //?線形濾波 } void?Lesson10::exposeEvent(QExposeEvent?*event) { ????Q_UNUSED(event); ????if?(isExposed()) ????{ ????????renderNow(); ????} } void?Lesson10::resizeEvent(QResizeEvent?*event) { ????Q_UNUSED(event); ????if?(isExposed()) ????{ ????????renderNow(); ????} } void?Lesson10::timerEvent(QTimerEvent?*event) { ????for(int?y?=?0;?y?<?45;?y++?) //?Y平面循環(huán) ????{ ????????GLfloat?hold?=?m_points[0][y][2]; //?存儲(chǔ)當(dāng)前左側(cè)波浪值 ????????for(int?x?=?0;?x?<?44;?x++) ????//?沿X平面循環(huán) ????????{ ????????????//?當(dāng)前波浪值等于其右側(cè)的波浪值 ????????????m_points[x][y][2]?=?m_points[x+1][y][2]; ????????} ????????m_points[44][y][2]=hold; //?剛才的值成為最左側(cè)的波浪值 ????} ????//上面所作的事情是先存儲(chǔ)每一行的第一個(gè)值,然后將波浪左移一下,使圖象產(chǎn)生波浪。 ????//存儲(chǔ)的數(shù)值挪到末端以產(chǎn)生一個(gè)永無(wú)盡頭的波浪紋理效果。 ????//上面的代碼由NeHe(2000年2月)修改過(guò),以消除波浪間出現(xiàn)的細(xì)小鋸齒。 ????//現(xiàn)在增加?xrot?,?yrot?和?zrot?的值。 ????m_x_rotate+=0.3f; //?X?軸旋轉(zhuǎn) ????m_y_rotate+=0.2f; //?Y?軸旋轉(zhuǎn) ????m_z_rotate+=0.4f; //?Z?軸旋轉(zhuǎn) ????renderNow(); ????QWindow::timerEvent(event); } void?Lesson10::keyPressEvent(QKeyEvent?*event) { ????int?key=event->key(); ????switch(key) ????{ ????} }
main.cpp
#include#includeint?main(int?argc,?char?*argv[]) { ????QGuiApplication?app(argc,?argv); ????QSurfaceFormat?format; ????format.setSamples(16); ????Lesson10?window; ????window.setFormat(format); ????window.resize(640,?480); ????window.show(); ????return?app.exec(); }
運(yùn)行效果