第25課：變形和從檔案中載入3D物體 (參照NeHe)

這次教程中，我們將學會如何從檔案中載入3D模型，並且平滑的從一個模型變形為另一個模型。在這一課裡，我們將介紹如何實現模型的變形過程，這將會是效果很棒的一課！

程式執行時效果如下：

下面進入教程：

我們這次將在第01課的基礎上修改程式碼，其中一些在前面教程中反覆出現的，我就不會多解釋了。首先開啟myglwidget.h檔案，將類宣告更改如下：

#ifndef MYGLWIDGET_H
#define MYGLWIDGET_H

#include <QWidget>
#include <QGLWidget>

struct VERTEX                                       //頂點結構體
{
    float x, y, z;
};

struct OBJECT                                       //物體結構體
{
    int verts;                                      //物體中頂點的個數
    QVector<VERTEX> vPoints;                        //包含頂點資料的向量
};

class MyGLWidget : public QGLWidget
{
    Q_OBJECT
public:
    explicit MyGLWidget(QWidget *parent = 0);
    ~MyGLWidget();

protected:
    //對3個純虛擬函式的重定義
    void initializeGL();
    void resizeGL(int w, int h);
    void paintGL();

    void keyPressEvent(QKeyEvent *event);           //處理鍵盤按下事件

private:
    void loadObject(QString filename, OBJECT *k);   //從檔案載入一個模型
    VERTEX calculate(int i);                        //計算第i個頂點變形過程每一步的位移

private:
    bool fullscreen;                                //是否全屏顯示

    GLfloat m_xRot;                                 //x軸旋轉角度
    GLfloat m_yRot;                                 //y軸旋轉角度
    GLfloat m_zRot;                                 //z軸旋轉角度
    GLfloat m_xSpeed;                               //x軸旋轉速度
    GLfloat m_ySpeed;                               //y軸旋轉速度
    GLfloat m_zSpeed;                               //z軸旋轉速度
    GLfloat m_xPos;                                 //x軸座標
    GLfloat m_yPos;                                 //y軸座標
    GLfloat m_zPos;                                 //z軸座標

    int m_Key;                                      //物體的標示符
    int m_Step;                                     //當前變形步數
    int m_Steps;                                    //變形的總步數
    bool m_MorphOrNot;                              //是否在變形過程

    OBJECT m_Morph1;                                //要繪製的4個物體
    OBJECT m_Morph2;
    OBJECT m_Morph3;
    OBJECT m_Morph4;
    OBJECT m_Helper;                                //協助繪製變形過程的物體(中間模型)
    OBJECT *m_Src;                                  //變形的源物體
    OBJECT *m_Dest;                                 //變形的目標物體
};

#endif // MYGLWIDGET_H
 

可以看到我們定義了2個結構體，依次表示頂點和物體模型。由於我們是通過點來繪製物體模型的（不使用紋理），因此一個物體模型包含許多頂點，並且我們的頂點資料只需要空間座標x、y、z的值而不需要紋理座標。定義完後，我們定義OBJECT物件m_Morph1、m_Morph2、m_Morph3、m_Morph4來儲存我們要繪製的四個物體模型的資料，m_Helper來儲存中間模型（變形過程）的資料，OBJECT指標來指定變形過程的源物體和目標物體。

其他增加的變數，前9個與x、y、z相關的變數是用於控制平移和旋轉的，整形變數m_Key表示當前的模型型別，m_Step儲存當前變形過程的步數，m_Steps儲存變形過程需要的總步數，布林變數m_MorphOrNot表示當前是否在變形過程。

然後是兩個新增的函式loadObject()和calculate()，前一個函式用於從檔案中向目標物體模型載入資料，後一個函式用於計算第i個頂點在變換過程中每一步的位移。

接下來，我們需要開啟myglwidget.cpp，加上宣告#include <QTimer>、#include <QTextStream>，由於loadObejct()函式需要在建構函式中被呼叫，我們把兩者放在一起講，具體程式碼如下：

void MyGLWidget::loadObject(QString filename, OBJECT *k)//從檔案載入一個模型
{
    QFile file(filename);
    file.open(QIODevice::ReadOnly | QIODevice::Text);   //將要讀入資料的文字開啟
    QTextStream in(&file);
    QString line = in.readLine();                       //讀入第一行
    sscanf(line.toUtf8(), "Vertices: %d\n", &k->verts); //獲取物體頂點的個數

    for (int i=0; i<k->verts; i++)                      //迴圈儲存每個頂點的資料
    {
        do                                              //讀入資料並保證資料有效
        {
            line = in.readLine();
        }
        while (line[0] == '/' || line == "");

        VERTEX object;
        QTextStream inLine(&line);
        inLine >> object.x
               >> object.y
               >> object.z;
        k->vPoints.push_back(object);
    }

    file.close();
}
 

