贴图

使用贴图，贴图解析使用 std_image 库

1. 贴图解析库

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

2. 贴图解析和加载

unsigned int texture1;
//1. 创建贴图id
glGenTextures(1, &texture1);
//2. 绑定贴图id，一下操作都是针对此贴图
glBindTexture(GL_TEXTURE_2D, texture1);
//3. 设置贴图各种属性
//3.1 设置wrapping参数
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);  //设置为重复样式，不够尺寸则重复来填充
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);  //设置为重复样式，不够尺寸则重复来填充
//3.2 设置filter滤波
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);//设置为线性插值
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);//设置为线性插值
//。。。其他参数设置
//4. 加载解析图片文件
int width, height, nrChannels; 
unsigned char* data = stbi_load("./res/textures/container.jpg", &width, &height, &nrChannels, 0);
if (data)
{
    //5. 解析成功，设置贴图数据， 
    //第一个 GL_RGB 将被转换的格式， 第二个GL_RGB原始文件的格式，通道数可少不能多，否则会报错。
    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;
}
//6. 设置完贴图数据，则不需要字符串数据，释放。
stbi_image_free(data);
//7. 至此贴图数据准备完毕，使用texture1贴图id即可。

3. 使用贴图，需要渲染的shader支持贴图。

    //激活贴图GL_TEXTURE0，第一组贴图
    glActiveTexture(GL_TEXTURE0);
    //绑定texture1到第一组贴图
    glBindTexture(GL_TEXTURE_2D, texture1);

4. 贴图Shader
   1. 顶点Shader

   #version 330 core
   
   //location对应顶点属性位置。
   layout (location = 0) in vec3 aPos;
   layout (location = 1) in vec3 aColor;
   layout (location = 2) in vec2 aTexCoord;
   
   out vec3 ourColor;
   out vec2 TexCoord;
   
   void main()
   {
       gl_Position = vec4(aPos, 1.0);
       ourColor = aColor;
       TexCoord = aTexCoord;
   }

   2. 片元Shader， 使用texture函数对贴图uv采样。

   #version 330 core
   out vec4 FragColor;
   
   in vec3 ourColor;
   in vec2 TexCoord;
   
   uniform sampler2D ourTexture;
   
   void main()
   {
       FragColor = texture(ourTexture, TexCoord);
   }

5. 可以使用多张纹理,Shader使用 mix函数混合，

    // 在绑定纹理之前先激活位置纹理单元
    glActiveTexture(GL_TEXTURE0); 
    glBindTexture(GL_TEXTURE_2D, texture);

1. 多张纹理的片元Shader

    #version 330 core
    out vec4 FragColor;

    in vec3 ourColor;
    in vec2 TexCoord;

    uniform sampler2D texture1;
    uniform sampler2D texture2;

    void main()
    {
        FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);
    }

2. 还要通过使用glUniform1i设置每个采样器的方式告诉OpenGL每个着色器采样器属于哪个纹理单元。我们只需要设置一次即可
    > texture贴图不同于其他`Uniform`参数，因为数据在GPU,不能直接设置值，
    > 需要指定`位置值`，然后通过`glActiveTexture(GL_TEXTURE1)`函数激活对应位置;
    > 使用`glBindTexture(GL_TEXTURE_2D, texture1)`函数指定贴图值;

//glUniform1i
shader.use();
//glUniform1i(glGetUniformLocation(ourShader.ID, "texture1"), 0); // 手动设置
shader.setInt("texture1", 0);
shader.setInt("texture2", 1);

3. 使用多张贴图

    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, texture1);

    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, texture2);

