【OpenGL学习】（四）统一着色和插值着色

【OpenGL学习】（四）统一着色和插值着色

着色器介绍：
https://learnopengl-cn.github.io/01%20Getting%20started/05%20Shaders/

统一着色（Flat/Uniform Shading）

统一着色下，所有像素使用相同的颜色，没有插值，不考虑光照、材质等细节。

#include <glad/glad.h>
#include <GLFW/glfw3.h>#include <iostream>
#include <cmath>void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);// 窗口设置
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;// 顶点着色器源码
// 没有颜色输入，仅负责设置顶点位置
const char *vertexShaderSource = "#version 330 core\n""layout (location = 0) in vec3 aPos;\n"  // 位置属性"void main()\n""{\n""   gl_Position = vec4(aPos, 1.0);\n"   // 设置最终裁剪空间位置"}\0";// 片段着色器源码
// 使用 uniform 统一变量接收颜色，实现统一着色
const char *fragmentShaderSource = "#version 330 core\n""out vec4 FragColor;\n"                // 输出颜色"uniform vec4 ourColor;\n"            // uniform变量，全局统一颜色"void main()\n""{\n""   FragColor = ourColor;\n"          // 所有像素都使用统一的 ourColor 值，即实现统一着色"}\n\0";int main()
{// 初始化 GLFWglfwInit();glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); // OpenGL 版本号设置为 3.3glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); // 使用核心模式#ifdef __APPLE__glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // 兼容 macOS
#endif// 创建窗口GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);if (window == NULL){std::cout << "创建 GLFW 窗口失败" << std::endl;glfwTerminate();return -1;}glfwMakeContextCurrent(window);glfwSetFramebufferSizeCallback(window, framebuffer_size_callback); // 注册窗口大小变化回调// 初始化 GLADif (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "初始化 GLAD 失败" << std::endl;return -1;}// 编译着色器// 顶点着色器unsigned 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 << "错误::着色器::顶点::编译失败\n" << infoLog << std::endl;}// 片段着色器unsigned 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 << "错误::着色器::片段::编译失败\n" << infoLog << std::endl;}// 创建着色器程序并链接unsigned 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 << "错误::着色器::程序::链接失败\n" << infoLog << std::endl;}// 删除着色器对象，它们已经链接到程序中glDeleteShader(vertexShader);glDeleteShader(fragmentShader);// 顶点数据，三角形三个顶点坐标float vertices[] = {0.5f, -0.5f, 0.0f,  // 右下角-0.5f, -0.5f, 0.0f,  // 左下角0.0f,  0.5f, 0.0f   // 顶部};unsigned int VBO, VAO;glGenVertexArrays(1, &VAO); // 顶点数组对象glGenBuffers(1, &VBO);      // 顶点缓冲对象// 绑定 VAOglBindVertexArray(VAO);// 绑定 VBO，设置数据glBindBuffer(GL_ARRAY_BUFFER, VBO);glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);// 设置顶点属性指针glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0); // 启用顶点属性// render loop 渲染循环while (!glfwWindowShouldClose(window)){// 处理输入processInput(window);// 清屏背景色glClearColor(0.2f, 0.3f, 0.3f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);// 激活着色器程序glUseProgram(shaderProgram);// ----------- 设置 uniform 变量实现统一着色 ------------// 获取时间值，用来动态变化颜色double timeValue = glfwGetTime();float greenValue = static_cast<float>(sin(timeValue) / 2.0 + 0.5);// 获取 uniform 变量位置int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");// 设置统一颜色为动态变化的绿色glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);// ----------------------------------------------------// 绘制三角形glBindVertexArray(VAO); glDrawArrays(GL_TRIANGLES, 0, 3);// 交换缓冲区，处理事件glfwSwapBuffers(window);glfwPollEvents();}// 删除资源glDeleteVertexArrays(1, &VAO);glDeleteBuffers(1, &VBO);glDeleteProgram(shaderProgram);glfwTerminate(); // 释放 GLFW 资源return 0;
}// 处理输入事件：按下 ESC 键关闭窗口
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);
}

---

程序通过以下步骤实现统一着色：

1. 片段着色器中定义了 uniform 变量：

   uniform vec4 ourColor;
   

   这是一个全局变量，作用于所有像素（片段）。

2. 片段着色器统一使用该颜色输出：

   FragColor = ourColor;
   

3. 通过 glUniform4f() 设置颜色值：

        // ----------- 设置 uniform 变量实现统一着色 ------------// 获取时间值，用来动态变化颜色double timeValue = glfwGetTime();float greenValue = static_cast<float>(sin(timeValue) / 2.0 + 0.5);// 获取 uniform 变量位置int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");// 设置统一颜色为动态变化的绿色glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);// ----------------------------------------------------
   

插值着色（Interpolated Shading）

插值着色下，各个像素的颜色是根据各个顶点的颜色进行插值得到的。

