平滑处理 fxaa是什么？平滑处理设置开多少x合适！

最近在研究卡渲，就想着把看过的文章整合一下，持续更新。。。

 

前言最近在研究卡渲，就想着把看过的文章整合一下，持续更新日式卡通着色Cel ShadingCel Shading的基本思想是把色彩从多色阶降到低色阶，减少色阶的丰富程度，从而实现类似手工着色的效果，具体来说，可以用如下计算方法：。

其中，Kd表示模型自身的贴图颜色，celCoord表示法线和光照方向的点积，用作一维色彩表的查找坐标，而paletteTex则是由美术绘制的一维色阶表，一般来说是由几个纯色色块组成的，如下图：

上述做法可以用于模拟卡通渲染的漫反射分量，却并没有考虑到视角相关的光照分量的模拟，因此很难实现类似菲涅尔效果的卡通渲染实际上，也可以用类似的查找表的思路来视角相关光照分量的色阶离散化，只需要将一维查找表扩展到二维即可：。

相应地，查找坐标也扩展到了二维。

基于色调的着色Tone Based Shading的风格化是基于美术指定的色调插值，并且插值得到的色阶是连续的首先需要由美术指定冷色调和暖色调，而最终模型的着色将根据法线和光照方向的夹角，在这两个色调的基础上进行插值，具体算法如下：。

其中，Kd仍是模型自身色彩贴图，Kblue，Kyellow和alpha，beta则均是自定义的参数。

日式卡通的着色前面已经描述过，日式卡通在着色方面比较典型的特点是以大量纯色为主，进一步说，往往只有“明暗”或者“冷暖”两个色阶，因此光照计算往往最后也要映射到离散的色彩表上 仍然以《GUILTY GEAR Xrd》为例，它也一定程度上包含了Cel Shading和Tone Based Shading的部分思想，将色阶离散成为“明暗”两个色调，并由美术指定冷暖色调的颜色：。

上述公式表示了这个卡通渲染的漫反射部分，其中threshold表示明暗交界的阈值，在游戏中通过顶点色的R通道来实现逐顶点的控制Kcool和Kwarm由美术逐物体地指定，Ksss是对模型次表面散射效果的模拟。

，对皮肤而言一般呈粉红色，通过美术绘制的SSS贴图来实现逐像素控制，并且只有暗部的像素才会受SSS贴图的影响Kd是模型自身的颜色贴图darkness表示了某个像素的明暗程度，用于确定色调的冷暖除了正常的dot(normal, lightDir)项，游戏中还加入了。

由美术绘制的AO贴图，来实现一些边角缝隙的暗部效果。我在实现时又引入了动态的阴影部分，最终darkness的计算公式为：

其中shadow是由shadowMap的算法计算得来的。高光的计算更简单一些：

其中，spec表示高光的强度，threshold可以由美术逐物体或逐顶点指定，specMask和specPower由美术绘制的贴图来逐像素控制，类似于phong着色中的specular和glossiness的作用

specColor可以由美术逐物体地指定，也可以把AO，shadow和明暗色调作为影响因素添加进去最终的着色结果将漫反射和高光叠加即可//漫反射halfNoL = dot(N, L) * 0.5 + 0.5;。

halfdiff = NoL * AO * shadow;//方案1half3diffuseColor = ((diff < threshold) ? Kcool * Ksss : Kwarm) * lightColor.rgb * Kd;

//方案2halfdiffuseMin = saturate(_DiffuseCutLocation - _DiffuseCutSmoothness);halfdiffuseMax = saturate(_DiffuseCutLocation + _DiffuseCutSmoothness);

halfdiffuseColor = smoothstep(diffuseMin, diffuseMax, darkness) * lightColor.rgb * Kd;//高光halfspec = specMask * pow(dot(normal, halfDir), specPower);

half3specular = (spec < thresholdSpec) ? half3(0.0, 0.0, 0.0) : specColor;half3finalColor = diffuse + specular;

法线在实际游戏中使用时，上述方法往往还需要配合美术针对具体模型进行法线修正 根据模型顶点位置和拓扑关系计算出的法线往往细节过度，表现在上述卡通渲染的结果上就是往往会出现许多不需要的暗部细节，修正的方法是使用。

模型法线转印，给精细的模型一个近似的低精度proxy（比如用一个球形代表模型的头部，用一个圆柱形代表模型的胳膊或者腿），然后用proxy上附近顶点的法线作为模型的法线来使用此外，还需要考虑到明暗交界处反走样的问题，这里不做展开。

修改前的效果：

修改后的效果：

可以使用的模型法线修改工具：（1）UserNormalTranslator（SoftImage XSI）（2）NormalPainter (Unity)（3）普通小偷（最大）因为修改过顶点法线的模型不能直接使用法线贴图，所以如果需要使用法线贴图，最好把修改过的顶点法线存在顶点色或者UV上，这样不影响其他效果的使用。

一种方案是手动调整法线：推特上一位作者提到他最常用的几种方式，（下面三张图）简单来说即通过复制粘贴让某个区域内法线对齐一致，来实现像lowpoly一样的粗略阴影，常见于脸部、手部的法线调整Yoolies的脸部法线调整教程。

另一种是使用类似maya这类dcc软件中的data transfer功能，将圆柱或胶囊体的法线映射到模型上，可以得到平滑的光照效果，常用于衣服、头发上，是一个简单高效的小技巧。

根据我的观察和研究，《崩坏3》应该是沿用了《GUILTY GEAR Xrd》中的卡通着色方法和美术工艺，因此在效果上和后者非常相似。

基于不同的冷暖色调设定值得到的卡通渲染结果

中间那个想做出眼下三角的感觉，但那个效果不理想，大致感觉是试出来了，这个模型的布线有点差除了法线外，还存在一种更加简单粗暴的调整手段：mask遮罩，例如用一个顶点色的通道存储mask，来实现出“鼻子、嘴巴处没阴影”的效果。

