OpenGL 纹理详解

1. 纹理

在OpenGL中，纹理是一种常用的技术，用于将图像或图案映射到3D模型的表面上，以增加图形的细节和真实感

2. 纹理坐标

纹理坐标在x和y轴上，范围为0到1之间（注意我们使用的是2D纹理图像）。使用纹理坐标获取纹理颜色叫做采样(Sampling)。纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1)，即纹理图片的右上角。下面的图片展示了我们是如何把纹理坐标映射到三角形上的。

 

 当图片绘制大小与图片实际大小不一致时，势必会涉及到缩放。此时而缩放时我们要采取什么插值方式，是需要我们指定给GL的，也就是说，我们要指定采样方式。

3. 采样方式

环绕方式

之前我们有说过，纹理的坐标区域是[0,1]，且通常左下角为纹理坐标的(0,0)点。现在我们设想一下下面的情况：

 

 

当我们给出顶点坐标是横纵左边均是0.5的四个象限的点时，我们的渲染区域即是第一个图中的粉色区域。

此时我们有一张图像，即是第四个图样子的图片。

我们知道，纹理坐标系是[0,1]的，如果我们与顶点坐标系中我们指定的四个顶点一一对应起来的时候，那就应该是渲染出第二幅图的样子。

但是如果我们并不是想图像A充满我们的粉色区域怎么办？我们想让图像只有粉色区域的1/2大小，并且居中平铺，这时候怎么办呢？

试想如果大小1/2且居中对齐，那么我们纹理坐标系的(1,1)点应该对应顶点坐标系的(0.25,0.25)。这点没有问题对吧。但实际我们应用只应用顶点坐标，那么我们要换算一下顶点坐标系中(0.5,0.5)对应的是纹理坐标系中的那个点呢？换算完成后应该是(1.5,1.5)。这里如何换算可以结合第三幅图的样子考虑下。这样我们换算完四个顶点坐标分别对应的纹理坐标值后传个顶点着色器就好。

另外我们只会渲染出我们顶点数据所渲染的图形，超出边届的将会被剪裁掉。

事实上，我们只是想绘制一个比顶点区域要小的图片，至于平铺是我们选择的一种环绕方式而已。

然而GL实际为我们提供了四种环绕方式：

 那么知道了这几种环绕方式，在GL中我们要如何设置环绕方式呢？

 当然，如果我们指定边缘颜色的环绕模式，我们还要指定边缘颜色。

 4. 纹理过滤

 

渲染一个图像，我们不可能保证绘制的实际大小即是图片的实际大小，事实上一般情况下，我们都需要进行缩放。我们知道，GL中我们只指定顶点数据，而中间点都是GL内部自己采用插值器进行计算的。那么当进行缩放时，我们就要告诉GL应该采用的插值方式。指定插值方式，又叫做纹理过滤。

 

那么缩放就涉及到图像的放大和缩小。我们先想一下放大图像应该采取什么纹理滤镜。

 

这里我们先讨论两个较为重要的纹理滤镜：GL_NEAREST和GL_LINEAR。

 

GL_NEAREST（也叫邻近过滤，Nearest Neighbor Filtering）是OpenGL默认的纹理过滤方式。当设置为GL_NEAREST的时候，OpenGL会选择中心点最接近纹理坐标的那个像素。下图中你可以看到四个像素，加号代表纹理坐标。左上角那个纹理像素的中心距离纹理坐标最近，所以它会被选择为样本颜色：

 GL_LINEAR（也叫线性过滤，(Bi)linear Filtering）它会基于纹理坐标附近的纹理像素，计算出一个插值，近似出这些纹理像素之间的颜色。一个纹理像素的中心距离纹理坐标越近，那么这个纹理像素的颜色对最终的样本颜色的贡献越大。下图中你可以看到返回的颜色是邻近像素的混合色：

 那么这两种纹理过滤方式有怎样的视觉效果呢？让我们看看在一个很大的物体上应用一张低分辨率的纹理会发生什么吧（纹理被放大了，每个纹理像素都能看到）：

 5. 多级渐远纹理

上述中，我们叙述了放大的纹理滤镜，但是如果是缩小呢？我们当然也可以采取之前提到的两种纹理滤镜。但当我们缩小的倍数足够小时，计算插值将会是一个耗时过程，此外缩小本身就会丢失很多细节，这时如果我们仍使用原分辨率的纹理进行缩放并绘制，无疑在内存上也是浪费。

 

如何创建多级渐远纹理呢？我们可以使用glGenerateMipmaps函数。

那么多级渐远纹理有几种模式呢：

 像放大时使用的纹理滤镜一样，我们应该像下面这样设置缩小的纹理滤镜：

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
6. 加载与创建纹理

#include 
#include 
#include 
#include 
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);
GLFWwindow * configOpenGL();
void loadImg(const char * path,unsigned int * texture,unsigned int uniteLoc);
void configVAO(unsigned int * VAO,unsigned int * VBO,unsigned int * EBO);
void finishiRenderLoop();
// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;


