UnityShader3實(shí)現(xiàn)2D描邊效果

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：C#教程|點(diǎn)擊：次

本文實(shí)例為大家分享了UnityShader3實(shí)現(xiàn)2D描邊效果的具體代碼，供大家參考，具體內(nèi)容如下

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

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.如下圖，左邊是一個(gè)Image，右邊是一個(gè)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))  
        { 
   //點(diǎn)旋轉(zhuǎn)公式：
   //假設(shè)對(duì)圖片上任意點(diǎn)(x,y)，繞一個(gè)坐標(biāo)點(diǎn)(rx0,ry0)逆時(shí)針旋轉(zhuǎn)a角度后的新的坐標(biāo)設(shè)為(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作用是調(diào)整流動(dòng)顏色的比例
          return _EdgeColor * (1 - temp) + _FlowColor * temp;
        } 
        else  
        { 
          //fixed4 color = tex2D(_MainTex, i.uv); 
          return fixed4(1, 1, 1, 0); 
        }  
      } 
      ENDCG 
    } 
  } 
}

4.通過(guò)觀察上面的效果圖，會(huì)發(fā)現(xiàn)右邊的Plane出現(xiàn)了鋸齒。而解決鋸齒一般的方法就是做模糊處理，模糊處理一般又有貼圖處理和代碼處理之分，這里使用的是貼圖處理。貼圖處理需要提供一張邊界模糊的貼圖。

如上圖，左下是內(nèi)邊反鋸齒的圖，右上是未經(jīng)處理的圖。

// 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作用是調(diào)整流動(dòng)顏色的比例 
  fixed4 finalColor = _EdgeColor * (1 - temp) + _FlowColor * temp;   
 
  finalColor.a = alpha;
  return finalColor;  
      }  
      ENDCG  
    }  
  }  
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：Unity3D UGUI實(shí)現(xiàn)縮放循環(huán)拖動(dòng)卡牌展示效果

欄目：C#教程

下一篇：Unity3D實(shí)現(xiàn)虛擬按鈕控制人物移動(dòng)效果

本文標(biāo)題：UnityShader3實(shí)現(xiàn)2D描邊效果

本文地址：http://www.jygsgssxh.com/a1/C_jiaocheng/4896.html

更多C#教程

雷火电竞-中国电竞赛事及体育赛事平台

C#教程

UnityShader3實(shí)現(xiàn)2D描邊效果

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