这种可以理解为就是前面所说的阈值调整，这种方式比起法线调整要直观得多，门槛也低原神、战双都是用的这种然而这种做法也有些限制一个是网格本身，在眼部和嘴边应该得有这种一圈一圈向外扩大的布线；另一个是法线，毕竟是基于HalfLambert值来进行的调整，而HalfLambert本身就是NdotL，法线如果本身就很平滑的话调整起来会方便很多。

光照uts中将光与影分为三种颜色：亮色、一阶暗色和二阶暗色一个像素的颜色是基于法线n和光照方向l的点积dotNL来控制的dotNL大于阈值时为亮色，小于阈值时为暗色，根据dotNL值的大小，暗色中还可以再细分为一阶暗色和二阶暗色。

也有许多游戏使用Ramp贴图作查找表取色，这两种做法没有本质区别，只是用Ramp图的好处在于颜色间的过渡更好控制，更适合于表现细腻柔和的插画风格。

现在许多游戏中角色材质都有单独的光照方向，这算是一个普遍的做法了，ggxx甚至在过场动画中为了达到最好的效果，会逐帧改变角色的光照方向。充分了贯彻日式动漫中“相机下的正确才是正义”的理念。

手游上一般都会有人物专门的展示场景。为了保持最好的光影让角色始终看起来很可爱，这个场景的其实有一些讲究。拿战双举例

人物身上的影子包含两部分，一个是基于nl点积的光影（例如腿部两侧），另一个是来自方向光的投影（图中两个红色箭头）先说光影，就是指根据法线和光照方向来计算的阴影，光影方向随着角色旋转会发生变化，就我自己的观察结论，这是一个分段函数：。

1.在0-90和270-360之间，始终是从x角度打过来2.在90-180时，lerp(90, 0, (x-90)/90)3.在180-270时，lerp(0, -90, (x-180)/90)x指的是角色旋转的角度，x=0时光在角色的正前方。

这样既能让玩家感受到光影存在方向的变化，又能让光始终照在玩家能看到的地方另一个是投影这明显分了两个方向，能看到地上投影的光是从右边打过来，裙子、刀和额发投影是从上方打下来针对这种有一个兼顾性能与表现的做法，就是裙子、刀这种自投影使用ShadowMap，地上的投影使用平面阴影，毕竟地上大多数情况都是平坦表面，不需要考虑穿模，完美适合高性能的平面阴影，战双是不是这么用的我不清楚，没拆过包。

（最开始想到的是用两个ShadowMap，不过这样会多耗一张RT，放手机上其实性能有点勉强）风格化高光高光、边缘光的处理方法和漫反射的映射类似，也是用step function控制明暗如果是金属或者其他特殊材质，需要保留更多的高光细节，可以和Blinn-Phong或者GGX光照模型混用。

不同材质的边缘光最好用mask精确区分：盔甲上没有边缘光：

盔甲上有边缘光：

高光的模型大多是blinn-phonespec = pow(点(n, h) * 0.5 + 0.5, exp2(power));但头发的高光算法一般是kajiya-kai模型，俗称kk，一层高频，一层低频，再加上一个切线扰动贴图达到各向异性效果。

但要想使得高光沿着每根发束移动，还需要美术在头发模型的垂直方向进行uv展开

其它不那么硬核的方案，例如uts里使用视线空间法线采样matcap贴图做出假高光，法线贴图做出各向异性，加上遮罩图调整出某些位置的渐隐，也能达到不错的效果。

这种相似的做法在新樱花大战中也有使用，不过他们的遮罩图是通过uv采样，这样可以精准控制到每根发丝。

一般除了高光外，大家还会选择叠加一个基于法线n和视线v的菲涅尔边缘光，也就是

用来模拟出反光的感觉，这种光最早有在军团要塞2中提到，他们用来当做在黑暗时的补光手段和用来区分敌我阵营然而...动漫里的边缘光和这种边缘光有点不同，动漫中所需要的一般是单向的硬边缘光，而不是后者中这种全方向的菲涅尔边缘光，当然我们可以通过一些手段来让后者变成硬过渡和单向的，UTS里就有做到，不过这有点杀鸡用牛刀的感觉。

这种边缘光大家一般还是用来表现特效的多一点

要达到动漫里的边缘光，一种取巧的方式是用NDotL来计算，这里的L不是场景中的光方向，而是一个自定义的方向光，拿熊熊这张图举例的话，光方向就是在左上方射向右下方的样子，相当于把边缘光当作一般的直接光漫反射计算，做出来效果还挺还原的，更重要的是可控性更好。

可变形状的高光我们在日式卡通渲染的着色部分描述了一个相对较为简单的高光计算方式，从计算方法可以看出，该方法和经典的Blin-Phong模型有很多相似之处，尤其是对高光强度的计算上，都采用了这个计算项：

这个halfVec也就是我们常说的半角向量，计算方法是：

其中，L和V分别是光源方向和视线方向half3 halfVec = normalize(lightDir + ViewDir);从我们上面描述的卡通渲染高光算法可以看出来，改变卡通渲染高光形状的关键就在于改变这个半角向量。

。因此文章中就针对半角向量定义了一系列的修改操作，这些修改操作可以叠加使用，也可以单独使用，每个操作对高光形状的影响均不同，具体有以下几个操作：（1）平移，改变高光的位置：

这里，du和dv表示的是切线空间中的x轴和y轴，也就是切线和副法线，alpha和beta是自定义平移参数，最终偏移后的向量需要进行归一化处理。（2）有方向的缩放，沿着切线空间的某个轴缩放高光形状：

sigma是自定义参数，范围是(0, 1]，上式将使高光沿着切线空间的X轴缩放。（3）分割，将一块连续的高光切分成两块：

其中，sgn是符号函数，负数返回-1，否则返回1，gamma1和gamma2分别是自定义参数，若其中一个为0，则只沿着另一个方向将高光切为两部分，若两个参数均不为0，则高光被切成四块（4）方块化，将趋于圆形的高光变成方形：。

其中，n是自定义整数，n越大高光形状越方，sigma则定义了方形高光区域的大小，范围是[0, 1]。上述四个操作的具体实现可参见这篇文章。

风格化阴影类似于风格化的高光，风格化的阴影也是在标准的阴影计算流程之后，定义了一系列针对标准阴影的操作，通过这些操作，配合用户自定义的参数，便可以达到风格化阴影的效果，总的来说，共有四类操作：（1）膨胀/腐蚀（Inflation）