#include <glad/glad.h>
#include <GLFW/glfw3.h>#include <iostream>// 当窗口大小发生变化时，调整视口
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{glViewport(0, 0, width, height);
}// 处理输入：按下ESC键关闭窗口
void processInput(GLFWwindow *window)
{if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)glfwSetWindowShouldClose(window, true);
}// 设置窗口尺寸
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;// 顶点着色器源码
const char *vertexShaderSource = R"glsl(
#version 330 core
layout (location = 0) in vec3 aPos;    // 顶点位置
layout (location = 1) in vec3 aColor;  // 顶点颜色out vec3 ourColor; // 输出变量，将传递给片段着色器void main()
{gl_Position = vec4(aPos, 1.0);ourColor = aColor; // 将每个顶点的颜色传递给片段着色器
}
)glsl";// 片段着色器源码
const char *fragmentShaderSource = R"glsl(
#version 330 core
in vec3 ourColor; // 从顶点着色器传入的颜色（已插值）out vec4 FragColor;void main()
{FragColor = vec4(ourColor, 1.0); // 使用插值后的颜色作为输出颜色
}
)glsl";int main()
{// 初始化并配置GLFWglfwInit();glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); // OpenGL主版本号glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3); // OpenGL次版本号glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); // 使用核心模式#ifdef __APPLE__glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // Mac OS X需要
#endif// 创建窗口GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "插值着色示例", NULL, NULL);if (window == NULL){std::cout << "创建GLFW窗口失败" << std::endl;glfwTerminate();return -1;}glfwMakeContextCurrent(window);// 设置窗口尺寸变化的回调函数glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);// 初始化GLAD，加载OpenGL函数指针if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "初始化GLAD失败" << std::endl;return -1;}// 编译顶点着色器unsigned 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::顶点着色器::编译失败\n" << infoLog << std::endl;}// 编译片段着色器unsigned 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::片段着色器::编译失败\n" << infoLog << std::endl;}// 链接着色器程序unsigned 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::着色器程序::链接失败\n" << infoLog << std::endl;}// 删除着色器对象，它们已经链接到程序中，不再需要glDeleteShader(vertexShader);glDeleteShader(fragmentShader);// 设置顶点数据和缓冲，并配置顶点属性float vertices[] = {// 位置             // 颜色0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f, // 右下角，红色-0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f, // 左下角，绿色0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f  // 顶部，蓝色};unsigned int VBO, VAO;glGenVertexArrays(1, &VAO); // 生成顶点数组对象glGenBuffers(1, &VBO);      // 生成顶点缓冲对象// 绑定顶点数组对象glBindVertexArray(VAO);// 绑定顶点缓冲对象glBindBuffer(GL_ARRAY_BUFFER, VBO);// 将顶点数据复制到缓冲中glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);// 设置顶点位置属性指针// 参数说明：// 0 - 指定要修改的顶点属性的位置值（与顶点着色器中的layout(location=0)对应）// 3 - 每个顶点属性由3个分量组成（x,y,z坐标）// GL_FLOAT - 数据类型为GLfloat（32位浮点数）// GL_FALSE - 表示不需要对数据进行归一化处理// 6 * sizeof(float) -  stride（步长），表示连续顶点之间的字节偏移量//                      这里每个顶点有6个float（3个位置+3个颜色）// (void*)0 - 起始偏移量，表示位置数据从缓冲区的开头开始glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);// 启用顶点属性数组0（位置属性）// 必须调用此函数才能使能顶点属性数组，否则该属性不会被使用glEnableVertexAttribArray(0);// 设置顶点颜色属性指针// 参数说明：// 1 - 指定要修改的顶点属性的位置值（与顶点着色器中的layout(location=1)对应）// 3 - 每个顶点属性由3个分量组成（r,g,b颜色）// GL_FLOAT - 数据类型为GLfloat（32位浮点数）// GL_FALSE - 表示不需要对数据进行归一化处理// 6 * sizeof(float) - 相同的stride值，因为顶点数据是交错排列的// (void*)(3 * sizeof(float)) - 起始偏移量，表示颜色数据从第4个float开始//                            （前3个float是位置数据）glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));// 启用顶点属性数组1（颜色属性）glEnableVertexAttribArray(1);// 使用着色器程序glUseProgram(shaderProgram);// 渲染循环while (!glfwWindowShouldClose(window)){// 处理输入processInput(window);// 清除颜色缓冲glClearColor(0.2f, 0.3f, 0.3f, 1.0f); // 设置清除颜色glClear(GL_COLOR_BUFFER_BIT);         // 清除颜色缓冲// 绘制三角形glBindVertexArray(VAO); // 绑定VAOglDrawArrays(GL_TRIANGLES, 0, 3); // 绘制三角形// 交换缓冲区并查询IO事件glfwSwapBuffers(window);glfwPollEvents();}// 可选：释放资源glDeleteVertexArrays(1, &VAO);glDeleteBuffers(1, &VBO);glDeleteProgram(shaderProgram);// 终止GLFW，清理资源glfwTerminate();return 0;
}

在OpenGL中，跨着色器传递数据需在发送方声明out变量，接收方声明匹配的in变量（同名同类型）。链接程序时，OpenGL会自动关联这些变量，实现数据传输。

顶点着色器：

const char *vertexShaderSource ="#version 330 core\n""layout (location = 0) in vec3 aPos;\n"       // 顶点位置输入"layout (location = 1) in vec3 aColor;\n"     // 顶点颜色输入"out vec3 ourColor;\n"                        // 输出变量，将传递给片段着色器"void main()\n""{\n""   gl_Position = vec4(aPos, 1.0);\n"         // 设置顶点位置"   ourColor = aColor;\n"                     // 将顶点颜色赋值给输出变量"}\0";

片段着色器：

const char *fragmentShaderSource = "#version 330 core\n""out vec4 FragColor;\n"                       // 最终输出的片段颜色"in vec3 ourColor;\n"                         // 接收从顶点着色器传来的插值颜色"void main()\n""{\n""   FragColor = vec4(ourColor, 1.0f);\n"      // 使用插值后的颜色作为片段颜色"}\n\0";

顶点着色器将每个顶点的颜色信息通过 out 变量 ourColor 传递给片段着色器，片段着色器再通过 in 变量 ourColor 接收该信息。

在主程序中，顶点数据需要包括位置和颜色信息：

float vertices[] = {// 位置             // 颜色0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // 右下角，红色-0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // 左下角，绿色0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f   // 顶部，蓝色
};

渲染三角形时，OpenGL 会自动为三角形内的每一个片段自动计算 ourColor 的插值值（基于顶点的颜色和片段在三角形内的位置）。