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）（//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中国渲染轮廓线的PassTags { "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,,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,: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,。