：扩大或者缩小阴影范围，用参数i来控制（2）亮度（Brightness）：阴影区域的亮度，可以用于模拟半影区的效果，用参数b控制（3）柔度（Softness）：阴影边界处的柔和程度，用参数s控制（4）抽象度（Abstraction）

：阴影形状的抽象程度，用参数alpha控制几种操作和相应的效果整个风格化阴影的生成是基于图像空间的，从一个已经生成的精确阴影图开始可以分成五个阶段：（1）精确阴影的生成，由于是基于图像空间的，因此对精确阴影图的生成方法没有特别要求，可以是shadow volume，shadow map，ray tracing或者其他阴影生成技术，但必须要注意的是这里的阴影值。

一定是二值化的（2）有向距离场的生成，基于图像空间的精确阴影，计算每个像素距离最近阴影边界的有向距离，这是文中算法的核心，也是后面风格化的基础，在文中给出了一种有向距离场的计算方法，当然也可以采用其他方案

（3）有向距离场的高斯模糊，这一步是抽象阴影生成的关键（4）过滤，通过一个转移函数，将模糊后的有向距离场重新映射为阴影图（5）使用过滤后的阴影进行光照计算

整个算法的流程，图3,4中红色部分表示阴影内部，蓝色表示阴影外部可以清楚地看出整个算法流程的核心是（2）（3）（4），其中（2）是在整个图像空间计算有向距离场，文中给出的有向距离场公式如下：

文中p的取值为8，按照文中的说法，这个距离计算方法相较于欧几里得距离，在精确性（accuracy）和平滑度（smoothness）上有一个比较好的折衷（trade off）这里C表示的是所有阴影的边界像素的合集。

（边界就是黑白发生变化的位置），分母上的积分项表示的是整个边界的长度，是一个归一化参数，离散化来看，就是屏幕上所有边界像素的个数从上面这个计算公式就可以知道，如果要精确计算每个像素的有向距离，则需要针对每个像素遍历整个图像空间中的其他像素，找到所有是边界的像素，并代入上述积分中进行求和运算，这个计算是比较低效的，因此。

文中采用的方法是在当前像素周围随机取一些像素参与到有向距离的计算，然后用计算结果去估计精确的有向距离的值，也就是所谓的蒙特卡洛方法此外|�−�|在文中使用的是一个三维的欧几里得距离，因此实际上计算这个有向距离时还需要一张深度图。

计算出有向距离场后，接着要做的就是对这张图进行模糊，可以想见，如果直接针对visibility图进行模糊的话，得到的实际上是柔化的软阴影，而不是我们想要的抽象阴影，所谓抽象阴影就是把精确阴影中的一些细节给略去，恰好就对应了模糊有向距离的值。

这一步是用一个标准的高斯模糊去完成的，参数alpha表示高斯模糊的方差，这个值越大，则模糊程度越高，细节丢失越多，抽象程度越高在文中的也使用了蒙特卡洛方法来减少高斯模糊的采样次数在得到了经过模糊的有向距离场后，接下来就是如何把模糊后的有向距离场重新映射回阴影值，这里用了一个很巧妙的转移函数，一次性完成了边界膨胀/腐蚀，亮度和柔和度的操作：。

其中，b是亮度，表示阴影区域的亮度值（非阴影区域亮度值是1），D是经过模糊处理的有向距离值，s表示柔和度，换句话说表示了亮度从b到1过渡的区域宽度，也就是软阴影的宽度，i表示了膨胀或者腐蚀的强度，正值表示膨胀，负值表示腐蚀，0表示不膨胀也不腐蚀。

上图是这个转移函数的图像，结合有向距离场的定义再来直观地看这个转移函数其实很好理解，i可以理解为等高线的值，我们认为有向距离值小于i的都是阴影区域，b作为最低亮度很好理解，smoothstep的功能是让阴影边界不再是跃变（如果是step就变成了跃变）而是有一定过渡，过渡的区间中点由i决定，区间长度则由s来决定。

上述算法中计算量最大的部分是有向距离场的生成，因为最终效果和采样数量关系密切，因此很难做到完全实时，这大概也是《军团要塞2》最终没有集成这个算法的原因实际制作中，会希望阴影有一定的倾向，即有些地方容易产生阴影，有些地方则很难产生阴影。

比如，凹陷的地方和受周围遮挡的地方应该被认为是影，需要增加阴影倾向，改变光照表现这时候可以用一张贴图或者顶点色控制阴影的倾向，对上面的Step Function进行偏移

没有阴影倾向的效果：

有阴影倾向的效果：

但是，阴影倾向信息不能反映外部遮挡物投射的阴影，最好结合shadowmap一起使用。描边参考《Real-Time Rendering》，卡通渲染中的轮廓线有以下几种：

（1）Boundary or border edge：仅为1个多边形所拥有的边界封闭模型一般不具有这样的边界；（2）Crease or hard edge：为2个多边形共有的边界，而且2个多边形的夹角（dihedral angle）大于一个阈值。

这个阈值的参考值为60度；（3）Material edge：不同材质的2个多边形的公共边界，或者是人为期望显示的边界；（4）Silhouette edge：相对于当前观察方向而言，面向不同朝向的2个多边形的公共边界。

1.点乘法（Surface Angle Silhouette）基本思想是利用viewpoint的方向和surface normal的点乘结果得到轮廓线信息这个值越接近0，说明离轮廓线越近计算方法如下：半边=饱和（点（正常，viewDir））；

边 = 边 < 阈值 ? 边/4：1；由于这种方法渲染的轮廓线宽度不均，实际应用不多2.背面扩张法（Procedural Geometry Silhouetting）这种技术的核心是用两个pass渲染第一个pass中正常渲染frontfaces，第二个pass中在渲染backfaces，并使用某些技术来让它的轮廓可见。

常用的方法是，在顶点着色器把backface的顶点沿着顶点法向方向向外扩张，使其包裹原有的模型这种方法的优点是，不需要任何关于相邻顶点/边等信息，所有的处理都是独立的，渲染速度很快，而且线条宽度可控，有一定的健壮性。

