从零构建完整光照Shader：环境光、漫反射与镜面反射实战解析

1. 项目概述：从“能看见”到“看得真实”

在图形渲染的世界里，光照效果是区分“能看见”和“看得真实”的关键分水岭。一个没有光照的3D模型，就像在无影灯下观察一个石膏像，虽然能看到形状，但缺乏体积感、空间感和材质感。而一旦引入了光照计算，模型瞬间就“活”了过来，它的表面开始对光线产生反应，有了明暗、高光、阴影，材质也得以显现——金属是冰冷的反光，布料是柔和的漫反射，皮肤则带有微妙的次表面散射。这个将光线与物体表面交互过程进行数学模拟和计算的核心，就是Shader（着色器）。

我接触Shader开发有年头了，从最早在固定管线里调几个光照参数，到现在完全基于可编程管线（如OpenGL的GLSL， Unity的HLSL/CG）去构建复杂的光照模型，这个过程充满了挑战也极具成就感。很多人觉得Shader高深莫测，是图形程序员的专属领域。其实不然，只要你理解了光照背后的物理原理和基本的数学工具（主要是向量和点乘），你就能亲手创造出令人惊叹的视觉效果。这个项目，我们就来系统地拆解一个“完整的光照效果”到底包含哪些部分，以及如何一步步用代码实现它。我们的目标不是简单地调用引擎的Standard Shader，而是从零开始，理解并构建一个包含环境光、漫反射、高光反射，甚至简单阴影的完整光照模型，让你真正掌握光照渲染的主动权。

2. 光照模型的核心原理与设计思路

在动手写代码之前，我们必须先搞清楚光是如何与物体表面相互作用的。这不仅仅是“亮”和“暗”的问题，而是涉及能量传播、表面微观结构和人眼感知的复杂过程。为了在实时渲染中高效模拟，我们采用了一系列经过简化的数学模型，统称为“光照模型”。

2.1 光照模型的三大基石：环境光、漫反射与镜面反射

一个经典且实用的光照模型，通常由三个核心分量叠加而成：环境光、漫反射和镜面反射。你可以把它们想象成绘画中的底色、固有色和高光。

环境光是最基础的一层。它模拟的是场景中间接、多次反弹后均匀分布的光线，比如阴天室外的光线，或者一个房间内没有被光源直接照射的角落。在现实中，这些地方并非全黑，因为它们接收到了来自墙壁、天花板等其他物体反射过来的光。在Shader中，我们用一个常量或来自环境贴图的颜色来近似表示它。它的计算最简单，通常与表面法线和视线方向无关，直接乘以物体表面颜色即可。

漫反射是决定物体“固有色”和基本明暗关系的关键。它模拟的是光线照射到粗糙表面后，向各个方向均匀散射的现象。比如一张白纸，无论从哪个角度看，被照亮的部分看起来亮度都差不多。漫反射的强度遵循兰伯特余弦定律：反射光强度与入射光方向和表面法线夹角的余弦值成正比。简单说，光线垂直照射时最亮，擦着表面照射时最暗。在Shader中，我们通过计算光方向向量与表面法线向量的点积来得到这个余弦值。

镜面反射负责产生那些“耀眼”的高光点，比如金属球、瓷器或湿润表面的反光。它模拟的是光线在相对光滑的表面发生的定向反射现象。与漫反射不同，镜面反射的亮度强烈依赖于观察者的位置。只有当你的眼睛（摄像机）位于或接近光线的反射方向时，你才能看到明显的高光。冯氏光照模型和Blinn-Phong模型是模拟镜面反射最常用的方法。后者通过计算“半程向量”（光线方向与视线方向的中间向量）与法线的点积，再取高次幂来模拟高光的集中程度，计算效率更高，效果也更接近真实。

2.2 从理论到实践：光照计算的空间选择

理解了分量，下一个关键决策是在哪个坐标空间进行光照计算。这直接影响到代码的复杂度和最终效果的正确性。

