OpenGL_04_纹理

林空语

已于 2024-06-07 19:13:23 修改

阅读量1.3k

点赞数 52

文章标签：图形渲染

于 2024-06-05 19:45:32 首次发布

本文链接：https://blog.csdn.net/linkongyu/article/details/139478826

版权

1. 应用纹理

方便起见，图片文件直接拷贝到代码文件同一目录下了。

绘制文件：

#include <glad/glad.h>
#include <GLFW/glfw3.h>     // 注释顺序，GLAD的头文件包含了正确的OpenGL头文件，所以需要在其它依赖于OpenGL的头文件之前包含GLAD

#include <iostream>
#include <cmath>
#include "shader_s.h"

//通过定义STB_IMAGE_IMPLEMENTATION，预处理器会修改头文件，让其只包含相关的函数定义源码，等于是将这个头文件变为一个 .cpp 文件了
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"


const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

int main()
{
    // 初始化GLFW，配置主版本号，次版本号，核心模式
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif

    // 创建窗口对象（宽，高，名称）
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    // 将窗口上下文设置为当前线程的主上下文
    glfwMakeContextCurrent(window);
    // 注册函数，每当窗口调整大小时调用此函数
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // GLAD管理OpenGL函数指针，故在调用任何OpenGL的函数前，先要初始化GLAD
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        glfwTerminate();
        return -1;
    }

    / 编译构建shader代码
    Shader ourShader("shader.vs", "shader.fs");

    // 设置顶点数据，配置顶点属性
    float vertices[] = {
        //     ---- 位置 ----       ---- 颜色 ----     - 纹理坐标 -
             0.5f,  0.5f, 0.0f,   1.0f, 0.0f, 0.0f,   1.0f, 1.0f,   // 右上
             0.5f, -0.5f, 0.0f,   0.0f, 1.0f, 0.0f,   1.0f, 0.0f,   // 右下
            -0.5f, -0.5f, 0.0f,   0.0f, 0.0f, 1.0f,   0.0f, 0.0f,   // 左下
            -0.5f,  0.5f, 0.0f,   1.0f, 1.0f, 0.0f,   0.0f, 1.0f    // 左上
    };

    unsigned int indices[] = {
        0, 1, 3, // first triangle
        1, 2, 3  // second triangle
    };

    // 初始化顶点缓冲对象，顶点数组对象，元素缓冲对象
    unsigned int VBO, VAO, EBO;
    // 生成
    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);

    // 拷贝索引数组到元素缓冲对象（元素缓冲对象在顶点数组对象中，末尾）
    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);   // 步长变为为8个float
    glEnableVertexAttribArray(0);
    // 配置顶点属性：颜色，并启用
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));   // 单步长内偏移量为3个float
    glEnableVertexAttribArray(1);
    // 配置顶点属性：纹理坐标，并启用
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));   // 单步长内偏移量为3个float
    glEnableVertexAttribArray(2);

    // 纹理对象创建，绑定（类似之前生成对象的流程）
    unsigned int texture;
    glGenTextures(1, &texture);
    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);

    // 加载图片
    int width, height, nrChannels;
    unsigned char* data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
    if (data)
    {
        // 为当前绑定的纹理对象被附加上纹理图像
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
        // 上面只加载了基本级别（第二个参数，0）的纹理图像。要使用多级渐远纹理，可以手动设置不同图像（不断递增第二个参数），或直接用下面方法
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }

    // 生成纹理后，释放图像内存
    stbi_image_free(data);

    // 渲染循环
    while (!glfwWindowShouldClose(window))
    {
        // 输入
        processInput(window);


        // 渲染指令
        // ...

        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);   // 设置清空屏幕使用的颜色
        glClear(GL_COLOR_BUFFER_BIT);           // 清空颜色缓冲

        ourShader.use();
        glBindTexture(GL_TEXTURE_2D, texture);
        glBindVertexArray(VAO);
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

        // 交换颜色缓冲
        glfwSwapBuffers(window);
        // 检查事件触发
        glfwPollEvents();
    }

    // 释放所有资源
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);

    // 释放分配的资源
    glfwTerminate();
    return 0;
}
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // 视口，告诉OpenGL渲染窗口的大小（前两个参数为窗口左下角位置，后两个为渲染窗口的宽高）
    glViewport(0, 0, width, height);
}

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

顶点shader:

#version 330 core

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 = vec2(aTexCoord.x, aTexCoord.y);
}

片段shader:

#version 330 core

out vec4 FragColor;

in vec3 ourColor;
in vec2 TexCoord;

// 片段着色器访问纹理对象
// 为什么绘制文件中，没有对这个uniform设置的操作？往后看
uniform sampler2D ourTexture;

void main()
{
    // 第一个参数为纹理采样器，第二个参数为对应的纹理坐标
    FragColor = texture(ourTexture, TexCoord);
}

2. 多重纹理

纹理单元

glActiveTexture glBindTexture

纹理单元理解

也就是说，glActiveTexture用来选择当前激活的纹理单元，glBindTexture将纹理绑定到当前活跃的纹理单元上。

