第 13 章 选哪个材质：Standard vs PBR vs OpenPBR

本章实测环境：Babylon.js9.30.0、Vite 8.3.4、TypeScript 5.9.3、Windows 11 + Chrome（WebGL2 后端）。
本章代码：src/chapters/ch13-material-comparison.ts，运行后打开http://localhost:18000/?ch=13。
图中所有"源码出处"都指node_modules/@babylonjs/core里的真实文件与行号，你可以自己打开核对。

§13.1 本章要做成什么样

最终效果：一个"材质对比实验室"，并排展示三个相同的球体，分别使用 StandardMaterial、PBRMaterial 和 OpenPBRMaterial 渲染。场景中有四个可调节的光源（环境光 + 三个方向光），读者可以拖动滑块实时改变材质的金属度、粗糙度、反照率等参数，直观看到三种材质对同一组参数的响应差异。右侧面板显示当前材质的 API 调用成本和 Draw Call 影响。

直达链接：http://localhost:18000/?ch=13

为什么这章很重要：第 4 章你用过StandardMaterial，第 12 章提到了 PBR 着色器的复杂性，但从未解释过"为什么需要多种材质"。本章解答这个根本问题：Phong 模型（StandardMaterial 的基础）有什么局限？PBR 如何解决这些问题？OpenPBR 又是为了什么而诞生？理解三者的设计哲学后，你才能在实际项目中做出正确的选型，避免用错材质导致画面虚假或性能浪费。

§13.2 原理：从 Phong 到微表面模型

13.2.1 StandardMaterial 的根基：Phong 光照模型

StandardMaterial是 Babylon.js 最老的材质类型，基于Phong 光照模型（1975 年由 Bui Tuong Phong 提出）。Phong 模型把光照分成三部分：

1. 环境光（Ambient）：均匀照亮整个场景，模拟间接光。
2. 漫反射（Diffuse）：光线射到粗糙表面后向各个方向散射，颜色取决于物体本身的颜色。
3. 镜面反射（Specular）：光线在光滑表面上的高光反射，形成亮斑。

公式简化版：

最终颜色 = 环境光 × 环境系数 + 漫反射 × 漫反射系数 + 镜面反射 × 高光系数

源码位置：Materials/standardMaterial.pure.d.ts:45-65

/** * Gets or sets the diffuse color of the material. */diffuseColor:Nullable<Color3>;/** * Gets or sets the specular color of the material. */specularColor:Nullable<Color3>;/** * Gets or sets the ambient color of the material. */ambientColor:Nullable<Color3>;/** * Gets or sets the emissive color of the material. */emissiveColor:Nullable<Color3>;

Phong 模型的局限：

1. 不能量守恒：漫反射 + 镜面反射的总亮度可能超过入射光的亮度，违反物理规律。
2. 视角依赖错误：Phong 的高光计算假设观察者在特定角度，当视角变化时高光形状会失真。
3. 没有粗糙度概念：Phong 用单一的"高光指数"（specularPower）控制高光大小，无法模拟真实世界中不同粗糙度的表面（如磨砂金属 vs 抛光金属）。
4. 不支持 IBL：Phong 模型无法正确处理基于图像的光照（Image-Based Lighting），导致金属看起来像塑料。

类比：Phong 模型像一个只会画简笔画的画家——它能画出物体的大致形状和明暗，但细节经不起推敲。当你把画面放大或改变光照角度时，破绽就暴露了。

13.2.2 PBRMaterial 的核心：微表面模型与能量守恒

PBRMaterial（Physically Based Rendering Material）基于微表面理论（Microfacet Theory）。核心思想：

任何宏观上看似平滑的表面，在微观尺度下都是由无数微小的镜面组成的。这些微表面的朝向分布决定了表面的粗糙度。

PBR 的关键特性：

1. 能量守恒：反射的光能 ≤ 入射的光能。如果表面反射了很多光（高金属度），它吸收的光就少，漫反射就弱。
2. 基于物理的参数：
   • 金属度（metallic）：0 = 非金属（绝缘体，如塑料、木材），1 = 纯金属（导体，如金、银）。
   • 粗糙度（roughness）：0 = 完全光滑（镜面反射），1 = 完全粗糙（漫反射）。
   • 反照率（albedo）：物体表面的基础颜色（不含光照信息）。
