前言

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

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

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

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

各位同学大家好！Welcome to our live class,今天这节课要给大家分享的是《泛二次元卡通渲染》的技术原理与实现.

In recent years, two-dimensional cartoon rendering is an increasingly widely used rendering method in games.,like the one on the cover image of our course《原神》、《崩坏》、《阴阳师》、《明日方舟》These are some very popular two-dimensional mobile game masterpieces.

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

主题

• Technical overview of two-dimensional card rendering
• Shading implementation of two-dimensional card rendering
  • Part 1:亮部与暗部
  • Part 2:细节处理
  • Part 3:技术实现
• Detailed explanation of the key and difficult problems of commercial project realization

技术概览

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

当我们打算立项制作一款游戏的时候,首先我们的美术团队就要确定整体的画面风格,偏写实还是偏风格化,偏风格化的话,那么风格化的程度如何,And the style rendering and there are many kinds of classification,常见于：水墨风、铅笔风、卡通风,卡通风格又可以分成美式动漫风格和日式二次元风格,我们平时所说的二次元卡通渲染指的就是这种日式渲染风格.

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

Classification of two-dimensional cartoon rendering

美式卡通风格在色彩上比较连续,有渐变色,着色风格很大程度上依赖于艺术家定义的色调（tone）,Exaggeration and distortion are often used in shadows and highlights,比较典型的是《军团要塞2》.

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

二次元卡通渲染的步骤

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

就是第1步先描边,第2步再着色.

当然具体到描边和着色的技巧,那么这么多年就会有蛮多的演变了.我们今天,It will focus on the in-depth explanation of the stroke steps in the two-dimensional cartoon rendering
包括,Various methods of the specific implementation of the stroke,Implementation details for each step,and implementation skills in commercial projects.

how to color

Realization of Two-dimensional Cartoon Rendering Technology

Part 1：亮部与暗部

什么是阴影？

阴=暗面,all there is…?

Excessive light and shade

diffuseMinIt is the top position of the flesh color in the color bar

Shading grading

Shading Tiered Video Portal

Part 2：细节表现

• 面部阴影
• Shadow tendencies
• 边缘光
• inner contour

facial detailing

• 如何修正？
  • Adjust the normals of the character
• 如何调整？
  • TA工具箱

Shadow Tendency

实际制作中,Will want to shadow a certain tendency,That is, some places are prone to shadows,In some places it is difficult to create shadows.
比如,Recessed areas and areas shaded by surrounding areas should be considered shadows.,Need to increase shadow tendencies,Change lighting performance.
At this time, you can use a map or The tendency of the vertex color to control shadows.但是,Shadow tendency information does not reflect shadows cast by external occluders,最好结合 ShadowMap 一起使用

边缘光

Can you tell which picture has the edge light?？（右,on armor）body parts,Or the edge light of different materials is best to use maskprecise distinction

inner contour

Part 3：实现

So how do we achieve this effect?？

三张贴图

• MainTex：main texture map

• DetailMap： 细节贴图

• ShadowMap：shadow map
  

• DetailMap

  • 高光强度贴图
  • Shadow area map
  • Specular area map
  • The contour map

Shadow Map

• Highlight color=MainTex
• dark color=MainTex*Shadow Map

The color used to adjust the shadow

着色-细节处理

Shading detail processing video portal

思考

• How to achieve the overall shading effect？
• How to brush face normals？
• How to Achieve Hair Anisotropic Highlights？
• How to cast and receive shadows as a whole？
• …

如何学习

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

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

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

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