中级OpenGL教程 004：为几何体注入法线灵魂

✨3D 渲染进阶｜为 Geometry 几何体注入法线灵魂：从数据到渲染全流程指南

• [Bilibili 同步视频](#Bilibili 同步视频)
• [🎯 核心目标：为几何体补齐法线属性](#🎯 核心目标：为几何体补齐法线属性)
• [🔍 核心认知：顶点重合≠数据复用](#🔍 核心认知：顶点重合≠数据复用)
• [📝 Step 1：手写立方体法线数据](#📝 Step 1：手写立方体法线数据)
• [⚙️ Step 2：法线接入 VBO + VAO 渲染管线](#⚙️ Step 2：法线接入 VBO + VAO 渲染管线)
• • [1. 声明并销毁法线 VBO](#1. 声明并销毁法线 VBO)
  • [2. 生成并绑定法线数据](#2. 生成并绑定法线数据)
  • [3. VAO 配置法线属性](#3. VAO 配置法线属性)
• [🎨 Step 3：终极验证｜法线→颜色可视化输出](#🎨 Step 3：终极验证｜法线→颜色可视化输出)
• • [1. 顶点着色器（Vertex Shader）修改](#1. 顶点着色器（Vertex Shader）修改)
  • [2. 片元着色器（Fragment Shader）修改](#2. 片元着色器（Fragment Shader）修改)
  • [3. 运行效果验证](#3. 运行效果验证)
• [💡 总结：一套流程，全几何体通用](#💡 总结：一套流程，全几何体通用)

Bilibili 同步视频

中级OpenGL教程 004：为几何体注入法线灵魂

在 3D 图形渲染的浩瀚世界中，法线（Normal） 是照亮模型、塑造质感、还原真实光影的核心密钥🔑。我们常用的基础几何体 ------ 立方体（Box）、球体（Sphere）、平面（Plane），往往仅具备顶点位置与 UV 纹理坐标，却缺失了法线这一关键属性。没有法线的模型，如同失去方向的孤舟，无法与光照交互，更无法呈现立体饱满的视觉效果。

本次我们将以立方体（Box） 为核心载体，一步步完成法线属性添加→VBO/VAO 配置→Shader 验证的完整流程，让基础几何体真正拥有属于自己的 "方向感"✨。

---

🎯 核心目标：为几何体补齐法线属性

我们的目标清晰且明确：

为 Geometry 类中的 Box、Sphere、Plane 三大基础几何体，统一添加法线属性。

为了让流程更顺滑，提前封装了CreatePlane() 函数，支持传入宽度、高度快速生成平面顶点数据，无分段需求时仅需基础顶点即可完成构建，支持后续分段逻辑扩展，极大简化了平面几何体的开发成本✅。

// 简易 CreatePlane 函数核心逻辑
void CreatePlane(float width, float height)
{
    // 生成平面顶点位置、UV 数据
    // 无分段时仅需 4 个顶点构建两个三角形
}

---

🔍 核心认知：顶点重合≠数据复用

很多初学者会陷入一个误区：立方体部分顶点坐标重合，为何要重复定义数据？

答案就藏在法线里！

立方体的每个面，法线方向完全独立：

• 前表面法线 → 正 Z 轴方向

• 后表面法线 → 负 Z 轴方向

• 上表面法线 → 正 Y 轴方向

• 下表面法线 → 负 Y 轴方向

• 右表面法线 → 正 X 轴方向

• 左表面法线 → 负 X 轴方向

即便两个顶点位置坐标完全重合 ，只要属于不同的面，它们的法线值就截然不同。因此，我们必须将其视为两个独立的顶点，单独存储数据并赋予专属法线，才能保证后续渲染的准确性，这是 3D 几何体开发的关键细节⚠️。

---

📝 Step 1：手写立方体法线数据

打开 Geometry 类中的 CreateBox() 函数，在 UV 数据之后，新增法线数据数组，为立方体的 6 个面逐一赋值。

立方体每个面包含 4 个顶点，同一面的 4 个顶点法线方向完全一致，赋值逻辑极简清晰：

// 立方体法线数据定义
float normals[] = {
    // 前面 Front : 0,0,1
    0.0f, 0.0f, 1.0f,
    0.0f, 0.0f, 1.0f,
    0.0f, 0.0f, 1.0f,
    0.0f, 0.0f, 1.0f,

    // 后面 Back : 0,0,-1
    0.0f, 0.0f, -1.0f,
    0.0f, 0.0f, -1.0f,
    0.0f, 0.0f, -1.0f,
    0.0f, 0.0f, -1.0f,

    // 上面 Top : 0,1,0
    0.0f, 1.0f, 0.0f,
    0.0f, 1.0f, 0.0f,
    0.0f, 1.0f, 0.0f,
    0.0f, 1.0f, 1.0f,

    // 下面 Bottom : 0,-1,0
    0.0f, -1.0f, 0.0f,
    0.0f, -1.0f, 0.0f,
    0.0f, -1.0f, 0.0f,
    0.0f, -1.0f, 0.0f,

    // 右面 Right : 1,0,0
    1.0f, 0.0f, 0.0f,
    1.0f, 0.0f, 0.0f,
    1.0f, 1.0f, 0.0f,
    1.0f, 0.0f, 0.0f,

    // 左面 Left : -1,0,0
    -1.0f, 0.0f, 0.0f,
    -1.0f, 0.0f, 0.0f,
    -1.0f, 0.0f, 0.0f,
    -1.0f, 0.0f, 0.0f,
};

完成数据编写后，法线的核心数据层就已构建完毕，接下来需要让 GPU 识别并使用这份数据🚀。

---

⚙️ Step 2：法线接入 VBO + VAO 渲染管线

顶点数据需要通过 VBO（顶点缓冲对象） 传递给 GPU，再通过 VAO（顶点数组对象） 管理属性格式，我们参照顶点位置、UV 的配置逻辑，为法线完成缓冲绑定。

1. 声明并销毁法线 VBO

在 Geometry 类中新增法线 VBO 成员变量，并在析构函数中完成安全销毁，避免内存泄漏：

// Geometry 类中声明
GLuint m_normalVBO;

// 析构函数销毁
if (m_normalVBO != 0)
{
    glDeleteBuffers(1, &m_normalVBO);
    m_normalVBO = 0;
}

2. 生成并绑定法线数据

在 CreateBox() 函数中，生成法线 VBO 并绑定数据，流程与顶点、UV 完全一致：

// 生成法线 VBO
glGenBuffers(1, &m_normalVBO);
glBindBuffer(GL_ARRAY_BUFFER, m_normalVBO);
// 灌入法线数据
glBufferData(GL_ARRAY_BUFFER, sizeof(normals), normals, GL_STATIC_DRAW);

3. VAO 配置法线属性

VAO 属性索引规划：

• 0 号位 → 顶点位置（Position）

• 1 号位 → UV 纹理坐标

• 2 号位 → 法线（Normal）

配置顶点属性指针，告诉 GPU 法线数据的格式与偏移：

// 绑定法线 VBO 到 2 号属性
glBindBuffer(GL_ARRAY_BUFFER, m_normalVBO);
glVertexAttribPointer(
    2,                  // 属性位置
    3,                  // 每个法线 3 个 float
    GL_FLOAT,           // 数据类型
    GL_FALSE,           // 不归一化
    3 * sizeof(float),  // 步长
    (void*)0            // 偏移量
);
glEnableVertexAttribArray(2);

至此，法线数据正式接入渲染管线，GPU 可以完美读取并使用法线属性✅。

---

🎨 Step 3：终极验证｜法线→颜色可视化输出

如何百分百确认法线添加正确？最直观、最高效的方式：将法线作为颜色输出！

原理：将法线的 X、Y、Z 分量，分别对应颜色的 R、G、B 通道，通过颜色直接判断法线方向💡。

1. 顶点着色器（Vertex Shader）修改

在 2 号属性位置接收法线，直接传递给片元着色器：

#version 330 core
layout (location = 0) in vec3 a_pos;
layout (location = 1) in vec2 a_uv;
layout (location = 2) in vec3 a_normal;

out vec3 normal;

void main()
{
    gl_Position = vec4(a_pos, 1.0);
    // 直接传递法线数据
    normal = a_normal;
}

2. 片元着色器（Fragment Shader）修改

两步处理：归一化 + 负值截断，解决法线负数无法显示为颜色的问题：

#version 330 core
in vec3 normal;
out vec4 FragColor;

void main()
{
    // 1. 归一化法线，保证数据规范
    vec3 normal_in = normalize(normal);
    // 2. clamp 函数截断负值，将分量限制在 [0,1]
    vec3 normal_color = clamp(normal_in, 0.0, 1.0);
    // 输出法线颜色
    FragColor = vec4(normal_color, 1.0);
}

3. 运行效果验证

• 正 Z 轴前面 → 纯蓝色（0,0,1）💙

• 正 X 轴右面 → 纯红色（1,0,0）❤️

• 正 Y 轴上面 → 纯绿色（0,1,0）💚

• 负方向表面 → 纯黑色⚫

颜色完全符合预期，法线添加 100% 正确！

---

💡 总结：一套流程，全几何体通用

本次我们完成了从0 到 1 为立方体添加法线的全流程，这套逻辑可直接复用至 Sphere、Plane 等所有几何体：

1. 按几何体形状计算对应法线数据

2. 配置法线 VBO + VAO 属性

3. 用「法线转颜色」快速验证

这是 3D 渲染入门的核心技能，也是后续实现光照、阴影、PBR 材质的基础。当我们遇到数据异常时，将中间量转为颜色输出，永远是定位问题的最优解🌟。

法线，是 3D 模型的灵魂方向，也是光影世界的第一束光。掌握它，就能真正打开 3D 渲染的大门，解锁更绚丽的视觉效果✨。