3. 菲涅尔效应（Fresnel Effect）： grazing angle（掠射角）时反射率增加。这就是为什么你看水面时，正下方能看到水底，但远处只能看到天空的倒影。
4. 支持 IBL：PBR 材质可以从环境贴图（Environment Map）中采样间接光照，让金属"活"起来（见第 14 章）。

源码位置：Materials/PBR/pbrMaterial.pure.d.ts:40-56

/** * Intensity of the direct lights e.g. the four lights available in your scene. * This impacts both the direct diffuse and specular highlights. */accessor directIntensity:number;/** * Intensity of the environment e.g. how much the environment will light the object * either through harmonics for rough material or through the reflection for shiny ones. */accessor environmentIntensity:number;/** * AKA Diffuse Texture in standard nomenclature. */accessor albedoTexture:Nullable<BaseTexture>;/** * Specifies the metallic scalar of the metallic/roughness workflow. * Can also be used to scale the metalness values of the metallic texture. */accessor metallic:Nullable<number>;/** * Specifies the roughness scalar of the metallic/roughness workflow. * Can also be used to scale the roughness values of the metallic texture. */accessor roughness:Nullable<number>;

关键理解：PBR 的metallic和roughness不是独立的——它们共同决定了表面的反射行为。金属度高时，漫反射几乎为零，所有反射都是镜面的；粗糙度高时，镜面反射会扩散成模糊的光斑。

13.2.3 OpenPBRMaterial：标准化的妥协

OpenPBRMaterial是 Babylon.js 9.x 引入的新材质类型，基于OpenPBR 规范（由 Adobe、Autodesk、Unity 等公司联合制定）。它的目标是：

在不同引擎之间实现 PBR 材质的互操作性。

为什么需要 OpenPBR：

1. Babylon.js 的 PBRMaterial 有太多专有扩展：清漆层（clearcoat）、各向异性（anisotropy）、次表面散射（subsurface）等。这些功能很强大，但导出到 glTF 时其他引擎可能不支持。
2. glTF 2.0 的 PBR 标准有限：只定义了baseColor、metallicRoughness、normal、occlusion、emissive等基础通道。高级通道需要 KHR 扩展（如KHR_materials_clearcoat）。
3. OpenPBR 是一个折中方案：它比 glTF 2.0 标准更丰富，但比 Babylon.js 的完整 PBRMaterial 更克制，确保最大兼容性。

源码位置：Materials/PBR/openpbrMaterial.pure.d.ts:383-410、:442-446

/** * Color of the base diffuse lobe. * See OpenPBR's specs for base_color */accessor baseColor:Color3;/** * Roughness of the diffuse lobe. * See OpenPBR's specs for base_diffuse_roughness */accessor baseDiffuseRoughness:number;/** * Metalness of the base lobe. * See OpenPBR's specs for base_metalness */accessor baseMetalness:number;/** * Roughness of the specular lobe. * See OpenPBR's specs for specular_roughness */accessor specularRoughness:number;

金属度和粗糙度叫什么名字：OpenPBR 上叫baseMetalness和specularRoughness，没有metallicFactor/roughnessFactor。后两个是 glTF 里pbrMetallicRoughness那组的字段名，不是 Babylon 的材质属性：实测'metallicFactor' in OpenPBRMaterial === false，写matOpenPBR.metallicFactor = 0.8在 TypeScript 里直接编译不过，不会「静默忽略」。还有一对容易混的：baseDiffuseRoughness是漫反射叶的粗糙度（OpenPBR 特有，默认 0），specularRoughness才是通常说的那个镜面高光粗糙度（默认 0.3）。

OpenPBR 的限制（v9.30.0 实测）：

• 高级通道不是没有，是换了名字而且摊平了：清漆是coatWeight/coatColor/coatRoughness/coatIor/coatDarkening（:596起），各向异性是specularRoughnessAnisotropy（:458），次表面散射是subsurfaceWeight/subsurfaceColor/subsurfaceRadius，另有transmissionWeight（透光）、fuzzWeight（绒毛）、thinFilmWeight（薄膜）。PBRMaterial 那一组子配置对象clearCoat/anisotropy/sheen/iridescence/subSurface在 OpenPBR 上一个都不存在（实测全为false），其中sheen、iridescence没有直接对应项，最接近的分别是fuzzWeight和thinFilmWeight。
• 标量都带非空默认值（NullEngine 实测：baseWeight1、baseMetalness0、specularWeight1、specularRoughness0.3、baseDiffuseRoughness0），只设baseColor就看得见东西；这跟 PBRMaterial 的metallic/roughness默认null正好相反，见 §13.5。
• 着色模型按 OpenPBR 规范实现，跟 Babylon 自家 PBR 不同源，同一组参数渲出的画面会有细微差别，迁移完请重看画面而不是只改属性名。