const char *vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec2 aPos;\n"
"layout (location = 1) in vec3 aColor;\n"
"layout (location = 2) in float show;\n"
"layout (location = 3) in vec2 aTexCoord;\n"
"out vec3 ourColor;\n"
"out float Img;\n"
"out vec2 TexCoord;\n"
"void main()\n"
"{\n"
"   gl_Position = vec4(aPos,0.0, 1.0);\n"
"   ourColor = aColor;\n"
"   Img = show;\n"
"   TexCoord = aTexCoord;\n"
"}\0";
const char *fragmentShaderSource = "#version 330 core\n"
"out vec4 FragColor;\n"
"in vec3 ourColor;\n"
"in float Img;\n"
"in vec2 TexCoord;\n"
"uniform sampler2D ourTexture;\n"
"uniform sampler2D avatarTexture;\n"
"uniform float factor;\n"
"void main()\n"
"{\n"
"if (Img == 1.0f) {\n"
"FragColor = mix(texture(ourTexture, TexCoord),texture(avatarTexture, TexCoord),factor) * vec4(ourColor, 1.0);\n"
"} else {\n"
"FragColor = vec4(ourColor, 1.0);\n"
"}\n"
"}\n\0";

int main()
{
    GLFWwindow * window = configOpenGL();
    
    ///创建一个顶点着色器
    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;
    }
    
    ///创建一个片段着色器
    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;
    }
    
    ///创建着色器程序
    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);

    unsigned int VAO,VBO,EBO;
    
    ///配置VAO
    configVAO(&VAO,&VBO,&EBO);
    
    ///设置纹理单元的位置（想要设置着色器程序的值，必先激活着色器程序）
    glUseProgram(shaderProgram);
    glUniform1i(glGetUniformLocation(shaderProgram,"ourTexture"),0);
    glUniform1i(glGetUniformLocation(shaderProgram,"avatarTexture"),1);
    
    while (!glfwWindowShouldClose(window))
    {
        processInput(window);
        
        ///设置清屏颜色
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
        ///清屏
        glClear(GL_COLOR_BUFFER_BIT);
        
        ///使用指定着色器程序（由于上面已经激活过着色器程序，所以此处不用再次激活）
//        glUseProgram(shaderProgram);
        
        ///改变
        float timeValue = glfwGetTime();
        float factor = sin(timeValue) / 2.0f + 0.5f;
        glad_glUniform1f(glGetUniformLocation(shaderProgram,"factor"),factor);
        
        ///绑定定点数组对象
        glBindVertexArray(VAO);
        ///以索引绘制顶点数据
//        glDrawArrays(GL_TRIANGLES, 0, 3);
        glDrawElements(GL_TRIANGLES,30,GL_UNSIGNED_INT,0);
        
        ///交换颜色缓冲
        glfwSwapBuffers(window);
        ///拉取用户事件
        glfwPollEvents();
    }
    
    ///释放对象
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);
    
    finishiRenderLoop();
    
    return 0;
}

GLFWwindow* configOpenGL() {
    ///初始化glfw
    glfwInit();
    
    ///设置版本号
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    
    ///设置核心模式
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    
#ifdef __APPLE__
    ///设置对Mac OS X的兼容
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif
    
    ///创建window
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL) {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return NULL;
    }
    ///将window设置成当前上下文
    glfwMakeContextCurrent(window);
    ///设置窗口事件更新触发的回调
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
    
    ///初始化GLAD
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return NULL;
    }
    return window;
}