模型空间：所有向量（法线、光线方向、视线方向）都在模型自身的坐标系中。这种方式直观，但每个模型都需要独立计算光照，且当模型移动、旋转时，这些方向向量需要随之变换，计算不够高效，也不利于实现一些高级效果。

世界空间：这是最常用的选择。我们将顶点位置、法线、光源位置、摄像机位置都转换到世界坐标系下，然后在这个统一的空间中进行所有向量运算。这样做的好处是光照计算与模型本身的变换解耦，逻辑清晰。例如，一个点光源在世界坐标(0,10,0)处，无论模型在哪里，它受到这个光源的影响计算方式都是一致的。

视图空间：所有计算在摄像机坐标系下进行。有时可以简化一些计算（例如视线方向就是(0,0,1)），但在涉及多个Pass或后期效果时，可能不如世界空间通用。

对于我们的完整光照项目，我强烈推荐使用世界空间。它平衡了清晰度、灵活性和性能，是绝大多数现代渲染管线的标准做法。这意味着在顶点着色器中，我们需要将顶点位置和法线从模型空间变换到世界空间，并将世界空间下的法线、顶点位置、光源位置、摄像机位置传递给片段着色器进行最终计算。

注意：法线从模型空间变换到世界空间时，不能简单地乘以模型矩阵。如果模型进行了非均匀缩放（比如在X轴拉长，Y轴压扁），直接变换会导致法线不再垂直于表面。正确的做法是使用模型矩阵的逆转置矩阵来变换法线。在Unity等引擎中，通常有内置变量（如unity_WorldToObject的转置）或函数（如UnityObjectToWorldNormal）来帮我们正确处理。

3. 核心Shader实现：逐行代码解析

理论铺垫足够，现在让我们进入实战环节。我将使用GLSL语法进行示例，其核心思想与HLSL/CG是相通的。我们会构建一个支持单平行光（如太阳光）的基础光照Shader。

3.1 数据结构定义与顶点着色器

首先，我们需要定义从CPU（应用端）传递到GPU的数据结构。

// 属性，对应于材质面板上可调节的参数 uniform vec3 u_LightColor; // 光源颜色和强度 uniform vec3 u_LightDir; // 世界空间下的平行光方向（已归一化，指向光源） uniform vec3 u_ViewPos; // 世界空间下的摄像机位置 uniform vec3 u_AmbientColor; // 环境光颜色 // 从顶点着色器传递到片段着色器的变量 varying vec3 v_Normal; // 世界空间法线 varying vec3 v_FragPos; // 世界空间顶点位置

顶点着色器的核心任务是为片段着色器准备插值数据。

// 顶点着色器 void main() { // 1. 变换顶点位置到裁剪空间（必须步骤） gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0); // 2. 计算世界空间顶点位置，用于后续光照计算 v_FragPos = vec3(modelMatrix * vec4(position, 1.0)); // 3. 变换法线到世界空间，注意使用法线矩阵 v_Normal = normalize(mat3(transpose(inverse(modelMatrix))) * normal); // 在实际项目中，为了效率，法线矩阵应在CPU计算好作为uniform传入。 }

这里有几个关键点：

1. gl_Position的计算是标准流程：模型空间 -> 世界空间 -> 视图空间 -> 裁剪空间。
2. v_FragPos我们只计算到世界空间，因为光照计算在世界空间进行。
3. 法线变换使用了模型矩阵的逆转置（transpose(inverse(modelMatrix))），并只取3x3部分（mat3(...)）来消除平移影响，最后一定要normalize，因为插值后的法线长度可能不为1。

3.2 片段着色器：光照模型的合成

这里是所有魔法发生的地方。我们将在一个片段（可以粗略理解为屏幕上的一个像素）上，综合计算所有光照分量。