缺点是：一，像cube这样的模型，它的同一个顶点在不同面上具有不同的顶点法向，所以向外扩张后会形成一个gap，如下图所示。

一种解决方法是强迫同一个位置的顶点具有相同的法线朝向也就是平滑法线另一种解决方法是在这些轮廓处创建额外的网格结构由于gap大多在模型放大的情况出现，根据到Camera的距离控制轮廓线的宽度，一定程度上可以减少gap的出现。

需要注意的是backface的方式需要顶点法线连续，否则在硬边缘的模型上表现会比较差，法线连续的方式一般是将顶点的多个法线取均值，即使用点法线而不是面法线Unity法线默认导入方式是面法线，对此的解决方案一种是在ddc类软件中导出点法线贴图，或者是直接做平滑组平滑法线。

另一种在导入Unity时使用脚本计算一次点法线并存入模型的顶点属性通道中，后者相对来说更灵活一些，因为可以描边用平滑法线而光源计算依旧用法线贴图这中间有一个问题是平滑法线后如何存入fbx文件中？因为Unity一般只能导出为.asset文件。

所以这里可以选择直接在Unity外部用FBX SDK写一个平滑法线的工具，或者是选择平滑法线后用Unity官方的FBX Export插件，这个插件目前还是preview版本，不过够用了讲道理，我觉得工具放在项目内美术做起来会更舒服一点，而且我们还能自己控制脚本写点批处理UI，所以我选后者。

二，这种方法渲染的backfaces有可能与原有的模型在深度上发生冲突，并且遮挡模型，如下图所示：

一种解决方法是给backfaces设置Z-offset，使轮廓线埋没到临近的面里另一种解决方法是修改backfaces扩张的法线，使轮廓线扁平化总结：上述方法都有一个共同的缺点，那就是对描边的外观可控性很少，而且如果如果场景上的物体都需要绘制轮廓，每个物体都会增加一个draw call，性能上的开销会比较大。

此外，背面法只能渲染Silhouette edge，不能渲染Crease Edge和Material Edge3.屏幕后处理法（Silhouetting by Image Processing）这种技术利用了G-buffer，在每个buffer中使用了图像处理的技术来检测轮廓信息。

基本思想是，利用图像处理中的一些算法，在Z-buffer中找到不连续地方，由此计算出大致的轮廓线还可以在surface normal中找到不连续点，来获取更完整的轮廓线最后还可以在ambient colors中，进一步完备前两步找到的轮廓线信息。

因此，基本步骤是：1. 使用vertex shader把world space normals和z-depths渲染到纹理中2. 使用一些滤波算法来找到边缘信息一种常见的滤波算子是Sobel边缘检测算子，还有Canny算子、Laplace算子、Robert算子和Prewitt算子。

3. 找到边缘后，我们还可以使用一些图像处理操作，例如腐蚀和膨胀，来扩展或者缩小轮廓线宽度这种方法的优点在于：（1）适用于任何种类的模型，而且不需要CPU参与创建和传递一些边的信息（2）可以渲染Crease Edge，而且可以设置阈值，控制Crease Edge的采样。

但也有它的缺点：（1）这种对z-depth比较来检测边界的方法，会受z变化范围的影响，一些z变化很小的轮廓，比如桌子上的纸张，就无法检测出来（2）轮廓线的宽度不能根据物体单独控制，而且不能区分Silhouette edge和Crease Edge。

4.RT高亮描边其实...还有一种，就是高亮描边，比方说求生里的这种它的原理是用一张RT单独绘制纯色网格，然后对RT做Blur，最后再与原本的颜色图混合不过一般用它来做选中的效果，而不会用来做卡渲的描边，虽然它效果不错，也不会把内描边绘制出来，但是它的问题依旧是不好单独控制描边宽度和颜色，而且它是真的那种纯粹的外描边，一点内描边都没有的，太过于适合用来表现轮廓了。

5.内描边一般我们想要动漫里的效果，应该是网格叠在一块时也会有描边的。

1.本村线材质上的描边只能在贴图上绘制。但是，由于精度问题，贴图上的线放大会出现锯齿。

《罪恶装备》使用了一种叫本村线的方法，即扭曲UV，只用垂直线和水平线构成贴图靠近本村式线的地方（Wire Frame显示）说起来，Texture Mapping的锯齿，某个纹素（构成Texture的Texel）对应多边形面用单独Texel来描绘就会变得显眼化。

相对的，如果有邻接的Texel，和单独Texel的时候不同，因为四角Texel形状的轮廓实际上消失了，很难会呈现锯齿感不过，是因为邻接也有斜上或斜下的，事实上这个和Texel是单一的状态是一样的，也会有锯齿感出现。

总之，水平线形状和垂直线形状的Texel如果是排列好的的Texel集合的，附加一些模糊化，就可以回避锯齿感出现的状况。

本村式线的UV展开的例子要试着理解是理所当然的事情，注意到这点的本村氏，轮廓线是，只用垂直线和水平线予的实线构成的Texture]来制作出来基于这个，在3D模型上使用时，在想要斜线或曲线的地方，把Mapping也一样用扭曲和弯曲的形状的来设计UV（3D模型上的每个多边形，来表示和Texture Map对应的数据），。

好吧，这个方法是试着进行Texture Mapping，不可思议的。即使是那种分辨率不高的Texture，也可以获得美丽光滑的画线。本村式线用的Texture的例子。这里是垂直线的绘制。

没使用这个技术的参考，使用Line Texture(在贴图上直接画线)的例子放大后的可以看到图形锯齿明显Mesh分割也是，进行的是和绘制的线无关的拓扑但是，这种方法有个缺点，就是会扭曲贴图上的文字和花纹。

所以，《罪恶装备》的角色都是用的纯色贴图，一些带有文字的区域都做成贴花，用新的mesh附在模型上本村式线的例子，只用直行的线段，看起来就像城市规划图那样不可思议的Texture，例如四角线沿着边缘的Texutre， 适用于肌肉凸起部分的轮廓线。

