如何用 Cocos Creator 3D 如何实现小姐姐的发丝高光？

IntroductionPRB 材料改变了人们对引擎实时渲染图片的理解，让玩家在游戏中体验腐蚀性金属、厚皮革、精细纹理，感受更真实的世界。正式发布 Cocos Creator 3D 真实渲染和强大的材料系统成为开发者关注的焦点。为了给 Web 和小游戏平台带来更好的 3D 游戏表现，Cocos Creator 3D 第一次真正把基于物理渲染带到小游戏中，不仅支持 PBR 材料还将光源系统和渲染升级为基于物理的测量衡和算法。在 2019 年 9 在深圳技术分享会上，Cocos 3D 引擎开发工程师武云潇，带给与会者Cocos Creator 3D材料系统共享，内容由浅到深，实机演示 3D 材料系统的工作流，并准备了具体的案例学习环节。

以下内容是演讲干货的整理:

---

Definition要了解材料系统，首先需要知道什么是材质。要知道什么是材料，首先要明确不是材料。下面我以头盔场景为例，为大家展示讲解。

材料系统对头盔有什么作用？为了更直观地解释，我们不妨消除所有材料系统的贡献，看看还剩下什么。

除了头盔的形状外，所有的表面细节、对光线的反馈、颜色纹理等信息都消失了。这些信息决定了几何材料，也是材料系统控制和定制的最重要内容。几何本身的形状是由模型数据决定的。如果我们可视化这部分最原始的数据，我们可以看到分散的三角形是游戏世界中所有模型的原始外观。如果渲染被视为绘画，材料系统最重要和最基本的功能是控制如何在现有线草案的基础上为这里的每个三角形着色。（当然，更先进的是，你也可以控制线草案本身的一些细节，甚至处理更复杂的计算任务，如骨动画的皮肤。Presentation现在我们对主题有了基本的定义，让我们使用引擎内置的材料系统，一层一层地回到颜色，熟悉一些基本的工作流。头盔模型采用标准材料，背后是基于物理的渲染模型。（PBR），权衡高效美观的算法很好。

当算法框架足够合理时，视觉上的美很大程度上取决于信息量 PBR 可以看出，随着每一层贴图信息的加入，它们共同融合成一套统一和谐的效果。当然，材料系统的任务是提供方便的定制，所以它不与一套渲染模型有关。在相同的系统下，我们可以很容易地提供卡通渲染等支持。

Deconstruction这里要提的是材料系统 Cocos 针对 Creator 3D 但目前还是有架构设计的 Creator 2D 从 2.1.1 版本开始同步引入了材质系统，已在使用其中大部分的前端设计，并针对渲染后端做了适配和优化，所以今天分享的内容对两款产品均适用。首先，由于定位小而精，我们需要明确我们想做什么，以及我们不打算做什么（至少在这个阶段）我们希望：

• 对 TA：书写自动处理 shader 在这个过程中，用有力的工具利用琐碎易错的细节
• 对 TA：任何内容和算法都应该在不受阻碍的情况下完成
• 艺术：以最方便、最直观的方式接受 TA 输出与下一步创作无缝连接

现阶段不打算做:

• 工业级别的 shader 语言转译/优化器
• 也可以加入零程序基础的艺术 shader 创作流程

我们希望在 TA 在发挥各自优势的过程中，引擎和编辑器首先可以成为双方合作的坚实基础和便利桥梁。最终的设计也是这一点的直接映射，而不是小巧高效的系统，各自有着明确的目标和能力：  

• EffectAsset 是由 TA 或图形程序设计制作，提供定制化的着色机制和数据接口
• Material 是由美术创建，会被大量用在实际游戏场景中的资源实例，负责提供所有实际使用的数据
• 所有 EffectAsset 层提供出的接口都会以最自然便利的方式在 Material 面板上呈现

这里举两个小细节，更多信息及接口文档参考 [3]  

• Shader 中所有 uniform 变量声明都会在资源导入时解析依赖宏，并直接映射到编辑器的材质 Inspector 上

 

• TA 只需要按照标准 GLSL 语法完成目标逻辑，大部分繁琐易错的胶水代码可以全部通过固定解析流程自动对接。
• 对于需要自定义这个过程的需求，有完善的 uniform 重定向，及类似 ccclass 的定制系统 [5]

 

