Unity Shader入门精要-章节14 非真实感渲染

kio0o0 发布于

最后更新于

求知若饥，虚心若愚

尽管游戏渲染一般都是以照相写实主义(photorealism) 作为主要目标，但也有许多游戏使用了非真实感渲染(Non-Photorealistic Rendering, NPR) 的方法来渲染游戏画面。非真实感渲染的一个主要目标是，使用一些渲染方法使得画面达到和某些特殊的绘画风格相似的效果，例如卡通、水彩风格等。

卡通风格的渲染

使用这种风格的游戏画面通常有一些共有的特点，例如物体被黑色的线条描边，分明的明暗变化等。

实现卡通渲染的方法之一是基于色调的着色技术（tone-based shading）

  1. 使用漫反射系数对一维纹理采样，来控制漫反射的色调
  2. 高光往往是一块块分界明显的纯色区域
  3. 通常要在物体边缘部分绘制轮廓（这里使用基于模型的描边而不是后处理，这种更加简单，效果还不错）

游戏《大神》（英文名：Okami）的游戏截图

渲染轮廓线

近20年，有许多绘制模型轮廓线的方法被先后提出来，在《Real Time Rendering, third edition》一书中，作者把这些方法分成了5种类型：

  • 基于观察角度和表面法线的轮廓线渲染，使用视角方向和表面法线的点乘结果来得到轮廓线的信息。简单快速，效果不好，只需要一个Pass。
  • 过程式几何轮廓线渲染：使用两个Pass渲染，先渲染背面的面片使轮廓可见，再正常渲染正面的面片。快速有效，适合绝大多数表面光滑的模型，不适合类似立方体这样平整的模型
  • 基于图像处理的轮廓线渲染：12、13章介绍的边缘检测方法。适用于任何种类的模型，但一些深度和法线变化很小的无法检测，如桌子上的纸张
  • 基于轮廓边检测的轮廓线渲染：前面的方法无法控制轮廓线的渲染风格，这种可以检测出精准的轮廓边，然后直接渲染它们。判断相邻两个三角面片，是否一个朝正面一个朝背面，判断是否满足(n0·v>0)≠(n1·v>0)，通过几何着色器帮助下完成。缺点是实现相对复杂，而且还有动画连贯性问题，因为是逐帧单独提取，所以帧与帧之间会出现跳跃
  • 混合上述几种渲染方法：例如先找到精确的轮廓边，把模型和轮廓边渲染到纹理中，再用图像处理的方法识别出轮廓线，并在图像空间下进行风格化渲染

这里使用过程式几何轮廓线渲染的方法。在第一个Pass中，使用轮廓线颜色渲染整个背面面片，在视角空间下把模型顶点沿着法线方向向外扩展一段距离，让背部轮廓线可见：

1
viewPos = viewPos + viewNormal * _Outline;

为了防止内凹模型发生背面面片遮挡正面的情况，扩张之前要对顶点法线的z分量进行处理使它们等于定值，然后法线归一化再扩张顶点。这样的好处是扩张后的背面更加扁平化，降低了遮挡正面的可能性：

1
2
3
viewNormal.z = -0.5;
viewNormal = normalize(viewNormal);
viewPos = viewPos + viewNormal * _Outline;
添加高光

卡通高光反射光照模型和Blinn-Phong模型类似，同样要计算normal和halfDir的点乘结果，然后和一个阈值进行比较。使用step函数进行比较，第一个参数是参考值，第二个是带比较的数值，如果后者大于前者，就返回1，否则0：

1
2
float spec = dot(worldNormal, worldHalfDir);
spec = step(threshold, spec);

但这种方法会在边界造成锯齿，这是因为高光区域的边缘不是平滑渐变的，而是0突变到1。所以需要进行抗锯齿处理，可以在边界处很小的一块区域进行平滑处理。使用了CG的smoothstep函数，w是一个很小的值，当spec-threshold小于-w时返回0，大于w时返回1，否则在0到1之间进行差值。w的值可以通过CG的fwidth函数得到领域像素之间的近似导数值：

1
2
float spec = dot(worldNormal, worldHalfDir);
spec = lerp(0, 1, smoothstep(-w, w, spec - threshold));

左图：未对高光区域进行抗锯齿处理。右图：使用fwidth函数对高光区域进行抗锯齿处理

实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
Shader "Unity Shaders Learn/Chapter14/Toon Shading"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1,1,1,1)
        _MainTex ("Main Tex", 2D) = "white" {}
        _Ramp ("Ramp Tex", 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
    {
        CGINCLUDE
        fixed4 _Color;
        sampler2D _MainTex;
        float4 _MainTex_ST;
        sampler2D _Ramp;
        fixed _Outline;
        fixed4 _OutlineColor;
        fixed4 _Specular;
        fixed _SpecularScale;

        #include "Lighting.cginc"
        #include "AutoLight.cginc"
        #include "UnityCG.cginc"
        ENDCG
        //画轮廓线
        Pass 
        {
            NAME "OUTLINE"
            Cull Front
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

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

            struct v2f
            {
                float4 pos : SV_POSITION;
            };

            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;
            }

            float4 frag(v2f i) : SV_Target
            {
                return float4(_OutlineColor.rgb, 1.0f);
            }
            ENDCG
        }
        
        //渲染卡通光照
        Pass
        {
            Tags {"LightMode" = "ForwardBase"}
            Cull Back
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #pragma multi_compile_fwdbase

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 texcoord : TEXCOORD0;
            };

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

            v2f vert(a2v v)
            {
                v2f o;

                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                TRANSFER_SHADOW(o);
                
                return o;
            }

            float4 frag(v2f i) : SV_Target
            {
                fixed3 worldNormal = normalize(i.worldNormal);
                fixed3 worldLightDir = UnityWorldSpaceLightDir(i.worldPos);
                fixed3 worldViewDir = 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);

                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) * 2.0;
                // 将高光系数和阈值比较，在[-w,w]区间内得到一个平滑[0,1]变化的spec值
                // step(0.0001, _SpecularScale)是为了_SpecularScale为0时可以完全消除高光
                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"
}