肌肉的隆起，变成椭圆形的半球形状，使用本村式线就变成「把四角形装的边缘线对椭圆形状来Mapping」四角变成椭圆形状，四角内部的领域有了很大的拉伸和歪曲所以，如果这个四角型内部有文字或花纹，当然也会扭曲，因为最终这个Texture是用来附加轮廓线的东西，那样的文字或花纹没加进来。

因为是外观显现的，最终只有线，这个手法生成的扭曲，作为外观问题上并不会显露出来当然，给予歪曲和扭曲的是基于UV的Texture Mapping，角色或视点移动，Texture也会收到放大缩小旋转的影响所以说，绘制的线段也会受到这种影响，变成曲线或斜线，因为这种情况Texture Mapping可以使用Bilinear Filtering，就会给曲线或斜线适当的模糊感。

于是，这个正好成为了很好Anti-Aliasing的效果

不设定Bilinear Filtering(上)和设定(下)本村式线描绘的线段的粗细的强弱是可以看到的但是，本村式线用的Texture的自身没有这样微妙的线段强弱，线的粗细是大体上单一的既然Texture的线的粗细是平均的，如何处理画线的强弱的？。

本村式线进行画线的粗细的强弱，是用UV Map的设计来加上的想要出现粗的线，在Texutre上的线表现用的Texel，所对应的多边形面分配的大一些，在UV Map上下功夫就可以了这个的本村式线，和制作流程，预感到也会在Anime笔触以外的游戏图形里广泛使用。

设定画线粗细强弱的例子。上边是没有设定，中央是UV和线重叠状态来设置强弱，下面是线自然的切断的表现。无内轮廓线：

有内轮廓线：

2.基于SDF的内描边抗锯齿他的做法是将内描边使用sdf预计算后单独存放一个通道，也就是通过一种核运算来预计算出贴图上每个像素"距离最近描边"的程度，而根据sdf的性质用这种方式甚至可以控制“较远”的像素的处理方式。

3.基于边缘程度的后处理二之国中的做法选择在一个顶点属性通道中记录边缘程度，然后在后处理中来进行绘制内描边。

6.特效除了matcap外，七大罪也为特效添加专用的光源，让人物与特效有一致的表现。随着手机性能发展，多跑一个光源也慢慢能被主流机型接受了，在战双中能看见不少特效都有点光源。

7.其它1.眉毛动漫里一般眉毛是是能够显示在头发上的（反物理+1）uts的一种做法是用模板测试，不过这样会多用一张模板贴图，在手机上对带宽不友好另一种做法，使用RenderQueue按头发-脸-内眉毛-外眉毛的顺序绘制，眉毛绘制两遍，第一个用ZTest LEqual绘制没被头发挡住的眉毛，第二个用ZTest GEqual绘制盖在头发上的眉毛。

眉毛的计算量并不多，这种做法会更省一点

2.表情表情的制作要么就是改模型，要么就是改贴图如果对精度没有较高要求、数量也很有限的话，其实直接用贴图就是一种非常实惠的做法，例如>.<这些表情换张图就能很好搞定贴图的局限性在于动态得通过帧动画的形式来做，数量较多的话还不如改模型。

改模型的做法又可以分为blend shape和改骨骼blendshape在CG制作动漫中非常常见，本质是修改网格顶点进行形变预先制作好一套表情组合，像是眨眼之间的表情切换可以通过顶点动画插值来实现

修改骨骼的变换信息，通过蒙皮来修改脸部模型，就性能上来说这种会好一点。

如果需要表现出一些特殊的漫画中表情，就得考虑为眼睛和眉毛单独建模。

还特殊一点的：颜艺，光影计算已经救不了了，需要另外用贴图来制作，像是褶皱和嘴巴三角阴影，将一些常用小物件（汗、#）放在贴图中，在动画每帧中间插进去，国内基本不会做到这么细致。

3.眼睛眼睛能表达的东西很多，根据需求不同，实现方案也有很多种，最简单省事的就是贴图，最多一层baseMap和一层高光足够了，但这放在高品质游戏里难免有点敷衍新樱花大战中的做法比较复杂眼睛的建模实际是两层，外层是向外凸的半透明层，用来绘制高光和反射，表示人眼的角膜；内层微微内凹，表示人眼的虹膜与中心的瞳孔。

C：Albedo Map，基本贴图，表现出人眼的虹膜效果D：对基本贴图的加算图E：高光图，也是通过加法计算，会通过UV动画进行移动F：环境反射图8.实际案例对于角色，大部分游戏中的轮廓线都是用背面沿法线向外扩张的方法实现的。

而且很多游戏还在此基础上做了轮廓线的风格化处理例如，《罪恶装备》大量使用了顶点色控制轮廓线的风格：R通道：控制光照的明暗变化G通道：控制顶点根据视距膨胀的强度B通道：控制z-bias，值越大轮廓线越靠后

A通道：控制轮廓线的粗细

罪恶装备为什么使用顶点属性而不是贴图来存储数据？虽然常见的是使用贴图，但这也是一个优化的思路，是为了排除像素精度带来的影响因为采样极度依赖于分辨率，除非是超高分辨率，否则在特写镜头下很容易出现锯齿，而使用顶点属性则会根据屏幕分辨率来插值，达到更清晰的表现。

对于一些特殊的分镜，可以使用更复杂的轮廓线制作方法在《火影忍者疾风传》中，使用了判断轮廓线的RenderTexture，一次进行两种方法的绘制还加入了可以给角色分别指定颜色的【ID Buffer】，用4X4的16像素Texture保存颜色信息，再取得颜色来绘制角色的轮廓线。

另外也可以追加Glare的信息，制作出角色轮廓的自发光

制作流程罪恶装备对于角色，大部分游戏中的轮廓线都是用背面沿法线向外扩张的方法实现的而且很多游戏还在此基础上做了轮廓线的风格化处理例如，《罪恶装备》大量使用了顶点色控制轮廓线的风格：R通道：控制光照的明暗变化，判断阴影的阈值对应的Offfset。

