Qt5版NeHe OpenGL教程之八：3D空間中移動(dòng)圖像

歡迎進(jìn)入第八課。到現(xiàn)在為止，您應(yīng)該很好的理解OpenGL了。您已經(jīng)學(xué)會(huì)了設(shè)置一個(gè)OpenGL窗口的每個(gè)細(xì)節(jié)。學(xué)會(huì)在旋轉(zhuǎn)的物體上貼圖并打上光線(xiàn)以及混色(透明)處理。

? ? ? ?這一課應(yīng)該算是第一課中級(jí)教程。您將學(xué)到如下的知識(shí)：在3D場(chǎng)景中移動(dòng)位圖，并去除位圖上的黑色象素(使用混色)。接著為黑白紋理上色，最后您將學(xué)會(huì)創(chuàng)建豐富的色彩，并把上過(guò)不同色彩的紋理相互混合，得到簡(jiǎn)單的動(dòng)畫(huà)效果。

lesson8.h

#ifndef?LESSON8_H
#define?LESSON8_H

#include#include#includetypedef?struct		//?為星星創(chuàng)建一個(gè)結(jié)構(gòu)
{
????int?r,?g,?b;	//?星星的顏色
????GLfloat?dist;	//?星星距離中心的距離
????GLfloat?angle;	//?當(dāng)前星星所處的角度，自轉(zhuǎn)角度
}stars;				//?結(jié)構(gòu)命名為stars

const?int?starCount?=?50;?//?星星的個(gè)數(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?*);?//?鍵盤(pán)事件

private:
????void?loadGLTexture();

private:
????QOpenGLContext?*m_context;

????bool?m_twinkle;?//?twinkle用來(lái)跟蹤閃爍效果是否啟用
????QVectorm_stars;
????GLfloat	m_zoom;	//?星星離觀(guān)察者的距離
????GLfloat?m_tilt;	//?星星的傾角
????GLfloat	m_spin;	//?閃爍星星的公轉(zhuǎn)角度
????GLuint	m_texture[1];?//?存放一個(gè)紋理
};

#endif?//?LESSON8_H