卡通风格的渲染效果

素描风格的渲染

微软研究院的Praun等人在2001年的SIGGRAPH上发表了论文，使用提前生成的素描纹理来实现实时的素描风格渲染，这些纹理组成了一个色调艺术映射（Tonal Art Map, TAM） ，如下图从左到右笔触逐渐增多，用于模拟不同光照下的漫反射效果。下图从上到下对应每张纹理的多级渐远纹理（mipmaps），这些多级渐远纹理的生成并不是简单的对上一层纹理进行降采样，而是需要保持笔触之间的间隔，以便更真实的模拟素描效果：

一个TAM的例子（来源：Praun E, et al. Real-time hatching4）

这里使用简化版，不考虑mipmaps的生成，直接使用6张素描纹理进行渲染。在顶点着色器计算逐顶点的光照，根据光照结果决定6张纹理的混合权重，并传给片元着色器。在片元着色器中根据这些权重来混合6张纹理的采样结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
Shader "Unity Shaders Learn/Chapter14/Hatching"
{
    Properties
    {
        _Color ("Color Tint", Color) = (1,1,1,1)
        _Outline ("Outline", Range(0, 1)) = 0.1
        _TileFactor ("Tile Factor", Float) = 1  //纹理的平铺系数，_TileFactor越大，模型上的素描线条越密
        _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 "Unity Shaders Learn/Chapter14/Toon Shading/OUTLINE"
        
        Pass
        {
            Tags {"LightMode"="ForwardBase"}
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            fixed4 _Color;
            fixed _Outline;
            float _TileFactor;
            sampler2D _Hatch0;
            sampler2D _Hatch1;
            sampler2D _Hatch2;
            sampler2D _Hatch3;
            sampler2D _Hatch4;
            sampler2D _Hatch5;

            #include "UnityCG.cginc"
            #include "AutoLight.cginc"

            #pragma multi_compile_fwdbase

            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                fixed3 hatchWeights0 : TEXCOORD1;
                fixed3 hatchWeights1 : TEXCOORD2;
                float3 worldPos : TEXCOORD3;
                SHADOW_COORDS(4)
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord.xy * _TileFactor;

                // 根据漫反射系数来决定素描纹理权重
                fixed3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex));
                fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
                fixed diff = saturate(dot(worldLightDir, worldNormal));

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

                // 将hatchFactor划分为7个子区间（六张纹理和纯白色），判断hatchFactor所处子区间来计算对应的纹理混合权重
                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 - o.hatchWeights0.x;
                }else if (hatchFactor > 3.0)
                {
                    o.hatchWeights0.y = hatchFactor - 3.0;
                    o.hatchWeights0.z = 1 - o.hatchWeights0.y;
                }
                else if (hatchFactor > 2.0)
                {
                    o.hatchWeights0.z = hatchFactor - 2.0;
                    o.hatchWeights1.x = 1 - o.hatchWeights0.z;
                }else if (hatchFactor > 1.0)
                {
                    o.hatchWeights1.x = hatchFactor - 1.0;
                    o.hatchWeights1.y = 1 - o.hatchWeights1.x;
                }
                else
                {
                    o.hatchWeights1.y = hatchFactor;
                    o.hatchWeights1.z = 1 - 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"
}

素描风格的渲染效果

扩展阅读

  1. 国际讨论会NPAR(Non-Photorealistic Animation and Rendering)上有许多关于非真实感渲染的论文
  2. 浙江大学耿卫东《艺术化绘制的图形学原理与方法》（英文名：The Algorithms and Principles of Non-photorealistic Graphics）
  3. Unity资源商店一个免费的卡通资源包，实现了包括轮廓线渲染等卡通风格的渲染，ToonShaderFree：https://assetstore.unity.com/packages/vfx/shaders/toon-shader-free-21288
  4. Unity资源商店一个收费的卡通资源包，包含了更多的卡通风格UnityShader，ToonStylesShaderPack
  5. 收费资源包，铅笔渲染、蜡笔渲染等多种手绘风格的NPR效果，HandDrawnShaderPack：https://assetstore.unity.com/packages/vfx/shaders/hand-drawn-shader-pack-12465
kio0o0

kio0o0

如果可以做到不懂就问，做不到的事情就拒绝，或许可以活得更轻松点

101
6
26
NOTICE

正在努力学习图形学中！

CATEGORYS
TAGS
AMD OS X C#笔记 Github技巧 Hackintosh Lua笔记 Unity Unity Shader入门精要 c++笔记 cocos c语言笔记 drcom shader 代码设计 卡通渲染 图形学 学习 平板 性能优化 搞机 数据结构 游戏开发 百人计划 解题 计划 路由器 重构