在URP中，SurfaceShader已经不再被支持了，学URP和HLSL去吧，别碰SurfaceShader了。

前言

  没错，又是老生常谈的NRP（非真实）渲染，或者说卡通渲染。最近事情不多，研究了一下Shader方面感兴趣的东西，首先试了一下用RenderTexture实现的实时MatCap，有点意思但找不到什么应用场景，暂时丢到一边了。然后不知道为什么又回到了NPR上面，于是就照着现在公司项目中的渲染效果为参考来编写了。最后的结果感觉完成度还可以，所以拿出来吹逼一下。

Outline 描边

  搞NPR的要点之一无疑就是描边，关于这个，有件事就想提一下。我写Shader都是用SurfaceShader编写。之前做描边碰到的最大的问题就是怎么实现描边，因为那时候看到不止一篇文章说SurfaceShader没有Pass，就非常僵硬。但是，这次我在搜索的时候居然发现原来SurfaceShader是可以加Pass的！所以描边问题自然就引刃而解了，感谢这篇文章。
  做法是传统的Inverted-Hull，代码是从Toony Colors Pro 2插件中抄来的，翻译了一下变成SurfaceShader可以用的代码。支持多种途径（通常、顶点颜色、切线、UV）来控制描边，支持固定宽度，支持通过一些参数微调，效果蛮玄学的，不过总比不能调要好。

不要用Cutout
有时制作头发或者衣服上有镂空之类，会采用Cutout的做法，在Shader里使用clip函数对像素进行剔除。但是想要使用Inverted-Hull来做描边的话，这种做法就不行了，因为描边是跟着mesh走的，剔除掉表面的像素并不会改变mesh的形状，描边就会出现问题。而且面片对这种描边方式本身就不友好，所以不要再用面片做头发了，请做出体积！

自定义光照：二刺螈

  二刺螈不需要渐变！一般的Lambert模型的光照计算公式为dot(normal, lightDir) * atten，最简单的做法——对其round一下就可以使明暗分离为两层了。

  某些情况下，仅仅两层的明暗关系可能不够用，所以使Shader还支持了Ramp贴图来对光照进行映射。可以自己制作不同的Ramp贴图来实现想要的效果。适当采用一些渐变也有着反锯齿的效果（下图中间）。
  其实这也是非常基础的操作，在Unity官方的Surface Shader Custom Lighting Example里就有示例。

五彩斑斓的黑

  暗部如果只是纯黑色就显得很闷了，现在日系插画都有着很漂亮的暗部颜色，所以增加了对暗部进行着色的功能，混色算法采用了PS图层混合模式的“滤色”模式。

Cel贴图

  研究公司项目里的角色渲染时，发现存在一张被广泛的使用的被称为Cel的贴图，用来控制阴影形状，有点法线贴图的意思。尝试反推了该贴图的用法，使用后可以在头发和衣服褶皱等地方看到明显的效果。

边缘光

这个很常见也很简单我就不多说了，总之在NPR中也是蛮必要的一种效果。

Stylized Highlight 风格化高光

  一开始用传统Blinn-Phong模型的高光算法，效果相当恶心，所幸找到了一个好用的轮子——风格化的高光。代码是从这里来的，我翻译了一下，然后添加了一个SpecMask贴图的功能——对于不需要显示高光的区域涂黑即可。
  友情提示：此效果不适合面数很低的模型。

关于反锯齿

  由于有外描边这种细线的存在，不进行反锯齿就很容易满屏幕狗牙，分辨率越低越明显，所以极力推荐采取一定的反锯齿措施。不管是MSAA还是后期处理的TAA或FXAA（在官方的PostProcessing包中就有），都会让画面观感明显变好，顺便再配合一些此类渲染必备的Bloom效果，就可以获得比较满意的画面了。

关于打光

  和一般的实时光照打光方式相同，推荐一个Directional Light即可。此外也会受环境光（Environment Lighting）影响， 可以在Lighting页面里调整。

完整代码

特性大致就是以上这些了，下面是完整的Shader代码。