MyGLWidget::MyGLWidget(QWidget *parent) :
    QGLWidget(parent)
{
    fullscreen = false;

    m_xRot = 0.0f;
    m_yRot = 0.0f;
    m_zRot = 0.0f;
    m_xSpeed = 0.0f;
    m_ySpeed = 0.0f;
    m_zSpeed = 0.0f;
    m_xPos = 0.0f;
    m_yPos = 0.0f;
    m_zPos = -10.0f;

    m_Key = 1;                                              //當前模型為球
    m_Step = 0;
    m_Steps = 200;
    m_MorphOrNot = false;

    loadObject("D:/QtOpenGL/QtImage/Sphere.txt", &m_Morph1);//載入球模型
    loadObject("D:/QtOpenGL/QtImage/Torus.txt", &m_Morph2); //載入圓環模型
    loadObject("D:/QtOpenGL/QtImage/Tube.txt", &m_Morph3);  //載入立方體模型
    m_Morph4.verts = 486;
    for (int i=0; i<m_Morph4.verts; i++)                    //隨機設定486個頂點在[-7,7]
    {
        VERTEX object;
        object.x = ((float)(rand()%14000)/1000)-7;
        object.y = ((float)(rand()%14000)/1000)-7;
        object.z = ((float)(rand()%14000)/1000)-7;
        m_Morph4.vPoints.push_back(object);
    }

    loadObject("D:/QtOpenGL/QtImage/Sphere.txt", &m_Helper);//初始化中間模型為球
    m_Src = m_Dest = &m_Morph1;                             //源模型和目標模型都設定為球

    QTimer *timer = new QTimer(this);                       //建立一個定時器
    //將定時器的計時訊號與updateGL()繫結
    connect(timer, SIGNAL(timeout()), this, SLOT(updateGL()));
    timer->start(10);                                       //以10ms為一個計時週期
}

首先是loadObject()函式。首先將檔案開啟，再利用Qt的文字流(QTextStream)先讀取第一行，由於我們檔案的第一行是預先按照“Vertices: x”(x為一個整數)的格式寫好的，我們利用sscanf()函式，讀取並儲存該物體模型k的頂點個數。然後利用迴圈，一行一行的讀取資料並保證讀入的資料是有效的。每當成功讀入一個數據時，就建立一個頂點結構體來儲存這些資料，並在最後把頂點放入物體模型k中。最後錄完資料後，關上檔案。

再來看建構函式。前面一堆變數的值得初始化我覺得沒什麼好說的，寫完程式大家也就明白了，我們直接看呼叫loadObject()函式的部分。我們直接呼叫了三次loadObject()函式，把三個檔案中的模型資料分別儲存到m_Morph1、m_Morph2和m_Morph3中。然後第四個模型我們不從檔案讀取，我們在(-7, -7, -7)到(7, 7, 7)之間隨機生成模型點，當然它和我們前面載入的模型都一樣具有486個頂點。最後我們把中間模型初始化為球體，並源模型和目標模型都設定為球體（這代表初設狀態為球體，因此m_Key應該初始化為1）。

接下來，我們把calculate()函式和initializeGL()函式放在一起解釋，具體程式碼如下：

void MyGLWidget::initializeGL()                         //此處開始對OpenGL進行所以設定
{
    glClearColor(0.0, 0.0, 0.0, 0.0);                   //黑色背景
    glShadeModel(GL_SMOOTH);                            //啟用陰影平滑
    glClearDepth(1.0);                                  //設定深度快取
    glEnable(GL_DEPTH_TEST);                            //啟用深度測試
    glDepthFunc(GL_LESS);                               //所作深度測試的型別
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);  //告訴系統對透視進行修正
    glBlendFunc(GL_SRC_ALPHA, GL_ONE);
}

VERTEX MyGLWidget::calculate(int i)                     //計算第i個頂點變形過程每一步的位移
{
    VERTEX a;
    a.x = (m_Src->vPoints[i].x - m_Dest->vPoints[i].x) / m_Steps;
    a.y = (m_Src->vPoints[i].y - m_Dest->vPoints[i].y) / m_Steps;
    a.z = (m_Src->vPoints[i].z - m_Dest->vPoints[i].z) / m_Steps;
    return a;
}