比如这里红框内的四个属性，在 Shader 中其实是同一个 vec4 的不同分量（参考 [4] 关于 UBO 成员布局的考虑，为了达到最佳性能确实会出现类似需求），但为了使用起来更符合直觉和便于调整，在 Effect 中为每个分量单独增加了新的属性，使得它们可以被独立编辑，无论是在 Inspector 还是代码中直接调用。现在我们清楚了材质使用层面的设计，让我们继续深入底层，来看看在 Effect 层面我们有哪些实用的设计。这是一份标准的 Cocos Effect 文件示例（也是引擎内置天空盒使用的 Effect）：  

在声明式语法的大框架下，卖游戏账号平台已经可以看出一些有趣且实用的选择，它的主要特性有：

• 统一的 Shader 语法（GLSL 300 ES）
• 多 Technique 多 Pass 支持
• 标准头文件库、Include 机制
• 常规语法自动 Fallback GLSL 100
• 进阶语法通过 __VERSION__ 宏手动 Fallback
• 大量引擎、渲染管线、运行平台相关的类型检查
• 定制化 Inspector 对接集成

这背后是一直在不断完善的 Cocos Effect 语法和编译器，从设计之初理念就忠于 C 语言设计哲学，我们致力于提供一套明确清晰的 Shader 书写工具集，使得每一个细节的控制都是透明可见/可推导的。更多 Effect 相关具体特性这里不再详细解析，可移步参考官方文档 [4]。

Demonstration恭喜大家坚持到了现在，我们终于要进入今天的案例环节了。今天的案例是头发高光的计算。无论在现实生活还是各类动漫游戏作品中，头发高光都是头发不可或缺的一项标志特性，也非常讨人喜爱。  

那么如何在游戏项目中实时计算这样的高光呢？我们先来尝试简化问题，这里是一个使用标准卡通渲染的球体（下图），它的高光是按标准 Blinn-Phong 模型计算的，可以看到只在光源的理想反射方向可见，就是一个圆点。  

但如果我们把这个球体近似地看成角色头发的话（如上图右下角示意），其中最显著的特征是，我们希望这个高光不是一个圆点，而是……一个圈。我们今天案例解析的重点，就是如何从物理上理解，并实时近似计算这个高光圈。参考学界的一些相关论文，这个问题的基本思路是把每根发丝近似地看成是一个个很小的半透明圆柱体，而可以证明 [1]，在理想圆柱体上，对平行光而言，它的所有出射光线都在一个和理想反射方向倾角相同的圆锥上（如下图中间示意）  

我们看到的头发上连成一圈的高光，就是因为这个特性而产生的。（联系下现实生活的话，其实是发质越好发丝越接近圆柱体，所以高光越明显）。所以有了基本的模型，我们来扩展一下基本的 Blinn-Phong 高光计算，让它从单一方向变成到整个圆锥，就应该能在这个球体上看到变化。可以很快发现，这个圆锥中轴与发丝方向平行，圆锥大小只是由一个与发丝方向的夹角决定的，那如何取这个夹角呢？这样的需求，一般会使用模型的切空间数据来辅助计算，我们先来看一下这个球体的切空间数据。  

这里做了切空间数据的可视化，图中球体上黄色线段就是每个顶点的副切线，可以看出也是我们需要的“发丝方向”。当然对于更一般的头发模型来说，这个方法会对模型的 uv 展开方式有要求，要求头发部分的 uv 纵轴应当与发丝方向基本一致；不过好在这种展开方式相对普遍，制作美术资源时也经常这样做，所以适用性还是较为普遍的。  

我们在 shader 中可以很方便地把每个片段计算 BRDF 常用的向量（R、V、N、H、L）和副切线 (T) 取到，根据论文 [2] 中的思路，这里我们也直接用一个 gaussian 来做近似，那么可以基于 Phong 着色模型，写一个最符合直觉、易于理解的版本：  

其中 mr 就是通过 gaussian 算出的连续的高光亮度，通过一个 step 函数切出卡渲效果的硬边。在此基础上可以进一步尝试优化为 Blinn-Phong，写出来要比想象中更高效一些：  

这里 3 和 6 其实都是用户可调参数，为了对接原有卡渲参数这里调整合适后硬编码进来，最后运行效果是这样：  

 

这样我们就有了一个适用于发丝的卡渲 shader 了，调整一下还可以控制高光宽度和位移（想一想位移参数应该怎么加）。如果从背光面观察可以看到还是有一部分不太真实的反射，这是因为我们没有考虑方位角维度上的反射强度差异。并且像图中所示那样，我们其实只非常粗略地计算了完整发丝高光模型的主高光，即反射部分，还有更多的散射项没有考虑。这里不再深入介绍，感兴趣的同学，推荐阅读下面两篇参考论文 [1]、[2] 深入了解，并尝试自己实现更真实完整高光的效果。