用 Three.js 实现 PlayCanvas 风格 PBR 材质教程（第二篇）：核心参数与光照模型

上一篇我们搭建了基础环境并实现了简单的自定义材质，本篇将基于完整代码，深入解析 PBR 的核心参数、光照模型的实现逻辑，以及如何通过代码将物理规律转化为视觉效果。

一、核心参数解析：从代码看 PBR 的物理基础

PlayCanvas 风格的 PBR 材质通过一组具有明确物理意义的参数描述材质特性，这些参数在代码中通过uniform变量传递，并在着色器中参与光照计算。

1. 基础参数与代码映射

参数名	代码变量	类型	范围	物理意义
基础色	albedo	vec3	RGB 颜色	物体表面的固有颜色，非金属为漫反射色，金属为反射色
金属度	metalness	float	0~1	区分金属（1）与非金属（0），控制漫反射 / 镜面反射比例
粗糙度	roughness	float	0~1	控制表面光滑度，0 = 镜面，1 = 完全粗糙
折射率	ior	float	1.0+	决定光线折射 / 反射比例，计算基础反射率（F0）
镜面反射率	specularity	vec3	RGB 颜色	控制非金属的高光强度，金属材质忽略此参数
环境反射强度	envMapReflectivity	float	0~1	控制环境贴图的反射强度

2. 金属度（Metalness）的核心作用

金属与非金属的光学特性差异是 PBR 的核心，代码通过calcSpecularModulate函数实现这种差异：

vec3 calcSpecularModulate(in vec3 specularity, in vec3 albedo, in float metalness, in float f0) {vec3 dielectricF0 = f0 * specularity; // 非金属的基础反射率（由折射率和镜面反射率计算）return mix(dielectricF0, albedo, metalness); // 金属直接使用基础色作为反射率
}

代码逻辑解析：

• 当metalness=0（非金属）：镜面反射率 = 折射率计算的 F0 × specularity
• 当metalness=1（金属）：镜面反射率 = albedo（基础色）
• 中间值：通过mix函数平滑过渡，模拟半金属特性

同时，金属材质几乎没有漫反射，代码通过以下逻辑实现：

// 计算漫反射率：金属漫反射为0，非金属使用albedo作为漫反射率
litArgs_albedo = litArgs_albedo * (1.0 - litArgs_metalness);

3. 粗糙度（Roughness）与光泽度（Glossiness）

粗糙度描述表面的微观不平度，代码中通过calcGlossiness函数将其转换为光泽度（与粗糙度相反）：

void calcGlossiness() {dGlossiness = 1.0 - roughness; // 光泽度 = 1 - 粗糙度dGlossiness += 0.0000001; // 避免零值，防止后续计算异常
}

作用：

• 光泽度越高（粗糙度越低）：高光越集中，反射越清晰
• 光泽度越低（粗糙度越高）：高光越扩散，反射越模糊

在镜面反射计算中，光泽度直接影响采样的环境贴图层级（后续环境贴图章节详细讲解）。

4. 折射率（IOR）与基础反射率（F0）

折射率决定光线从空气进入材质时的反射比例，代码中通过以下公式计算垂直入射时的反射率（F0）：

// 在evaluateBackend中计算F0
float f0 = litArgs_ior;
f0 = (f0 - 1.0) / (f0 + 1.0); // 折射率转反射率公式
f0 *= f0; // 垂直入射时的反射光比例

物理意义：F0 表示光线垂直入射时，反射光占总入射光的比例。例如：

• 空气（IOR=1.0）：F0=0（无反射）
• 玻璃（IOR=1.5）：F0≈0.04（4% 反射率）
• 钻石（IOR=2.42）：F0≈0.17（17% 反射率）

F0 是菲涅尔效应计算的基础，直接影响材质的反射强度。

二、光照模型的核心计算：从参数到颜色的转化

PBR 光照模型的核心是模拟光线与物体表面的交互，代码通过 “前端数据准备→后端光照计算” 的流程实现，核心逻辑集中在片元着色器的evaluateFrontend和evaluateBackend函数中。

1. 前端计算（evaluateFrontend）：数据准备与向量计算

前端计算的作用是将原始参数转换为光照计算所需的中间变量，包括读取材质参数、计算核心向量（法线、视线方向等）。

void evaluateFrontend() {// 1. 读取材质参数到d前缀变量（原始数据存储）calcAlpha();      // dAlpha = opacitycalcAlbedo();     // dAlbedo = albedocalcMetalness();  // dMetalness = metalnesscalcGlossiness(); // dGlossiness = 1 - roughnesscalcIor();        // dIor = iorcalcSpecularity();// dSpecularity = specularitycalcEmission();   // dEmissive = emissive// 2. 计算核心向量（用于光照计算）calcNormal();     // dNormal = 世界空间法线calcViewDir();    // dViewDir = 视线方向（相机→顶点）calcReflectDir(); // dReflectDir = 反射方向（基于法线和视线）// 3. 将d变量传递给litArgs变量（光照计算参数）litArgs_albedo = dAlbedo;litArgs_specularity = dSpecularity;litArgs_gloss = dGlossiness;litArgs_metalness = dMetalness;litArgs_ior = dIor;litArgs_worldNormal = dNormal;litArgs_viewDir = dViewDir;litArgs_reflectDir = dReflectDir;
}

核心向量解析：

• 法线向量（dNormal）：normalize(vNormalW)，表面朝向，决定光线反射方向
• 视线方向（dViewDir）：normalize(cameraWorldPos - vPositionW)，从顶点指向相机
• 反射方向（dReflectDir）：normalize(reflect(-dViewDir, dNormal))，环境光反射的方向

2. 后端计算（evaluateBackend）：光照核心逻辑

后端计算是 PBR 的 “大脑”，实现从参数到最终颜色的转化，包含 F0 计算、菲涅尔效应、漫反射与镜面反射计算等核心步骤。

步骤 1：计算基础反射率（F0）

// 根据折射率计算垂直入射的光照 反射光/总入射光的比例 f0
float f0 = litArgs_ior;
f0 = (f0 - 1.0) / (f0 + 1.0);
f0 *= f0;

这一步将折射率转换为物理上的基础反射率，是后续所有反射计算的基础。

步骤 2：修正高光反射率（考虑金属度）

// 根据f0和金属度调节高光反射率
litArgs_specularity = calcSpecularModulate(litArgs_specularity, litArgs_albedo,