最近在學習OpenGL，把學習的一些過程寫在這里，希望與大家共同分享討論。歡迎光臨我的個人網站Orient一起討論學習。這里是我的GitHub，如果您喜歡，不妨點個贊？?
紋理
在這份代碼中我使用了下面這張紋理圖片：
wall.jpg
紋理坐標：
texture_coords
從上圖中可以看出，紋理的坐標遠點是從圖片的左下方開始。繪制矩形/三角形時對應的紋理坐標如下：
//float vertices[] = {
// // positions // colors // texture coords
// 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f ,// top right
// 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,// bottom right
// -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,// bottom left
// -0.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f// top left
//};
//unsigned int indices[] = { // note that we start from 0!
// 0, 1, 3, // first Triangle
// 1, 2, 3 // second Triangle
//};
float vertices[] = { // 渲染三角形形所需代碼
-0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // 渲染三角形所需代碼
0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, // 渲染三角形所需代碼
0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 0.5f, 1.0f // 渲染三角形所需代碼
}; // 渲染三角形所需代碼
矩形的繪制是通過繪制兩個三角形得到，我們只需給出4個頂點屬性和一個索引數組即可繪制出矩形
接下來綁定VAO,VBO,EBO：
unsigned int VBO, VAO, EBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
//glGenBuffers(1, &EBO); // 渲染矩形所需代碼
// bind the Vertex Array Object first, then bind and set vertex buffer(s), and then configure vertex attributes(s).
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
//glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); // 渲染矩形所需代碼
//glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW); // 渲染矩形所需代碼
解析頂點數據：
// 這是繪制的頂點坐標屬性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 這是繪制的頂點顏色屬性
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
// 這是頂點對應的紋理坐標
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
glEnableVertexAttribArray(2);
紋理設置
首先創建一個紋理ID并綁定
unsigned int texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
設置環繞、過濾方式
// set the texture wrapping parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
// set texture filtering parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
生成并加載紋理
int width, height, nrChannels;
char *texturePath = "../src/wall.jpg"; // 這里填寫你的圖片路徑
unsigned char *data = stbi_load(texturePath, &width, &height, &nrChannels, 0); // stbi_load函數首先接受一個圖像文件的位置作為輸入。接下來它需要三個int作為它的第二、第三和第四個參數，stb_image.h將會用圖像的寬度、高度和顏色通道的個數填充這三個變量。我們之后生成紋理的時候會用到的圖像的寬度和高度的。
在這里使用到了stb_image.h
在使用stb_image.h之前，需要創建一個stb_image.cpp文件，并添加如下內容：
通過定義STB_IMAGE_IMPLEMENTATION，預處理器會修改頭文件，讓其只包含相關的函數定義源碼。使用時只需要在程序中包含stb_image.h文件就可以了。
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"
接下來使用前面載入的圖片生成紋理：
if (data)
{
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
}
else
{
std::cout << "Failed to load texture" << std::endl;
}
// 釋放圖像內存
stbi_image_free(data);
當調用glTexImage2D時，當前綁定的紋理對象就會被附加上紋理圖像。然而，目前只有基本級別(Base-level)的紋理圖像被加載了，如果要使用多級漸遠紋理，我們必須手動設置所有不同的圖像（不斷遞增第二個參數）。或者，直接在生成紋理之后調用glGenerateMipmap。這會為當前綁定的紋理自動生成所有需要的多級漸遠紋理。
最后應用紋理
while (!glfwWindowShouldClose(window))
{
// input
// -----
processInput(window);
// render
// ------
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
ourShader.use();
glBindVertexArray(VAO); // seeing as we only have a single VAO there's no need to bind it every time, but we'll do so to keep things a bit more organized
//glDrawArrays(GL_TRIANGLES, 0, 6);
//glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
// glBindVertexArray(0); // no need to unbind it every time
glDrawArrays(GL_TRIANGLES, 0, 3); // 渲染三角形所需代碼
//glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0); // 渲染矩形所需代碼
// glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
// -------------------------------------------------------------------------------
glfwSwapBuffers(window);
glfwPollEvents();
}
// optional: de-allocate all resources once they've outlived their purpose:
// ------------------------------------------------------------------------
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
// glfw: terminate, clearing all previously allocated GLFW resources.
// ------------------------------------------------------------------
glfwTerminate();
return 0;
}
你可以在這里找到源碼，最后渲染出的三角形與矩形（只需要將注釋中三角形與矩形的代碼互換即可）效果如下：
triangleTexture.png
rectangleTexture.png