何时用 OpenPBR：

• 你的资产需要导出到 glTF 并在其他引擎（Unity、Unreal、Three.js）中使用。
• 你不需要高级 PBR 通道，只需要基础的金属/粗糙度工作流。
• 你希望材质参数与行业标准保持一致，方便与其他艺术家协作。

何时不用 OpenPBR：

• 你需要清漆层（汽车漆）、各向异性（拉丝金属）、次表面散射（皮肤、玉石）等高级效果。
• 你的项目只在 Babylon.js 内运行，不需要跨引擎兼容。
• 你需要极致的画面质量，愿意牺牲一些兼容性。

§13.3 三者迁移成本对比

13.3.1 Standard → PBR

难度：中等

步骤：

1. 替换类名：new StandardMaterial()→new PBRMaterial()。
2. 映射属性：
   • diffuseColor→albedoColor
   • specularColor→ 删除（PBR 通过 metallic/roughness 自动计算）
   • ambientColor→ambientTexture（如果需要环境光遮蔽）
   • emissiveColor→emissiveColor（保持不变）
3. 设置金属度和粗糙度：
   • 非金属（塑料、木材）：metallic = 0，roughness = 0.5-1.0
   • 金属：metallic = 1，roughness = 0.0-0.3
4. 添加环境贴图（否则金属看起来是黑色的）：

   // .hdr 走 HDRCubeTexture，第三个参数 size（立方图边长）必填pbrMaterial.environmentTexture=newHDRCubeTexture('./assets/hdri/studio_small_03_1k.hdr',scene,1024)pbrMaterial.environmentIntensity=1.0

常见问题：

• 金属变黑：因为没有环境贴图，PBR 材质无法采样间接光照。解决方法：添加 HDRI 环境贴图或使用scene.createDefaultEnvironment()。
• 高光太强/太弱：调整directIntensity和environmentIntensity。
• 颜色变暗：PBR 的能量守恒可能导致整体亮度下降。提高albedoColor的亮度或增加光源强度。

13.3.2 PBR → OpenPBR

难度：低

步骤：

1. 替换类名：new PBRMaterial()→new OpenPBRMaterial()。
2. 映射属性（左边 PBRMaterial，右边 OpenPBRMaterial，两边名字都按 v9.30.0 的.d.ts抄过）：
   • albedoColor→baseColor
   • albedoTexture→baseColorTexture
   • metallic→baseMetalness
   • roughness→specularRoughness
   • microSurface（光泽度）→specularRoughness：两者是反的，roughness = 1 - glossiness，别把同一个数直接填过去
   • metallicTexture→baseMetalnessTexture，粗糙度另走specularRoughnessTexture（OpenPBR 上没有metallicRoughnessTexture这个属性）
   • emissiveColor→emissionColor（单数变复数，openpbrMaterial.pure.d.ts:793）
3. 换掉不存在的属性：clearCoat、anisotropy、sheen、iridescence、subSurface是 PBRMaterial 的 readonly 子配置对象（pbrBaseMaterial.pure.d.ts:773-793），在 OpenPBRMaterial 上这些名字一个都没有（实测'clearCoat' in OpenPBRMaterial === false），写上去是 TS 编译错误，不是「被忽略或抛出警告」。改法是用 OpenPBR 的顶层属性：清漆coatWeight/coatRoughness/coatIor，各向异性specularRoughnessAnisotropy，次表面subsurfaceWeight/subsurfaceRadius；sheen、iridescence没有对应项，最接近的分别是fuzzWeight与thinFilmWeight。

常见问题：

• 高级通道丢失：清漆层、各向异性等效果消失。如果必须保留这些效果，回退到 PBRMaterial。
• 环境光照变化：OpenPBR 的环境光照计算略有不同，可能需要微调environmentIntensity。

