OpenGL學習筆記之三角形篇

在計算機圖形中三角形就如所有程式語言中的“hello world！”。所以接下來我們將要畫一個三角形。

在上一個篇部落格我已經講過OpenGL的環境配此次就不再詳細說明了（OpenGL的執行環境配置）。

參考資料（非常好OpenGL入門教程）有中文版的，大家可以去看看，講的非常仔細。

本篇將會用到

• 頂點陣列物件：Vertex Array Object，VAO
• 頂點緩衝物件：Vertex Buffer Object，VBO
• 著色器語言，編譯著色器，連結著色器物件
• 輸入三角形頂點，連結定點屬性

下面我用程式碼講解

#include <glad/glad.h>
 

#include <GLFW/glfw3.h>
#include <iostream>
/*
使用者改變視窗的大小的時候，視口也應該被調整。
我們可以對視窗註冊一個回撥函式(Callback Function)，它會在每次視窗大小被調整的時候被呼叫。
*/
void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);

const unsigned int SCR_WIDTH = 800;//宣告視窗的寬度值
const
 
 unsigned int SCR_HEIGHT = 600;//宣告視窗的高度值

/*頂點著色器(Vertex Shader)是幾個可程式設計著色器中的一個。如果我們打算做渲染的話，
現代OpenGL需要我們至少設定一個頂點和一個片段著色器。
在OpenGL中的著色器語言是GLSL(OpenGL Shading Language)*/
//編寫定點著色器
//可以看到，GLSL看起來很像C語言。
//每個著色器都起始於一個版本宣告。OpenGL 3.3以及和更高版本中，
//GLSL版本號和OpenGL的版本是匹配的（比如說GLSL 420版本對應於OpenGL 4.2）。
const char *vertexShaderSource = "#version 330 core\n"
 

//layout (location = 0)設定了輸入變數的位置值(Location)
//in關鍵字，在頂點著色器中宣告所有的輸入頂點屬性(Input Vertex Attribute)
    "layout (location = 0) in vec3 aPos;\n"
    "void main()\n"
    "{\n"
    //在GLSL中一個向量有最多4個分量，每個分量值都代表空間中的一個座標，
    //它們可以通過vec.x、vec.y、vec.z和vec.w來獲取。
    //注意vec.w分量不是用作表達空間中的位置的（我們處理的是3D不是4D），
    //而是用在所謂透視除法(Perspective Division)上。
    //為了設定頂點著色器的輸出，我們必須把位置資料賦值給預定義的gl_Position變數，
    //它在幕後是vec4型別的。在main函式的最後，我們將gl_Position設定的值會成為該頂點著色器的輸出。
    "   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
    "}\0";
//編寫片段著色器
//在計算機圖形中顏色被表示為有4個元素的陣列：紅色、綠色、藍色和alpha(透明度)分量，
//通常縮寫為RGBA。當在OpenGL或GLSL中定義一個顏色的時候，我們把顏色每個分量的強度設定在0.0到1.0之間。
//比如說我們設定紅為1.0f，綠為1.0f，我們會得到兩個顏色的混合色，即黃色。
//這三種顏色分量的不同調配可以生成超過1600萬種不同的顏色！
const char *fragmentShaderSource = "#version 330 core\n"
//片段著色器只需要一個輸出變數，這個變數是一個4分量向量，它表示的是最終的輸出顏色，
//out關鍵字宣告輸出變數，這裡我們命名為FragColor
    "out vec4 FragColor;\n"
    "void main()\n"
    "{\n"
    "   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
    "}\n\0";

