[UnityShader入门精要读书笔记]34.卡通风格渲染

       卡通风格是游戏中常见的的一种渲染风格。使用这种风格的游戏画面通常有一些共有的特点，例如物体都被黑色的线条描边，已经分明的明暗变化等。

       要实现卡通渲染的方法有很多，其中之一就是使用基于色调的着色技术。在实现中，我们往往会使用漫反射系数对一张一堆纹理进行采样，以控制漫反射的色调。

      在实时渲染中，轮廓线的渲染是应用非常广泛的一种效果。近20年来，有许多绘制模型轮廓线的方法被先后提出来。

• 基于观察角度和表面发现的轮廓线渲染。这种方法使用视角方向和表面发现的点成挤过来得到罗廓线的信息。这种方法简单快速，可以在一个Pass中就得到渲染结果，但局限性很大，效果一般。
• 过程式几何轮廓渲染。这种方法的核心是使用两个Pass渲染。第一个Pass渲染背面的面片，并使用某些技术让它的轮廓可见；第二个Pass再正常渲染正面的面片。这种方法的有点在于快速有效，并且适用于绝大多数表面平滑的模型，但它的缺点是不适合类似于立方体这样平整的模型。
• 基于图像处理的轮廓线渲染。这种方法的优点在于，可以适用于任何种类的模型。但它也有自身的局限所在，一些深度和法线变化很小的轮廓无法被检测出来。
• 基于轮廓边检测的轮廓线渲染。我们希望可以检测出精确的轮廓边，然后直接渲染它们。检测一条边是否是轮廓边的公式很简单，我们只需要检查和这条边相邻的两个三角面片是否满足以下条件：
• 最后一个种类就是混合上述的几种渲染方法。

添加高光：

        卡通风格中的高光往往是模型上一块块分界明显的纯色区域。为了实现这种效果，我们就不能再使用之前学习的光照模型。回顾一下，在之前实现Blinn-Phong模型的过程中，我们使用发现点乘光照方向以及视角方向和的一半，再合另一个参数进行指数操作得到高光反射系数。代码如下：

 float spec = pow(max(0,dot(normal,halfDir)),_Gloss)

        对于卡通渲染需要的高光反射光照模型，我们同样需要计算normal和halfDir的点乘结果，但不同的是，我们把该值和一个阈值进行比较，如果小于该阈值，则高光反射系数为0，否则返回1。

float spec = dot(worldNormal, worldHalfDir);

spec = step(threshold, spec);

       使用CG的step函数来实现和阈值比较的目的。step函数接受两个参数，第一个参数是参考值，第二个参数是到比较的数值。如果第二个参数大于等于第一个参数，则返回1，否则返回0。

       但是，粗暴的判断方法会在高光区域的边界造成锯齿，原因是，高光区域的边缘不是平滑渐变的，而是由0突变到1的。要想对其进行抗锯齿处理，我们可以在边界处很小的一块区域内，进行平滑处理。代码如下：

      float spec = dot(worldNormal, worldHalfDir);

      spec = lerp(0, 1, smoothstep(-w, w, spec - threshold));

      在这里，没有像之前一样直接使用step函数返回0或1，而是首先使用了CG的smoothstep函数。其中，w事一个很小的值，当sepc-threshold小于-w时，返回0，大于w时，返回1，否则在0到1之间进行插值。这样的效果是，我们可以在[-w,w]区间内，即高光区域的边界处，得到一个从0到1平滑变化的spec值，从而实现抗锯齿的目的。尽管我们可以把w设为一个很小的定值，但在本例中，我们选择使用邻域像素之间的近似导数值，这可以通过CG的fwidth函数来得到。

Shader代码：

// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

 

Shader "Unlit/ToonShadingMat"