// 片段着色器 void main() { // 基础颜色（从纹理采样或使用固定颜色） vec3 objectColor = texture2D(u_Texture, v_TexCoord).rgb; // 如果没有纹理，可以用 vec3 objectColor = vec3(0.8, 0.2, 0.2); 这样的固定色 // --- 环境光分量 --- vec3 ambient = u_AmbientColor * objectColor; // --- 漫反射分量 --- // 确保法线和光方向是归一化的（插值后可能变形） vec3 norm = normalize(v_Normal); vec3 lightDir = normalize(-u_LightDir); // 平行光方向指向光源，我们需要指向片段的向量，所以取反 float diff = max(dot(norm, lightDir), 0.0); // 兰伯特余弦定律，小于0则无漫反射 vec3 diffuse = diff * u_LightColor * objectColor; // --- 镜面反射分量 (Blinn-Phong模型) --- vec3 viewDir = normalize(u_ViewPos - v_FragPos); // 视线方向：从片段指向摄像机 vec3 halfwayDir = normalize(lightDir + viewDir); // 半程向量 float spec = pow(max(dot(norm, halfwayDir), 0.0), u_SpecularShininess); // 高光强度 vec3 specular = spec * u_LightColor; // 高光颜色通常使用光源色，而非物体色 // --- 最终颜色合成 --- vec3 result = ambient + diffuse + specular; gl_FragColor = vec4(result, 1.0); }

让我们拆解一下镜面反射的计算：

1. viewDir：计算从当前片段位置到摄像机位置的向量并归一化。
2. halfwayDir：Blinn-Phong模型的核心，计算光方向和视线方向的角平分线方向。
3. spec：计算法线与半程向量的点积，并取u_SpecularShininess次幂。这个幂值（通常叫反光度）是关键参数：值越大（如128.0），高光点越小越锐利，像塑料或金属；值越小（如8.0），高光越分散，像木头或布料。
4. specular：高光颜色通常直接使用光源颜色，这能更好地模拟光线在光滑表面的反射。你也可以混合进物体颜色来表现一些特殊材质。

实操心得：在合成最终颜色时，ambient + diffuse + specular是最简单的叠加方式。但在追求物理真实感的渲染中（如PBR），这些分量的计算和组合方式会更加复杂，并且需要考虑能量守恒（反射出去的光能不应超过接收到的）。我们这个经典模型是一个很好的起点，它直观且易于控制。

4. 从基础到进阶：实现完整光照效果的关键环节

有了基础的光照模型，一个“完整”的效果还需要考虑更多细节。这些环节往往决定了渲染质量的优劣。

4.1 法线处理：凹凸细节的灵魂

上述计算依赖的是顶点法线，它只能表现模型的大体轮廓。要想表现砖墙的缝隙、皮革的纹路、金属的划痕这种微观凹凸细节，就需要法线贴图。

法线贴图是一张RGB纹理，其每个像素的RGB值对应着一个法线向量的XYZ分量（范围从[0,1]映射到[-1,1]）。这张图存储的是切线空间下的法线信息。因此，使用法线贴图的关键在于将光照计算转换到切线空间。

实现步骤：

1. 构建TBN矩阵：在顶点着色器中，我们需要计算从模型空间到切线空间的变换矩阵。这需要顶点的切线（Tangent）、副切线（Bitangent，可由法线和叉积得到）和法线（Normal）三个相互垂直的向量。

   // 顶点着色器中 vec3 T = normalize(mat3(modelMatrix) * tangent.xyz); vec3 B = normalize(mat3(modelMatrix) * bitangent); // 或在Unity中用cross(N, T) * tangent.w vec3 N = normalize(mat3(modelMatrix) * normal); mat3 TBN = mat3(T, B, N);

2. 变换向量到切线空间：将光方向、视线方向等从世界空间变换到切线空间。通常更高效的做法是将这些向量在顶点着色器中变换后传递给片段着色器。

   v_LightDir_Tangent = TBN * normalize(-u_LightDirWorld); v_ViewDir_Tangent = TBN * normalize(u_ViewPosWorld - v_FragPosWorld);

3. 采样并应用法线：在片段着色器中，从法线贴图采样，将颜色值从[0,1]重映射到[-1,1]，得到切线空间下的法线。

   vec3 normal_tangent = texture2D(u_NormalMap, v_TexCoord).rgb * 2.0 - 1.0; normal_tangent = normalize(normal_tangent);

