光照计算写完之后我卡在材质这一节上卡了挺久。倒不是代码写不出来而是没想明白一个问题光照的颜色值明明已经在着色器里算好了为什么还要单独引入“材质”这个概念后来把整个Phong光照模型的流程重新捋了一遍才想通材质不是新增功能而是把“物体如何反射光”这件事从光照计算中抽离出来变成一组可灵活调控的参数。这一篇就围绕材质展开讲清楚它到底在光照管线里扮演什么角色代码上又该怎么落地。如果你是跟着LearnOpenGL一路学过来的前面已经实现了环境光、漫反射和高光三项基础光照。现在到了材质这一节你会发现代码量和结构复杂度并没有暴增真正需要转变的是思路光和物体要分开看光照提供一个“光源属性”物体提供一份“材质属性”两者在着色器里做乘法叠加最终决定像素的颜色。这篇文章适合已经写完基础光照、想进一步理解光照与物体交互逻辑的读者材质属性调参过程中那些“看起来正常但总觉得哪里不对”的问题也会一并聊到。1. 从光照计算到材质先想清楚一个核心问题1.1 为什么不是继续调颜色而是引入材质基础光照阶段的做法很简单在片段着色器里定义好光源的ambient、diffuse、specular三个颜色再用法向量和视线方向算出一个光照结果最后乘以物体颜色。这种写法最大的问题是物体的“颜色个性”被压缩成了一个系数或者说一个笼统的uniform vec3 objectColor。不同的物体差异仅仅体现在一个颜色值上至于这个物体是磨砂塑料还是抛光金属完全表达不了。材质概念的引入正是为了解决这个表达力不足的问题。一个物体的外观由两部分决定它表面是什么颜色以及它怎么反射光。前者是物体本身的颜色属性Phong光照模型里把它拆成ambient、diffuse、specular三个分量的颜色值后者用一个float型的shininess反光度来表达。把这四个参数打包成一个Material结构体光照计算就变成了光源方向、视线方向和材质属性三者之间的运算。我做了一个比喻来帮助理解光源是一个手电筒手电筒发出的光颜色是固定的但照射在不同表面上看到的效果完全不同。白墙上光斑很散镜子上光斑很小很亮砂纸上几乎看不到光斑。这个差异不来自手电筒而来自表面本身。材质就是描述“表面本身”的那组参数。1.2 材质模型与光照模型的组合逻辑Phong光照模型里最终颜色等于三项之和环境光照、漫反射光照、镜面高光。有了材质之后每一项都要乘上对应的材质颜色。以漫反射为例光照计算算出的是一个float强度的系数乘以光源的漫反射颜色再乘以材质的漫反射颜色才算得到最终的漫反射分量。// 漫反射分量的计算逻辑 float diff max(dot(normal, lightDir), 0.0); vec3 diffuse light.diffuse * (diff * material.diffuse);注意这里的顺序light.diffuse是光源的漫反射光颜色material.diffuse是材质在漫反射下的颜色表现两者相乘就是物体在这一点上反射给观察者的漫反射颜色。很多人一开始容易搞混light.diffuse和material.diffuse到底谁决定什么。简单记一句话光决定“有什么颜色的光照过来”材质决定“这个颜色被吸收多少、反射多少”。1.3 一个容易忽视的前提光照方向与法向量材质本身不参与几何计算但它依赖两个关键向量法向量和光照方向。所以哪怕材质部分只是在片段着色器里多声明了一个结构体顶点着色器和法向量变换不能出错。这个我在后面排查问题的时候反复踩过法向量没有经过正规逆矩阵变换或者忘记归一化材质调得再仔细也是白费。2. 材质四件套ambient、diffuse、specular、shininess2.1 三个颜色分量各自管的是光的哪个部分材质结构体里那三个vec3类型的分量分别对应当前物体在Phong模型三项光照中的反射系数。这里我不打算把它讲得很玄用一个现实场景来解释。ambient环境光分量对应的是世界里的间接光也就是从四面八方反弹过来的微弱光亮。真实世界里没有绝对黑暗的环境即使在阴影里也还有来自墙体、地面、空气散射的光。OpenGL里做一个简化处理环境光不依赖法线方向也不依赖视线方向它就是一个常量。材质里的ambient颜色表示物体在“无主光源直射时”反射出的底色。通常你会把它设置成和diffuse差不多的颜色但亮度暗一些。diffuse漫反射分量是Phong模型的视觉主力。它描述的是光照射到粗糙表面后向各个方向均匀反射的现象。现实中的纸张、水泥墙、木头都有强烈的漫反射特性。光照方向和法向量的夹角越接近0度漫反射越强。材质里的diffuse颜色决定这个物体在受光面呈现的主色调。specular高光分量管的是镜面反射。光打在光滑表面上会形成一块集中而明亮的高光区域。金属、玻璃、湿润的路面都有明显的高光。和diffuse不同specular不仅依赖法向量和光照方向还依赖视线方向。材质里的specular颜色通常被设置成光源高光颜色类似的白色或浅色因为从直觉上说高光是光源颜色的直接反射物体的本色对它影响相对小。2.2 shininess反光度高光的锐利程度是怎么调的反光度就是那段代码里的float。虽然它只是一个浮点数但视觉差异极大。反光度值越小高光区域越大越柔和表面看起来粗糙反光度值越大高光区域越小越锐利表面看起来光滑。下表的经验值是我实际调参过程中整理出来的不一定完全符合物理规律但用作起步值非常方便材质特征ambientdiffusespecularshininess磨砂塑料较暗的物体色物体本色白色但亮度低32~64抛光金属几乎为黑深色金属色非常亮的白128~256木头暗棕色棕色极浅棕色8~16大理石浅灰浅灰白很弱的白16~32shininess的调整逻辑蛮像生活中的直觉你拿一个手电筒去照一个刚刷完清漆的木桌面高光很小很亮这是高反光度照一件棉质T恤光斑散开很柔这是低反光度。在Phong模型里这个值是指数运算中的指数所以它对视觉的影响是非线性的加1和加10带来的变化完全不是一个量级。2.3 用结构体组织材质参数在着色器里把材质定义为一个结构体是最标准、最清晰的做法。struct Material { vec3 ambient; vec3 diffuse; vec3 specular; float shininess; }; uniform Material material;同样的方式可以定义光源属性光源拆成位置、环境光颜色、漫反射颜色、高光颜色四项struct Light { vec3 position; vec3 ambient; vec3 diffuse; vec3 specular; }; uniform Light light;这时候再回到片段着色器的主函数会发现整个光照计算的代码结构非常直观分别算ambient、diffuse、specular三个分量然后相加。每一行都对应着色器里一个uniform属性调参的时候只需要改变CPU端的uniform值不需要重新编译着色器。3. 手写材质版Phong光照从着色器到渲染循环3.1 顶点着色器把法线和位置传下去材质运算发生在片段着色器里但顶点着色器负责把必要的数据准备好。核心输出两个量世界空间内的片段坐标和法向量。#version 330 core layout (location 0) in vec3 aPos; layout (location 1) in vec3 aNormal; out vec3 FragPos; out vec3 Normal; uniform mat4 model; uniform mat4 view; uniform mat4 projection; void main() { FragPos vec3(model * vec4(aPos, 1.0)); Normal mat3(transpose(inverse(model))) * aNormal; gl_Position projection * view * vec4(FragPos, 1.0); }法向量那行不能直接写成Normal aNormal。原因是model矩阵可能包含缩放法向量经过等比缩放之外的非等比缩放后会不再垂直于表面。这时候需要用正规矩阵也就是model矩阵的逆矩阵的转置。对于旋转和平移这步是多余的但为了通用性标准做法还是写全。有些教程会在CPU端预处理好这个矩阵再传入性能更好但学习阶段直接放在着色器里计算更直观。3.2 片段着色器材质和光源相乘片段着色器的核心逻辑就是前面说过的三项光照分别计算。先把完整版本贴出来再逐行解释。#version 330 core out vec4 FragColor; in vec3 FragPos; in vec3 Normal; struct Material { vec3 ambient; vec3 diffuse; vec3 specular; float shininess; }; struct Light { vec3 position; vec3 ambient; vec3 diffuse; vec3 specular; }; uniform Material material; uniform Light light; uniform vec3 viewPos; void main() { // 环境光 vec3 ambient light.ambient * material.ambient; // 漫反射 vec3 norm normalize(Normal); vec3 lightDir normalize(light.position - FragPos); float diff max(dot(norm, lightDir), 0.0); vec3 diffuse light.diffuse * (diff * material.diffuse); // 镜面高光 vec3 viewDir normalize(viewPos - FragPos); vec3 reflectDir reflect(-lightDir, norm); float spec pow(max(dot(viewDir, reflectDir), 0.0), material.shininess); vec3 specular light.specular * (spec * material.specular); vec3 result ambient diffuse specular; FragColor vec4(result, 1.0); }逐行看下来diff和spec都是float类型是纯粹的几何系数不携带颜色信息。颜色完全由light和material的颜色属性决定。这样设计的好处是光源和材质可以独立调节。你可以把光源改成红色材质保持不变观察物体如何反射红光也可以让光源不变把材质改成蓝色观察物体变蓝的程度。两者解耦之后调试起来非常舒服。3.3 CPU端设置uniform值着色器写完之后CPU端的工作就是往uniform里填合适的值。GLSL里结构体的uniform在C代码中使用点号访问。// 设置材质属性 lightingShader.setVec3(material.ambient, 0.1f, 0.1f, 0.1f); lightingShader.setVec3(material.diffuse, 0.7f, 0.3f, 0.3f); lightingShader.setVec3(material.specular, 1.0f, 1.0f, 1.0f); lightingShader.setFloat(material.shininess, 32.0f); // 设置光源属性 lightingShader.setVec3(light.position, lightPos); lightingShader.setVec3(light.ambient, 1.0f, 0.5f, 0.5f); lightingShader.setVec3(light.diffuse, 1.0f, 0.5f, 0.5f); lightingShader.setVec3(light.specular, 1.0f, 1.0f, 1.0f); lightingShader.setVec3(viewPos, camera.Position);这里渲染一个立方体到屏幕上旋转物体或者移动摄像机切切实实地调几轮材质参数比看任何文章都直观。原来的纯颜色物体现在就变成了一块可以“换肤”的材质展示台。3.4 一个典型的调参实验我在验证材质逻辑的时候习惯用一个纯色光源加两个球体来做对照。一个用低反光度的塑料材质一个用高反光度的金属材质两个球体并排摆在同一个光源下。光源固定相机围着球体转你会非常清晰地看到两个球体在高光形状、漫反射明暗变化上的差异。这种对照实验验证的不只是材质本身还顺带检验了法线变换、视图方向传递这些前置逻辑是否正常。如果法线变换写错了两个球体会出现奇怪的明暗分布高光位置不对这时候先别急着调材质参数回头检查transform部分。4. 从材质到纹理的过渡下一步该怎么衔接4.1 材质属性的局限与纹理贴图的动机材质结构体解决了物体“怎么反射光”的问题但它还有个大缺陷它的属性是整体的、均匀的。一个立方体虽然不同面朝不同方向但同一面上的所有像素共享同一套材质参数。这导致整个物体表面的颜色和反光特性完全一致表现出来就是“一块塑料”、“一块金属”没有砖墙的纹路没有陶罐表面的颜色过渡。纹理贴图就是来解决这个问题的。纹理本质上是一张图片给物体表面的每个位置提供独立的颜色值。在LearnOpenGL的路线里纹理贴图通常分两步走扩散贴图diffuse map替换material.diffuse然后用镜面贴图specular map替换material.specularambient通常直接复用diffuse贴图的值因为环境光和漫反射在大多数情况下颜色接近。我在学完材质之后自己试过用一张木纹贴图替换材质里的diffuse uniform一下子就把一个纯色木头盒子变成了有纹理的木板箱。那种从“数学参数”到“真实质感”的跨越感是继续往下学的最大动力。所以如果你现在写完了材质部分的代码下一步放心大胆地去接纹理不冲突反而是最自然的衔接。4.2 材质参数与PBR模型之间的关系现在很多引擎和渲染器里已经不用经典的Phong材质了而是转向了PBR工作流。比如网上常见的热搜词里就有UE4材质节点、C4D金属材质球、3ds Max材质ID通道之类的工具用法它们背后其实都是PBR那套Metallic/Roughness参数体系核心思路是定义了基础色、金属度、粗糙度、法线贴图等属性。但PBR这套东西并没有推翻Phong框架下的光照模型它是在传统光照模型基础上用能量守恒和真实物理参数重写了各分量的计算方式。LearnOpenGL里Phong光照和材质这一节恰恰是理解PBR最好的铺垫。因为当你理解了一个“物体反射光”的三个分量分别是怎么来的再看PBR里那些金属度、粗糙度参数就能找到它们在传统模型里的对应关系粗糙度近似反光度金属度影响高光颜色的混合程度。我个人建议在学完材质之后去找一个渲染器手动调一下金属材质球。C4D自带的渲染器里就有很直观的材质球编辑器你拖一个金属球调粗糙度和反射强度观察画面变化再回来看LearnOpenGL里的Material结构体很多原本抽象的概念瞬间就串联起来了。4.3 材质ID通道与程序化调参另外一个值得注意的应用场景是材质ID通道比如3ds Max里的Multi/Sub-Object材质或者游戏引擎里给模型分区指派不同材质。这个思路本质上是把“材质”从全局uniform变成了每个像素根据ID去选择的属性数组。如果你已经写完了材质结构体你可以尝试在OpenGL里实现一个简化版把Material定义成数组给每个顶点绑定一个材质索引在片段着色器里根据索引选择对应的材质属性。这个练习做完之后你对材质的管理方式会上升一个层次。不过这个属于进阶玩法了学习阶段先把单材质吃透更重要。5. 常见问题排查为什么你的材质效果总是不对5.1 反光度参数不生效的排查方向shininess不生效最常见的原因不是材质属性本身而是反射向量计算或者视线方向传递出了问题。其实还好只要法线方向和viewPos没问题高光很容易调出来。但有一个坑很容易踩相机位置没有传入着色器。viewPos这个uniform忘了设置viewDir算出来就是零向量高光直接消失效果就只剩下环境光加漫反射整个物体看起来平平的。排查逻辑按优先级来先确认法线是否正确再确认viewPos是否正确传入最后检查spec的计算里用的是不是normalize后的向量。三个条件缺一个高光都不可能正常。5.2 物体过曝或过暗的常见误区材质所有分量都设置得很大或者光源三个分量设置得很大渲染结果很可能是整片白色过曝。Phong模型里三项相加没有上限颜色超过1.0就会变白。调参时遵循“先从暗处入手”的原则环境光设得极低比如0.02级别漫反射控制在0.5到0.8高光不要开到饱满的1.0而是从0.3开始往上摸索这样不容易过曝。反过来如果物体暗到看不清先不要急着调材质先检查光源位置和法向量的方向。光照射不到物体表面漫反射是0高光是0剩下的环境光本来就该很暗。把光源移近或者调大漫反射分量都可以解决问题但从排查顺序上说先确定几何关系是否成立更高效。5.3 材质与光源颜色混淆导致的效果异常光源的ambient、diffuse、specular和材质的ambient、diffuse、specular看起来同名容易搞混。一个常见的错误是把光源的三个颜色也设置成物体颜色导致整个画面被物体颜色染色严重失真。这里有个很实用的口决光源颜色描述的是光的颜色材质颜色描述的是物体吸收反射后的效果。光源设置为白色(1.0f, 1.0f, 1.0f)是最保守的选择物体颜色完全由材质决定。当你想调试材质本身是否正常时把光源设成纯白是最佳选择。而当你想测试光源颜色时用默认材质加彩色光源效果一目了然。5.4 别忘了在OpenGL状态机里启用深度测试材质调参时很影响观感的一个细节是深度测试。如果不启用GL_DEPTH_TEST画多个物体时后画的物体会覆盖先画的哪怕它在空间上应该被遮挡。表现起来就是物体之间顺序错乱透明度异常甚至出现“上层穿透看见下层”这种透视效果。glEnable(GL_DEPTH_TEST);这个开关写在渲染循环开始前就行。虽然不是材质本身的问题但调材质时如果不开深度测试观察到的效果会非常困惑。一些实用工具里那种“材质透视”功能看起来炫酷但本质上是渲染状态做了更改不是材质的属性别混淆。6. 一些实操经验与避坑技巧6.1 调参效率技巧把材质属性绑定到GUI上我自己写材质实验的时候最痛苦的就是每次改参数都要重新编译程序。后来我只用一行代码解决把Material结构体的字段全部绑定到一个简易GUI面板上比如使用Dear ImGui直接用滑动条拖动改变材质属性画面即时反馈。// Dear ImGui 调参示例 ImGui::ColorEdit3(Ambient, (float*)material.ambient); ImGui::ColorEdit3(Diffuse, (float*)material.diffuse); ImGui::ColorEdit3(Specular, (float*)material.specular); ImGui::SliderFloat(Shininess, material.shininess, 1.0f, 512.0f);这个做好之后调试材质的效率提升是十倍级的。你能在几秒内体验shininess从1到512的变化而不是每次改代码重编译。调参实验做多了之后对这四个参数的理解会内化得非常深刻。6.2 屏蔽环境光来调试漫反射与高光有时候我想单独验证漫反射的计算是否正确就把ambient分量全部置零只留diffuse观察。这时候物体背光面是纯黑的受光面有颜色正好能看清明暗过渡。继续验证高光就把ambient和diffuse都置黑只看高光区域可以很精确地看到高光形状和反光度的关系。这种“开关式排查法”比盯着最终画面猜原因高效得多。每个分量都像一盏灯逐个打开和关闭很容易定位问题出在哪一环。6.3 三个常设的固定场景参数最后分享三个我每次新建材质实验都会用到的固定初始值直接当模板用能减少大量启动阶段的调试时间。光源位置设置成(1.2f, 1.0f, 2.0f)物体放置在世界原点摄像机放在(0.0f, 0.0f, 3.0f)附近。光源颜色统一用白色材质一开始用一个中等亮度的颜色比如(0.7f, 0.3f, 0.3f)反光度先用32。这几个参数虽然普通但配合白背景或者深灰背景能保证任何光照效果都有良好的可视性不至于一开始就黑成一团或者白成一片。写到这里材质的话题基本就聊透了。材质本身不复杂核心就一个理解把物体对三个方向照来的光的反射表现拆成参数。比较重要的是多动手去调那些值尤其是手动滑动shininess从低到高观察高光区域从“一大团柔和光晕”收缩成“一个小亮点”的过程那种直观感受比看任何公式都有用。后面学纹理时你会发现材质参数加纹理贴图组合起来就是现代渲染里各种复杂材质效果的雏形。
