Qt5版NeHe OpenGL教程之八：3D空間中移動圖像
[導(dǎo)讀]歡迎進(jìn)入第八課。到現(xiàn)在為止，您應(yīng)該很好的理解OpenGL了。您已經(jīng)學(xué)會了設(shè)置一個OpenGL窗口的每個細(xì)節(jié)。學(xué)會在旋轉(zhuǎn)的物體上貼圖并打上光線以及混色(透明)處理。? ? ? ?這一課應(yīng)該算是第一課中級
歡迎進(jìn)入第八課。到現(xiàn)在為止，您應(yīng)該很好的理解OpenGL了。您已經(jīng)學(xué)會了設(shè)置一個OpenGL窗口的每個細(xì)節(jié)。學(xué)會在旋轉(zhuǎn)的物體上貼圖并打上光線以及混色(透明)處理。
? ? ? ?這一課應(yīng)該算是第一課中級教程。您將學(xué)到如下的知識：在3D場景中移動位圖，并去除位圖上的黑色象素(使用混色)。接著為黑白紋理上色，最后您將學(xué)會創(chuàng)建豐富的色彩，并把上過不同色彩的紋理相互混合，得到簡單的動畫效果。
lesson8.h
#ifndef?LESSON8_H
#define?LESSON8_H
#include#include#includetypedef?struct //?為星星創(chuàng)建一個結(jié)構(gòu)
{
????int?r,?g,?b; //?星星的顏色
????GLfloat?dist; //?星星距離中心的距離
????GLfloat?angle; //?當(dāng)前星星所處的角度，自轉(zhuǎn)角度
}stars; //?結(jié)構(gòu)命名為stars
const?int?starCount?=?50;?//?星星的個數(shù)
class?QPainter;
class?QOpenGLContext;
class?QOpenGLPaintDevice;
class?Lesson8?:?public?QWindow,?QOpenGLFunctions_1_1
{
????Q_OBJECT
public:
????explicit?Lesson8(QWindow?*parent?=?0);
????~Lesson8();
????virtual?void?render(QPainter?*);
????virtual?void?render();
????virtual?void?initialize();
public?slots:
????void?renderNow();
protected:
????void?exposeEvent(QExposeEvent?*);
????void?resizeEvent(QResizeEvent?*);
????void?keyPressEvent(QKeyEvent?*);?//?鍵盤事件
private:
????void?loadGLTexture();
private:
????QOpenGLContext?*m_context;
????bool?m_twinkle;?//?twinkle用來跟蹤閃爍效果是否啟用
????QVectorm_stars;
????GLfloat m_zoom; //?星星離觀察者的距離
????GLfloat?m_tilt; //?星星的傾角
????GLfloat m_spin; //?閃爍星星的公轉(zhuǎn)角度
????GLuint m_texture[1];?//?存放一個紋理
};
#endif?//?LESSON8_Hlesson8.cpp
#include?"lesson8.h"
#include#include#include#include#include#includeLesson8::Lesson8(QWindow?*parent)?:
????QWindow(parent)
??,?m_context(0)
??,?m_twinkle(false)
??,?m_zoom(-15.0f)
??,?m_tilt(90.0f)
??,?m_spin(0.0f)
{
????setSurfaceType(QWindow::OpenGLSurface);
}
Lesson8::~Lesson8()
{
????glDeleteTextures(1,?&m_texture[0]);
}
void?Lesson8::render(QPainter?*painter)
{
????Q_UNUSED(painter);
}
void?Lesson8::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();??????????//?重置模型視圖矩陣為單位矩陣
????glBindTexture(GL_TEXTURE_2D,?m_texture[0]);????//?選擇紋理
????for?(int?i?=?0,?iend?=?starCount;i<iend;?i++)??//?循環(huán)設(shè)置所有的星星
????{
????????glLoadIdentity(); ???????????//?繪制每顆星星之前，重置模型觀察矩陣
????????glTranslatef(0.0f,0.0f,m_zoom); ???//?深入屏幕里面
????????glRotatef(m_tilt,1.0f,0.0f,0.0f); ???//?傾斜視角,初始為90°，此時Y軸正向是指向觀察者的。
????????//現(xiàn)在我們來移動星星。星星開始時位于屏幕的中心。我們要做的第一件事是把場景沿Y軸旋轉(zhuǎn)。
????????//第二行代碼沿x軸移動一個正值。通常x軸上的正值代表移向了屏幕的右側(cè)(也就是通常的x軸的正向)，但這里由于我們繞y軸旋轉(zhuǎn)了坐標(biāo)系，
????????//x軸的正向可以是任意方向。
????????glRotatef(m_stars[i].angle,0.0f,1.0f,0.0f); //?旋轉(zhuǎn)至當(dāng)前所畫星星的角度
????????glTranslatef(m_stars[i].dist,0.0f,0.0f); //?X軸正向移動
????????//接著的代碼帶點(diǎn)小技巧。星星實(shí)際上是一個平面的紋理。現(xiàn)在您在屏幕中心畫了個平面的四邊形然后貼上紋理，這看起來很不錯。
????????//但是當(dāng)經(jīng)過X軸和Y軸的旋轉(zhuǎn)以后，星星的正面并沒對著我們，如果傾斜角我餓90°，那么所有的星星
????????//看起來就是一條細(xì)線。這不是我們所想要的。我們希望星星永遠(yuǎn)正面朝著我們，而不管屏幕如何旋轉(zhuǎn)或傾斜。
????????//我們通過在繪制星星之前，抵消對星星所作的任何旋轉(zhuǎn)來實(shí)現(xiàn)這個愿望。您可以采用逆序來抵消旋轉(zhuǎn)。
????????//當(dāng)我們傾斜屏幕時，我們實(shí)際上以當(dāng)前角度旋轉(zhuǎn)了星星。通過逆序，我們又以當(dāng)前角度"反旋轉(zhuǎn)"星星。
????????//注意，旋轉(zhuǎn)只能改變星星的角度，不能改變星星的位置。
????????glRotatef(-m_stars[i].angle,0.0f,1.0f,0.0f);//?取消當(dāng)前星星的角度
????????glRotatef(-m_tilt,1.0f,0.0f,0.0f); ????//?取消屏幕傾斜
????????//如果?twinkle?為?TRUE，我們在屏幕上先畫一次不旋轉(zhuǎn)的星星：將星星總數(shù)(num)?減去當(dāng)前的星星數(shù)(loop)再減去1，
????????//來提取每顆星星的不同顏色(這么做是因?yàn)檠h(huán)范圍從0到num-1)。舉例來說，結(jié)果為10的時候，我們就使用10號星星的顏色。
????????//這樣相鄰星星的顏色總是不同的。這不是個好法子，但很有效。最后一個值是alpha通道分量。這個值越小，這顆星星就越暗。
????????//由于啟用了twinkle，每顆星星最后會被繪制兩遍。程序運(yùn)行起來會慢一些，這要看您的機(jī)器性能如何了。
????????//但兩遍繪制的星星顏色相互融合，會產(chǎn)生很棒的效果。同時由于第一遍的星星沒有旋轉(zhuǎn)，啟用twinkle后的星星看起來有一種動畫效果。
????????//(如果您這里看不懂得話，就自己去看程序的運(yùn)行效果吧。)
????????//值得注意的是給紋理上色是件很容易的事。盡管紋理本身是黑白的，紋理將變成我們在繪制它之前選定的任意顏色。
????????//此外，同樣值得注意的是我們在這里使用的顏色值是byte型的，而不是通常的浮點(diǎn)數(shù)。甚至alpha通道分量也是如此。
????????if?(m_twinkle) //?啟用閃爍效果
????????{
????????????//?使用byte型數(shù)值指定一個顏色
????????????glColor4ub(m_stars[(iend-i)-1].r,m_stars[(iend-i)-1].g,m_stars[(iend-i)-1].b,255);
????????????glBegin(GL_QUADS); //?開始繪制紋理映射過的四邊形
????????????glTexCoord2f(0.0f,?0.0f);?glVertex3f(-1.0f,-1.0f,?0.0f);
????????????glTexCoord2f(1.0f,?0.0f);?glVertex3f(?1.0f,-1.0f,?0.0f);
????????????glTexCoord2f(1.0f,?1.0f);?glVertex3f(?1.0f,?1.0f,?0.0f);
????????????glTexCoord2f(0.0f,?1.0f);?glVertex3f(-1.0f,?1.0f,?0.0f);
????????????glEnd(); //?四邊形繪制結(jié)束
????????}
????????//現(xiàn)在繪制第二遍的星星。唯一和前面的代碼不同的是這一遍的星星肯定會被繪制，并且這次的星星繞著z軸旋轉(zhuǎn)。
????????glRotatef(m_spin,0.0f,0.0f,1.0f);?//?Z軸旋轉(zhuǎn)星星
????????//?使用byte型數(shù)值指定一個顏色
????????glColor4ub(m_stars[i].r,m_stars[i].g,m_stars[i].b,255);
????????glBegin(GL_QUADS); ??//?開始繪制紋理映射過的四邊形
????????glTexCoord2f(0.0f,?0.0f);?glVertex3f(-1.0f,-1.0f,?0.0f);
????????glTexCoord2f(1.0f,?0.0f);?glVertex3f(?1.0f,-1.0f,?0.0f);
????????glTexCoord2f(1.0f,?1.0f);?glVertex3f(?1.0f,?1.0f,?0.0f);
????????glTexCoord2f(0.0f,?1.0f);?glVertex3f(-1.0f,?1.0f,?0.0f);
????????glEnd(); ??????//?四邊形繪制結(jié)束
????????//以下的代碼代表星星的運(yùn)動。我們增加spin的值來旋轉(zhuǎn)所有的星星(公轉(zhuǎn))。
????????//然后，將每顆星星的自轉(zhuǎn)角度增加loop/num。這使離中心更遠(yuǎn)的星星轉(zhuǎn)的更快。
????????//最后減少每顆星星離屏幕中心的距離。這樣看起來，星星們好像被不斷地吸入屏幕的中心。
????????m_spin+=0.01f; ????//?星星的公轉(zhuǎn)
????????m_stars[i].angle+=float(i)/iend;????//?改變星星的自轉(zhuǎn)角度
????????m_stars[i].dist-=0.01f; //?改變星星離中心的距離
????????//接著幾行檢查星星是否已經(jīng)碰到了屏幕中心。當(dāng)星星碰到屏幕中心時，
????????//我們?yōu)樗x一個新顏色，然后往外移5個單位，這顆星星將踏上它回歸屏幕中心的旅程。
????????if?(m_stars[i].dist<0.0f) //?星星到達(dá)中心了么
????????{
????????????m_stars[i].dist+=5.0f; //?往外移5個單位
????????????m_stars[i].r=qrand()%256; //?賦一個新紅色分量
????????????m_stars[i].g=qrand()%256; //?賦一個新綠色分量
????????????m_stars[i].b=qrand()%256; //?賦一個新藍(lán)色分量
????????}
????}
}
void?Lesson8::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);??????????????//?啟用深度測試
//????glDepthFunc(GL_LEQUAL);???????????????//?深度測試類型
????//?接著告訴OpenGL我們希望進(jìn)行最好的透視修正。這會十分輕微的影響性能。但使得透視圖看起來好一點(diǎn)。
????glHint(GL_PERSPECTIVE_CORRECTION_HINT,?GL_NICEST);
????glBlendFunc(GL_SRC_ALPHA,GL_ONE); ??//?基于源象素alpha通道值的半透明混合函數(shù)
????glEnable(GL_BLEND); ??????????????//?打開混合
????//以下是新增的代碼。設(shè)置了每顆星星的起始角度、距離、和顏色。您會注意到修改結(jié)構(gòu)的屬性有多容易。
????//全部50顆星星都會被循環(huán)設(shè)置。
????for?(int?i?=?0,?iend?=?starCount;?isetFormat(requestedFormat());
????????m_context->create();
????????needsInitialize?=?true;
????}
????m_context->makeCurrent(this);
????if?(needsInitialize)?{
????????initializeOpenGLFunctions();
????????initialize();
????}
????render();
????m_context->swapBuffers(this);
}
void?Lesson8::loadGLTexture()
{
????QImage?image(":/image/Star.bmp");
????image?=?image.convertToFormat(QImage::Format_RGB888);
????image?=?image.mirrored();
????glGenTextures(1,?&m_texture[0]);//?創(chuàng)建一個紋理
????//?創(chuàng)建一個線性濾波紋理
????glBindTexture(GL_TEXTURE_2D,?m_texture[0]);
????glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
????glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
????glTexImage2D(GL_TEXTURE_2D,?0,?GL_RGB,?image.width(),?image.height(),
?????????????????0,?GL_RGB,?GL_UNSIGNED_BYTE,?image.bits());
}
void?Lesson8::exposeEvent(QExposeEvent?*event)
{
????Q_UNUSED(event);
????if?(isExposed())
????{
????????renderNow();
????}
}
void?Lesson8::resizeEvent(QResizeEvent?*event)
{
????Q_UNUSED(event);
????if?(isExposed())
????{
????????renderNow();
????}
}
void?Lesson8::keyPressEvent(QKeyEvent?*event)
{
????int?key=event->key();
????switch(key)
????{
????case?Qt::Key_T:
????{
????????m_twinkle=!m_twinkle;?//?控制閃爍
????????break;
????}
????case?Qt::Key_Up:
????{
????????m_tilt-=0.5f;
????????break;
????}
????case?Qt::Key_Down:
????{
????????m_tilt+=0.5f;
????????break;
????}
????case?Qt::Key_Right:
????{
????????m_zoom-=0.2f;
????????break;
????}
????case?Qt::Key_Left:
????{
????????m_zoom+=0.2f;
????????break;
????}
????}
????if(key==Qt::Key_T||key==Qt::Key_Up||key==Qt::Key_Down||key==Qt::Key_Right||key==Qt::Key_Left)
????{
????????renderNow();
????}
}main.cpp
#include#includeint?main(int?argc,?char?*argv[])
{
????QGuiApplication?app(argc,?argv);
????QSurfaceFormat?format;
????format.setSamples(16);
????Lesson8?window;
????window.setFormat(format);
????window.resize(640,?480);
????window.show();
????return?app.exec();
}運(yùn)行效果（通過方向鍵可得到下圖）
按鍵控制
T鍵：打開和關(guān)閉星星閃爍效果
Left和Right：控制星星的遠(yuǎn)近
Up和Down：控制星星的傾角
下載文檔
