【NPR】漫谈轮廓线的渲染

写在前面

好久没写文章。最近在看《Real Time Rendering, third edition》这本书，看到了NPR这一章就想顺便记录下一些常见的轮廓线渲染的方法。

在非真实感渲染中，对轮廓线的渲染是一个应用非常广泛的手法。根据《Real Time Rendering, third edition》一书的总结，在这篇文章里介绍几种常见的渲染方法。当然，这里只是抛砖引玉，如果要用于实际项目中可能会根据需要进行完善。一些很好的效果可能需要去参考一些论文，这里不涉及那么深。

测试场景如下：

其中，左右两边的模型是low polygon类型的模型，即表面比较平坦；中间膜型表面变化平缓。

Surface Angle Silhouette

方法

基本思想是，利用viewpoint的方向和surface normal的点乘结果得到轮廓线信息。这个值越接近0，说明离轮廓线越近。

在之前的卡通风格的Shader（一）中，描边技术就是使用了这种方法。

这个技术相当于使用一个Spherical environment map（EM）来对整个surface进行渲染。如下图所示（来源：《Real-time Rendering, third edition》）：

在实际应用中，我们通常使用一张一维纹理来模拟，即使用视角方向和顶点法向的点乘对该纹理进行采样。

实践

下面代码使用了两种方法来实现这种技术。一种方式是和卡通风格的Shader（一）中的方法一样，即使用一个参数_Outline来控制轮廓线宽度；另一种方式是使用了一张一维纹理来控制。

Shader "Silhouette/Surface Angle Sihouetting" {Properties {_MainTex ("Base (RGB)", 2D) = "white" {}_Outline ("Outline", Range(0,1)) = 0.4_SilhouetteTex ("Silhouette Texture", 2D) = "white" {}}SubShader {Pass {Tags { "RenderType"="Opaque" }LOD 200CGPROGRAM#include "UnityCG.cginc"#include "Lighting.cginc"  #include "AutoLight.cginc" #pragma vertex vert#pragma fragment fragsampler2D _MainTex;float _Outline; sampler2D _SilhouetteTex;struct v2f {float4 pos : SV_POSITION;   float2 uv : TEXCOORD0;float3 worldNormal : TEXCOORD1;float3 worldLightDir: TEXCOORD2;float3 worldViewDir: TEXCOORD3;};v2f vert(appdata_full i) {v2f o;o.pos= mul(UNITY_MATRIX_MVP, i.vertex);o.uv = i.texcoord;o.worldNormal = mul(i.normal, (float3x3)_World2Object);o.worldLightDir = mul((float3x3)_Object2World, ObjSpaceLightDir(i.vertex));o.worldViewDir = mul((float3x3)_Object2World, ObjSpaceViewDir(i.vertex));TRANSFER_VERTEX_TO_FRAGMENT(o); return o;}fixed3 GetSilhouetteUseConstant(fixed3 normal, fixed3 vierDir) {fixed edge = saturate(dot (normal, vierDir));   edge = edge < _Outline ? edge/4 : 1;return fixed3(edge, edge, edge);}fixed3 GetSilhouetteUseTexture(fixed3 normal, fixed3 vierDir) {fixed edge = dot(normal, vierDir);edge = edge * 0.5 + 0.5;return tex2D(_SilhouetteTex, fixed2(edge, edge)).rgb;}fixed4 frag(v2f i) : COLOR {fixed3 worldNormal = normalize(i.worldNormal);fixed3 worldLigthDir = normalize(i.worldLightDir);fixed3 worldViewDir = normalize(i.worldViewDir);fixed3 col = tex2D(_MainTex, i