Unity Shader学习笔记（27）渲染轮廓线（描边）方法、卡通风格渲染、素描风格渲染

五种方法： 
- 基于观察角度和表面法线。即视角方向和表面法线点乘结果判断（接近0，表示面接近垂直与视角）。 
- 过程式几何。两个Pass：第一个Pass渲染背面并且让轮廓可见（顶点外扩）；第二个Pass正常渲染正面。适应于大多数表面平滑的模型，不适合立方体等平整模型。 
- 基于图像处理。前面两种边缘检测就是了：直接用算子判断和使用深度和法线纹理。但如果一些深度和法线变化很小的无法检测出来，如桌子上一张纸。 
- 基于轮廓边。检测方法：相邻两个三角是否一个面向视角，另一个背向视角，就是边。即 (n₀·v > 0) ≠ (n₁·v > 0)。 缺点是轮廓是逐帧单独提取的，帧与帧之间会出现跳跃性。 
- 混合上述方法。首先找到轮廓线（方法4），把模型和轮廓边渲染到纹理中，再使用图像处理识别轮廓线（方法3），在图像空间进行风格化渲染。

使用描边方法2，以及卡通风格的高光反射光照模型实现。 
描边注意：在背面顶点扩展时，可能有正面的面，这时会出错。可想象一个半实心球，内部有个面向视角的面，顶点外扩时，内部的面会超出外表面，遮挡了外表面。解决办法是先让背面法线z值减0.5再归一化（背面压扁）。 
高光实现：镜面反射使用Blinn模型，计算(n·h)时，做阈值比较，小于的就是高光部分。 

Shader "Custom/Chapter 14/Toon Shading" ｛
    Properties ｛
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _MainTex ("Main Tex", 2D) = "white" ｛｝
        _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，延展背面顶点，实现描边。
        Pass ｛
            NAME "OUTLINE"
            Cull Front      // 剔除正面，只渲染正面
            ...
            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;
            ｝
            ...
        ｝
        // 第二个Pass，基于Blinn光照模型，使用自定义高光光照模型，实现高光。
        Pass ｛
            Tags ｛ "LightMode"="ForwardBase" ｝
            Cull Back
            ...
            float4 frag(v2f i) : SV_Target ｛ 
                ...
                fixed spec = dot(worldNormal, worldHalfDir);
                // 高光区域抗锯齿操作，fwidth：邻域像素的近似导数。
                fixed w = fwidth(spec) * 2.0;       
                // _SpecularScale为0会完全消除高光反射，smoothstep：小于-w为0，大于w为1，否则在0到1之间插值。
                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
        ｝
    ｝
    FallBack "Diffuse"
｝

通过判断不同光照下漫反射值，使用不同的渲染纹理。纹理组成一个色调艺术映射（Tonal Art Map, TAM）。 

// 素描风格
Shader "Custom/Chapter 14/Hatching" ｛
    Properties ｛
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _TileFactor ("Tile Factor", Float) = 1  // 平铺系数
        _Outline ("Outline", Range(0, 1)) = 0.1
        _Hatch0 ("Hatch 0", 2D) = "white" ｛｝    // 6张素描纹理，模拟不同阴影使用的纹理
        _Hatch1 ("Hatch 1", 2D) = "white" ｛｝
        _Hatch2 ("Hatch 2", 2D) = "white" ｛｝
        _Hatch3 ("Hatch 3", 2D) = "white" ｛｝
        _Hatch4 ("Hatch 4", 2D) = "white" ｛｝
        _Hatch5 ("Hatch 5", 2D) = "white" ｛｝
    ｝
    SubShader ｛
        Tags ｛ "RenderType"="Opaque" "Queue"="Geometry"｝
        UsePass "Custom/Chapter 14/Toon Shading/OUTLINE"    // 使用前面的描边渲染Pass
        Pass ｛
            ...
            struct v2f ｛
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                fixed3 hatchWeights0 : TEXCOORD1;   // 6张纹理存在两个fixed3中
                fixed3 hatchWeights1 : TEXCOORD2;
                float3 worldPos : TEXCOORD3;
                SHADOW_COORDS(4)
            ｝;
            v2f vert(a2v v) ｛
                ...
                o.hatchWeights0 = fixed3(0, 0, 0);
                o.hatchWeights1 = fixed3(0, 0, 0);
                float hatchFactor = diff * 7.0; // 放大7倍，便于分成7块，混合权重。
                if (hatchFactor > 6.0) ｛
                    // 纯白
                ｝ else if (hatchFactor > 5.0) ｛
                    o.hatchWeights0.x = hatchFactor - 5.0;
                ｝ else if (hatchFactor > 4.0) ｛
                    o.hatchWeights0.x = hatchFactor - 4.0;
                    o.hatchWeights0.y = 1.0 - o.hatchWeights0.x;
                ｝ else if (hatchFactor > 3.0) ｛
                    o.hatchWeights0.y = hatchFactor - 3.0;
                    o.hatchWeights0.z = 1.0 - o.hatchWeights0.y;
                ｝ else if (hatchFactor > 2.0) ｛
                    o.hatchWeights0.z = hatchFactor - 2.0;
                    o.hatchWeights1.x = 1.0 - o.hatchWeights0.z;
                ｝ else if (hatchFactor > 1.0) ｛
                    o.hatchWeights1.x = hatchFactor - 1.0;
                    o.hatchWeights1.y = 1.0 - o.hatchWeights1.x;
                ｝ else ｛
                    o.hatchWeights1.y = hatchFactor;
                    o.hatchWeights1.z = 1.0 - o.hatchWeights1.y;
                ｝
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                TRANSFER_SHADOW(o);
                return o; 
            ｝
            fixed4 frag(v2f i) : SV_Target ｛            
                fixed4 hatchTex0 = tex2D(_Hatch0, i.uv) * i.hatchWeights0.x;
                fixed4 hatchTex1 = tex2D(_Hatch1, i.uv) * i.hatchWeights0.y;
                fixed4 hatchTex2 = tex2D(_Hatch2, i.uv) * i.hatchWeights0.z;
                fixed4 hatchTex3 = tex2D(_Hatch3, i.uv) * i.hatchWeights1.x;
                fixed4 hatchTex4 = tex2D(_Hatch4, i.uv) * i.hatchWeights1.y;
                fixed4 hatchTex5 = tex2D(_Hatch5, i.uv) * i.hatchWeights1.z;
                // 全白和最浅的纹理混合。
                fixed4 whiteColor = fixed4(1, 1, 1, 1) * (1 - i.hatchWeights0.x - i.hatchWeights0.y - i.hatchWeights0.z - 
                            i.hatchWeights1.x - i.hatchWeights1.y - i.hatchWeights1.z);
                fixed4 hatchColor = hatchTex0 + hatchTex1 + hatchTex2 + hatchTex3 + hatchTex4 + hatchTex5 + whiteColor;
                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
                return fixed4(hatchColor.rgb * _Color.rgb * atten, 1.0);
            ｝
            ENDCG
        ｝
    ｝
    FallBack "Diffuse"
｝