1是标准，越倾向变成影子的部分也会越暗(接近0)，0的话一定是影子G通道：根据相机距离控制描边宽度的系数，对应到Camera的距离，轮廓线的在哪个范围膨胀的系数B通道：控制z-bias，值越大轮廓线越靠后，描边的z偏移值，一般很大，可以使得一些不想要的描边消失

A通道：描边粗细程度，0.5是标准，1是max，0是无

以罪恶装备为例，shader主要用到3张贴图：main tex, ilm map, sss map（1）main tex：固有色

（2）ilm map：用于调整阴影和高光区域的形状

R通道：

底色为128灰色，可以理解成材质的光泽度，控制高光的强弱。材质越粗糙，灰度越小；材质越光滑，灰度越大。G通道：

底色为128灰色，表示阴影的倾向，控制阴影区域的大小。容易产生阴影的区域（可以理解成有自投影的区域）灰度较小，如脖子、腋下、鼻子下方、衣服的褶皱、头发遮住脸部的部分。B通道：

底色为黑色，控制高光区域的大小。A通道：

（3）sss map：用于调整阴影的颜色亮部颜色 = mainTex暗部颜色 = mainTex * sssMap变形的几何体，替换几何体首先，不经意的看下GUILTY GEAR Xrd -SIGN-的战斗场景。

各种各样的建筑物和背景对象排列着，这些不是布景的一张绘画]，而是通过3D模型来表现的， 从用户视点也很容易辨别让对打的两个角色向左右移动的时候，近景会向左右很大的移动，远景会慢慢的向左右移动是2D格斗游戏图形里常见的背景表现，实际上这里，隐藏着意想不到的秘密。

伊利里亚城下町的背景里的，建筑物的Mesh的单体表示，挪动摄像机。就看到了非常有冲击性的图形。

那样，场景中的近景，建筑物等背景3D模型有相对强烈的远近透视，是因为有意图把模型的向深处扭曲另一方面，一定距离以外的远景的3D模型群，虽然没有附加透视，但通过实际尺寸Scale，也被大幅的小型化了这样配置模型是有理由的。

没有附加透视的正确尺寸缩放的模型，变得无法表现出场景的深度感远景对象缩小也是相同的理由，特意的缩小后放置在并不是那么远的距离上，战斗场景打斗时，与角色向左右移动一起，让远景物体一样向左右移动真实的Scale的情况，如果要把建筑物就那么小的来放置位置，必须配置在相当远的地方。

想到在现实世界也有经验的，远方的景色自己左右移动数米也几乎没有移动变成这样的2D格斗游戏的背景也变得没有变化，为了更好的运动，把小的3D模型配置在场景近处K.O的场景时，摄相机会旋转，通常摄像机也会朝向内侧的方向。

因为这种情况，内侧的，Camera看到的范围的背景对象也要好好的设定还有，剧情场景的情况，使用了一部分2D的渲染布景来做背景随着照摄像机工作，渲染布景的2D背景动态的移动，2D背景自身用电视Anime的理论来处理的地方也是有的。

对话场景（上），从别的角度看的截图

在伊利里亚城内的拖拽摄像机 关于战斗场景的视点内侧的模型也可以明白背景关联有1个补充，背景的集群角色(路人角色)，接近战斗舞台的是做成3D模型，远景的东西是"纸片人", 变成动画的billboard那么，在战斗中登场的主要角色是约4万面多边形的模型，像前篇介绍的那样，和一般的基于3D图形的游戏角色有稍微不同的动作方式。

Faust的开襟（？）追加部件的实现关于一般的3D图形，角色是用模型内部配置的骨骼来运动的，这里追随成为外皮的3D模型的结构来获取姿势或变形，并实现动画GUILTY GEAR Xrd -SIGN-是情况是，基本的动作上，虽然也是根据这种方法的，但例如像毛发，刀剑的形状变形那样的攻击动作就无法实现了，那种特殊情况，要把3D模型的一部分部件替换来处理。

头发变形的Milia的情况，准备了追加部件，来进行替换的样子每个角色的运动，要像Cel Anime的动态表现那样，进行独特的控制和一般的3D游戏图形不同，GUILTY GEAR Xrd -SIGN-的角色们，脸上的眼睛和鼻子，以及嘴的"大移动"，有现实的人无法做到的那种部位的伸缩或肥大化，反过来缩小忽略的事情也是有的。

玩家可以看到游戏画面上的漂亮的事。对于GUILTY GEAR Xrd -SIGN-的图形来说就是正义的。

关于一击必杀的剧情场景BEDMAN的使用例子一开始，制作的是从哪个方向看都说得过去的外表一样的表情(上)，初期印象的设定图(中央) 不同表现的地方很多因此，驱动Rig，调整目鼻口的位置和角度(下)因为追求从摄像机里看的印象是要一样的]的事情，实现了角色有效果的演出。

GUILTY GEAR Xrd -SIGN-上登场的角色，和一般3D游戏角色加入了同样的骨骼，这些骨骼的运动方法和控制方法，给予了高度的自由度例如眼球，可以在脸内非常自由的移动，嘴是可以像脸部体积变化那样变形和开闭。

手足也可以自由的伸缩这就是为了实现我们常见的Anime的积极的表情表现]而组装进去的滑稽的[圆圆的眼球]，表示愤怒的标志等漫画的记号表现，果然是这个系统无法对应的为此，这种漫画表现必须要进行部位部件的替换，以及部分部件的附加，还有就是用Texture表现的方法来对应。

像突出手足的一部分的姿势，只是调整视角(Angle of view)，并没有动态的来表现要很大的显示突出的手，为了强调远近感要扩大视角，深度方向的脸就变得很小了这种手被很大的显示的情况，拉伸3D模型方面的手腕，让手靠近摄像机。

结果，GUILTY GEAR Xrd -SIGN-的摄像机视角没有变化，可以说是在角色模型上附加了视角（笑）

最终截图(上)，为了实现这种而进行“体格変更”的揭秘截图(下)标准状态的UE3，是三个轴同时应用1个参数来对应骨头放大缩小的表现的。这么用的话，可以表现出变形的像二头身一样的角色。

