最近在學(xué)習(xí)OpenGL，把學(xué)習(xí)的一些過程寫在這里，希望與大家共同分享討論。歡迎光臨我的個人網(wǎng)站Orient一起討論學(xué)習(xí)。這里是我的GitHub，如果您喜歡，不妨點個贊？?

紋理

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

wall.jpg

紋理坐標：

texture_coords

從上圖中可以看出，紋理的坐標遠點是從圖片的左下方開始。繪制矩形/三角形時對應(yīng)的紋理坐標如下：

//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個頂點屬性和一個索引數(shù)組即可繪制出矩形

接下來綁定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);  // 渲染矩形所需代碼

解析頂點數(shù)據(jù)：

// 這是繪制的頂點坐標屬性
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);

// 這是頂點對應(yīng)的紋理坐標
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
glEnableVertexAttribArray(2);

紋理設(shè)置

首先創(chuàng)建一個紋理ID并綁定

unsigned int texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

設(shè)置環(huán)繞、過濾方式

// 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函數(shù)首先接受一個圖像文件的位置作為輸入。接下來它需要三個int作為它的第二、第三和第四個參數(shù)，stb_image.h將會用圖像的寬度、高度和顏色通道的個數(shù)填充這三個變量。我們之后生成紋理的時候會用到的圖像的寬度和高度的。

在這里使用到了stb_image.h

在使用stb_image.h之前，需要創(chuàng)建一個stb_image.cpp文件，并添加如下內(nèi)容：
通過定義STB_IMAGE_IMPLEMENTATION，預(yù)處理器會修改頭文件，讓其只包含相關(guān)的函數(shù)定義源碼。使用時只需要在程序中包含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;
}
// 釋放圖像內(nèi)存
stbi_image_free(data);

當(dāng)調(diào)用glTexImage2D時，當(dāng)前綁定的紋理對象就會被附加上紋理圖像。然而，目前只有基本級別(Base-level)的紋理圖像被加載了，如果要使用多級漸遠紋理，我們必須手動設(shè)置所有不同的圖像（不斷遞增第二個參數(shù)）?；蛘?，直接在生成紋理之后調(diào)用glGenerateMipmap。這會為當(dāng)前綁定的紋理自動生成所有需要的多級漸遠紋理。

最后應(yīng)用紋理

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