二次元卡通渲染-着色

前言

本文为“优梦创客”原创文章，您可以自由转载，但必须加入完整的版权声明

更多学习资源请加QQ：1517069595获取（企业级性能优化/热更新/Shader特效/服务器/商业项目实战/每周直播/一对一指导）

点赞、关注、分享可免费获得配套学习资源

完整视频可以点击B站链接：点击观看完整视频

各位同学大家好！欢迎大家来到我们的直播课堂，今天这节课要给大家分享的是《泛二次元卡通渲染》的技术原理与实现。

近几年以来二次元卡通渲染是游戏中越来越被广泛采用的渲染方式，像我们课程封面图上的《原神》、《崩坏》、《阴阳师》、《明日方舟》都是一些非常流行的二次元手游佳作。

那么今天我要分享给大家的就是如何实现二次元的风格化渲染效果，以及对于已经在职的或者在开发独立游戏的小伙伴们，如何将这项渲染技术应用在自己的项目中。

主题

• 二次元卡渲的技术概览
• 二次元卡渲的着色实现
  • Part 1:亮部与暗部
  • Part 2:细节处理
  • Part 3:技术实现
• 商业项目实现的重点和难点问题详解

技术概览

二次元卡通渲染实际上是二次元卡通渲染的一个分支，而二次元卡通渲染又是风格化渲染的一个分支。

当我们打算立项制作一款游戏的时候，首先我们的美术团队就要确定整体的画面风格，偏写实还是偏风格化，偏风格化的话，那么风格化的程度如何，并且风格化渲染又有很多种分类，常见于：水墨风、铅笔风、卡通风，卡通风格又可以分成美式动漫风格和日式二次元风格，我们平时所说的二次元卡通渲染指的就是这种日式渲染风格。

下面我们来看一看，如果我们打算立项一个二次元风格的游戏，那么在商业项目的开发中要经历几个步骤呢？

二次元卡通渲染的分类

美式卡通风格在色彩上比较连续，有渐变色，着色风格很大程度上依赖于艺术家定义的色调（tone），而在阴影和高光方面常常采取夸张和变形的做法，比较典型的是《军团要塞2》。

日式卡通风格往往角色造型更写实，但在着色方面，则趋向于大片大片纯色色块，并有的明暗交界，例如《崩坏3》。虽然这样的分类并没有清晰界限，但易于描述，接下来我们就按照美式卡通和日式卡通的分类，从光影和描边两个维度上分别列举各类技术实现。

二次元卡通渲染的步骤

那么二次元卡通渲染总体的步骤在图形学当中基本是没有什么变化的。

就是第1步先描边，第2步再着色。

当然具体到描边和着色的技巧，那么这么多年就会有蛮多的演变了。我们今天，会重点针对二次元卡通渲染中的描边步骤做较为深入的讲解
包括，描边的具体实现的多种方法，每个步骤的实现细节，以及在商业项目中的实现技巧。

如何着色

二次元卡通渲染技术的实现

Part 1：亮部与暗部

什么是阴影？

阴=暗面，所有还有…?

明暗过度

diffuseMin为色条中肉色最上端位置

着色分阶

着色分阶视频传送门

Part 2：细节表现

• 面部阴影
• 阴影倾向
• 边缘光
• 内轮廓线

面部细节刻画

• 如何修正？
  • 调整好角色的法线
• 如何调整？
  • TA工具箱

阴影倾向的表现

实际制作中，会希望阴影有一定的倾向，即有些地方容易产生阴影，有些地方则很难产生阴影。
比如，凹陷的地方和受周围遮挡的地方应该被认为是影，需要增加阴影倾向，改变光照表现。
这时候可以用一张贴图或 者顶点色控制阴影的倾向。但是，阴影倾向信息不能反映外部遮挡物投射的阴影，最好结合 ShadowMap 一起使用

边缘光

大家能看出来哪副图有边缘光吗？（右，盔甲上）身体各个部分，或者不同材质的边缘光最好用 mask精确区分

内轮廓线

Part 3：实现

那么我们如何实现这个效果呢？

三张贴图

• MainTex：主纹理贴图

• DetailMap： 细节贴图

• ShadowMap：暗部贴图
  

• DetailMap

  • 高光强度贴图
  • 阴影区域贴图
  • 高光区域贴图
  • 内轮廓线贴图

Shadow Map

• 亮部颜色=MainTex
• 暗部颜色=MainTex*Shadow Map

用于调整阴影的颜色

着色-细节处理

着色细节处理视频传送门

思考

• 如何实现整体着色效果？
• 如何刷面部法线？
• 如何实现头发各向异性高光？
• 如何整体投射和接收阴影？
• …

如何学习

• 理解总体美术目标
• 分析美术需求，形成Shader开发思路
• Shader实现
• 效果调整
• 商业项目中的TA技巧与面试经验

更多学习资源请加QQ：1517069595获取（企业级性能优化/热更新/Shader特效/服务器/商业项目实战/每周直播/一对一指导）

点赞、关注、分享可免费获得配套学习资源

完整视频可以点击B站链接：点击观看完整视频