一、前言

通過跟著LearnOpenGL學習2–三角形繪制一文，我們已經知道了怎么配置渲染管線，來繪制三角形；

OpenGL主要處理三角形，當我們需要繪制別的圖形時，例如：四邊形，應當用三角形去拼接，組成我們想要的四邊形；

---

二、元素緩沖對象

元素緩沖對象(Element Buffer Object，EBO)，也叫索引緩沖對象(Index Buffer Object，IBO)

假設我們不再繪制一個三角形，而是繪制一個矩形。我們可以繪制兩個三角形來組成一個矩形（OpenGL主要處理三角形）。

頂點數(shù)據(jù)如下：

float vertices[] = {// 第一個三角形0.5f, 0.5f, 0.0f,   // 右上角0.5f, -0.5f, 0.0f,  // 右下角-0.5f, 0.5f, 0.0f,  // 左上角// 第二個三角形0.5f, -0.5f, 0.0f,  // 右下角-0.5f, -0.5f, 0.0f, // 左下角-0.5f, 0.5f, 0.0f   // 左上角
};

• 一個矩形只有4個而不是6個頂點，可以看到，我們指定了右下角和左上角兩次；
• 這樣就產生50%的額外開銷，當我們有包括上千個三角形的模型之后，這個問題會更糟糕，這會產生一大堆浪費；

更好的解決方案是只儲存不同的頂點，并設定繪制這些頂點的順序；這樣子我們只要儲存4個頂點就能繪制矩形了，之后只要指定繪制的順序就行了；

元素緩沖區(qū)對象的工作方式正是如此，EBO是一個緩沖區(qū)，就像一個頂點緩沖區(qū)對象一樣，它存儲 OpenGL 用來決定要繪制哪些頂點的索引，這種所謂的索引繪制(Indexed Drawing)正是我們問題的解決方案；

定義（不重復的）頂點，和繪制出矩形所需的索引：

float vertices[] = {0.5f, 0.5f, 0.0f,   // 右上角0.5f, -0.5f, 0.0f,  // 右下角-0.5f, -0.5f, 0.0f, // 左下角-0.5f, 0.5f, 0.0f   // 左上角
};unsigned int indices[] = {// 注意索引從0開始! // 此例的索引(0,1,2,3)就是頂點數(shù)組vertices的下標，// 這樣可以由下標代表頂點組合成矩形0, 1, 3, // 第一個三角形1, 2, 3  // 第二個三角形
};

創(chuàng)建元素緩沖對象

unsigned int EBO;
glGenBuffers(1, &EBO);

綁定EBO到GL_ELEMENT_ARRAY_BUFFER緩沖區(qū)

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);

把索引復制到GL_ELEMENT_ARRAY_BUFFER緩沖區(qū)

glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

繪制三角形

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

注意：用glDrawElements函數(shù)來繪制，而不是glDrawArrays函數(shù)；

• 第一個參數(shù)指定了我們繪制的模式，GL_TRIANGLES表示我們要繪制三角形；
• 第二個參數(shù)是我們打算繪制頂點的個數(shù)，這里填6，也就是說我們一共需要繪制6個頂點；
• 第三個參數(shù)是索引的類型，這里是GL_UNSIGNED_INT；
• 最后一個參數(shù)里我們可以指定EBO中的偏移量（或者傳遞一個索引數(shù)組，但是這是當你不在使用索引緩沖對象的時候），但是我們會在這里填寫0；

---

glDrawElements函數(shù)從當前綁定到GL_ELEMENT_ARRAY_BUFFER目標的EBO中獲取其索引。這意味著我們每次想要使用索引渲染對象時都必須綁定相應的EBO，這又有點麻煩。碰巧頂點數(shù)組對象也跟元素緩沖區(qū)對象綁定。在綁定VAO時，綁定的最后一個元素緩沖區(qū)對象存儲為VAO的元素緩沖區(qū)對象。然后，綁定到VAO也會自動綁定該EBO。

最后的初始化和繪制代碼現(xiàn)在看起來像這樣：

