使用UnityShader3怎么实现2D描边效果-创新互联
使用UnityShader3怎么实现2D描边效果？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
Shader "Custom/Edge"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_OffsetUV ("OffsetUV", Range(0, 1)) = 0.1
_EdgeColor ("EdgeColor", Color) = (1, 0, 0, 1)
_AlphaTreshold ("Treshold", Range(0, 1)) = 0.5
}
SubShader
{
Tags { "Queue" = "Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
fixed2 uv : TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed2 uv[5] : TEXCOORD0;
};
sampler2D _MainTex;
float4 _MainTex_ST;
fixed _OffsetUV;
fixed4 _EdgeColor;
fixed _AlphaTreshold;
v2f vert (appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv[0] = v.uv;
o.uv[1] = v.uv + fixed2(0, _OffsetUV); //up
o.uv[2] = v.uv + fixed2(-_OffsetUV, 0); //left
o.uv[3] = v.uv + fixed2(0, -_OffsetUV); //bottom
o.uv[4] = v.uv + fixed2(_OffsetUV, 0); //right
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 original = tex2D(_MainTex, i.uv[0]);
fixed alpha = original.a;
fixed p1 = tex2D(_MainTex, i.uv[1]).a;
fixed p2 = tex2D(_MainTex, i.uv[2]).a;
fixed p3 = tex2D(_MainTex, i.uv[3]).a;
fixed p4 = tex2D(_MainTex, i.uv[4]).a;
alpha = p1 + p2 + p3 + p4 + alpha;
alpha /= 5;
if (alpha < _AlphaTreshold) original.rgb = _EdgeColor.rgb;
return original;
}
ENDCG
}
}
}2.
Shader "Custom/Edge"
{
Properties
{
_Edge ("Edge", Range(0, 0.2)) = 0.043
_EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)
_MainTex ("MainTex", 2D) = "white" {}
}
SubShader
{
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
fixed _Edge;
fixed4 _EdgeColor;
sampler2D _MainTex;
struct appdata
{
float4 vertex : POSITION;
fixed2 uv : TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
float4 objVertex : TEXCOORD0;
fixed2 uv : TEXCOORD1;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.objVertex = v.vertex;
o.uv = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed x = i.uv.x;
fixed y = i.uv.y;
if((x < _Edge) || (abs(1 - x) < _Edge) || (y < _Edge) || (abs(1 - y) < _Edge))
{
return _EdgeColor * abs(cos(_Time.y));
}
else
{
fixed4 color = tex2D(_MainTex, i.uv);
return color;
}
//return i.objVertex;
//return fixed4(i.uv, 0, 1);
}
ENDCG
}
}
}3.如下图，左边是一个Image，右边是一个Plane。
// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'
Shader "Custom/Edge"
{
Properties
{
_Edge ("Edge", Range(0, 0.2)) = 0.043
_EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)
_FlowColor ("FlowColor", Color) = (1, 1, 1, 1)
_FlowSpeed ("FlowSpeed", Range(0, 10)) = 3
_MainTex ("MainTex", 2D) = "white" {}
}
SubShader
{
Tags { "Queue"="Transparent" "RenderType"="Transparent" "IgnoreProjector"="True" }
Pass
{
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
fixed _Edge;
fixed4 _EdgeColor;
fixed4 _FlowColor;
float _FlowSpeed;
sampler2D _MainTex;
struct appdata
{
float4 vertex : POSITION;
fixed2 uv : TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed2 uv : TEXCOORD1;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed x = i.uv.x;
fixed y = i.uv.y;
if((x < _Edge) || (abs(1 - x) < _Edge) || (y < _Edge) || (abs(1 - y) < _Edge))
{
//点旋转公式：
//假设对图片上任意点(x,y)，绕一个坐标点(rx0,ry0)逆时针旋转a角度后的新的坐标设为(x0,y0)，有公式：
//x0 = (x - rx0) * cos(a) - (y - ry0) * sin(a) + rx0 ;
//y0 = (x - rx0) * sin(a) + (y - ry0) * cos(a) + ry0 ;
float a = _Time.y * _FlowSpeed;
float2 rotUV;
x -= 0.5;
y -= 0.5;
rotUV.x = x * cos(a) - y * sin(a) + 0.5;
rotUV.y = x * sin(a) + y * cos(a) + 0.5;
fixed temp = saturate(rotUV.x - 0.5);//-0.5作用是调整流动颜色的比例
return _EdgeColor * (1 - temp) + _FlowColor * temp;
}
else
{
//fixed4 color = tex2D(_MainTex, i.uv);
return fixed4(1, 1, 1, 0);
}
}
ENDCG
}
}
}4.通过观察上面的效果图，会发现右边的Plane出现了锯齿。而解决锯齿一般的方法就是做模糊处理，模糊处理一般又有贴图处理和代码处理之分，这里使用的是贴图处理。贴图处理需要提供一张边界模糊的贴图。
如上图，左下是内边反锯齿的图，右上是未经处理的图。
// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'
Shader "Custom/Edge2"
{
Properties
{
_Edge ("Edge", Range(0, 0.2)) = 0.043
_EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)
_FlowColor ("FlowColor", Color) = (1, 1, 1, 1)
_FlowSpeed ("FlowSpeed", Range(0, 10)) = 3
_MainTex ("MainTex", 2D) = "white" {}
}
SubShader
{
Tags { "Queue"="Transparent" "RenderType"="Transparent" "IgnoreProjector"="True" }
Pass
{
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
fixed _Edge;
fixed4 _EdgeColor;
fixed4 _FlowColor;
float _FlowSpeed;
sampler2D _MainTex;
struct appdata
{
float4 vertex : POSITION;
fixed2 uv : TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
fixed2 uv : TEXCOORD1;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 color = tex2D(_MainTex, i.uv);
float alpha = color.a;
fixed x = i.uv.x;
fixed y = i.uv.y;
float a = _Time.y * _FlowSpeed;
float2 rotUV;
x -= 0.5;
y -= 0.5;
rotUV.x = x * cos(a) - y * sin(a) + 0.5;
rotUV.y = x * sin(a) + y * cos(a) + 0.5;
fixed temp = saturate(rotUV.x - 0.5);//-0.5作用是调整流动颜色的比例
fixed4 finalColor = _EdgeColor * (1 - temp) + _FlowColor * temp;
finalColor.a = alpha;
return finalColor;
}
ENDCG
}
}
}关于使用UnityShader3怎么实现2D描边效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联成都网站设计公司行业资讯频道了解更多相关知识。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前题目：使用UnityShader3怎么实现2D描边效果-创新互联
本文来源：http://6mz.cn/article/dshdhp.html