卡通渲染中的描边
在渲染物体时一个常见的需求就是给物体添加一个描边,实现描边的方式有很多,今天介绍一种简单的。
原理
- 对一个物体渲染两遍第一次让顶点对外做一个偏移(沿着法线)。渲染颜色为描边的颜色
- 正常渲染一个物体,因为第一次有偏移,这次渲染的时候遮不住的地方就是描边了
- 如图A是需要渲染的物体,B是第一次渲染,C是第二次渲染,这就出现了一个描边效果
关键代码
//渲染背面的pass 使得顶点沿着向法线移动一些
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
float3 normal = UnityObjectToWorldNormal(v.normal);
normal = mul(UNITY_MATRIX_VP,normal);
o.vertex.xyz += normal* _OutLineWidth;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
return _OutLineColor;
}
- 这里使用了unity里面的内置函数这些函数在UnityCG.cginc里面 官网内置函数链接
- UnityObjectToClipPos 把顶点坐标转到投影坐标
- UnityObjectToWorldNormal 把法线转到世界坐标,这里不能直接使用物体到世界坐标的矩阵 关于这个这里有一个好的介绍链接
- _OutLineWidth 控制轮廓大小的变量
效果图
完整代码
Shader "Unlit/OutLine"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_OutLineWidth("OutLineWidth",Range(0,1)) = 0
_OutLineColor("OutLineColor",Color) = (1,1,1,1)
}
SubShader
{
Tags { "RenderType"="Opaque" }
LOD 100
Pass
{
Cull Front
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
float _OutLineWidth;
float4 _OutLineColor;
struct appdata
{
float4 vertex : POSITION;
float4 normal:normal;
};
struct v2f
{
float4 vertex : SV_POSITION;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
float3 normal = UnityObjectToWorldNormal(v.normal);
normal = mul(UNITY_MATRIX_VP,normal);
o.vertex.xyz += normal* _OutLineWidth;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
return _OutLineColor;
}
ENDCG
}
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
return col;
}
ENDCG
}
}
}