// ..:: 初始化代碼 :: ..
// 1. 綁定頂點數(shù)組對象
glBindVertexArray(VAO);
// 2. 把我們的頂點數(shù)組復制到一個頂點緩沖中，供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 復制我們的索引數(shù)組到一個索引緩沖中，供OpenGL使用
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 4. 設定頂點屬性指針
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);[...]// ..:: 繪制代碼（渲染循環(huán)中） :: ..
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glBindVertexArray(0);

---

三、完整代碼

#include "mainwindow.h"
#include <QApplication>//在包含GLFW的頭文件之前包含了GLAD的頭文件;
//GLAD的頭文件包含了正確的OpenGL頭文件（例如GL/gl.h）;
//所以需要在其它依賴于OpenGL的頭文件之前包含GLAD;
#include <glad/glad.h>
#include <GLFW/glfw3.h>#include <iostream>void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;const char *vertexShaderSource = "#version 330 core\n""layout (location = 0) in vec3 aPos;\n""void main()\n""{\n""   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n""}\0";
const char *fragmentShaderSource = "#version 330 core\n""out vec4 FragColor;\n""void main()\n""{\n""   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n""}\n\0";int main(int argc, char *argv[])
{QApplication a(argc, argv);//MainWindow w;//w.show();//初始化GLFW//--------------------glfwInit();//配置GLFW//--------------------//告訴GLFW使用的OpenGL本是3.3glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//告訴GLFW使用的是核心模式（Core-profile）glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//創(chuàng)建一個新的OpenGL環(huán)境和窗口//-----------------------------------GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);if (window == NULL){std::cout << "Failed to create GLFW window" << std::endl;glfwTerminate();    //glfw銷毀窗口喝OpenGL環(huán)境，并釋放資源return -1;}//設置參數(shù)window中的窗口所關聯(lián)的OpenGL環(huán)境為當前環(huán)境//-----------------------------------glfwMakeContextCurrent(window);//設置窗口尺寸改變大小時的回調函數(shù)（窗口尺寸發(fā)送改變時會自動調用）//-----------------------------------glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);//glad加載系統(tǒng)相關的OpenGL函數(shù)指針//---------------------------------------if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "Failed to initialize GLAD" << std::endl;return -1;}//頂點著色器//---------------------------------------------------------------------unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);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;}//片段著色器//---------------------------------------------------------------------unsigned 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;}//鏈接著色器到著色器程序//---------------------------------------------------------------------unsigned int shaderProgram = glCreateProgram();glAttachShader(shaderProgram, vertexShader);glAttachShader(shaderProgram, fragmentShader);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);//頂點數(shù)據(jù)//---------------------------------------------------------------------float vertices[] = {0.5f,  0.5f, 0.0f,  // top right0.5f, -0.5f, 0.0f,  // bottom right-0.5f, -0.5f, 0.0f,  // bottom left-0.5f,  0.5f, 0.0f   // top left};unsigned int indices[] = {  //繪制索引0, 1, 3,  //第1個三角形1, 2, 3   //第2個三角形};unsigned int VBO, VAO, EBO;glGenVertexArrays(1, &VAO);     //創(chuàng)建頂點數(shù)組對象glGenBuffers(1, &VBO);          //創(chuàng)建頂點緩沖對象glGenBuffers(1, &EBO);          //創(chuàng)建元素緩沖對象glBindVertexArray(VAO);         //綁定VAOglBindBuffer(GL_ARRAY_BUFFER, VBO);     //將VBO與GL_ARRAY_BUFFER緩沖區(qū)綁定glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);  //將頂點數(shù)據(jù)復制到GL_ARRAY_BUFFER緩沖區(qū)，之后可通過VBO進行操作glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);     //將EBO與GL_ELEMENT_ARRAY_BUFFER緩沖區(qū)綁定glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);    //將索引復制到GL_ELEMENT_ARRAY_BUFFER緩沖區(qū)，之后可通過EBO進行操作//設定頂點屬性指針glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);//調用glVertexAttribPointer將VBO注冊為頂點屬性的綁定頂點緩沖對象，因此之后我們可以安全地解除綁定glBindBuffer(GL_ARRAY_BUFFER, 0);//解除對VAO的綁定glBindVertexArray(0);//渲染循環(huán)//我們可不希望只繪制一個圖像之后我們的應用程序就立即退出并關閉窗口;//我們希望程序在我們主動關閉它之前不斷繪制圖像并能夠接受用戶輸入;//因此，我們需要在程序中添加一個while循環(huán)，它能在我們讓GLFW退出前一直保持運行;//------------------------------------------------------------------------------while (!glfwWindowShouldClose(window))  //如果用戶準備關閉參數(shù)window所指定的窗口，那么此接口將會返回GL_TRUE，否則將會返回GL_FALSE{//用戶輸入//------------------------------------------------------------------------------processInput(window);   //檢測是否有輸入//渲染指令//------------------------------------------------------------------------------glClearColor(0.2f, 0.3f, 0.3f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);//繪制三角形glUseProgram(shaderProgram);        //激活著色器程序對象glBindVertexArray(VAO);             //綁定VAOglDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);    //繪制三角形// glBindVertexArray(0);            //解綁VAO//告訴GLFW檢查所有等待處理的事件和消息，包括操作系統(tǒng)和窗口系統(tǒng)中應當處理的消息。如果有消息正在等待，它會先處理這些消息再返回；否則該函數(shù)會立即返回//---------------------------------------------------------------------------------------------------------------------------------glfwPollEvents();//請求窗口系統(tǒng)將參數(shù)window關聯(lián)的后緩存畫面呈現(xiàn)給用戶(雙緩沖繪圖)//------------------------------------------------------------------------------glfwSwapBuffers(window);}//釋放資源glDeleteVertexArrays(1, &VAO);glDeleteBuffers(1, &VBO);glDeleteBuffers(1, &EBO);glDeleteProgram(shaderProgram);//glfw銷毀窗口喝OpenGL環(huán)境，并釋放資源（之后必須再次調用glfwInit()才能使用大多數(shù)GLFW函數(shù)）//------------------------------------------------------------------glfwTerminate();return a.exec();
}//檢測是否有輸入
//---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{if(glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)   //ESC鍵，退出glfwSetWindowShouldClose(window, true);
}//給glfw窗口注冊的尺寸改變回調函數(shù)
//---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{// make sure the viewport matches the new window dimensions; note that width and// height will be significantly larger than specified on retina displays.glViewport(0, 0, width, height);
}