先是initializeGL()函式。注意到唯一的改動就是glDepthFunc()函式的引數由GL_LEQUAL變為GL_LESS，兩者的區別在於，當深度相同時LEQUAL顯示的是最先繪製的畫素，而GL_LESS顯示的是最新繪製的畫素。具體為什麼要修改，下面會講到。

然後是calculate()函式。我們定義了一個VERTEX物件a，然後用源物件和目標物件的x、y、z座標的差值除以我們變形過程的總步數保存於a中，再將a返回。這樣a中就儲存了從源模型變形到目標模型每一步應該進行的位移。我們通過指標m_Src和m_Dest知道哪個是源模型，哪個是目標模型。

然後我們來進入重點的paintGL()函式，但其實它並不難，具體程式碼如下：

void MyGLWidget::paintGL()                              //從這裡開始進行所以的繪製
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //清除螢幕和深度快取
    glLoadIdentity();                                   //重置當前的模型觀察矩陣
    glTranslatef(m_xPos, m_yPos, m_zPos);               //平移和旋轉
    glRotatef(m_xRot, 1.0f, 0.0f, 0.0f);
    glRotatef(m_yRot, 0.0f, 1.0f, 0.0f);
    glRotatef(m_zRot, 0.0f, 0.0f, 1.0f);

    GLfloat tx, ty, tz;                                 //頂點座標臨時變數
    VERTEX q;                                           //儲存計算的臨時頂點
    glBegin(GL_POINTS);                                 //點繪製開始
        for (int i=0; i<m_Morph1.verts; i++)            //迴圈繪製每一個頂點
        {
            if (m_MorphOrNot)
            {
                q = calculate(i);
            }
            else
            {
                q.x = 0.0f;
                q.y = 0.0f;
                q.z = 0.0f;
            }

            m_Helper.vPoints[i].x -= q.x;               //如果在變形過程，則計算中間模型
            m_Helper.vPoints[i].y -= q.y;
            m_Helper.vPoints[i].z -= q.z;
            tx = m_Helper.vPoints[i].x;                 //儲存計算結果到tx、ty、tz中
            ty = m_Helper.vPoints[i].y;
            tz = m_Helper.vPoints[i].z;

            glColor3f(0.0f, 1.0f, 1.0f);                //設定顏色
            glVertex3f(tx, ty, tz);                     //繪製頂點

            glColor3f(0.0f, 0.5f, 1.0f);                //把顏色變藍一些
            tx -= 2*q.x;                                //如果在變形過程，則繪製2步後的頂點
            ty -= 2*q.y;
            tz -= 2*q.z;
            glVertex3f(tx, ty, tz);

            glColor3f(0.0f, 0.0f, 1.0f);                //把顏色變藍一些
            tx -= 2*q.x;                                //如果在變形過程，則繪製2步後的頂點
            ty -= 2*q.y;
            tz -= 2*q.z;
            glVertex3f(tx, ty, tz);
        }
    glEnd();                                            //繪製結束

    if (m_MorphOrNot && (m_Step <= m_Steps))
    {
        m_Step++;                                       //如果在變形過程則把當前變形步數增加
    }
    else
    {
        m_MorphOrNot = false;                           //當前變形步數大於總步數時，退出變形過程
        m_Src = m_Dest;
        m_Step = 0;
    }

    m_xRot += m_xSpeed;                                 //自動增加旋轉角度
    m_yRot += m_ySpeed;
    m_zRot += m_zSpeed;
}

首先我們就走常規步驟，清除螢幕和快取，重置模型觀察矩陣，平移和旋轉。接下來，我們迴圈繪製模型的每一個點，如果在變形過程，則計算得到變形過程每一步的應該進行的位移，儲存在q中，否則q中的各方向位移量均設定為0.0f。然後我們讓m_Helper，移動q對應的位移，如果在變形過程，則m_Helper繪製出來的是下一步移動後的樣子，否則由於q各方向位移量均設定為0.0f，不會移動（此時是變形完成的模型，當然不需要移動）。

