最近在學習OpenGL，把學習的一些過程寫在這裡，希望與大家共同分享討論。歡迎光臨我的個人網站Orient一起討論學習。這裡是我的GitHub，如果您喜歡，不妨點個贊？☺

紋理

在這份程式碼中我使用了下面這張紋理圖片：

紋理座標：

從上圖中可以看出，紋理的座標遠點是從圖片的左下方開始。繪製矩形/三角形時對應的紋理座標如下：

//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.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;
}

你可以在這裡找到原始碼，最後渲染出的三角形與矩形（只需要將註釋中三角形與矩形的程式碼互換即可）效果如下：