void configVAO(unsigned int * VAO,unsigned int * VBO,unsigned int * EBO) {
    ///顶点数据
    float vertices[] = {
        //顶点坐标-2 //颜色-3 //是否绘制图片-1 //纹理坐标-2
        0.5f, 0.5f,1.0f,1.0f,0.0f,1.0f,1.5f,1.5f,    // 右上角
        0.5f, -0.5f,0.0f,1.0f,1.0f,1.0f,1.5f,-0.5f,  // 右下角
        -0.5f, -0.5f,1.0f,0.0f,1.0f,1.0f,-0.5f,-0.5f,  // 左下角
        -0.5f, 0.5f,1.0f,1.0f,1.0f,1.0f,-0.5f,1.5f,    // 左上角
        1.0f,1.0f,0.0f,0.0f,1.0f,0.0f,0.0f,0.0f,
        1.0f,-1.0f,1.0f,0.0f,0.0f,0.0f,0.0f,0.0f,
        -1.0f,-1.0f,0.0f,1.0f,0.0f,0.0f,0.0f,0.0f,
        -1.0f,1.0f,0.0f,0.0f,0.0f,0.0f,0.0f,0.0f,
    };
    
    ///索引数据
    unsigned int indices[] = {
        0,1,3,
        1,2,3,
        0,4,5,
        0,1,5,
        1,5,6,
        1,2,6,
        2,6,7,
        2,3,7,
        3,7,4,
        3,0,4,
    };
    
    ///创建顶点数组对象
    glGenVertexArrays(1, VAO);
    
    ///创建顶点缓冲对象
    glGenBuffers(1, VBO);
    ///创建索引缓冲对象
    glGenBuffers(1, EBO);
    
    ///绑定定点数组对象至上下文
    glBindVertexArray(*VAO);
    
    ///绑定定点缓冲对象至上下文
    glBindBuffer(GL_ARRAY_BUFFER, *VBO);
    
    ///把顶点数组复制到顶点缓冲对象中
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(2 * sizeof(float)));
    glEnableVertexAttribArray(1);
    glVertexAttribPointer(2, 1, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(5 * sizeof(float)));
    glEnableVertexAttribArray(2);
    glVertexAttribPointer(3, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
    glEnableVertexAttribArray(3);
    ///绑定索引缓冲对象至上下文
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, *EBO);
    ///把索引数据复制到索引缓冲对象中
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
    
    ///加载图片
    unsigned int texture,avatar;
    loadImg("/Users/momo/Desktop/Wicky/Learn\ OpenGL/入门/Demos/6.纹理/OpenGL_Template/container.jpg", &texture,0);
    loadImg("/Users/momo/Desktop/Wicky/Learn\ OpenGL/入门/Demos/6.纹理/OpenGL_Template/avatar.jpeg", &avatar, 1);
    
    ///解除顶点数组对象的绑定
    glBindVertexArray(0);
    ///解除顶点缓冲对象的绑定
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    ///解除索引缓冲对象的绑定
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,0);
}

void loadImg(const char * path,unsigned int * texture,unsigned int uniteLoc) {
    ///设置图片加载时上下翻转
    stbi_set_flip_vertically_on_load(true);
    
    ///加载图片
    int width, height, nrChannels;
    unsigned char *data = stbi_load(path, &width, &height, &nrChannels, 0);
    
    ///生成纹理对象并绑定至上下文中的2D纹理
    glGenTextures(1, texture);
    glActiveTexture(GL_TEXTURE0 + uniteLoc);
    glBindTexture(GL_TEXTURE_2D, *texture);
    
    ///设置纹理环绕及过滤模式
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    
    ///加载纹理数据并设置多级渐远纹理
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
    glGenerateMipmap(GL_TEXTURE_2D);
    
    ///释放图像数据
    stbi_image_free(data);
}

void finishiRenderLoop() {
    ///释放窗口资源
    glfwTerminate();
}

///处理输入
void processInput(GLFWwindow *window)
{
    if(glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

///窗口事件更新回调
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    ///设置视口大小
    glViewport(0, 0, width, height);
}

7. 加载图像

std_image.h
std_image

 8. 生成纹理

接下来我们基本就是用GL统一的模式去创建对象了：

这里我们单独讲一下glTexImage2D这个函数。

• 第一个参数指定了纹理目标(Target)。设置为GL_TEXTURE_2D意味着会生成与当前绑定的纹理对象在同一个目标上的纹理（任何绑定到GL_TEXTURE_1D和GL_TEXTURE_3D的纹理不会受到影响）。
• 第二个参数为纹理指定多级渐远纹理的级别，如果你希望单独手动设置每个多级渐远纹理的级别的话。这里我们填0，也就是基本级别。
• 第三个参数告诉OpenGL我们希望把纹理储存为何种格式。我们的图像只有RGB值，因此我们也把纹理储存为RGB值。
• 第四个和第五个参数设置最终的纹理的宽度和高度。我们之前加载图像的时候储存了它们，所以我们使用对应的变量。
• 下个参数应该总是被设为0（历史遗留的问题）。
• 第七第八个参数定义了源图的格式和数据类型。我们使用RGB值加载这个图像，并把它们储存为char(byte)数组，我们将会传入对应值。
• 最后一个参数是真正的图像数据。

有了图像数据，我们还要指定纹理坐标到顶点坐标数据中。同时我们要修改顶点着色器和片段着色器。并设置顶点属性。与前文中绘制三角形时设置的基本相同。这里我们只介绍如何在片段着色器中使用我们的纹理。

9. 纹理单元
GL中，一个纹理的位置值被称为一个纹理单元。而GL中默认的纹理单元是0，且这个纹理单元是GL中默认激活的。所以上述代码中，我们绑定纹理的时候，并没有指定纹理单元，就是使用的默认的0这个单元。所以在片段着色器中声明的采样器，默认也是对应的纹理单元0。所以我们取到的也就是这个默认的纹理单元。

当使用多个纹理时，首先我们要激活对应的纹理单元，然后在纹理单元中绑定纹理。在真正开始渲染之前，即进入渲染循环之前，我们还要告诉片段着色器每一个采样器对应的是哪个纹理单元。

所以我们使用纹理的代码大概是这个样子的：

那么我们在片段着色器中，如果想要进行混合的话应该使用mix函数。

FragColor = mix(texture(ourTexture, TexCoord),texture(avatarTexture, TexCoord),factor) * vec4(ourColor, 1.0);