Unity中的一种描边方式
今天在尝试写保护罩的Shader的过程中，发现一种比较不错的给方形盒子描边的方式，常见的描边方法是通过发现外拓的方式做，但是还是有一些不足，再给一个简单的Cube做描边的时候，就会出现边角出断开连接的情况，代码和效果如下所示：
发现外拓实现的描边的效果图以及代码
效果图
ShaderLab代码
Shader "Unlit/s_test0"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {
}
_OutlineWidth ("Outline Width", Range(0.01, 1)) = 0.01
_OutLineColor ("OutLine Color", Color) = (0.5,0.5,0.5,1)
}
SubShader
{
Tags {
"RenderType"="Opaque" }
LOD 500
Pass// 第一个pass正常绘制
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
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);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
// apply fog
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}
ENDCG
}
Pass // 第二个pass通过发现外拓设置
{
// Tags {"LightMode" = "SRPDefaultUnlit"}
// 开启前向剔除 表示剔除前面 只显示背面
Cull Front
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// 线条宽度
float _OutlineWidth;
// 线条颜色
float4 _OutLineColor;
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
// 法线
float3 normal : NORMAL;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
v2f vert (appdata v)
{
v2f o;
// 顶点沿着法线方向外扩(放大模型)
float4 newVertex = float4(v.vertex.xyz + v.normal * _OutlineWidth * 0.1 ,1);
// UnityObjectToClipPos(v.vertex) 将模型空间下的顶点转换到齐次裁剪空间
o.vertex = UnityObjectToClipPos(newVertex);
return o;
}
half4 frag(v2f i) : SV_TARGET
{
// 返回线条色彩
return half4(1,0,0,1);
}
ENDCG
}
}
}
Cube正常描边的效果图以及代码
效果图
ShaderLab代码
Shader "Unlit/s_shield"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {
}
_Color("Color", Color) = (0.25, 0.5, 0.5, 1)
_Len("Len", Range(0.0, 1.0)) = 0.5
}
SubShader
{
Tags {
"RenderType"="Transparent" }
LOD 100
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
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);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
// apply fog
UNITY_APPLY_FOG(i.fogCoord, col);
return col;
}
ENDCG
}
Pass
{
Blend SrcAlpha OneMinusSrcAlpha
Cull Front // 正面剔除
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
// make fog work
#pragma multi_compile_fog
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float4 _Color;
float _Len;
v2f vert (appdata v)
{
v2f o;
float len = 1 + _Len;
v.vertex = normalize(v.vertex) * len; // 主要的逻辑是这一行
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
UNITY_TRANSFER_FOG(o,o.vertex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
// sample the texture
fixed4 col = tex2D(_MainTex, i.uv);
// apply fog
col =_Color;
return col;
}
ENDCG
}
}
}
总结
法线外拓方式
直接扩展顶点坐标方式方式
最后通过对比，这种方式只对Cube的效果比较好（或者说顶点距离物体中心均匀分部的mesh），对于胶囊体而言，还是发现外拓表现比较好。虽然描边的厚度变大的时候会有些变形，值较小的时候还是可以接受的。