---

四、繪制模式

glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);		//線框模式
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);		//填充模式（默認模式）

為了清除得看到我們繪制的四邊形是由兩個三角形拼接而成的，我們可以采用線框模式進行繪制，就一目了然了；

#include "mainwindow.h"
#include <QApplication>//在包含GLFW的頭文件之前包含了GLAD的頭文件;
//GLAD的頭文件包含了正確的OpenGL頭文件（例如GL/gl.h）;
//所以需要在其它依賴于OpenGL的頭文件之前包含GLAD;
#include <glad/glad.h>
#include <GLFW/glfw3.h>#include <iostream>void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;const char *vertexShaderSource = "#version 330 core\n""layout (location = 0) in vec3 aPos;\n""void main()\n""{\n""   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n""}\0";
const char *fragmentShaderSource = "#version 330 core\n""out vec4 FragColor;\n""void main()\n""{\n""   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n""}\n\0";int main(int argc, char *argv[])
{QApplication a(argc, argv);//MainWindow w;//w.show();//初始化GLFW//--------------------glfwInit();//配置GLFW//--------------------//告訴GLFW使用的OpenGL本是3.3glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//告訴GLFW使用的是核心模式（Core-profile）glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//創(chuàng)建一個新的OpenGL環(huán)境和窗口//-----------------------------------GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);if (window == NULL){std::cout << "Failed to create GLFW window" << std::endl;glfwTerminate();    //glfw銷毀窗口喝OpenGL環(huán)境，并釋放資源return -1;}//設置參數(shù)window中的窗口所關聯(lián)的OpenGL環(huán)境為當前環(huán)境//-----------------------------------glfwMakeContextCurrent(window);//設置窗口尺寸改變大小時的回調函數(shù)（窗口尺寸發(fā)送改變時會自動調用）//-----------------------------------glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);//glad加載系統(tǒng)相關的OpenGL函數(shù)指針//---------------------------------------if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "Failed to initialize GLAD" << std::endl;return -1;}//頂點著色器//---------------------------------------------------------------------unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);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;}//片段著色器//---------------------------------------------------------------------unsigned 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;}//鏈接著色器到著色器程序//---------------------------------------------------------------------unsigned int shaderProgram = glCreateProgram();glAttachShader(shaderProgram, vertexShader);glAttachShader(shaderProgram, fragmentShader);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);//頂點數(shù)據(jù)//---------------------------------------------------------------------float vertices[] = {0.5f,  0.5f, 0.0f,  // top right0.5f, -0.5f, 0.0f,  // bottom right-0.5f, -0.5f, 0.0f,  // bottom left-0.5f,  0.5f, 0.0f   // top left};unsigned int indices[] = {  //繪制索引0, 1, 3,  //第1個三角形1, 2, 3   //第2個三角形};unsigned int VBO, VAO, EBO;glGenVertexArrays(1, &VAO);     //創(chuàng)建頂點數(shù)組對象glGenBuffers(1, &VBO);          //創(chuàng)建頂點緩沖對象glGenBuffers(1, &EBO);          //創(chuàng)建元素緩沖對象glBindVertexArray(VAO);         //綁定VAOglBindBuffer(GL_ARRAY_BUFFER, VBO);     //將VBO與GL_ARRAY_BUFFER緩沖區(qū)綁定glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);  //將頂點數(shù)據(jù)復制到GL_ARRAY_BUFFER緩沖區(qū)，之后可通過VBO進行操作glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);     //將EBO與GL_ELEMENT_ARRAY_BUFFER緩沖區(qū)綁定glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);    //將索引復制到GL_ELEMENT_ARRAY_BUFFER緩沖區(qū)，之后可通過EBO進行操作//設定頂點屬性指針glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);//調用glVertexAttribPointer將VBO注冊為頂點屬性的綁定頂點緩沖對象，因此之后我們可以安全地解除綁定glBindBuffer(GL_ARRAY_BUFFER, 0);//解除對VAO的綁定glBindVertexArray(0);//啟用線框模式glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);//渲染循環(huán)//我們可不希望只繪制一個圖像之后我們的應用程序就立即退出并關閉窗口;//我們希望程序在我們主動關閉它之前不斷繪制圖像并能夠接受用戶輸入;//因此，我們需要在程序中添加一個while循環(huán)，它能在我們讓GLFW退出前一直保持運行;//------------------------------------------------------------------------------while (!glfwWindowShouldClose(window))  //如果用戶準備關閉參數(shù)window所指定的窗口，那么此接口將會返回GL_TRUE，否則將會返回GL_FALSE{//用戶輸入//------------------------------------------------------------------------------processInput(window);   //檢測是否有輸入//渲染指令//------------------------------------------------------------------------------glClearColor(0.2f, 0.3f, 0.3f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);//繪制三角形glUseProgram(shaderProgram);        //激活著色器程序對象glBindVertexArray(VAO);             //綁定VAOglDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);    //繪制三角形// glBindVertexArray(0);            //解綁VAO//告訴GLFW檢查所有等待處理的事件和消息，包括操作系統(tǒng)和窗口系統(tǒng)中應當處理的消息。如果有消息正在等待，它會先處理這些消息再返回；否則該函數(shù)會立即返回//---------------------------------------------------------------------------------------------------------------------------------glfwPollEvents();//請求窗口系統(tǒng)將參數(shù)window關聯(lián)的后緩存畫面呈現(xiàn)給用戶(雙緩沖繪圖)//------------------------------------------------------------------------------glfwSwapBuffers(window);}//釋放資源glDeleteVertexArrays(1, &VAO);glDeleteBuffers(1, &VBO);glDeleteBuffers(1, &EBO);glDeleteProgram(shaderProgram);//glfw銷毀窗口喝OpenGL環(huán)境，并釋放資源（之后必須再次調用glfwInit()才能使用大多數(shù)GLFW函數(shù)）//------------------------------------------------------------------glfwTerminate();return a.exec();
}//檢測是否有輸入
//---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{if(glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)   //ESC鍵，退出glfwSetWindowShouldClose(window, true);
}//給glfw窗口注冊的尺寸改變回調函數(shù)
//---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{// make sure the viewport matches the new window dimensions; note that width and// height will be significantly larger than specified on retina displays.glViewport(0, 0, width, height);
}