4. 在切线空间计算光照：现在，normal_tangent、v_LightDir_Tangent、v_ViewDir_Tangent都在同一个空间（切线空间）了，直接使用它们进行点积等光照计算即可。

这样做之后，一个低多边形模型配合高精度法线贴图，就能呈现出极其丰富的表面细节，而性能消耗仅增加了一次纹理采样和几次矩阵乘法。

4.2 阴影映射：让物体“站”在地上

没有阴影的场景，物体看起来像是漂浮在空中。实时阴影最常用的技术是阴影映射。其核心思想非常简单：从光源的视角渲染一次场景，记录下每个片段距离光源的深度（Z值），得到一张“深度图”（阴影贴图）。然后，在正常渲染时，将当前片段变换到光源的裁剪空间，比较其深度值与阴影贴图中存储的深度值。如果当前片段深度大于贴图值（意味着它被其他物体挡住了），则该片段处于阴影中。

实现流程：

1. 第一遍渲染（生成阴影贴图）：
   • 将摄像机摆放在光源位置，看向场景。
   • 使用一个只输出深度（到光源的距离）的Shader渲染整个场景，结果保存到一张深度纹理（FBO）。
2. 第二遍渲染（正常渲染并应用阴影）：
   • 使用我们完整的光照Shader进行正常渲染。
   • 在片段着色器中，将当前片段的世界坐标变换到光源的裁剪空间（使用光源的VP矩阵），得到其在阴影贴图中的纹理坐标和深度值。
   • 采样阴影贴图，比较深度。为了避免“阴影粉刺”现象，通常会添加一个小的偏移量（Bias）。

   float ShadowCalculation(vec4 fragPosLightSpace) { // 执行透视除法，将裁剪坐标转换为[-1,1]的标准化设备坐标(NDC) vec3 projCoords = fragPosLightSpace.xyz / fragPosLightSpace.w; // 将NDC坐标变换到[0,1]范围，用于纹理采样 projCoords = projCoords * 0.5 + 0.5; // 从阴影贴图中获取最近点的深度（从光源的视角） float closestDepth = texture2D(u_ShadowMap, projCoords.xy).r; // 获取当前片段在光源视角下的深度 float currentDepth = projCoords.z; // 检查当前片段是否在阴影中 float bias = 0.005; // 偏移量，防止阴影粉刺 float shadow = currentDepth - bias > closestDepth ? 1.0 : 0.0; return shadow; }

3. 在最终光照中应用阴影：将计算出的shadow因子（0.0表示无阴影，1.0表示完全阴影）应用到漫反射和镜面反射分量上。

   vec3 result = ambient + (1.0 - shadow) * (diffuse + specular);

阴影映射是实时渲染中的一个深水区，涉及深度精度、走样、软阴影（PCF, PCSS）等诸多优化和提升效果的技术。但上述基础实现已经能让场景的立体感和真实感产生质的飞跃。

4.3 多光源支持与光照衰减

真实场景中 rarely 只有一个光源。支持多光源（如多个点光源、聚光灯）是完整光照的必备能力。核心思路是在片段着色器中对每个光源独立计算其贡献，然后累加。

对于点光源和聚光灯，还需要考虑光照衰减——光线强度随距离增加而减弱。一个常用的简化衰减公式是：float attenuation = 1.0 / (constant + linear * distance + quadratic * distance * distance)其中constant、linear、quadratic是控制衰减曲线的系数。然后，该光源的漫反射和镜面反射分量需要乘以这个衰减因子。

多光源Shader的结构调整：

• 通常，我们会将平行光、点光源、聚光灯的数据（位置、方向、颜色、衰减系数等）用数组或UBO（Uniform Buffer Object）的方式传入Shader。
• 在片段着色器中，用一个循环遍历所有有效光源，计算每个光源的贡献并累加到最终的diffuse和specular变量中。
• 环境光通常只需计算一次。

注意事项：在移动平台或性能敏感的场景中，无限制的光源循环是性能杀手。常见的优化策略包括：1) 将光源影响范围（衰减至可忽略的距离）与物体的包围盒进行相交测试，在CPU端剔除无关光源；2) 使用延迟渲染管线，将光照计算与场景复杂度解耦；3) 对于大量小光源，使用屏幕空间技术如Tile-Based Deferred Shading。