6. 重要概念&参数
   1. 纹理环绕方式 Wrapping > 通过 glTexParameterfv函数设置 |环绕方式 | 描述| |:--|:--| |GL_REPEAT |对纹理的默认行为。重复纹理图像。| |GL_MIRRORED_REPEAT | 和GL_REPEAT一样，但每次重复图片是镜像放置的。| |GL_CLAMP_TO_EDGE | 纹理坐标会被约束在0到1之间，超出的部分会重复纹理坐标的边缘，产生一种边缘被拉伸的效果。| |GL_CLAMP_TO_BORDER | 超出的坐标为用户指定的边缘颜色。|
   2. 纹理过滤 filter (GL_TEXTURE_MIN_FILTER 渐进，GL_TEXTURE_MAG_FILTER 渐远)
      1. GL_NEAREST GL_NEAREST（也叫邻近过滤，Nearest Neighbor Filtering）是OpenGL默认的纹理过滤方式。当设置为GL_NEAREST的时候，OpenGL会选择中心点最接近纹理坐标的那个像素。下图中你可以看到四个像素，加号代表纹理坐标。左上角那个纹理像素的中心距离纹理坐标最近，所以它会被选择为样本颜色：
      2. GL_LINEAR GL_LINEAR（也叫线性过滤，(Bi)linear Filtering）它会基于纹理坐标附近的纹理像素，计算出一个插值，近似出这些纹理像素之间的颜色。一个纹理像素的中心距离纹理坐标越近，那么这个纹理像素的颜色对最终的样本颜色的贡献越大。下图中你可以看到返回的颜色是邻近像素的混合色：
   3. 多级渐远纹理 Mipmap （GL_TEXTURE_MIN_FILTER 渐近， 渐远无用会产生错误码） 多级渐远纹理背后的理念很简单：距观察者的距离超过一定的阈值，OpenGL会使用不同的多级渐远纹理，即最适合物体的距离的那个。 >一个常见的错误是，将放大过滤的选项设置为多级渐远纹理过滤选项之一。这样没有任何效果，因为多级渐远纹理主要是使用在纹理被缩小的情况下的：纹理放大不会使用多级渐远纹理，为放大过滤设置多级渐远纹 >理的选项会产生一个GL_INVALID_ENUM错误代码。 |过滤方式 | 描述| |:--|:--| |GL_NEAREST_MIPMAP_NEAREST | 使用最邻近的多级渐远纹理来匹配像素大小，并使用邻近插值进行纹理采样| |GL_LINEAR_MIPMAP_NEAREST |使用最邻近的多级渐远纹理级别，并使用线性插值进行采样| |GL_NEAREST_MIPMAP_LINEAR |在两个最匹配像素大小的多级渐远纹理之间进行线性插值，使用邻近插值进行采样| |GL_LINEAR_MIPMAP_LINEAR |在两个邻近的多级渐远纹理之间使用线性插值，并使用线性插值进行采样|
   4. 加载图像 api
      1. stbi_load 加载
      2. stbi_set_flip_vertically_on_load(true) 、设置为竖直翻转。