int main()
{
    /*
     *首先，我們在main函式中呼叫glfwInit函式來初始化GLFW，
     *然後我們可以使用glfwWindowHint函式來配置GLFW。
     *glfwWindowHint函式的第一個引數代表選項的名稱，
     *我們可以從很多以GLFW_開頭的列舉值中選擇；
     *第二個引數接受一個整形，用來設定這個選項的值。
    */   
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    /*
     *glfwCreateWindow函式需要視窗的寬和高作為它的前兩個引數。
     *第三個引數表示這個視窗的名稱（標題），這裡我們使用"LearnOpenGL"，
    */
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    /*
    GLAD是用來管理OpenGL的函式指標的，所以在呼叫任何OpenGL的函式之前我們需要初始化GLAD。
    */
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    //構建和編譯我們的著色程式。
    // 定點著色器
    //建立一個著色器物件，注意還是用ID來引用的。
    //所以我們儲存這個頂點著色器為unsigned int，然後用glCreateShader建立這個著色器
    //由於我們正在建立一個頂點著色器，傳遞的引數是GL_VERTEX_SHADER。
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
    //下一步我們把這個著色器原始碼附加到著色器物件上，然後編譯它：
    //glShaderSource函式把要編譯的著色器物件作為第一個引數。
    //第二引數指定了傳遞的原始碼字串數量，這裡只有一個。
    //第三個引數是頂點著色器真正的原始碼，第四個引數我們先設定為NULL。
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);
    // 檢查著色器是否編譯錯誤
    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    // 片段著色器
    //編譯片段著色器的過程與頂點著色器類似，只不過我們使用GL_FRAGMENT_SHADER常量作為著色器型別
    int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);
    // 檢查著色器編譯錯誤
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    //著色器程式物件(Shader Program Object)是多個著色器合併之後並最終連結完成的版本。
    //如果要使用剛才編譯的著色器我們必須把它們連結(Link)為一個著色器程式物件，
    //然後在渲染物件的時候啟用這個著色器程式。已啟用著色器程式的著色器將在我們傳送渲染呼叫的時候被使用。
    // 連結著色器
    //建立一個程式物件
    int shaderProgram = glCreateProgram();
    //glCreateProgram函式建立一個程式，並返回新建立程式物件的ID引用。
    //現在我們需要把之前編譯的著色器附加到程式物件上，然後用glLinkProgram連結它們
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    //程式碼應該很清楚，我們把著色器附加到了程式上，然後用glLinkProgram連結。
    glLinkProgram(shaderProgram);
    // 檢查著色器是否連結錯誤
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success) {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }
    //在把著色器物件連結到程式物件以後，記得刪除著色器物件，我們不再需要它們了
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

    //設定頂點資料(和緩衝區)並配置頂點屬性。
    //三角形的三個定點的座標
    float vertices[] = {
        -0.5f, -0.5f, 0.0f, // 左  
         0.5f, -0.5f, 0.0f, // 右 
         0.0f,  0.5f, 0.0f  // 上   
    }; 
    //頂點緩衝物件就像OpenGL中的其它物件一樣，這個緩衝有一個獨一無二的ID，
    //所以我們可以使用glGenBuffers函式和一個緩衝ID生成一個VBO物件：
    //要想使用VAO，要做的只是使用glBindVertexArray繫結VAO。
    //從繫結之後起，我們應該繫結和配置對應的VBO和屬性指標，之後解綁VAO供之後使用。
    unsigned int VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    // 首先繫結頂點陣列物件，然後繫結和設定頂點緩衝(s)，然後配置頂點屬性。
    glBindVertexArray(VAO);

    //OpenGL有很多緩衝物件型別，頂點緩衝物件的緩衝型別是GL_ARRAY_BUFFER。
    //OpenGL允許我們同時繫結多個緩衝，只要它們是不同的緩衝型別。
    //我們可以使用glBindBuffer函式把新建立的緩衝繫結到GL_ARRAY_BUFFER目標上
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    //我們使用的任何（在GL_ARRAY_BUFFER目標上的）緩衝呼叫都會用來配置當前繫結的緩衝(VBO)。
    //然後我們可以呼叫glBufferData函式，它會把之前定義的頂點資料複製到緩衝的記憶體中
    //它的第一個引數是目標緩衝的型別：頂點緩衝物件當前繫結到GL_ARRAY_BUFFER目標上。
    //第二個引數指定傳輸資料的大小(以位元組為單位)；用一個簡單的sizeof計算出頂點資料大小就行。
    //第三個引數是我們希望傳送的實際資料。
    //第四個引數指定了我們希望顯示卡如何管理給定的資料。
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    //使用glVertexAttribPointer函式告訴OpenGL該如何解析頂點資料（應用到逐個頂點屬性上）了
    //第一個引數指定我們要配置的頂點屬性。
    //還記得我們在頂點著色器中使用layout(location = 0)定義了position頂點屬性的位置值(Location)嗎？
    //它可以把頂點屬性的位置值設定為0。因為我們希望把資料傳遞到這一個頂點屬性中，所以這裡我們傳入0。
    //第二個引數指定頂點屬性的大小。頂點屬性是一個vec3，它由3個值組成，所以大小是3。
    //第三個引數指定資料的型別，這裡是GL_FLOAT(GLSL中vec*都是由浮點數值組成的)。
    //第四個引數定義我們是否希望資料被標準化(Normalize)。
    //如果我們設定為GL_TRUE，所有資料都會被對映到0（對於有符號型signed資料是-1）到1之間。我們把它設定為GL_FALSE。
    //第五個引數叫做步長(Stride)，它告訴我們在連續的頂點屬性組之間的間隔。
    //由於下個組位置資料在3個float之後，我們把步長設定為3 * sizeof(float)。
    //要注意的是由於我們知道這個陣列是緊密排列的（在兩個頂點屬性之間沒有空隙）
    //我們也可以設定為0來讓OpenGL決定具體步長是多少（只有當數值是緊密排列時才可用）。
    //一旦我們有更多的頂點屬性，我們就必須更小心地定義每個頂點屬性之間的間隔，
    //我們在後面會看到更多的例子（這個引數的意思簡單說就是從這個屬性第二次出現的地方到整個陣列0位置之間有多少位元組）。
    //最後一個引數的型別是void*，所以需要我們進行這個奇怪的強制型別轉換。
    //它表示位置資料在緩衝中起始位置的偏移量(Offset)。
    //由於位置資料在陣列的開頭，所以這裡是0。
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    //使用glEnableVertexAttribArray，以頂點屬性位置值作為引數，啟用頂點屬性；頂點屬性預設是禁用的。
    glEnableVertexAttribArray(0);

    // 注意，這是允許的，將glVertexAttribPointer註冊的VBO作為頂點屬性的繫結頂點緩衝物件，
    //這樣我們就可以安全地解除繫結。
    //複製頂點陣列到緩衝中供OpenGL使用
    glBindBuffer(GL_ARRAY_BUFFER, 0); 

    // 之後你可以解除VAO的繫結，這樣其他的VAO呼叫就不會不小心修改這個VAO，但是這種情況很少發生。修改其他 
    // VAOs需要對glBindVertexArray進行呼叫，所以在沒有直接必要的情況下，我們通常不會解繫結VAOs(或VBOs)。
    glBindVertexArray(0); 


    /*
     *我們可以把它稱之為渲染迴圈(Render Loop)，它能在我們讓GLFW退出前一直保持執行
    */
    while (!glfwWindowShouldClose(window))
    {
        processInput(window);

        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);

        // 畫第一個三角形

        //得到的結果就是一個程式物件，我們可以呼叫glUseProgram函式，
        //用剛建立的程式物件作為它的引數，以啟用這個程式物件：
        glUseProgram(shaderProgram);
        //因為我們只有一個VAO，所以沒有必要每次都繫結它，但是我們這樣做是為了讓事情更有組織性。
        glBindVertexArray(VAO); 
        glDrawArrays(GL_TRIANGLES, 0, 3);

        glfwSwapBuffers(window);//函式會交換顏色緩衝（它是一個儲存著GLFW視窗每一個畫素顏色值的大緩衝），它在這一迭代中被用來繪製，並且將會作為輸出顯示在螢幕上。
        glfwPollEvents();//函式檢查有沒有觸發什麼事件（比如鍵盤輸入、滑鼠移動等）、更新視窗狀態，並呼叫對應的回撥函式（可以通過回撥方法手動設定）。
    }

    glfwTerminate();
    return 0;
}

/*
這裡我們檢查使用者是否按下了返回鍵(Esc)（如果沒有按下，glfwGetKey將會返回GLFW_RELEASE。
如果使用者的確按下了返回鍵，
我們將通過glfwSetwindowShouldClose使用把WindowShouldClose屬性設定為 true的方法關閉GLFW。
下一次while迴圈的條件檢測將會失敗，程式將會關閉。
*/
void processInput(GLFWwindow *window)
{
    if(glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

/*
這個幀緩衝大小函式需要一個GLFWwindow作為它的第一個引數，以及兩個整數表示視窗的新維度。
每當視窗改變大小，GLFW會呼叫這個函式並填充相應的引數供你處理。
*/
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    //告訴OpenGL渲染視窗的尺寸大小，即視口(Viewport)
    //glViewport函式前兩個引數控制視窗左下角的位置。第三個和第四個引數控制渲染視窗的寬度和高度（畫素）。
    glViewport(0, 0, width, height);
}