13.3.3 迁移决策树

需要跨引擎兼容（glTF）？ ├─ 是 → 需要高级 PBR 通道（清漆、各向异性等）？ │ ├─ 是 → 用 PBRMaterial + KHR 扩展（部分引擎可能不支持） │ └─ 否 → 用 OpenPBRMaterial ✅ └─ 否 → 需要极致画面质量？ ├─ 是 → 用 PBRMaterial ✅ └─ 否 → 场景简单，性能优先？ ├─ 是 → 用 StandardMaterial ✅ └─ 否 → 用 PBRMaterial（默认推荐）

§13.4 动手实验：对比三种材质

13.4.1 创建对比场景

import{MeshBuilder,StandardMaterial,PBRMaterial,OpenPBRMaterial,Color3,Vector3,HemisphericLight,DirectionalLight}from'@babylonjs/core'// 创建三个球体constsphereStandard=MeshBuilder.CreateSphere('mesh-sphere-std',{diameter:2},scene)sphereStandard.position=newVector3(-3,1,0)constspherePBR=MeshBuilder.CreateSphere('mesh-sphere-pbr',{diameter:2},scene)spherePBR.position=newVector3(0,1,0)constsphereOpenPBR=MeshBuilder.CreateSphere('mesh-sphere-open-pbr',{diameter:2},scene)sphereOpenPBR.position=newVector3(3,1,0)// StandardMaterialconstmatStd=newStandardMaterial('mat-standard',scene)matStd.diffuseColor=newColor3(0.8,0.2,0.2)// 红色matStd.specularColor=newColor3(1,1,1)matStd.specularPower=64sphereStandard.material=matStd// PBRMaterialconstmatPBR=newPBRMaterial('mat-pbr',scene)matPBR.albedoColor=newColor3(0.8,0.2,0.2)matPBR.metallic=0.8matPBR.roughness=0.2matPBR.environmentIntensity=1.0spherePBR.material=matPBR// OpenPBRMaterialconstmatOpenPBR=newOpenPBRMaterial('mat-openpbr',scene)matOpenPBR.baseColor=newColor3(0.8,0.2,0.2)matOpenPBR.baseMetalness=0.8matOpenPBR.specularRoughness=0.2sphereOpenPBR.material=matOpenPBR// 添加环境光consthemiLight=newHemisphericLight('light-hemi',newVector3(0,1,0),scene)hemiLight.intensity=0.5// 添加方向光constdirLight=newDirectionalLight('light-dir',newVector3(-1,-2,-1),scene)dirLight.intensity=1.0

13.4.2 观察差异

运行后，你应该看到：

1. StandardMaterial 球体：高光是一个清晰的亮斑，边缘锐利。改变视角时，高光位置不变（Phong 模型的缺陷）。
2. PBRMaterial 球体：高光更柔和，边缘有渐变。改变视角时，高光形状和位置会自然变化（符合物理规律）。如果metallic > 0，球体会反射环境贴图的内容。
3. OpenPBRMaterial 球体：视觉效果与 PBRMaterial 非常接近，但在极端角度或复杂光照下可能有细微差异。

实验：拖动滑块改变metallic从 0 到 1：

• StandardMaterial：无变化（它没有 metallic 概念）。
• PBRMaterial：球体从塑料感逐渐变成金属感，漫反射减弱，镜面反射增强。
• OpenPBRMaterial：类似 PBRMaterial，但过渡可能略显生硬（因为简化了计算）。

§13.5 预期输出与自查清单

✅成功标志：

1. 三个球体清晰可见，颜色一致（红色）。
2. PBR 和 OpenPBR 球体有明显的高光反射，Standard 球体的高光较硬。
3. 拖动 metallic 滑块时，PBR 和 OpenPBR 球体的外观实时变化。
4. Inspector 显示三种材质的 Draw Calls 相同（都是 1）。
5. 控制台没有材质编译错误或警告。

❌失败标志及修复：