lesson8.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();				???????????//?繪制每顆星星之前，重置模型觀(guān)察矩陣
????????glTranslatef(0.0f,0.0f,m_zoom);			???//?深入屏幕里面
????????glRotatef(m_tilt,1.0f,0.0f,0.0f);		???//?傾斜視角,初始為90°，此時(shí)Y軸正向是指向觀(guān)察者的。
????????//現(xiàn)在我們來(lái)移動(dòng)星星。星星開(kāi)始時(shí)位于屏幕的中心。我們要做的第一件事是把場(chǎng)景沿Y軸旋轉(zhuǎn)。
????????//第二行代碼沿x軸移動(dòng)一個(gè)正值。通常x軸上的正值代表移向了屏幕的右側(cè)(也就是通常的x軸的正向)，但這里由于我們繞y軸旋轉(zhuǎn)了坐標(biāo)系，
????????//x軸的正向可以是任意方向。
????????glRotatef(m_stars[i].angle,0.0f,1.0f,0.0f);	//?旋轉(zhuǎn)至當(dāng)前所畫(huà)星星的角度
????????glTranslatef(m_stars[i].dist,0.0f,0.0f);	//?X軸正向移動(dòng)
????????//接著的代碼帶點(diǎn)小技巧。星星實(shí)際上是一個(gè)平面的紋理?，F(xiàn)在您在屏幕中心畫(huà)了個(gè)平面的四邊形然后貼上紋理，這看起來(lái)很不錯(cuò)。
????????//但是當(dāng)經(jīng)過(guò)X軸和Y軸的旋轉(zhuǎn)以后，星星的正面并沒(méi)對(duì)著我們，如果傾斜角我餓90°，那么所有的星星
????????//看起來(lái)就是一條細(xì)線(xiàn)。這不是我們所想要的。我們希望星星永遠(yuǎn)正面朝著我們，而不管屏幕如何旋轉(zhuǎn)或傾斜。
????????//我們通過(guò)在繪制星星之前，抵消對(duì)星星所作的任何旋轉(zhuǎn)來(lái)實(shí)現(xiàn)這個(gè)愿望。您可以采用逆序來(lái)抵消旋轉(zhuǎn)。
????????//當(dāng)我們傾斜屏幕時(shí)，我們實(shí)際上以當(dāng)前角度旋轉(zhuǎn)了星星。通過(guò)逆序，我們又以當(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，我們?cè)谄聊簧舷犬?huà)一次不旋轉(zhuǎn)的星星：將星星總數(shù)(num)?減去當(dāng)前的星星數(shù)(loop)再減去1，
????????//來(lái)提取每顆星星的不同顏色(這么做是因?yàn)檠h(huán)范圍從0到num-1)。舉例來(lái)說(shuō)，結(jié)果為10的時(shí)候，我們就使用10號(hào)星星的顏色。
????????//這樣相鄰星星的顏色總是不同的。這不是個(gè)好法子，但很有效。最后一個(gè)值是alpha通道分量。這個(gè)值越小，這顆星星就越暗。
????????//由于啟用了twinkle，每顆星星最后會(huì)被繪制兩遍。程序運(yùn)行起來(lái)會(huì)慢一些，這要看您的機(jī)器性能如何了。
????????//但兩遍繪制的星星顏色相互融合，會(huì)產(chǎn)生很棒的效果。同時(shí)由于第一遍的星星沒(méi)有旋轉(zhuǎn)，啟用twinkle后的星星看起來(lái)有一種動(dòng)畫(huà)效果。
????????//(如果您這里看不懂得話(huà)，就自己去看程序的運(yùn)行效果吧。)
????????//值得注意的是給紋理上色是件很容易的事。盡管紋理本身是黑白的，紋理將變成我們?cè)诶L制它之前選定的任意顏色。
????????//此外，同樣值得注意的是我們?cè)谶@里使用的顏色值是byte型的，而不是通常的浮點(diǎn)數(shù)。甚至alpha通道分量也是如此。
????????if?(m_twinkle)				//?啟用閃爍效果
????????{
????????????//?使用byte型數(shù)值指定一個(gè)顏色
????????????glColor4ub(m_stars[(iend-i)-1].r,m_stars[(iend-i)-1].g,m_stars[(iend-i)-1].b,255);
????????????glBegin(GL_QUADS);		//?開(kāi)始繪制紋理映射過(guò)的四邊形
????????????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)在繪制第二遍的星星。唯一和前面的代碼不同的是這一遍的星星肯定會(huì)被繪制，并且這次的星星繞著z軸旋轉(zhuǎn)。
????????glRotatef(m_spin,0.0f,0.0f,1.0f);?//?Z軸旋轉(zhuǎn)星星
????????//?使用byte型數(shù)值指定一個(gè)顏色
????????glColor4ub(m_stars[i].r,m_stars[i].g,m_stars[i].b,255);
????????glBegin(GL_QUADS);				??//?開(kāi)始繪制紋理映射過(guò)的四邊形
????????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)動(dòng)。我們?cè)黾觭pin的值來(lái)旋轉(zhuǎn)所有的星星(公轉(zhuǎn))。
????????//然后，將每顆星星的自轉(zhuǎn)角度增加loop/num。這使離中心更遠(yuǎn)的星星轉(zhuǎn)的更快。
????????//最后減少每顆星星離屏幕中心的距離。這樣看起來(lái)，星星們好像被不斷地吸入屏幕的中心。
????????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)星星碰到屏幕中心時(shí)，
????????//我們?yōu)樗x一個(gè)新顏色，然后往外移5個(gè)單位，這顆星星將踏上它回歸屏幕中心的旅程。
????????if?(m_stars[i].dist<0.0f)			//?星星到達(dá)中心了么
????????{
????????????m_stars[i].dist+=5.0f;			//?往外移5個(gè)單位
????????????m_stars[i].r=qrand()%256;		//?賦一個(gè)新紅色分量
????????????m_stars[i].g=qrand()%256;		//?賦一個(gè)新綠色分量
????????????m_stars[i].b=qrand()%256;		//?賦一個(gè)新藍(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);??????????????//?啟用深度測(cè)試
//????glDepthFunc(GL_LEQUAL);???????????????//?深度測(cè)試類(lèi)型
????//?接著告訴OpenGL我們希望進(jìn)行最好的透視修正。這會(huì)十分輕微的影響性能。但使得透視圖看起來(lái)好一點(diǎn)。
????glHint(GL_PERSPECTIVE_CORRECTION_HINT,?GL_NICEST);

????glBlendFunc(GL_SRC_ALPHA,GL_ONE);	??//?基于源象素alpha通道值的半透明混合函數(shù)
????glEnable(GL_BLEND);		??????????????//?打開(kāi)混合

????//以下是新增的代碼。設(shè)置了每顆星星的起始角度、距離、和顏色。您會(huì)注意到修改結(jié)構(gòu)的屬性有多容易。
????//全部50顆星星都會(huì)被循環(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)建一個(gè)紋理
????//?創(chuàng)建一個(gè)線(xiàn)性濾波紋理
????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)行效果（通過(guò)方向鍵可得到下圖）

按鍵控制

T鍵：打開(kāi)和關(guān)閉星星閃爍效果

Left和Right：控制星星的遠(yuǎn)近

Up和Down：控制星星的傾角