7. 完整代码

    #include "glad/glad.h"
    #include "GLFW/glfw3.h"

    //图片库
    #define STB_IMAGE_IMPLEMENTATION
    #include "stb_image.h"

    //glm OpenGL Math库
    #include "glm/glm.hpp"
    #include "glm/gtc/matrix_transform.hpp"
    #include "glm/gtc/type_ptr.hpp"

    #include "shader.h"
    #include <iostream>

    using namespace std;

    const int wWidth = 800, wHeight = 600;
    const char* wName = "LearnOpenGL";

    float vertices[] = {
        //位置                    // 基础颜色          // 题图uv
            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[] = {
        0, 1, 3, //  第一个三角形
        1, 2, 3  //  第二个三角形
    };

    void framebuffer_size_callback(GLFWwindow* window, int width, int height)
    {
        glViewport(0, 0, width, height);
    }

    void processInput(GLFWwindow *window)
    {
        if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
            glfwSetWindowShouldClose(window, true);
    }

    int main()
    {
        //1. 初始化
        if (glfwInit() == GLFW_FALSE)
        {
            cout << "init glfw fail";
            return 1;
        }

        //2. 基本设置
        glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
        glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
        glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    #if __APPLE__
        glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GLFW_TRUE);
    #endif

        //3. 创建窗口
        GLFWwindow *window = glfwCreateWindow(wWidth, wHeight, wName, nullptr, nullptr);
        if (window == nullptr)
        {
            cout << "Failed to create GLFW window";
            goto TERMINATE;
            //return 1;
        }

        //4. 当前主线程上下文窗口
        glfwMakeContextCurrent(window);

        //5. 使用glad管理OpenGL指针。
        if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
        {
            std::cout << "Failed to initialize GLAD" << std::endl;
            goto TERMINATE;
            //return 1;
        }

        //6. 设置视口
        glViewport(0, 0, wWidth, wHeight);
        //7. 设置resize回调，对应刷新视口
        glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

        Shader shader("res/shaders/sample_vertex_texture.shader", "res/shaders/sample_fragment_2texture.shader");


        unsigned int VBO, VAO, EBO;
        glGenVertexArrays(1, &VAO);
        glBindVertexArray(VAO);

        glGenBuffers(1, &VBO);
        glBindBuffer(GL_ARRAY_BUFFER, VBO);
        glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

        glGenBuffers(1, &EBO);
        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
        glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

        //1. 指定顶点的顶点属性的结构，顶点 3个float，从0开始，整体每一组数据8个。
        glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
        glEnableVertexAttribArray(0);
        //2. 指定颜色的顶点属性的结构，三色 3个float，从3开始，整体每一组数据8个。
        glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
        glEnableVertexAttribArray(1);
        //3. 指定uv的顶点属性的结构，uv 2个float，从6开始，整体每一组数据8个。
        glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
        glEnableVertexAttribArray(2);

        glBindBuffer(GL_ARRAY_BUFFER, 0);
        glBindVertexArray(0);


        unsigned int texture1, texture2;
        //加载贴图1
        glGenTextures(1, &texture1);
        glBindTexture(GL_TEXTURE_2D, texture1);
        // 设置 wrapping 参数
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
        // 设置  filtering 参数
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        // 加载解析贴图文件
        int width, height, nrChannels;
        stbi_set_flip_vertically_on_load(true); // tell stb_image.h to flip loaded texture's on the y-axis.
        unsigned char* data = stbi_load("./res/textures/container.jpg", &width, &height, &nrChannels, 0);
        if (data)
        {
            //第一个 GL_RGB 将被转换的格式， 第二个GL_RGB原始文件的格式， 格式不匹配会报错。
            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);

        //加载贴图2
        glGenTextures(1, &texture2);
        glBindTexture(GL_TEXTURE_2D, texture2);
        //  设置 wrapping 参数
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
        // 设置  filtering 参数
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        // l加载解析贴图文件
        data = stbi_load("./res/textures/awesomeface.png", &width, &height, &nrChannels, 0);
        if (data)
        {
            //第一个 GL_RGB 将被转换的格式， 第二个GL_RGB原始文件的格式， 格式不匹配会报错。
            glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
            glGenerateMipmap(GL_TEXTURE_2D);
        }
        else
        {
            std::cout << "Failed to load texture" << std::endl;
        }
        stbi_image_free(data);

        //指定采样器贴图储存的位置
        shader.use();
        shader.setInt("texture1", 0);
        shader.setInt("texture2", 1);

        while (!glfwWindowShouldClose(window))
        {
            processInput(window);

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

            // bind Texture1
            glActiveTexture(GL_TEXTURE0);
            glBindTexture(GL_TEXTURE_2D, texture1);
            // bind Texture2
            glActiveTexture(GL_TEXTURE1);
            glBindTexture(GL_TEXTURE_2D, texture2);

            shader.use();
            glBindVertexArray(VAO);
            glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

            glfwSwapBuffers(window);
            glfwPollEvents();
        }

        glDeleteVertexArrays(1, &VAO);
        glDeleteBuffers(1, &VBO);
        glDeleteBuffers(1, &EBO);

    TERMINATE:
        glfwTerminate();
        return 0;
    }