光照贴图
上一节中的那个材质系统是肯定不够的，它只是一个最简单的模型，所以我们需要拓展之前的系统，引入漫反射和镜面光贴图(Map)。这允许我们对物体的漫反射分量（以及间接地对环境光分量，它们几乎总是一样的）和镜面光分量有着更精确的控制。
漫反射贴图
我们希望通过某种方式对物体的每个片段单独设置漫反射颜色。有能够让我们根据片段在物体上的位置来获取颜色值的系统吗？
这可能听起来很熟悉，而且事实上这个系统我们已经使用很长时间了。这听起来很像在[之前](https://learnopengl-cn.github.io/01 Getting started/06 Textures/)教程中详细讨论过的纹理，而这基本就是这样：一个纹理。我们仅仅是对同样的原理使用了不同的名字：其实都是使用一张覆盖物体的图像，让我们能够逐片段索引其独立的颜色值。在光照场景中，它通常叫做一个漫反射贴图(Diffuse Map)（在PBR之前3D艺术家通常都这么叫它），它是一个表现了物体所有的漫反射颜色的纹理图像。
为了演示漫反射贴图，我们将会使用下面的图片，它是一个有钢边框的木箱：
在着色器中使用漫反射贴图的方法和纹理教程中是完全一样的。但这次我们会将纹理储存为Material结构体中的一个sampler2D。我们将之前定义的vec3漫反射颜色向量替换为漫反射贴图。
注意sampler2D是所谓的不透明类型(Opaque Type)，也就是说我们不能将它实例化，只能通过uniform来定义它。如果我们使用除uniform以外的方法（比如函数的参数）实例化这个结构体，GLSL会抛出一些奇怪的错误。这同样也适用于任何封装了不透明类型的结构体。
!NOTE
如果你非常固执，仍想将环境光颜色设置为一个（漫反射值之外）不同的值，你也可以保留这个环境光的
vec3，但整个物体仍只能拥有一个环境光颜色。如果想要对不同片段有不同的环境光值，你需要对环境光值单独使用另外一个纹理。
注意我们将在片段着色器中再次需要纹理坐标，所以我们声明一个额外的输入变量。接下来我们只需要从纹理中采样片段的漫反射颜色值即可：
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
不要忘记将环境光的材质颜色设置为漫反射材质颜色同样的值。
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
这就是使用漫反射贴图的全部步骤了。你可以看到，这并不是什么新的东西，但这能够极大地提高视觉品质。为了让它正常工作，我们还需要使用纹理坐标更新顶点数据，将它们作为顶点属性传递到片段着色器，加载材质并绑定材质到合适的纹理单元。
- 纹理模式：颜色来自纹理，光照强度来自光源
- 纯颜色模式：颜色来自材质属性，光照强度来自光源
- 混合模式：颜色 = 纹理颜色 × 材质颜色，光照强度来自光源
当前代码使用的是：纹理颜色（环境光/漫反射）+ 材质颜色（镜面反射）
// 环境光：使用纹理颜色
vec3 ambient = light.ambient * textureColor;
// 漫反射：使用纹理颜色
vec3 diffuse = light.diffuse * (diff * textureColor);
// 镜面反射：使用材质颜色（material.specular）
vec3 specular = light.specular * (spec * material.specular);
完整代码如下：
#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>
#include <cmath>
#include <imgui.h>
#include <imgui_impl_glfw.h>
#include <imgui_impl_opengl3.h>
#include <opencv2/opencv.hpp>
#include <opencv2/imgcodecs.hpp>
#include "utils/shader.h"
#include "utils/glmCompute.h"
#include "include/dpi_stabilizer.h"
#include "include/imgui_manager.h"
using namespace glm;
using namespace cv;
// 使用 OpenCV 加载纹理
unsigned int loadTexture(const char* path) {
unsigned int textureID;
glGenTextures(1, &textureID);
// 使用 OpenCV 读取图像
Mat image = imread(path, IMREAD_COLOR);
if (image.empty()) {
std::cout << "Failed to load texture at path: " << path << std::endl;
return textureID;
}
// OpenCV 使用 BGR，OpenGL 使用 RGB，需要转换
Mat rgbImage;
cvtColor(image, rgbImage, COLOR_BGR2RGB);
// 翻转图像（OpenGL 期望的 Y 轴方向）
flip(rgbImage, rgbImage, 0);
glBindTexture(GL_TEXTURE_2D, textureID);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, rgbImage.cols, rgbImage.rows, 0, GL_RGB, GL_UNSIGNED_BYTE, rgbImage.data);
glGenerateMipmap(GL_TEXTURE_2D);
// 设置纹理参数
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_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
return textureID;
}
// 窗口大小改变时的回调函数
void framebuffer_size_callback(GLFWwindow* window, int width, int height) {
glViewport(0, 0, width, height);
}
// 全局变量
float deltaTime = 0.0f; // 当前帧与上一帧的时间差
float lastFrame = 0.0f; // 上一帧的时间
// DPI 稳定器实例
DPIStabilizer dpiStabilizer(0.1f, 50.0f, 0.8f);
// ImGui 管理器实例
ImGuiManager imguiManager;
// 简化的输入处理函数
void processInput(GLFWwindow *window){
// 使用 DPI 稳定器处理所有输入
dpiStabilizer.processKeyboardInput(window);
if (glfwGetKey(window, GLFW_KEY_F2) == GLFW_PRESS) {
imguiManager.toggleWindow("控制面板");
}
if (glfwGetKey(window, GLFW_KEY_F3) == GLFW_PRESS) {
imguiManager.toggleWindow("性能监控");
}
if (glfwGetKey(window, GLFW_KEY_F4) == GLFW_PRESS) {
imguiManager.toggleWindow("调试信息");
}
// 显示统计信息 (按 T 键)
if (glfwGetKey(window, GLFW_KEY_T) == GLFW_PRESS) {
std::cout << dpiStabilizer.getStats() << std::endl;
}
}
int main() {
// 模型矩阵
mat4 model = mat4(1.0f);
model = rotate(model, radians(-55.0f), vec3(1.0f, 0.0f, 0.0f));
// 投影矩阵
mat4 projection = perspective(radians(45.0f), (float)800 / (float)600, 0.1f, 100.0f);
// 初始化GLFW
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
// 设置 DPI 感知提示
DPIStabilizer::setDPIHint();
// 创建窗口
GLFWwindow* window = glfwCreateWindow(800, 600, "OpenGL Window", NULL, NULL);
if (window == NULL) {
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
// 初始化 DPI 稳定器
dpiStabilizer.initialize(window);
// 初始化GLAD
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {
std::cout << "Failed to initialize GLAD" << std::endl;
return -1;
}
// 初始化 ImGui 管理器
imguiManager.initialize(window);
// 注册窗口
imguiManager.registerWindow("Hello ImGui!", []() {
ImGui::Text("DPI 稳定器状态: %s", dpiStabilizer.isMouseCaptured() ? "已捕获" : "已释放");
ImGui::Text("鼠标敏感度: %.3f", dpiStabilizer.getSensitivity());
if (ImGui::Button("重置统计")) {
dpiStabilizer.resetStats();
}
float sensitivity = dpiStabilizer.getSensitivity();
if (ImGui::SliderFloat("鼠标敏感度", &sensitivity, 0.01f, 0.5f)) {
dpiStabilizer.setSensitivity(sensitivity);
}
});
imguiManager.registerWindow("控制面板", []() {
ImGuiIO& io = ImGui::GetIO();
ImGui::Text("FPS: %.1f", io.Framerate);
ImGui::Text("帧时间: %.3f ms", 1000.0f / io.Framerate);
});
// 启用深度测试
glEnable(GL_DEPTH_TEST);
float vertices[] = {
// 立方体顶点数据（位置 + 法线 + 纹理坐标）
// 位置(3) + 法线(3) + 纹理坐标(2) = 8个浮点数
// 前面
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f,
0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f,
-0.5f, -0.5f, 0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f,
// 后面
-0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.0f, 0.0f,
0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 1.0f, 0.0f,
0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 1.0f, 1.0f,
0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.0f, 1.0f,
-0.5f, -0.5f, -0.5f, 0.0f, 0.0f, -1.0f, 0.0f, 0.0f,
// 左面
-0.5f, 0.5f, 0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
-0.5f, 0.5f, -0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 1.0f,
-0.5f, -0.5f, -0.5f, -1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
-0.5f, -0.5f, -0.5f, -1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
-0.5f, -0.5f, 0.5f, -1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
-0.5f, 0.5f, 0.5f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
// 右面
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f,
0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
0.5f, -0.5f, -0.5f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f,
0.5f, -0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f,
0.5f, 0.5f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f,
// 下面
-0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.0f, 1.0f,
0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 1.0f, 1.0f,
0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, 1.0f, 0.0f,
0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, 1.0f, 0.0f,
-0.5f, -0.5f, 0.5f, 0.0f, -1.0f, 0.0f, 0.0f, 0.0f,
-0.5f, -0.5f, -0.5f, 0.0f, -1.0f, 0.0f, 0.0f, 1.0f,
// 上面
-0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f,
0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f,
0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,
0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f,
-0.5f, 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f,
-0.5f, 0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f
};
// 创建VAO
unsigned int VAO;
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO); // 绑定VAO
// 创建VBO
unsigned int VBO;
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO); // 绑定VBO
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
int nrAttributes;
glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);
std::cout << "Maximum nr of vertex attributes supported: " << nrAttributes << std::endl;
// 位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0); // 启用顶点属性
// 法线属性
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1); // 启用法线属性
// 纹理坐标属性
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
glEnableVertexAttribArray(2); // 启用纹理坐标属性
// 构建并编译着色器程序
Shader lightingShader("shader/lighting.vert", "shader/lighting.frag");
Shader lampShader("shader/lamp.vert", "shader/lamp.frag");
// 加载纹理
unsigned int texture1 = loadTexture("Assets/image.png");
if (texture1 == 0) {
std::cout << "Failed to load texture" << std::endl;
}
// 创建光源的 VAO
unsigned int lightVAO;
glGenVertexArrays(1, &lightVAO);
glBindVertexArray(lightVAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 光源位置
vec3 lightPos(1.2f, 1.0f, 2.0f);
// 相机位置（观察空间）
vec3 viewPos = dpiStabilizer.getCameraPosition();
// 渲染循环
while (!glfwWindowShouldClose(window)) {
// 处理输入
processInput(window);
glfwPollEvents();
// 从 DPI 稳定器获取 view 矩阵
mat4 view = dpiStabilizer.getViewMatrix();
float currentFrame = glfwGetTime();
deltaTime = currentFrame - lastFrame;
lastFrame = currentFrame;
// 渲染指令
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// 使用光照着色器绘制物体
lightingShader.use();
// 绑定纹理
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture1);
lightingShader.setInt("material.diffuse", 0);
lightingShader.setMat4("projection", projection);
lightingShader.setMat4("view", view);
lightingShader.setMat4("model", model);
lightingShader.setVec3("light.position", lightPos.x, lightPos.y, lightPos.z);
lightingShader.setVec3("light.ambient", 1.0f, 1.0f, 1.0f); // 最大环境光强度
lightingShader.setVec3("light.diffuse", 1.0f, 1.0f, 1.0f); // 增加漫反射强度
lightingShader.setVec3("light.specular", 1.0f, 1.0f, 1.0f);
lightingShader.setVec3("material.specular", 0.633f, 0.727811f, 0.633f);
// 高光指数：通常乘以 128 (OpenGL 最大的 1.0 对应 128)
lightingShader.setFloat("material.shininess", 0.6f * 128.0f); // 76.8
// 设置相机位置（观察空间）
vec3 currentViewPos = dpiStabilizer.getCameraPosition();
lightingShader.setVec3("viewPos", currentViewPos.x, currentViewPos.y, currentViewPos.z);
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 36);
// 绘制光源立方体
lampShader.use();
lampShader.setMat4("projection", projection);
lampShader.setMat4("view", view);
// 光源立方体的模型矩阵
mat4 lampModel = mat4(1.0f);
lampModel = translate(lampModel, lightPos);
lampModel = scale(lampModel, vec3(0.2f)); // 缩小光源立方体
lampShader.setMat4("model", lampModel);
glBindVertexArray(lightVAO);
glDrawArrays(GL_TRIANGLES, 0, 36);
// 使用 ImGui 管理器渲染所有窗口
imguiManager.render();
// 交换缓冲区和检查IO事件
glfwSwapBuffers(window);
}
// 清理 ImGui 管理器
imguiManager.shutdown();
// 清理资源
glDeleteVertexArrays(1, &VAO);
glDeleteVertexArrays(1, &lightVAO);
glDeleteBuffers(1, &VBO);
glDeleteTextures(1, &texture1);
glfwTerminate();
return 0;
}
镜面光贴图
你可能会注意到，镜面高光看起来有些奇怪，因为我们的物体大部分都是木头，我们知道木头不应该有这么强的镜面高光的。我们可以将物体的镜面光材质设置为vec3(0.0)来解决这个问题，但这也意味着箱子钢制的边框将不再能够显示镜面高光了，我们知道钢铁应该是有一些镜面高光的。所以，我们想要让物体的某些部分以不同的强度显示镜面高光。这个问题看起来和漫反射贴图非常相似。是巧合吗？我想不是。
我们同样可以使用一个专门用于镜面高光的纹理贴图。这也就意味着我们需要生成一个黑白的（如果你想得话也可以是彩色的）纹理，来定义物体每部分的镜面光强度。下面是一个镜面光贴图(Specular Map)的例子：
镜面高光的强度可以通过图像每个像素的亮度来获取。镜面光贴图上的每个像素都可以由一个颜色向量来表示，比如说黑色代表颜色向量vec3(0.0)，灰色代表颜色向量vec3(0.5)。在片段着色器中，我们接下来会取样对应的颜色值并将它乘以光源的镜面强度。一个像素越「白」，乘积就会越大，物体的镜面光分量就会越亮。
由于箱子大部分都由木头所组成，而且木头材质应该没有镜面高光，所以漫反射纹理的整个木头部分全部都转换成了黑色。箱子钢制边框的镜面光强度是有细微变化的，钢铁本身会比较容易受到镜面高光的影响，而裂缝则不会。
从实际角度来说，木头其实也有镜面高光，尽管它的反光度(Shininess)很小（更多的光被散射），影响也比较小，但是为了教学目的，我们可以假设木头不会对镜面光有任何反应。
使用Photoshop或Gimp之类的工具，将漫反射纹理转换为镜面光纹理还是比较容易的，只需要剪切掉一些部分，将图像转换为黑白的，并增加亮度/对比度就好了。
采样镜面光贴图
镜面光贴图和其它的纹理非常类似，所以代码也和漫反射贴图的代码很类似。记得要保证正确地加载图像并生成一个纹理对象。由于我们正在同一个片段着色器中使用另一个纹理采样器，我们必须要对镜面光贴图使用一个不同的纹理单元（见[纹理](https://learnopengl-cn.github.io/01 Getting started/06 Textures/)），所以我们在渲染之前先把它绑定到合适的纹理单元上：
lightingShader.setInt("material.specular", 1);
...
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, specularMap);
接下来更新片段着色器的材质属性，让其接受一个sampler2D而不是vec3作为镜面光分量：
struct Material {
sampler2D diffuse;
sampler2D specular;
float shininess;
};
最后我们希望采样镜面光贴图，来获取片段所对应的镜面光强度：
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
vec3 specular = light.specular * spec * vec3(texture(material.specular, TexCoords));
FragColor = vec4(ambient + diffuse + specular, 1.0);
通过使用镜面光贴图我们可以可以对物体设置大量的细节，比如物体的哪些部分需要有闪闪发光的属性，我们甚至可以设置它们对应的强度。镜面光贴图能够在漫反射贴图之上给予我们更高一层的控制。
如果你想另辟蹊径，你也可以在镜面光贴图中使用真正的颜色，不仅设置每个片段的镜面光强度，还设置了镜面高光的颜色。从现实角度来说，镜面高光的颜色大部分（甚至全部）都是由光源本身所决定的，所以这样并不能生成非常真实的视觉效果（这也是为什么图像通常是黑白的，我们只关心强度）。
如果你现在运行程序的话，你可以清楚地看到箱子的材质现在和真实的钢制边框箱子非常类似了：
你可以在这里找到程序的全部源码。
通过使用漫反射和镜面光贴图，我们可以给相对简单的物体添加大量的细节。我们甚至可以使用法线/凹凸贴图(Normal/Bump Map)或者反射贴图(Reflection Map)给物体添加更多的细节，但这些将会留到之后的教程中。把你的箱子给你的朋友或者家人看看，并且坚信我们的箱子有一天会比现在更加漂亮！