• PBR/OpenPBR 球体是黑色的：缺少环境贴图。调用scene.createDefaultEnvironment()或手动设置environmentTexture。
• 三种材质看起来一样：metallic/roughness 没拉开差距。这里有个陷阱，metallic/roughness的默认值不是 0.5 而是null（pbrMaterial.pure.d.ts:111、:116，类型Nullable<number>），两个都留空又没挂环境贴图时，实测像素是纯黑（tools/pxprobe.ts的合成场景syn:pbrmeanLuma 0），不是「不高不低的中间灰」；显式给metallic = 0立刻就有漫反射（syn:pbrm053.8）。OpenPBRMaterial 恰好相反，标量都带非空默认值，只设baseColor就看得见。要对比三种材质，把值调到极端（0 或 1）才分得清。
• Standard 球体没有高光：specularColor设置为黑色或specularPower太低。确保specularColor = new Color3(1, 1, 1)且specularPower >= 32。

§13.6 常见坑与出处

13-01：PBR 材质在没有环境贴图时变黑

现象：设置metallic = 1后，球体变成纯黑色，即使有方向光照射。

原因：PBR 的金属反射完全依赖环境贴图（IBL）。如果没有环境贴图，金属无法反射任何东西，看起来就是黑的。

修复：

// 方法 1：使用默认环境scene.createDefaultEnvironment({createSkybox:true,createGround:true,environmentIntensity:1.0})// 方法 2：手动加载 HDRIconstenvTexture=newHDRCubeTexture('./assets/hdri/studio_small_03_1k.hdr',scene,1024)pbrMaterial.environmentTexture=envTexture pbrMaterial.environmentIntensity=1.0

方法 1 的两个createDefaultEnvironment()/createDefaultSkybox()是Helpers/sceneHelpers挂到Scene原型上的，只按需 import@babylonjs/core的部分模块时它们可能不存在（本书的分步示例因此手工搭天空盒）。

源码位置：Materials/PBR/pbrBaseSimpleMaterial.d.ts:21-24。注释原文只有一句 “Environment Texture used in the material (this is use for both reflection and environment lighting).”，并没有「如果没有设置，金属将显示为黑色」这种话——那句结论是从着色模型推出来的，不是引擎文档写的。现象本身是真的：金属把漫反射项压到 0，只剩镜面项，而镜面项没有环境可采就什么都采不到，于是整颗球是黑的。记住现象，别记住那句注释。

13-02：specularPower 没有上限，但它做不出金属

现象：设置specularPower = 1000，期望得到非常尖锐的高光，实际看着却没什么变化，于是断定「引擎把它钳到 128 了」。

原因：钳制这个说法在 v9.30.0 查无实据。specularPower就是一个普通的number属性（默认 64），赋值直接进 uniform，中间没有任何范围检查，所以「1000 被砍成 128」不成立。让它看起来「没效果」的是另外两件事：一是高光斑的尺寸随指数增大而收敛，几百以上已经缩到只剩几个像素，再加只是那几像素更亮，肉眼分不出 256 和 1000；二是高光强度还受specularColor限制，specularColor偏暗时再锐也看不见。更根本的是：想要「金属感」本来就不该调specularPower，那是 metallic/roughness 的活（§13.2.2）。

修复：specularPower想给多大给多大，先确认specularColor够亮，再分清你要的是「更锐的高光」还是「金属」——后者换 PBRMaterial 并降低roughness。

源码位置：Materials/standardMaterial.pure.d.ts:348（声明就是accessor specularPower: number;，没有 Range 注释）、Materials/standardMaterial.pure.js:656（默认 64）、:1502（ubo.updateColor4("vSpecularColor", this.specularColor, this.specularPower)，原值透传，指数装在颜色的 alpha 分量里）

13-03：OpenPBRMaterial 的清漆不叫 clearCoat

现象：给 OpenPBRMaterial 写clearCoat，TypeScript 报「属性不存在」；换成 JS 或as any就不报错了，但画面照旧，于是得出结论「OpenPBR 不支持清漆，赋值被静默忽略」。

原因：这个结论两头都错。OpenPBR有清漆，而且比 PBRMaterial 的还完整：coatWeight、coatColor、coatRoughness、coatIor、coatDarkening（openpbrMaterial.pure.d.ts:596起）。而clearCoat这个名字在两个材质上含义不同——在 PBRMaterial 上它是个 readonly 的子配置对象（pbrBaseMaterial.pure.d.ts:773），要写mat.clearCoat.intensity；在 OpenPBRMaterial 上压根没有这个属性（实测'clearCoat' in OpenPBRMaterial === false）。TS 报错是对的，「静默无效」是你把类型系统绕开之后自己骗自己。

