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中國渲染輪廓線的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,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。

總結

以上是生活随笔為你收集整理的Unity_Shader高级篇_14.1_Unity Shader入门精要的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。