{

    Properties

    {

        _MainTex ("Texture", 2D) = "white" {}

        _Color ("Color Tint", Color) = (1, 1, 1, 1)

        //控制漫反射色调的渐变纹理

        _Ramp ("Ramp Texture", 2D) = "white" {}

        //控制轮廓线宽度

        _Outline ("Outline", Range(0, 1)) = 0.1

        //轮廓线颜色

        _OutlineColor ("Outline Color", Color) = (0, 0, 0, 1)

        //高光反射颜色

        _Specular ("Specular", Color) = (1, 1, 1, 1)

        //控制计算高光反射时使用的阈值。

        _SpecularScale ("Specular Scale", Range(0, 0.1)) = 0.01

    }

    

 

    SubShader {

        Tags { "RenderType"="Opaque" "Queue"="Geometry"}

        

        Pass {

            NAME "OUTLINE"

            //使用Cull指令把正面的三角面片剔除，而只渲染背面

            Cull Front

            

            CGPROGRAM

            

            #pragma vertex vert

            #pragma fragment frag

            

            #include "UnityCG.cginc"

            

            float _Outline;

            fixed4 _OutlineColor;

            

            struct a2v {

                float4 vertex : POSITION;

                float3 normal : NORMAL;

            }; 

            

            struct v2f {

                float4 pos : SV_POSITION;

            };

            //在顶点着色器中，我们首先把顶点和法线变换到视角空间下，这是为了让描边可以在观察空间达到最好的效果。随后，我们设置法线的z分量，对其归一化后再将顶点沿其方向扩张，得到扩张后的顶点坐标。对法线的处理是为了尽可能避免背面扩张后的顶点挡住正面的面片。最后，我们把顶点从视角空间变换到裁剪空间。

            v2f vert (a2v v) {

                v2f o;

                

                float4 pos = mul(UNITY_MATRIX_MV, v.vertex); 

                float3 normal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);  

                normal.z = -0.5;

                pos = pos + float4(normalize(normal), 0) * _Outline;

                o.pos = mul(UNITY_MATRIX_P, pos);

                

                return o;

            }

            //使用轮廓线颜色渲染整个背面即可。

            float4 frag(v2f i) : SV_Target { 

                return float4(_OutlineColor.rgb, 1);               

            }

            

            ENDCG

        }

        //我们需要自定义光照模型所在的Pass，以渲染模型的正面。由于光照模型需要使用Unity提供的光照等信息，我们需要为Pass进行相应的设置。

        Pass {

            Tags { "LightMode"="ForwardBase" }

            

            Cull Back

        

            CGPROGRAM

        

            #pragma vertex vert

            #pragma fragment frag

            

            #pragma multi_compile_fwdbase

        

            #include "UnityCG.cginc"

            #include "Lighting.cginc"

            #include "AutoLight.cginc"

            #include "UnityShaderVariables.cginc"

            

            fixed4 _Color;

            sampler2D _MainTex;

            float4 _MainTex_ST;

            sampler2D _Ramp;

            fixed4 _Specular;

            fixed _SpecularScale;

        

            struct a2v {

                float4 vertex : POSITION;

                float3 normal : NORMAL;

                float4 texcoord : TEXCOORD0;

                float4 tangent : TANGENT;

            }; 

        

            struct v2f {

                float4 pos : POSITION;

                float2 uv : TEXCOORD0;

                float3 worldNormal : TEXCOORD1;

                float3 worldPos : TEXCOORD2;

                SHADOW_COORDS(3)

            };

            //计算世界空间下的法线方向和顶点位置，并使用Unity提供的内置宏SHADOW_COORDS和TRANSFER_SHADOW来计算阴影所需的各个变量。

            v2f vert (a2v v) {

                v2f o;

                

                o.pos = UnityObjectToClipPos( v.vertex);

                o.uv = TRANSFORM_TEX (v.texcoord, _MainTex);

                o.worldNormal  = UnityObjectToWorldNormal(v.normal);

                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;

                

                TRANSFER_SHADOW(o);

                

                return o;

            }

            //在片元着色器中，首先，我们计算了光照模型中需要的各个方向矢量，并对他们进行了归一化处理，然后，我计算了材质的反射率albedo和环境光照ambient。接着，我们使用内置的UNITY_LIGHT_ATTENUATION宏来计算当前世界坐标下的阴影值。随后，计算了半兰伯特漫反射系数，并和阴影值相乘得到最终的漫反射系数。我们使用这个漫反射系数对渐变纹理_Ramp进行采样，并将结果和材质的反射率、光照颜色相乘，作为最后的漫反射光照。高光反射部分，使用了fwidth对高光区域的边界进行抗锯齿处理，并将计算而得的高光反射系数和高光反射颜色相乘，得到高光反射的光照部分。值得注意的是，最后使用了step(0.0001，_SpecularSacle)，这是为了在_SpecularSacle为0时，可以完全消除高光反射的光照。最后，返回环境光照、漫反射和高光反射光照叠加的结果。

            float4 frag(v2f i) : SV_Target { 

                fixed3 worldNormal = normalize(i.worldNormal);

                fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));

                fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));

                fixed3 worldHalfDir = normalize(worldLightDir + worldViewDir);

                

                fixed4 c = tex2D (_MainTex, i.uv);

                fixed3 albedo = c.rgb * _Color.rgb;

                

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;

                

                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

                

                fixed diff =  dot(worldNormal, worldLightDir);

                diff = (diff * 0.5 + 0.5) * atten;

                

                fixed3 diffuse = _LightColor0.rgb * albedo * tex2D(_Ramp, float2(diff, diff)).rgb;

                

                fixed spec = dot(worldNormal, worldHalfDir);

                fixed w = fwidth(spec) * 2.0;

                fixed3 specular = _Specular.rgb * lerp(0, 1, smoothstep(-w, w, spec + _SpecularScale - 1)) * step(0.0001, _SpecularScale);

                

                return fixed4(ambient + diffuse + specular, 1.0);

            }

        

            ENDCG

        }

    }

}