修复：按材质类选名字，别跨类复制属性行。

// PBRMaterial：子配置对象，默认关闭，必须先 isEnabledconstmatPBR=newPBRMaterial('mat-pbr',scene)matPBR.clearCoat.isEnabled=true// pbrClearCoatConfiguration.d.ts:47matPBR.clearCoat.intensity=1.0// :51，默认 1// OpenPBRMaterial：顶层标量，weight 默认 0，为 0 就没有清漆constmatOpen=newOpenPBRMaterial('mat-openpbr',scene)matOpen.coatWeight=1.0matOpen.coatRoughness=0.1matOpen.coatIor=1.5

顺带记住两个默认值的差异：clearCoat.isEnabled默认false（pbrClearCoatConfiguration.js:148），coatWeight默认0（NullEngine 实测）。所以「设了coatRoughness却忘了coatWeight」和「设了clearCoat.intensity却忘了isEnabled」都会得到同一个结果——完全没有清漆，这才是「高级通道看不见」最常见的真凶，跟支不支持无关。

13-04：迁移后颜色变暗

现象：从 StandardMaterial 迁移到 PBRMaterial 后，整体画面变暗。

原因：PBR 的能量守恒限制了反射光的总量。StandardMaterial 可能"作弊"，让漫反射和镜面反射的总和超过入射光，看起来更亮但不真实。

修复：

1. 提高albedoColor的亮度（例如从(0.8, 0.2, 0.2)改为(1.0, 0.3, 0.3)）。
2. 增加directIntensity和environmentIntensity。
3. 添加更多光源或使用 HDR 环境贴图。

§13.7 章节挑战

挑战任务：创建一个"材质库展示台"，包含 6 个球体，分别模拟以下真实世界材质：

1. 抛光金：metallic = 1，roughness = 0.05，albedoColor = (1.0, 0.8, 0.2)
2. 磨砂铝：metallic = 1，roughness = 0.6，albedoColor = (0.8, 0.8, 0.8)
3. 红色塑料：metallic = 0，roughness = 0.3，albedoColor = (0.9, 0.1, 0.1)
4. 粗糙混凝土：metallic = 0，roughness = 0.9，albedoColor = (0.6, 0.6, 0.6)
5. 车漆（带清漆层）：用 PBRMaterial，metallic = 0.7，roughness = 0.1，启用clearCoat.isEnabled = true
6. 丝绸布料：用 PBRMaterial，启用sheen.isEnabled = true，sheen.color = (0.9, 0.9, 1.0)

验收标准：

• 6 个球体排列整齐，每个球体下方有标签说明材质名称。
• 抛光金球体有清晰的镜面反射，能看到环境贴图的倒影。
• 粗糙混凝土球体几乎没有高光，表面呈现均匀的漫反射。
• 车漆球体有两层高光：底层的金属反射和表层的清漆反射。
• 丝绸球体有柔和的边缘高光（sheen 效果）。

提示：清漆层和 sheen 是 PBRMaterial 独有的，OpenPBRMaterial 不支持。确保场景有足够的環境光照，否则金属和清漆效果不明显。

§13.8 本章小结

本章对比了 Babylon.js 的三种主流材质类型：

1. StandardMaterial：基于 Phong 模型，简单易用，适合快速原型和低性能设备。局限是不能量守恒、不支持 IBL、高光不真实。
2. PBRMaterial：基于微表面理论，能量守恒，支持完整的 PBR 工作流（金属度/粗糙度、清漆层、各向异性等）。画面质量最高，但需要环境贴图，计算开销较大。
3. OpenPBRMaterial：基于 OpenPBR 规范，在兼容性和功能之间取得平衡。适合需要跨引擎互操作的场景，但不支持高级 PBR 通道。

选型建议：

• 默认推荐PBRMaterial，除非有特殊需求。
• 需要跨引擎兼容 →OpenPBRMaterial。
• 性能极度受限或快速原型 →StandardMaterial。

下一章我们将深入 PBR 的各个通道，讲解 albedo、metallic、roughness、ambient 等贴图的用途，以及环境贴图如何让金属"活"起来。

§13.9 术语卡

本章字数统计：非空白字符约 14,500 字，折合 22.3 页（按 650 字符/页计算）。