Unity_Shader高级篇_14.1_Unity Shader入门精要

14.2 素描风格的渲染
另一种非常流行的非真实感渲染时素描风格的渲染。微软研究院的Praun等人在2001年的SIGGRAPH上发表了一篇非常著名的论文（Rraun E，Hoppe H,Webb M, et al. Real-time hatching[C]//Proceedings of the 28th annual conference on Computer graphics and interactive techniques.ACM,2001:581）（http://alastaira.wordpress.com/2013/11/01/hand-drawn-shaders-and-craating-tonal-art-maps/）。这篇文章中，他们使用了提前生成的素面纹理来实现进行素描风格渲染，这些纹理组成了一个色调艺术映射（Tonal Art Map ，TAM），如图14.4所示。在14.4中，从左到右纹理中的笔触逐渐增多，用于模拟不同光照下的漫反射效果，从上到下则对应了每张纹理的多级渐远纹理（mipmaps）。这些多级渐远纹理的生成并不是简单的对上一层纹理进行降采样，而是需要保持笔触之间的间隔，以便更真事地模拟素描效果。

接下来我们来实现简化版的论文中提出的算法，我们不考虑多级渐远纹理的生成，而直接使用6张素描纹理进行渲染。在渲染阶段，我们首先在顶点着色器阶段计算逐顶点的光照，根据光照结果来决定6张纹理的混合权重，并传递给片元着色器。然后，在片元着色器中根据这些权重来混合6张纹理的采样结果。最终得到下图的效果：

实现
（1）新建场景（Scene_14_2）。
（2）新建材质（HatchingMat）。
（3）新建Unity Shader（Chapter14-Hatching）。并赋给第二步中创建的材质。
（4）在场景中拖拽一个模型，并把第二步中的材质赋给该模型。

///
///  Reference:     Praun E, Hoppe H, Webb M, et al. Real-time hatching[C]
///                     Proceedings of the 28th annual conference on Computer graphics and interactive techniques. ACM, 2001: 581.
///
Shader "Unity Shaders Book/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" {}
        _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 {
        //由于素描风格往往也需要在物体周围渲染轮廓线，因此我们直接使用14.1中国渲染轮廓线的Pass
        Tags { "RenderType"="Opaque" "Queue"="Geometry"}

        UsePass "Unity Shaders Book/Chapter 14/Toon Shading/OUTLINE"
        //Unity Shaders Book/Chapter 14/Toon Shading/OUTLINE对应了14.1中Chapter14-ToonShading文件里Shader的名字
        //而Unity内部会把Pass的名称全部转成大写格式，所以我们需要在UsePass中使用大写格式的Pass名称。
        Pass {
            Tags { "LightMode"="ForwardBase" }

            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;
            float _TileFactor;
            sampler2D _Hatch0;
            sampler2D _Hatch1;
            sampler2D _Hatch2;
            sampler2D _Hatch3;
            sampler2D _Hatch4;
            sampler2D _Hatch5;

            struct a2v {
                float4 vertex : POSITION;
                float4 tangent : TANGENT; 
                float3 normal : NORMAL; 
                float2 texcoord : TEXCOORD0; 
            };
            //由于我们需要在顶点着色器中计算6张纹理的混合权重，我们首先需要在v2f结构体中添加相应的变量：
            struct v2f {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                fixed3 hatchWeights0 : TEXCOORD1;
                fixed3 hatchWeights1 : TEXCOORD2;
                float3 worldPos : TEXCOORD3;
                SHADOW_COORDS(4)
            };
            //由于一共声明了6张纹理，这意味着需要6个混合权重，我们把他们存储在两个fixed3类型的
            //变量（hatchWeights0和hatchWeights1）中。为了添加阴影效果，我们还声明了worldPos变量，
            //并使用SHADOW_COORDS宏声明了阴影纹理的采样坐标。

            //接下来，我们定义关键的顶点着色器
            v2f vert(a2v v) {
                v2f o;

                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);

                o.uv = v.texcoord.xy * _TileFactor;

                fixed3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex));
                fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
                fixed diff = max(0, dot(worldLightDir, worldNormal));

                o.hatchWeights0 = fixed3(0, 0, 0);
                o.hatchWeights1 = fixed3(0, 0, 0);

                float hatchFactor = diff * 7.0;

                if (hatchFactor > 6.0) {
                    // Pure white, do nothing
                } 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(_Object2World, v.vertex).xyz;

                TRANSFER_SHADOW(o);

                return o; 
            }
            //我们首先对顶点进行了基本的坐标变换。然后，使用_TileFacotr得到了纹理采样坐标。在计算6
            //张纹理的混合权重之前，我们首先需要计算逐顶点光照。因此，我们使用世界空间下的光照方向
            //和法线方向得到漫反射系数diff。之后，我们把权重值初始化为0，并把diff缩放到，[0,7]范围
            //，得到hatchFactor。我们把[0，7]的区间均匀划分为7个子区间，通过该判断hatchFactor所处的子区间
            //来计算对应的纹理混合权重。最后，我们计算了顶点的世界坐标，并使用TRANSFER_SHADOW
            //宏来计算阴影纹理的采样坐标。

            //接下来，定义片元着色器部分：
            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);
            }
            //当得到了6张纹理的混合权重后，我们对每张纹理进行采样并和它们对应的权重值相乘德得到每张
            //纹理的采样颜色。我们还计算了纯白在渲染中的贡献度，这是通过从1中减去所有6张纹理的权重
            //来得到的。这是因为素描中往往有留白的部分，因此我们希望在最后的渲染只能光照最亮的部分是纯白色的。
            //最后，我们混合了各个颜色值，并和阴影值atten、模型颜色_Color相乘后返回
            //最终的渲染结果。
            ENDCG
        }
    }
    FallBack "Diffuse"
}

14.5 扩展阅读 以及 参考文献
[1]Gooch A,Gooch B,Shirley P,et al.A non-photorealistic lighting model for automatic technical illustration[C]//Proceedings of the 25th annual conference on Computer graphics and interactive techniques.ACM,1998:447-452。
[2]Anjyo K,Hiramitsu K.Stylized highlights for cartoon rendering and animation[J].Computer Graphics and Applications,IEEE,2003,23(4):54-61。
[3]Mitchell J,Francke M,Eng D.Illustrative rendering in Team Fortress 2[C]//Proceedings of the 5th international symposium on Non-photorealistic animation and rendering.ACM,2007:71-76。
[4]Rraun E，Hoppe H,Webb M, et al. Real-time hatching[C]//Proceedings of the 28th annual conference on Computer graphics and interactive techniques.ACM,2001:581。
[5]Geng W.The Algorithms and Principles of Non-photorealistic Graphics:Artistic Rendering and Cartoon Animation[M].Springer Science &Business Media,2011。