下面我們設定顏色為藍色，繪製頂點；然後把顏色變藍一些，把前面一個點的各方向座標均減去2倍的位移量，如果在變形過程就會得到2步後的位置，否則還是在原位置，接著就繪製這個頂點。同樣再重複一次相似的工作，就是把顏色再變藍一些。上面的3次繪製可以看到，如果在變形過程，則三個點會錯開，形成一個比較長的點，顏色從藍綠色到藍色漸變（其實就看得到頭尾顏色不一樣）；如果不在變形過程，3次繪製其實是在同一個地方繪製的，那會顯示哪種顏色呢？我們上面講到我們把glDepthFunc()函式的引數設為GL_LESS，當繪製深度相同時顯示的是最先繪製的，所以模型會顯示出藍綠色（當然你可以把引數改回GL_LEQUAL就顯示成藍色，全憑個人喜好）。

最後我們當前是否為變形過程，如果是判斷變形過程是否完成（否就保持原狀沒什麼解釋的），如果未完成則增加當前的步數，等待下一次繪製；如果完成了就設定m_MorphOrNot為false，m_Step為0，m_Src與m_Dest相同。函式結束前，我們根據旋轉速度增加旋轉角度，讓物體模型自動旋轉起來。

最後，我們來修改我們的鍵盤控制函式，不會很難，不過加的控制鍵真不少，具體程式碼如下：

void MyGLWidget::keyPressEvent(QKeyEvent *event)
{
    switch (event->key())
    {
    case Qt::Key_F1:                                    //F1為全屏和普通屏的切換鍵
        fullscreen = !fullscreen;
        if (fullscreen)
        {
            showFullScreen();
        }
        else
        {
            showNormal();
        }
        break;
    case Qt::Key_Escape:                                //ESC為退出鍵
        close();
        break;

    case Qt::Key_PageUp:                                //PageUp按下增加m_zSpeed
        m_zSpeed += 0.1f;
        break;
    case Qt::Key_PageDown:                              //PageDown按下減少m_zSpeed
        m_zSpeed -= 0.1f;
        break;
    case Qt::Key_Down:                                  //Down按下增加m_xSpeed
        m_xSpeed += 0.1f;
        break;
    case Qt::Key_Up:                                    //Up按下減少m_xSpeed
        m_xSpeed -= 0.1f;
        break;
    case Qt::Key_Right:                                 //Right按下增加m_ySpeed
        m_ySpeed += 0.1f;
        break;
    case Qt::Key_Left:                                  //Left按下減少m_ySpeed
        m_ySpeed -= 0.1f;
        break;

    case Qt::Key_Q:                                     //Q按下放大物體
        m_zPos -= 0.1f;
        break;
    case Qt::Key_Z:                                     //Z按下縮小物體
        m_zPos += 0.1f;
        break;
    case Qt::Key_W:                                     //W按下上移物體
        m_yPos -= 0.1f;
        break;
    case Qt::Key_S:                                     //S按下下移物體
        m_yPos += 0.1f;
        break;
    case Qt::Key_D:                                     //D按下右移物體
        m_xPos -= 0.1f;
        break;
    case Qt::Key_A:                                     //A按下左移物體
        m_xPos += 0.1f;
        break;

    case Qt::Key_1:                                     //1按下進入變形過程，變形到模型1
        if ((m_Key != 1) && !m_MorphOrNot)
        {
            m_Key = 1;
            m_MorphOrNot = true;
            m_Dest = &m_Morph1;
        }
        break;
    case Qt::Key_2:                                     //2按下進入變形過程，變形到模型2
        if ((m_Key != 2) && !m_MorphOrNot)
        {
            m_Key = 2;
            m_MorphOrNot = true;
            m_Dest = &m_Morph2;
        }
        break;
    case Qt::Key_3:                                     //3按下進入變形過程，變形到模型3
        if ((m_Key != 3) && !m_MorphOrNot)
        {
            m_Key = 3;
            m_MorphOrNot = true;
            m_Dest = &m_Morph3;
        }
        break;
    case Qt::Key_4:                                     //4按下進入變形過程，變形到模型4
        if ((m_Key != 4) && !m_MorphOrNot)
        {
            m_Key = 4;
            m_MorphOrNot = true;
            m_Dest = &m_Morph4;
        }
        break;
    }
}

新增的前12個關於旋轉和平移的我就不解釋了，我們看下最後4個鍵。當按下數字1、2、3或4時，我們會判斷是否為當前狀態以及當前是否在變形過程，如果都不是，則允許進行變形，進入變形過程（修改m_Key和m_Dest並設定m_MorphOrNot為true）。

現在就可以執行程式檢視效果了！