5. 性能优化与常见问题深度排查

当你的完整光照Shader运行起来后，可能会遇到各种问题，从视觉错误到性能卡顿。这里分享一些我踩过的坑和解决方案。

5.1 视觉瑕疵排查清单

5.2 性能优化核心策略

一个功能完整的Shader可能很耗性能。优化是必经之路。

1. 计算精度选择：在片段着色器中，对于颜色、向量插值等，使用lowp或mediump精度通常就足够了，这能显著提升移动端的性能。但对于位置、法线等需要高精度的计算，仍需使用highp。

   varying lowp vec3 v_Color; varying mediump vec2 v_TexCoord; varying highp vec3 v_FragPosWorld;

2. 减少冗余计算：将可以在顶点着色器完成、且差值结果线性的计算移到顶点阶段。例如，将世界空间下的光方向、视线方向在顶点着色器计算后传递给片段着色器，虽然需要插值，但节省了片段着色器中大量的矩阵运算和归一化操作。

3. 纹理采样优化：

   • 合并纹理：将环境光遮蔽图(AO)、粗糙度图、金属度图等单通道信息打包到一张纹理的RGB不同通道中，减少纹理采样次数。
   • 使用Mipmap：确保纹理启用了Mipmap，这能有效减少远处物体的纹理采样缓存失误。
   • 慎用discard：在片段着色器中使用discard关键字丢弃片段会破坏硬件的深度优化（如Early-Z），可能反而降低性能。对于镂空效果，优先考虑使用Alpha Test或Alpha Blend。

4. 简化光照循环：如前所述，通过CPU端光源剔除，只将真正影响当前渲染物体的光源列表传入Shader。对于大量静态小光源，考虑烘焙到光照贴图中。

5.3 从经典光照走向PBR

当你熟练掌握了上述经典（Blinn-Phong）光照模型后，你会自然地对更真实的效果产生追求。这时，基于物理的渲染（PBR）是下一个里程碑。PBR不是一个具体的Shader，而是一套遵循物理原理的设计理念和数学模型。

PBR的核心变化在于：

• 双向反射分布函数（BRDF）：取代了分离的漫反射/镜面反射模型，用一个统一的函数描述光线从某个入射方向到某个出射方向的反射比例。常见的模型有Cook-Torrance BRDF。
• 能量守恒：反射出去的光能（漫反射+镜面反射）不能超过入射光能。这要求高光越强，漫反射就应该越弱。
• 金属度工作流：引入“金属度”和“粗糙度”等物理参数。非金属（电介质）具有带颜色的漫反射和微弱的高光；金属（导体）几乎没有漫反射，其高光颜色由材质本身的颜色（如铝是白色，金是黄色）决定。
• 图像化光照：使用HDR环境贴图（立方体贴图）作为场景的环境光照源，通过预计算或实时积分（如IBL）来提供高质量的漫反射和环境高光反射。

实现一个完整的PBR Shader复杂度陡增，但它带来的材质真实感是革命性的。现代游戏引擎（如Unity的URP/HDRP，Unreal Engine）内置的Standard Shader都是PBR Shader。理解了我们这里搭建的经典光照框架，再去学习PBR，你会清楚地知道每一个新增的复杂计算（如法线分布函数NDF、几何函数G、菲涅尔方程F）究竟在解决什么问题。

光照Shader的学习是一个螺旋上升的过程。从最简单的颜色输出，到加入环境光、漫反射，再到高光、法线贴图、阴影、多光源，最后迈向PBR和全局光照。每一步都建立在对前一步的深刻理解之上。我建议你不要急于求成，而是每实现一个效果，都花时间调整参数、观察变化、思考其物理意义。亲手调试出一个质感出色的金属或丝绸材质，那种成就感是无可替代的。这个“完整的光照效果”项目，就是你通往真实感渲染世界的一块坚实基石。