用 Three.js 实现 PlayCanvas 风格 PBR 材质教程（第一篇）：PBR 基础与环境搭建

一、什么是 PBR？为什么需要它？

在开始代码实现前，我们首先要理解PBR（Physically Based Rendering，基于物理的渲染） 的核心概念。

传统渲染的局限性

传统渲染（如 Phong、Blinn-Phong 模型）通过经验公式模拟光照，虽然计算简单，但存在明显缺陷：

• 材质参数（如高光强度、范围）缺乏物理意义，调参全凭经验
• 不遵循能量守恒（反射光 + 漫反射光可能超过入射光）
• 在不同光照环境下表现不一致，需要重新调参

PBR 的核心优势

PBR 则基于光学物理原理，模拟光线与物体表面的真实交互，具有以下特点：

• 参数有明确物理意义：金属度、粗糙度等参数对应真实世界材质属性
• 光照一致性：同一种材质在不同光照环境下表现自然统一
• 能量守恒：反射光与漫反射光的总和不会超过入射光
• 自动处理复杂光学现象：如菲涅尔效应、粗糙度对高光的影响等

PlayCanvas 的 PBR 特色

PlayCanvas 引擎的 PBR 实现采用金属度 / 粗糙度工作流（Metallic/Roughness Workflow），这是游戏与实时渲染中最常用的 PBR 方案，通过以下核心参数定义材质：

• 金属度（Metallic）：0 表示非金属，1 表示纯金属，中间值表示半金属
• 粗糙度（Roughness）：0 表示镜面光滑，1 表示完全粗糙
• 基础色（Albedo）：物体表面反射的固有颜色

二、开发环境准备

技术栈与工具

实现本教程需要以下工具和库：

• Three.js：WebGL 的 3D 引擎封装，简化 3D 渲染流程
• GLSL：OpenGL 着色语言，用于编写自定义着色器
• lil-gui：轻量级 GUI 库，用于实时调试材质参数
• 现代浏览器：支持 WebGL 2.0 的浏览器（Chrome、Firefox 等）

三、Three.js 核心概念快速回顾

在实现自定义 PBR 材质前，我们需要了解 Three.js 的几个核心概念：

1. 渲染流水线

Three.js 的渲染流程可简化