// ----------一些参考----------
// http://www.ggxrd.com/Motomura_Junya_GuiltyGearXrd.pdf
// ----------------------------
Shader "Gypsum/Cel-Shading" {
    Properties {
        [Header(Culling)]
        [Enum(UnityEngine.Rendering.CullMode)] _Cull ("Cull Mode", Float) = 2
        
        [Space(5)]
        [Header(Base Color)]
        _Color ("Tint", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}

        [Header(Cel Shading Parameters)]
        _ShadowColor ("Shadow Color", Color) = (0,0,0,1)
        [Toggle(_ENABLE_RAMP)] _EnableRamp ("Enable Ramp", float) = 0.0
        _RampTex ("Ramp Map", 2D) = "white" {}
        _CelTex ("Cel Map", 2D) = "white" {}
        _CelOffset ("Cel Offset", Range(-1,1)) = 0

        [Space(5)]
        [Header(Rim Light)]
        [HDR] _RimColor ("Rim Color", Color) = (1,1,1,1)
        _RimPower ("Rim Power", Range(1,64)) = 8

        [Space(5)]
        [Header(Outline)]
        [KeywordEnum(REGULAR,VERTEXCOLOR,TANGENT,UV2)] _OutlineNormalMode ("Normal Mode", float) = 0.0
        [Toggle(_OUTLINECONSTWIDTH)] _OutlineConstWidth ("Constant Width", float) = 0.0
        _OutlineColor ("Color", Color) = (0, 0, 0, 1)
        _OutlineWidth ("Width", Range(0,5)) = 1.0
        [Toggle(_OUTLINEZSMOOTH)] _OutlineZSmooth ("Enable Z Correction", float) = 0.0
        _ZSmooth ("Z Correction", Range(-3.0,3.0)) = -0.5
        _Offset1 ("Z Offset", Float) = 0
        // _Offset2 ("Z Offset 2", Float) = 0 //似乎没什么作用所以没有启用

        [Space(5)]
        [Header(Specular)]
        [Toggle(_ENABLE_SPECULAR)] _EnableSpecular ("Enable", float) = 0.0
        [HDR] _SpecularColor ("Color", Color) = (1, 1, 1, 1)
        _SpecularMask ("Mask", 2D) = "white" {}
        _SpecularPower ("Shininess", Range(1, 100)) = 48
        _SpecularSegment ("Segment", Range(0, 1)) = 0.9
    }

    Subshader {
        Tags { "RenderType"="Opaque"}

        CGPROGRAM
        #pragma surface surf Cel addshadow
        #pragma shader_feature _ENABLE_SPECULAR
        #pragma shader_feature _ENABLE_RAMP

        sampler1D _RampTex;
        sampler2D _CelTex;
        sampler2D _MainTex;
        sampler2D _SpecularMask;

        fixed _CelOffset;
        fixed4 _ShadowColor;
        fixed4 _Color;
        fixed4 _RimColor;
        half _RimPower;
        half4 _SpecularColor;
        half _SpecularPower;
        fixed _SpecularSegment;

        // ----------一些颜色混合函数----------
        fixed Greyscale(fixed3 input)
        {
            return (input.r + input.g + input.b) / 3; 
        }
        fixed3 Blend_Multiply(fixed3 color0, fixed3 color1)
        {
            return color0 * color1;
        }
        fixed3 Blend_Overlay(fixed3 color0, fixed3 color1)
        {
            if(Greyscale(color0) <= 0.5)
            {
                return 2 * color0 * color1;
            }
            else
            {
                return 1 - 2 * ((1 - color0) * (1 - color1));
            }
        }
        fixed3 Blend_Screen(fixed3 color0, fixed3 color1)
        {
            return 1 - (1 - color0) * (1 - color1);
        }
        // ------------------------------------

        struct Input {
            float2 uv_MainTex;
            float3 viewDir;
            // fixed3 worldNormal;
            // float3 worldPos;
        };

        // 自定义一个SurfaceOutput
        struct SurfaceOutputCel
        {
            fixed3 Albedo;
            fixed3 Emission;
            float3 Normal;
            fixed Alpha;
            half2 UV; //在Lighting函数中贴图就需要传UV到Output中
            // fixed3 WorldNormal;
            // float3 WorldPos;
        };

        void surf(Input IN, inout SurfaceOutputCel o)
        {
            // Input to Output
            o.UV = IN.uv_MainTex;
            // o.WorldNormal = IN.worldNormal;
            // o.WorldPos = IN.worldPos;
            // Rim light
            fixed rim = dot(o.Normal, IN.viewDir);
            rim = (saturate(pow(1 - rim, _RimPower)));
            fixed3 finalRim = rim * _RimColor.rgb * _RimColor.a;
            o.Emission = finalRim;
            // Base Color
            fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        
        half4 LightingCel(SurfaceOutputCel s, half3 lightDir, half3 viewDir, half atten)
        {
            // ----------Stylized Highlights----------
            // https://github.com/candycat1992/NPR_Lab
            // ---------------------------------------
#ifdef _ENABLE_SPECULAR
            fixed3 worldNormal = normalize(s.Normal);
            fixed3 worldHalfDir = normalize(viewDir + lightDir);
            fixed spec = max(0, dot(worldNormal, worldHalfDir));
            spec = pow(spec, _SpecularPower);
            fixed w = fwidth(spec);
            if (spec < _SpecularSegment + w) {
                spec = lerp(0, _SpecularSegment, smoothstep(_SpecularSegment - w, _SpecularSegment + w, spec));
            } else {
                spec = _SpecularSegment;
            }
            half3 specular = spec * _SpecularColor.rgb * tex2D(_SpecularMask, s.UV);
#else
            fixed3 specular = 0;
#endif
            // ----------------------------------------
            // ----------Cel-Shading Lighting----------
            // ----------------------------------------
            half NdotL = dot(s.Normal, lightDir);
            half cel = lerp(fixed3(1,1,1), saturate(Greyscale(tex2D(_CelTex, s.UV) + _CelOffset)), dot(lightDir,s.Normal));
#ifdef _ENABLE_RAMP
            cel = tex1D(_RampTex, cel);
            half ramp = tex1D(_RampTex, saturate(atten * NdotL) * 0.5 + 0.5);
            half3 shadow = lerp(fixed3(1,1,1), Blend_Screen(fixed3(1,1,1) * saturate(ramp * cel), _ShadowColor.rgb), _ShadowColor.a);
#else
            half3 shadow = lerp(fixed3(1,1,1), Blend_Screen(fixed3(1,1,1) * saturate(round(NdotL * atten * cel)), _ShadowColor.rgb), _ShadowColor.a);
#endif
            half4 c;
            c.rgb = Blend_Screen(shadow * s.Albedo * _LightColor0, specular);
            c.a = s.Alpha;
            return c;
        }
        ENDCG
        // ----------Outline Pass----------
        // https://www.videopoetics.com/tutorials/pixel-perfect-outline-shaders-unity/#building-the-classic-outline-shader
        // https://assetstore.unity.com/packages/vfx/shaders/toony-colors-pro-2-8105
        // --------------------------------
        Pass {
            Cull Front
            Offset [_Offset1], 0 //[_Offset2]
            
            CGPROGRAM
            #include "UnityCG.cginc"
            #pragma multi_compile _OUTLINENORMALMODE_REGULAR _OUTLINENORMALMODE_VERTEXCOLOR _OUTLINENORMALMODE_TANGENT _OUTLINENORMALMODE_UV2
            #pragma shader_feature _OUTLINECONSTWIDTH
            #pragma shader_feature _OUTLINEZSMOOTH
            #pragma vertex Vertex
            #pragma fragment Fragment

            half _ZSmooth;
            half _OutlineWidth;
            half4 _OutlineColor;

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            }; 
            
            struct v2f
            {
                float4 pos : SV_POSITION;
            };

            v2f Vertex(a2v v)
            {
                v2f o;
                UNITY_SETUP_INSTANCE_ID(v);

                //Correct Z artefacts
                #ifdef _OUTLINEZSMOOTH
                    float4 pos = float4(UnityObjectToViewPos(v.vertex), 1.0);
                    
                    #ifdef _OUTLINENORMALMODE_VERTEXCOLOR
                        //Vertex Color for Normals
                        float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, (v.color.xyz*2) - 1);
                    #elif _OUTLINENORMALMODE_TANGENT
                        //Tangent for Normals
                        float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.tangent.xyz);
                    #elif _OUTLINENORMALMODE_UV2
                        //UV2 for Normals
                        float3 normal;
                        //unpack uv2
                        v.uv2.x = v.uv2.x * 255.0/16.0;
                        normal.x = floor(v.uv2.x) / 15.0;
                        normal.y = frac(v.uv2.x) * 16.0 / 15.0;
                        //get z
                        normal.z = v.uv2.y;
                        //transform
                        normal = mul( (float3x3)UNITY_MATRIX_IT_MV, normal*2-1);
                    #else
                        float3 normal = mul( (float3x3)UNITY_MATRIX_IT_MV, v.normal);
                    #endif
                    
                    normal.z = -_ZSmooth;
                    
                    #ifdef _OUTLINECONSTWIDTH
                        //Camera-independent outline size
                        float dist = distance(_WorldSpaceCameraPos, mul(unity_ObjectToWorld, v.vertex));
                        pos = pos + float4(normalize(normal),0) * _OutlineWidth * 0.01 * dist;
                    #else
                        pos = pos + float4(normalize(normal),0) * _OutlineWidth * 0.01;
                    #endif
                    
                #else

                    #ifdef _OUTLINENORMALMODE_VERTEXCOLOR
                        //Vertex Color for Normals
                        float3 normal = (v.color.xyz*2) - 1;
                    #elif _OUTLINENORMALMODE_TANGENT
                        //Tangent for Normals
                        float3 normal = v.tangent.xyz;
                    #elif _OUTLINENORMALMODE_UV2
                        //UV2 for Normals
                        float3 n;
                        //unpack uv2
                        v.uv2.x = v.uv2.x * 255.0/16.0;
                        n.x = floor(v.uv2.x) / 15.0;
                        n.y = frac(v.uv2.x) * 16.0 / 15.0;
                        //get z
                        n.z = v.uv2.y;
                        //transform
                        n = n*2 - 1;
                        float3 normal = n;
                    #else
                        float3 normal = v.normal;
                    #endif
                    
                    //Camera-independent outline size
                    #ifdef _OUTLINECONSTWIDTH
                        float dist = distance(_WorldSpaceCameraPos, mul(unity_ObjectToWorld, v.vertex));
                        float4 pos =  float4(UnityObjectToViewPos(v.vertex + float4(normal, 0) * _OutlineWidth * 0.01 * dist), 1.0);
                    #else
                        float4 pos = float4(UnityObjectToViewPos(v.vertex + float4(normal, 0) * _OutlineWidth * 0.01), 1.0);
                    #endif
                #endif
                o.pos = mul(UNITY_MATRIX_P, pos);
                return o;
            }
            
            float4 Fragment (v2f IN) : COLOR
            {
                return _OutlineColor;
            }
            ENDCG
        }
    }
}

