Unity Shader NPR 卡通渲染

卡通渲染的主要原理包含兩個方面：

1.輪廓線的描邊效果

2.模型漫反射離散和純色高光區域的模擬

 

描邊：

描邊的實現方法采用將模型的輪廓線頂點向法線（或頂點）的方向擴展一定的像素得到。也可通過邊緣檢測（基於法線和深度）來實現。

 

漫反射離散：

 利用離散的Ramp紋理對漫反射光照效果進行采樣，可以實現不同效果梯度的卡通渲染效果，例如：

 

注意此紋理的灰度變化並非均勻變化，而是類似於一種突變，僅在灰度變化的交界處進行了平滑過渡。這樣的Ramp紋理正是卡通渲染所需要的顏色過渡模式，也是卡通渲染實現的核心內容。

也可增加階度的個數實現更多層次的卡通渲染效果。

 

純色高光區域：

不同於真實渲染，卡通渲染的高光部分通常就是一個色塊，這里主要的問題是處理高光邊緣的鋸齒問題。

這里可以利用smoothstep(-w,w,spec-threshold);在邊緣范圍[-w,w]進行平滑插值處理，其中w可以通過fwidth(spec);得到。

fwidth(spec);用於得到鄰域像素的近似導數值。

 

Shader腳本如下，光照模型采用半蘭伯特：

Shader "MyUnlit/CartoonShading"
{
    Properties
    {
        _Color("Color Tint",Color)=(1,1,1,1)
        _MainTex ("Texture", 2D) = "white" {}
        _Ramp("Ramp Texture",2D)="white"{}
        _Outline("Outline",Range(0,0.1))=0.02
        _Factor("Factor of Outline",Range(0,1))=0.5
        _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" }
        //此Pass渲染描邊
        Pass
        {
            //命名用於之后可重復調用
            NAME "OUTLINE"
            //描邊只用渲染背面，擠出輪廓線，所以剔除正面
            Cull Front
            //開啟深度寫入，防止物體交疊處的描邊被后渲染的物體蓋住
            ZWrite On
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            float _Outline;
            float _Factor;
            fixed4 _OutlineColor;

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal:NORMAL;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                float3 pos=normalize(v.vertex.xyz);
                float3 normal=normalize(v.normal);

                //點積為了確定頂點對於幾何中心的指向，判斷此處的頂點是位於模型的凹處還是凸處
                float D=dot(pos,normal);
                //校正頂點的方向值，判斷是否為輪廓線
                pos*=sign(D);
                //描邊的朝向插值，偏向於法線方向還是頂點方向
                pos=lerp(normal,pos,_Factor);
                //將頂點向指定的方向擠出
                v.vertex.xyz+=pos*_Outline;
                o.vertex=UnityObjectToClipPos(v.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return fixed4(_OutlineColor.rgb,1);
            }
            ENDCG
        }
        //此Pass渲染卡通着色效果，主要運用半蘭伯特光照模型配合漸變紋理
        Pass
        {
            Tags{"LightMode"="ForwardBase"}
            Cull Back
            CGPROGRAM
            
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase

            #include "UnityCG.cginc"
            //引入陰影相關的宏
            #include "AutoLight.cginc"
            //引入預設的光照變量，如_LightColor0
            #include "Lighting.cginc"

            fixed4 _Color;
            sampler2D _MainTex;
            sampler2D _Ramp;
            fixed4 _Specular;
            fixed _SpecularScale;
            float4 _MainTex_ST;

            struct appdata
            {
                float4 vertex:POSITION;
                float2 uv:TEXCOORD0;
                float3 normal:NORMAL;
                float4 tangent:TANGENT;
            };

            struct v2f
            {
                float4 pos:SV_POSITION;
                float2 uv:TEXCOORD0;
                float3 worldNormal:TEXCOORD1;
                float3 worldPos:TEXCOORD2;
                SHADOW_COORDS(3)
            };

            v2f vert(appdata v)
            {
                v2f o;
                o.pos=UnityObjectToClipPos(v.vertex);
                o.uv=TRANSFORM_TEX(v.uv,_MainTex);
                o.worldNormal=mul(v.normal,(float3x3)unity_WorldToObject);
                o.worldPos=mul(unity_ObjectToWorld,v.vertex);
                TRANSFER_SHADOW(o);

                return o;
            }

            fixed4 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);

                //計算半蘭伯特漫反射系數，亮化處理，將結果從[-1,1]映射到[0,1]，以便作為漸變紋理的采樣uv
                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)*3.0;

                //計算高光，在[-w,w]范圍內平滑插值
                fixed3 specular=_Specular.rgb*smoothstep(-w,w,spec-(1-_SpecularScale))*step(0.0001,_SpecularScale);

                return fixed4(ambient+diffuse+specular,1.0);
            }
            ENDCG    
        }
    }
    FallBack "Diffuse" 
}

效果如下：