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

文章目录

• 【OpenGL学习】（四）统一着色和插值着色
• • • 统一着色（Flat/Uniform Shading）
    • 插值着色（Interpolated Shading）

【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()
{
// 初始化 GLFW
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); // OpenGL 版本号设置为 3.3
glfwWindowHint(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); // 注册窗口大小变化回调

// 初始化 GLAD
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 << "错误::着色器::顶点::编译失败\\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); // 顶点缓冲对象

// 绑定 VAO
glBindVertexArray(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);
}

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

插值着色（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()
{
// 初始化并配置GLFW
glfwInit();
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); // 绑定VAO
glDrawArrays(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 的插值值（基于顶点的颜色和片段在三角形内的位置）。