服务器之家：专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - C# - UnityShader3实现2D描边效果

UnityShader3实现2D描边效果

2022-03-11 11:30lyh916 C#

这篇文章主要为大家详细介绍了UnityShader3实现2D描边效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了unityshader3实现2d描边效果的具体代码，供大家参考，具体内容如下

1.

UnityShader3实现2D描边效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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.

UnityShader3实现2D描边效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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。

UnityShader3实现2D描边效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// 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出现了锯齿。而解决锯齿一般的方法就是做模糊处理，模糊处理一般又有贴图处理和代码处理之分，这里使用的是贴图处理。贴图处理需要提供一张边界模糊的贴图。

UnityShader3实现2D描边效果

UnityShader3实现2D描边效果

如上图，左下是内边反锯齿的图，右上是未经处理的图。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// 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 
    } 
  } 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/lyh916/article/details/51487918

  • UnityShader
  • 描边

    • 延伸 · 阅读

    精彩推荐
    • C#c#学习之30分钟学会XAML

      c#学习之30分钟学会XAML

      一个界面程序的核心，无疑就是界面和后台代码，而xaml就是微软为构建应用程序界面而创建的一种描述性语言，也就是说，这东西是搞界面的...

      C#教程网8812021-12-10
    • C#聊一聊C#接口问题 新手速来围观

      聊一聊C#接口问题 新手速来围观

      聊一聊C#接口问题,新手速来围观，一个通俗易懂的例子帮助大家更好的理解C#接口问题，感兴趣的小伙伴们可以参考一下...

      zenkey7072021-12-03
    • C#浅谈C# winForm 窗体闪烁的问题

      浅谈C# winForm 窗体闪烁的问题

      下面小编就为大家带来一篇浅谈C# winForm 窗体闪烁的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...

      C#教程网7962021-12-21
    • C#Unity3D UGUI实现缩放循环拖动卡牌展示效果

      Unity3D UGUI实现缩放循环拖动卡牌展示效果

      这篇文章主要为大家详细介绍了Unity3D UGUI实现缩放循环拖动展示卡牌效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参...

      诗远3662022-03-11
    • C#C#实现的文件操作封装类完整实例【删除,移动,复制,重命名】

      C#实现的文件操作封装类完整实例【删除,移动,复制,重命名】

      这篇文章主要介绍了C#实现的文件操作封装类,结合完整实例形式分析了C#封装文件的删除,移动,复制,重命名等操作相关实现技巧,需要的朋友可以参考下...

      Rising_Sun3892021-12-28
    • C#C# 后台处理图片的几种方法

      C# 后台处理图片的几种方法

      本篇文章主要介绍了C# 后台处理图片的几种方法，非常具有实用价值，需要的朋友可以参考下。...

      IT小伙儿10162021-12-08
    • C#C#基础之泛型

      C#基础之泛型

      泛型是 2.0 版 C# 语言和公共语言运行库 (CLR) 中的一个新功能。接下来通过本文给大家介绍c#基础之泛型，感兴趣的朋友一起学习吧...

      方小白7732021-12-03
    • C#C#直线的最小二乘法线性回归运算实例

      C#直线的最小二乘法线性回归运算实例

      这篇文章主要介绍了C#直线的最小二乘法线性回归运算方法,实例分析了给定一组点,用最小二乘法进行线性回归运算的实现技巧,具有一定参考借鉴价值,需要...

      北风其凉8912021-10-18
    最近更新
    编辑推荐
    阅读排行
    热门标签
    物体颜色 　 osg 　 刷新桌面 　 nancy 　 TaskManager 　 网站授权 　 下拉式 　 DirectoryEntry 　 C#编程 　 网站功能 　 通知窗口 　 相互关系 　 语句顺序 　 编程错误 　 悬浮框 　 Dispose 　 滚动新闻 　 HttpPost 　 静态构造函数 　 焦点 　 类型派生 　 深度拷贝 　 小写转大写金额 　 任务并行库 　 众数 　 更新数据库 　 统计字数 　 二乘法 　 IComparer 　 DataBinding 　
    © 2019-2022 服务器之家(www.tuohang.net) 版权所有关于我们联系我们版权申明网站地图