3.1 StandardMaterial逐通道着色

3.1 StandardMaterial：逐通道着色

本节摘要：StandardMaterial 是引擎的经典材质，像素的最终颜色由四路贡献叠加——漫反射、镜面反射、自发光、环境反射。本节把四路通道逐个点亮又逐个熄灭，用实验建立"调色即通道加减"的手感，并解释透明物体的排序问题。承接第2章的灯光数据，为 3.2 的 PBR 与 3.4 的阴影打底。

一、四条颜色通道

想象一间暗房里摆着一个红漆盒子。开一盏灯，盒子朝光的面亮、背光的面暗——这是漫反射，光的颜色乘上漆的颜色。盒子表面某个角度泛出一小块高光，晃眼看像水渍——这是镜面反射，由视角、光线方向与表面光滑度共同决定。把灯全关掉，盒子边缘隐隐透出暗红——那是自发光，不依赖任何光源的自体发光。再在盒子旁边立一面镜子，镜子里映出盒子的红——这是环境反射。

StandardMaterial 把这四种物理现象做成四个可独立调节的通道，最终像素颜色就是四路的叠加。逐通道点亮：

// 一号通道：漫反射——最基础也最常用
const mat = new BABYLON.StandardMaterial("demo", scene);
mat.diffuseColor = new BABYLON.Color3(0.8, 0.2, 0.2);  // 漆成红色：受光面的主色

// 二号通道：镜面反射——决定"高光点"的存在与大小
mat.specularColor = new BABYLON.Color3(1, 1, 1);       // 高光是白色
mat.specularPower = 32;                                 // 数值越大高光越小越锐，塑料感 16 到 64

// 三号通道：自发光——不依赖灯光的底色
mat.emissiveColor = new BABYLON.Color3(0.1, 0, 0);      // 暗红微光：关灯也能看见轮廓

// 四号通道：环境反射——模拟周围世界在表面的映像
mat.reflectionTexture = new BABYLON.CubeTexture("skybox", scene); // 需要一张立方体贴图
mat.reflectivity = 0.3;                                 // 反射强度：车漆 0.1 到 0.5

box.material = mat;
​

四个通道里，diffuse 与 specular 是"被动"的——有光才有；emissive 与 reflection 是"主动"的——自己发光或自己照镜子。调不好颜色的根子多半在把主动通道当被动通道用：给 emissiveColor 调成大红色想"让物体红一点"，结果物体在黑暗里像灯泡一样亮着。

二、逐通道实验

背景：要调一个"哑光深灰机械外壳"。第一版只动 diffuse，结果灰色外壳在灯下泛着刺眼的白斑，被吐槽像廉价塑料。

操作：分解四路贡献，逐项排查。白斑来自镜面通道——specularColor 默认是白色、specularPower 默认值偏小，高光又大又亮。机械外壳的正确手感是"高光弱而集中"：

// 哑光外壳的通道配方
const shell = new BABYLON.StandardMaterial("shell", scene);
shell.diffuseColor = new BABYLON.Color3(0.22, 0.24, 0.26); // 冷调深灰：受光主色
shell.specularColor = new BABYLON.Color3(0.18, 0.18, 0.18); // 高光压暗：不再抢戏
shell.specularPower = 96;                                   // 高光收紧：集中在小点上
shell.emissiveColor = new BABYLON.Color3(0.02, 0.02, 0.02); // 微自发光：背光面不至于死黑
​

结果：同样一盏主光下，外壳从"塑料壳"变成"金属壳"，改动只涉及三个数值。

解读：specularPower 与 specularColor 是一对被严重低估的旋钮。观察真实材质：塑料高光大而边界糊，金属高光小而锐——这对参数就是"材质年龄与质感"的廉价控制器，成本远低于换 PBR。

变式：屏幕类物件反过来调——emissiveColor 给足亮度模拟背光屏，diffuse 压暗避免环境光干扰，一眼就是"亮着的屏幕"；霓虹灯管则 emissive 拉满加辉光后期（第6章会用到）。

三、透明与排序：一半的价格一半的麻烦

把 alpha 调低，材质就透明了，但透明物体从设计之初就是流水线的麻烦制造者。不透明物体可以按"从远到近"随便画，画完就翻篇；半透明物体必须"从近到远"画，还要跟背后的已画像素混合——顺序错了，混合结果就错，表现为玻璃杯忽而在瓶子里、忽而在瓶子外。

// 三档透明度模式的正确用法
mat.alpha = 0.6;   // 整体透明度

// 模式一：ALPHA_COMBINE 常规混合，玻璃瓶身用这档
mat.transparencyMode = BABYLON.Material.MATERIAL_ALPHABLEND;

// 模式二：一刀切的裁剪，树叶贴图用这档：要么全透要么全不透，没有排序问题
mat.transparencyMode = BABYLON.Material.MATERIAL_ALPHATEST;
mat.alphaCutOff = 0.5;
​

工程口诀：能用裁剪就别用混合。树叶、栅栏、铁丝网这类"镂空纹理"用模式二，又快又稳；只有玻璃、水这类"真半透明"才付模式一的排序成本。

⚠️ 常见坑：alpha 设了却不透明，九成是网格的 isOpaque 还占着绘制队列的前排，或材质 needUpdate 没触发。调透明先确认 transparencyMode 归类，再查渲染队列。

💡 关键直觉：调色的止损动作是"全部熄灭再逐路点亮"。把 emissive、reflection 先归零，diffuse 调对主色，再按需加回高光与自发光——四路叠加很快就会互相污染，一次只动一路。

本节要点回顾

• 像素颜色是四路叠加：漫反射、镜面、自发光、环境反射，各有属性名
• diffuse 与 specular 是被动通道：没灯就没贡献；emissive 与 reflection 是主动通道
• specularPower 控制高光锐度：与 specularColor 配对使用，是廉价的质感旋钮
• 透明分两档：镂空用裁剪，真半透明才付混合排序的成本
• 调色口诀：先熄灭再逐路点亮，一次只动一路

通道的手感有了，但 StandardMaterial 的高光是"猜"出来的——参数对了观感对，物理上并不真实。下一章进入 PBR：让金属像金属、清漆像清漆，靠物理规则而不是手调。