结语

  之前第一次看《罪恶装备Xrd》艺术风格讲解的时候，有种惊为天人的感觉，就一直想着自己什么时候也可以试着搞一下这类Shader。其实NPR都是一些很老的技术，好几年前就可以做到了，只是它的难点从来就不是技术。
  PPT里有几个点我认为讲得非常好：

• 不只是一个Shader就完事，而是要构建整个工作流。（Not just a shader, but a whole workflow）
    他们的人物动画每一帧都是手K，而且不做补间，是为了追求“有限动画”的感觉。并且动画的每一帧都会对光照做针对性调整，还充斥着大量的形变缩放，以营造日式动画类似“金田系”作画的夸张透视效果。最后游戏能呈现出这样几乎没有破绽的2D效果，巨大的美术工作量的功不可没。试图用一个Shader就想让自己的游戏达到完美的风格化渲染效果，无疑是天真的。

• 让美术决定效果，而不是数学公式。（Let the artist decide, not the math）
    确实有时候就会碰到这种情况——这个公式看起来更正确一点，但是效果很微妙；那种算法看起来很莫名其妙，但是效果很棒。所以该用哪种？可能大部分时候我们只需要表象正确就可以了，毕竟做游戏就少不了Trick，没必要一味的追求“正确”吧。

  以上是一些个人的小小感想。希望本文对你有用，再见。