GL_TEXTURE0是默认激活的，故之前单个纹理的时候，无需glActiveTexture来激活纹理单元，也无需glUniform1i来为uniform的纹理采样器赋值。调用glBindTexture的时候，会自动绑定纹理单元0，并把纹理赋值给片段着色器的采样器（因为其唯一）。

结构：

绘制文件：

#include <glad/glad.h>
#include <GLFW/glfw3.h>     // 注释顺序，GLAD的头文件包含了正确的OpenGL头文件，所以需要在其它依赖于OpenGL的头文件之前包含GLAD

#include <iostream>
#include <cmath>
#include "shader_s.h"

//通过定义STB_IMAGE_IMPLEMENTATION，预处理器会修改头文件，让其只包含相关的函数定义源码，等于是将这个头文件变为一个 .cpp 文件了
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"


const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

int main()
{
    // 初始化GLFW，配置主版本号，次版本号，核心模式
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif

    // 创建窗口对象（宽，高，名称）
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    // 将窗口上下文设置为当前线程的主上下文
    glfwMakeContextCurrent(window);
    // 注册函数，每当窗口调整大小时调用此函数
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // GLAD管理OpenGL函数指针，故在调用任何OpenGL的函数前，先要初始化GLAD
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        glfwTerminate();
        return -1;
    }

    / 编译构建shader代码
    Shader ourShader("shader.vs", "shader.fs");

    // 设置顶点数据，配置顶点属性
    float vertices[] = {
        //     ---- 位置 ----       ---- 颜色 ----     - 纹理坐标 -
             0.5f,  0.5f, 0.0f,   1.0f, 0.0f, 0.0f,   1.0f, 1.0f,   // 右上
             0.5f, -0.5f, 0.0f,   0.0f, 1.0f, 0.0f,   1.0f, 0.0f,   // 右下
            -0.5f, -0.5f, 0.0f,   0.0f, 0.0f, 1.0f,   0.0f, 0.0f,   // 左下
            -0.5f,  0.5f, 0.0f,   1.0f, 1.0f, 0.0f,   0.0f, 1.0f    // 左上
    };

    unsigned int indices[] = {
        0, 1, 3, // first triangle
        1, 2, 3  // second triangle
    };

    // 初始化顶点缓冲对象，顶点数组对象，元素缓冲对象
    unsigned int VBO, VAO, EBO;
    // 生成
    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);

    // 拷贝索引数组到元素缓冲对象（元素缓冲对象在顶点数组对象中，末尾）
    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);   // 步长变为为8个float
    glEnableVertexAttribArray(0);
    // 配置顶点属性：颜色，并启用
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));   // 单步长内偏移量为3个float
    glEnableVertexAttribArray(1);
    // 配置顶点属性：纹理坐标，并启用
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));   // 单步长内偏移量为3个float
    glEnableVertexAttribArray(2);

    // 多个纹理对象创建，绑定（类似之前生成对象的流程）
    unsigned int texture1, texture2;
    int width, height, nrChannels;

    // 纹理坐标原点在左下，单图像坐标原点在左上，所以在加载图像前需要翻转下y轴
    stbi_set_flip_vertically_on_load();

    // 第一个纹理
    glGenTextures(1, &texture1);
    glBindTexture(GL_TEXTURE_2D, texture1);
    // 设置纹理对象的环绕，过滤方式
    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);

    // 加载图片
    unsigned char* data1 = stbi_load("container.jpg", &width, &height, &nrChannels, 0);
    if (data1)
    {
        // 为当前绑定的纹理对象被附加上纹理图像
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data1);
        // 上面只加载了基本级别（第二个参数，0）的纹理图像。要使用多级渐远纹理，可以手动设置不同图像（不断递增第二个参数），或直接用下面方法
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture1" << std::endl;
    }

    // 第二个纹理
    glGenTextures(1, &texture2);
    glBindTexture(GL_TEXTURE_2D, texture2);
    // 设置纹理对象的环绕，过滤方式
    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);
    unsigned char* data2 = stbi_load("awesomeface.png", &width, &height, &nrChannels, 0);
    if (data2)
    {
        // 为当前绑定的纹理对象被附加上纹理图像，注意此图片为RGBA
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data2);
        // 上面只加载了基本级别（第二个参数，0）的纹理图像。要使用多级渐远纹理，可以手动设置不同图像（不断递增第二个参数），或直接用下面方法
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture2" << std::endl;
    }

    // 生成纹理后，释放图像内存
    stbi_image_free(data1);
    stbi_image_free(data2);

    ourShader.use();
    // 方法1：设置每个着色器采样器属于哪个纹理单元
    glUniform1i(glGetUniformLocation(ourShader.ID, "texture1"), 0);
    //glUniform1i(glGetUniformLocation(ourShader.ID, "texture2"), 1);
    // 方法2： 用着色器类，设置uniform
    // ourShader.setInt("texture1", 0);
    ourShader.setInt("texture2", 1);

    // 渲染循环
    while (!glfwWindowShouldClose(window))
    {
        // 输入
        processInput(window);


        // 渲染指令
        // ...

        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);   // 设置清空屏幕使用的颜色
        glClear(GL_COLOR_BUFFER_BIT);           // 清空颜色缓冲

        // 设置激活的纹理单元，绑定采样器到对应纹理单元
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, texture1);
        // 设置激活的纹理单元，绑定采样器到对应纹理单元
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, texture2);

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

        // 交换颜色缓冲
        glfwSwapBuffers(window);
        // 检查事件触发
        glfwPollEvents();
    }

    // 释放所有资源
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);

    // 释放分配的资源
    glfwTerminate();
    return 0;
}
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // 视口，告诉OpenGL渲染窗口的大小（前两个参数为窗口左下角位置，后两个为渲染窗口的宽高）
    glViewport(0, 0, width, height);
}

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