通常头身和而头身角色（参考）还有，这里展示的二头身角色，并不是本文谈到的3个轴同时扩大缩小来实现的UE3的基本机能，而是通过Arc System Works对UE3进行3个轴分别扩大缩小的机能扩张]来实现的。

部位扩大的实际使用例子，上边是产品版使用的最终截图，下面是没有使用部位扩大的状态家弓氏对UE3的改造，对应了骨头的三轴分别扩大缩小处理而且，移植到实际的制作阶段的时候，使用这个结构让手足等简便的扩大缩小，伸缩自如的调整的定制接口也制作了。

这样一来，在肢体操作上，使用这个定制接口，就可以进行手足的扩大缩小，伸缩的调整的动作制作了

动作的设定工作中，预览画面里进行手足的扩大缩小的例子在「SoftImage」上，把小型的窗口内的数字上下移动来变更任意轴的Scale，让Rig进行Setup做成3D模型的特效群发出的必杀技等附带的特效类的东西，除了一部分例外的大多的都是3D模型。

具体的，烟，火焰，各种闪光，防御特效等等石渡先生：Finish(必杀技)的时候等，有一部分摄像机的3D运动的演出，特效用billboard的话哗啦哗啦的感觉样子很不好，就下决心把特效群也用3D模型来做了（笑）。

这个是[说起来容易做起来难]，实际问题，还是花相当多的力气活来实现的例如，下面展示的烟的特效，看起来有一点像流体动画，实际上，是美术师通过手动1帧1帧的建模做出来的飞舞着膨胀，破裂的爆烟效果，为了能像看到的那样，也是美术师1帧1帧做出来的。

烟的特效（上），模型是3D数据的缘故，移动摄像机，变得好看。

跳跃时产生的烟的Wire Frame 显示

Zato的影子融化的特效模型。附加动作前的素体。操纵影子的Zato，使用技能可以液态和溶解到镜子里活动，中途还可以变形为Zato的角色模型，中途要另外准备[影子溶解]特效模型来进行替换。

这里是附加了动作完成版的影子溶解模型(上)，下面是，3D模型的证明，尝试着改变了角度顺便说一下，目前介绍的特效群的里面，烟等纯然的特效类没有进行光照(lighting)，阴影等是直接烘培到Texture来做成的。

也没有使用出现轮廓线的处理火焰或闪光等发光系的特效，是只能看到光，并不实际的照亮周围，这个是2D格斗的情况，根据条件特效外观变化的话，担心游戏感觉会出现故障另一方面，Zato的影溶等，对于附加在角色上的部件类型的特效，要进行光照。

3D特效的采用，今后也要进行慎重讨论后期效果近年来照片真实系的3D游戏图形，倾向实现各种各样的Post Effect对于这个，把像Cel Anime作品风格为目标的GUILTY GEAR Xrd -SIGN-的场合，可以说是相对次要的东西。

虽说如此，但Post Effect的Pass还是有的像前篇传达的一样，GUILTY GEAR Xrd -SIGN-的Anti-Aliasing的处理采用了FAXX，FXAA是用Post Effect实现的。

还有GUILTY GEAR Xrd -SIGN-的RenderTarget采用的是aRGB的16位浮点数类型的64位Buffer，因为实现了对应HDR（High Dynamic Range）Rendering Pipeline，高亮度部分溢出的Light Bloom效果的Post Effect也被使用了。

战斗场景，让FXAA有效化的最终截图（上），和无效化状态的截图（下）

这个是同样的战斗场景，最终截图（上）和所有Post Effect都无效化的截图（下）的比较石渡先生：最近的Anime也是，因为这种Light Bloom的效果也被普通的使用了，所以考虑不会有违和感除此之外，Diffusion的效果，也用Post Effect给予了。

本村氏：对于有明暗精确的二值划分感觉的Anime的画面，Diffusion在增加柔和的风格上是非常有用的和Light Bloom 在亮度值1.0以上的地方才处理相比，Diffusion在较少的亮度值的地方也能表现效果。

Light Bloom和Diffusion，都是给予把亮部模糊溢出的效果的东西，分别作为系统的Filter处理来实现的具体的是， 使用Light Bloom Filter后，进一步的使用Diffusion Filter。

Diffusion虽然在散乱的处理上比较有限，但是有在某种程度的亮度地方都可以使用的印象石渡氏是，[主要的格斗游戏部分，太过模糊的话游戏也会变得难玩，这种Post Effect加强的地方以剧情场景(Cut Scene)为中心]这样的叙述着。

通过Material，可以设定Texture给予1.0以上的亮度来作为发光体。

Light Bloom有效（上）和无效（下）

Diffusion有效（上）和无效（下）

使用发光体Texture的Ramlethal（上）和 Potemkin（下）其他的一些实例七大罪中使用basemap和matcap来控制人物颜色，缺点是得到的是一个比较固定的光照表现（相机不旋转的话），但好处是可以通过更换matcap贴图来轻松实现不同buffer下的人物特效。

由于是手游，牺牲一些光照效果来使用matcap确实是比较实惠的选择，前提是美术能接受的话此外，在一些需要将衣服颜色提供给玩家染色的游戏中，就不能再在BaseMap中存入颜色，而应该在着色器中计算，BaseMap仅存放衣服的褶皱之类阴影。

PBR与卡渲卡渲与PBR，这类做法在霓虹国那边业界已经很熟悉了，至少异度之刃2、噬魂者3就已经有了这种做法，然后传承到噬血代码中，米哈游也一直在探索这个方向，这在以后说不准会成为主流虽说有PBR，但实际上皮肤还是保持卡通渲染（顶多加个次表面散射），而服装和装备则通过PBR元素来表现质感，不完全是PBR，而是通过一个权重值来与卡渲融合。

下图是噬血代码的渲染流程，他们使用的是延迟渲染，除了GBuffer外还单独扩展一张专门存放数据用的贴图。

A：未经后处理的PBR表现B：底图C：后处理Bloom图D：GBuffer扩展图的R通道：表示PBR程度的遮罩，越白则PBR程度越强E：后处理中计算的光影图，在A图中就可以看到已经算进去了F：后处理中计算的投影和AO，顺便一提GBuffer扩展图的A通道：投影的落下距离（偏移值），此外G通道是投影的优先级，B通道是用于区分角色、背景等的ID