顶点shader：

#version 330 core

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 = vec2(aTexCoord.x, aTexCoord.y);
}

片段shader:

#version 330 core

out vec4 FragColor;

in vec3 ourColor;
in vec2 TexCoord;

// 两个纹理采样器
uniform sampler2D texture1;
uniform sampler2D texture2;

void main()
{
    // 以8 ：2的比例混合两个纹理
    FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2);

}

3. 练习

1. 修改片段着色器，仅让笑脸图案朝另一个方向看

纹理混合的时候，将笑脸的纹理坐标x值取反即可

FragColor = mix(texture(texture1, TexCoord), texture(texture2, vec2(-TexCoord.x, TexCoord.y)), 0.2);

2. 尝试用不同的纹理环绕方式，设定一个从`0.0f`到`2.0f`范围内的（而不是原来的`0.0f`到`1.0f`）纹理坐标。试试看能不能在箱子的角落放置4个笑脸

将纹理坐标改为原来的两倍，即从0.0f到2.0f。可以看到在范围外，图像重复。

方便观察起见，就只修改笑脸图案的环绕方式了。先将GL_TEXTURE_WRAP_S改为GL_MIRRORED_REPEAT，GL_TEXTURE_WRAP_T还是GL_REPEAT。可以看到沿X轴，以镜像方式重复。

将GL_TEXTURE_WRAP_T也改成GL_TEXTURE_WRAP_S，则就是完全上下左右镜像了。

s和t都改成GL_CLAMP_TO_EDGE，x和y方向超出范围会按照边缘色处理。但笑脸图案是RGBA的，周围刚好没有颜色，所以并不直观。

把箱子纹理也改成GL_CLAMP_TO_EDGE

箱子纹理改为GL_CLAMP_TO_BORDER

配置GL_TEXTURE_BORDER_COLOR时，可以为其指定边缘颜色

float borderColor[] = { 1.0f, 1.0f, 0.0f, 1.0f };
glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, borderColor);

3. 尝试在矩形上只显示纹理图像的中间一部分，修改纹理坐标，达到能看见单个的像素的效果。尝试使用GL_NEAREST的纹理过滤方式让像素显示得更清晰

关于取纹理中间，参考答案是直接改了顶点数据中的纹理坐标。我这里直接改了顶点shader

TexCoord = vec2(aTexCoord.x * 0.1 + 0.5, aTexCoord.y * 0.1 + 0.5);

直观起见，我就只展示箱子的纹理了。当配置GL_NEAREST时，有明显像素锯齿。

改为GL_LINEAR，线性插值后，明显平滑一些，但也更糊了

4. 使用一个uniform变量作为mix函数的第三个参数来改变两个纹理可见度，使用上和下键来改变箱子或笑脸的可见度：

片段shader

#version 330 core

out vec4 FragColor;

in vec3 ourColor;
in vec2 TexCoord;

// 两个纹理采样器
uniform sampler2D texture1;
uniform sampler2D texture2;
uniform float mixValue;

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

绘制文件

float mixValue = 0.2f;


// 渲染循环中
// ...

    // 根据按键修改比例
    processInput(window);

    // ...

    ourShader.setFloat("mixValue", mixValue);    // 修改uniform变量值

    // 绘制
    // ...

// ...


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

    if (glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS)
    {
        mixValue += 0.001f;
        if (mixValue >= 1.0f)
            mixValue = 1.0f;
    }
    if (glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS)
    {
        mixValue -= 0.001f;
        if (mixValue <= 0.0f)
            mixValue = 0.0f;
    }
}

林空语

关注

52
点赞
踩
43

收藏

觉得还不错? 一键收藏
0
评论
OpenGL_04_纹理

上面之所以uniform类型的纹理采样器，没有在代码中进行设置，是因为默认活跃的纹理单元为GL_TEXTURE0，调用glBindTexture的时候，会自动把纹理赋值给片段着色器的采样器（？也就是说，glActiveTexture用来选择当前活跃的纹理单元，glActiveTexture将纹理绑定到当前活跃的纹理单元上。方便起见，图片文件直接拷贝到代码文件同一目录下了。
复制链接

扫一扫