G：E与F的最小值合成的阴影图H：PBR高光和后处理高光的合成I：最终效果，B图中的BaseMap和G中的阴影做乘算，根据参数与H图和C图相加，再根据D图的权重来与A图的PBR进行混合可以从D图看到皮肤光影处没有任何PBR权重，就是纯卡渲，并且颜色有渐变的过渡；投影是硬投影；眼睛处有些许pbr权重。

而服装和装备是卡渲和PBR的权重混合，噬血代码和异界锁链PBR都是使用三个通道来控制：金属度、AO和粗糙度/光滑度间接光部分没有说明，但提到在地图中布有许多probe，猜应该是lightProbe和reflectProbe。

这种算是比较复杂了，其实要表现出PBR感觉，最显著的就是PBR高光：直接高光和间接高光直接高光选择常见的GGX，间接高光用采样reflectprobe来表现，其实Unity的默认材质那一套就很好至于间接漫反射光可以看情况选择采样lightprobe，不过漫反射相对而言不明显，根据实际情况决定要不要。

后处理卡渲里对画面提升最大的Bloom和ColorGrading1.Bloom效果基本算是必备之一的后处理效果，有没有Bloom那种朦胧感真的不一样虽然放手机上带宽消耗挺大的，但是效果着实不错，Bloom实现的相关文章很多就不多说了，去Unity的PostProcess（PP）包看看源码都可以。

2.颜色分级调色绝对算得上是最神奇的后处理效果了它一般有两种使用方式1.用查找表LUT来进行颜色转换LUT表可以由美术在PS里生成并导出，可以做出昼夜黄昏效果，什么新海诚风格、日式风格都可以它原本就是摄影领域的产物，各种大片感都能做，难点在于调色也是一门学问（电影还有调色师呢）。

它的原理是通过rgb通道值作为采样坐标从查找表中查找并返回一个新的颜色不同的LUT可以不同的画面整体颜色（需要注意大概就是提供给美术的测试图的颜色空间需要和计算时一致，在Unity PP中为了导出的测试图具有更大的色域，计算前会先转到ALEXA LogC空间）。

例如昼夜黄昏。

2.在引擎内实时调整反馈这种其实和在PS里原理是一样，不过PS能导出一整张LUT，这种则封装在引擎内可以实时调整一般颜色调整分为大致两个步骤：Color Grading：画面整体调色ToneMapper：将HDR颜色映射到LDR范围。

Color Grading又分了很多小项：Post Exposure、Contrast等，建议看看catlike这篇文章原理讲得很清楚，一看就懂（误）不过就算明白了原理，但是要做出还不错的效果还是挺不容易的。

3.色散效果这在动作游戏见到比较多，增强击中感，常和径向模糊配套出现，不算常用，仅仅记录一下原理上挺简单，就是对不同颜色通道值使用不同的uv偏移值来采样，这里是rg通道，并且根据像素离屏幕中心的距离远近会有不同的偏移值。

后处理的其它类别太多了，就不细说，类似的文章也很多有意思的技巧假内饰用CubeMap和一个正方体实现假的“室内”效果，我觉得挺有趣的，于是做了一个实现Reverie：一种假室内(Fake Interior)效果的实现412 赞同 · 12 评论文章。

冒名顶替动画对大量的npc使用面片播放帧动画代替实际人物模型，而这些图片是由多个相机对3D模型预计算生成图集所得，实际游戏中根据视线角度和关键帧来显示子图又是一个能省下来计算量的做法，况且这些面片还可以合批。

不过用它做动画的问题在于每一帧就需要一张图，要保证精度，一张图至少得要512分辨率，一个帧动画少说都有5、6帧，这么多贴图放shader里难免对带宽有点吃力，这种还是只做静物就行，大批量的房屋比较合适这个效果我也在Unity做了一个初版，基本和视频中一致。

Imposter伪装者效果github.com/hyjzRef/SimpleImposter

顶点运动模糊通过移动顶点位置来实现的运动模糊，简单高效，但要调整出好看的效果估计得加个遮罩。这个也有人实现过一遍。

taecg：Shader案例:顶点运动模糊281 赞同 · 16 评论文章动画贴图本质上是一种顶点动画，通过贴图记录下每个关键帧的顶点位置，比方说6*1024的贴图，6表示6个关键帧，1024记录1024个顶点的位置，结合GPUInstance，达到高性能且不错的表现，非常适合大批量路人、观众这种，可以弥补imposter的不足。

陈嘉栋：利用GPU实现大规模动画角色的渲染476 赞同 · 34 评论文章参考：洛城：卡通渲染及其相关技术Rikii：卡通渲染技术总结蕾芙丽Reverie：卡通渲染学习总结学无止境：非真实感渲染flashyiyi：借AI梦境档案谈谈NPR渲染

2173：【01】从零开始的卡通渲染-描边篇MEng Zheng：【01】开篇：重力眩晕2中的渲染效果概览流朔：【Unity URP】以Render Feature实现卡通渲染中的刘海投影游戏葡萄：米哈游技术总监首次分享：移动端高品质卡通渲染的实现与优化方案

易水：卡通渲染手游七大罪的技术介绍,一Lucifer：《原神》部分效果的个人理解【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，前篇（1）

【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，前篇（2）【翻译】西川善司的「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，后篇

过氧化氢：浅谈卡通渲染与真实感渲染结合思路【NPR】卡通渲染_npr渲染_妈妈说女孩子要自立自强的博客-CSDN博客往期精选Unity3D游戏开发中100+效果的实现和源码大全 - 收藏起来肯定用得着‍

match‍Unity3D 经验者转到 UE4 的经验‍【原神】各角色Pixiv涩图统计(一). 最多的是谁? R18涩图谁最多?‍声明：发布此文是出于传递更多知识以供交流学习之目的若有来源标注错误或侵犯了您的合法权益。

，请作者持权属证明与我们联系，我们将及时更正、删除，谢谢作者：星痕原文：https://zhuanlan.zhihu.com/p/619582749More：【微信公众号】 GameDevLearning。