香港6合总彩透码主论坛
 找回密码
 注册帐号

扫一扫,访问微社区

蓬莱仙羽 【Aladdin-Unity3D-Shader编程】之八-2D图常用的Shader效果

19
回复
2159
查看
打印 上一主题 下一主题
[ 复制链接 ]
排名
916
昨日变化

38

主题

524

帖子

2789

积分

Rank: 9Rank: 9Rank: 9

UID
1261
好友
38
蛮牛币
1907
威望
0
注册时间
2013-7-31
在线时间
673 小时
最后登录
2019-7-17

专栏作家?#29616;?#24320;发者

马?#29486;?#20876;,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐?#29275;?a href="member.php?mod=register" title="注册帐号">注册帐号

x
前言
Shader效果常用于3D模型,但2D图也有不少常用的效果,例如:圆角头像,图片灰态,边缘着色等等,下面我就依次做一个介绍。

图片灰态
效果


核心思路
在片元着色器里面对每个图元进行采样,将图元的颜色x,y,z分别乘上灰?#35748;?#25968;然后赋值给片源颜色,就将彩色变成了灰色了。

代码
[AppleScript] ?#35838;?#26412;查看 复制代码
//-----------------------------------------------【Shader说明】--------------------------------------------------------
//     Shader功能:   2D图片变灰  核心思路: 采样之后的图元xyz分别各自乘以灰?#35748;?#25968;0.299,0.518,0.184之后的值就是灰色的
//     使用语言:   Shaderlab
//     开发所用IDE版本:Unity2018.3.6 、Visual Studio 2017
//     2016年9月16日  Created by Aladdin(阿拉丁)   
//     更多内容或交流请访问我的博客:http://blog.csdn.net/s10141303/article/category/6670402
//---------------------------------------------------------------------------------------------------------------------


Shader "阿拉丁Shader编程/4-1.2D图片变灰"
{
   Properties
    {
        _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        _GrayScale ("GrayScale", Float) = 1
		[Toggle]_Open("Open", Int) = 1	//Toggle控制是否开启
    }

    SubShader
    {
        Tags
        { 
            "Queue"="Transparent" 
            "IgnoreProjector"="True" 
            "RenderType"="Transparent" 
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Cull Off
        Lighting Off
        ZWrite Off
        Blend One OneMinusSrcAlpha

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _ PIXELSNAP_ON	  //告诉Unity编译不同版本的Shader,这里和后面vert中的PIXELSNAP_ON对应
            #include "UnityCG.cginc"

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                half2 texcoord  : TEXCOORD0;
            };

            fixed4 _Color;
			fixed _Open;
            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
                OUT.texcoord = IN.texcoord;
                OUT.color = IN.color * _Color;
                #ifdef PIXELSNAP_ON
                OUT.vertex = UnityPixelSnap (OUT.vertex);
                #endif

                return OUT;
            }

            sampler2D _MainTex;
            float _GrayScale;

            fixed4 frag(v2f IN) : SV_Target
            {
				if(_Open > 0)
				{
					fixed4 c = tex2D(_MainTex, IN.texcoord) * IN.color;
				   float cc = (c.r * 0.299 + c.g * 0.518 + c.b * 0.184);  //乘以一个灰?#35748;?#25968;
					cc *= _GrayScale;
					c.r = c.g = c.b = cc;

					c.rgb *= c.a;
					return c;
				}
                else
				{
				   return tex2D(_MainTex, IN.texcoord) * IN.color;
				}
            }
        ENDCG
        }
    }
}



边缘着色效果

核心思路

在片源 着色器中每个图元检测alpha跟阀?#21040;?#34892;对比就能找到边缘

代码
[AppleScript] ?#35838;?#26412;查看 复制代码
//-----------------------------------------------【Shader说明】--------------------------------------------------------
//     Shader功能:   2D图片描边	 核心思路:检测某个图元的alpha值是否在某个阀值之间
//     使用语言:   Shaderlab
//     开发所用IDE版本:Unity2018.3.6 、Visual Studio 2017
//     2016年9月16日  Created by Aladdin(阿拉丁)   
//     更多内容或交流请访问我的博客:http://blog.csdn.net/s10141303/article/category/6670402
//---------------------------------------------------------------------------------------------------------------------


Shader "阿拉丁Shader编程/4-2.2D图片描边"
{
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1,1,1,1) //图像回合颜色
		_OutLineColor("OutLineColor", Color) = (1,1,1,1) //边缘颜色
		_CheckRange("CheckRange",Float) = 1	  //检测的范围
		_CheckAccuracy("CheckAccuracy",Float) = 0.5
		_LineWidth("LineWidth",Float) = 2	   //边缘宽度
	}
 
	SubShader
	{
		Tags
		{ 
			"Queue"="Transparent" 
			"IgnoreProjector"="True" 
			"RenderType"="Transparent" 
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}
 
		Cull Off         //关闭背面剔除
		Lighting Off     //关闭灯光
		ZWrite Off       //关闭Z缓冲
		Blend One OneMinusSrcAlpha     //混合源系数one(1)  目标系数OneMinusSrcAlpha(1-one=0)
 
		Pass
		{
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile _ PIXELSNAP_ON       //告诉Unity编译不同版本的Shader,这里和后面vert中的PIXELSNAP_ON对应
			#include "UnityCG.cginc"
			sampler2D _MainTex;
			float4 _MainTex_TexelSize;
			
			fixed4 _Color;
			fixed4 _OutLineColor;
			float _CheckAccuracy;
			float _LineWidth;
			float _CheckRange;
			struct appdata_t                           //vert输入
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
			};
 
			struct v2f                                 //vert输出数据结构
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				float2 texcoord  : TEXCOORD0;
			};
 
			v2f vert(appdata_t IN)
			{
				v2f OUT;
				OUT.vertex = UnityObjectToClipPos(IN.vertex);
				OUT.texcoord = IN.texcoord;
				OUT.color = IN.color * _Color;
				#ifdef PIXELSNAP_ON
				OUT.vertex = UnityPixelSnap (OUT.vertex);
				#endif
 
				return OUT;
			}
 
			fixed4 SampleSpriteTexture (float2 uv)
			{
				fixed4 color = tex2D (_MainTex, uv);
				return color;
			}
			
			fixed4 frag(v2f IN) : SV_Target
			{
				fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;
				c.rgb *= c.a;
				float isOut = step(abs(1/_LineWidth),c.a);	//检测每个图元的aplha是否在某个值 那么他就是边缘	  //step(a, x) Returns (x >= a) ? 1 : 0	   abs(x) 返回绝对值
				if(isOut != 0)
				{
					fixed4 pixelUp = tex2D(_MainTex, IN.texcoord + fixed2(0, _MainTex_TexelSize.y*_CheckRange));  
					fixed4 pixelDown = tex2D(_MainTex, IN.texcoord - fixed2(0, _MainTex_TexelSize.y*_CheckRange));  
					fixed4 pixelRight = tex2D(_MainTex, IN.texcoord + fixed2(_MainTex_TexelSize.x*_CheckRange, 0));  
					fixed4 pixelLeft = tex2D(_MainTex, IN.texcoord - fixed2(_MainTex_TexelSize.x*_CheckRange, 0));  
					float bOut = step((1-_CheckAccuracy),pixelUp.a*pixelDown.a*pixelRight.a*pixelLeft.a);
					c = lerp(_OutLineColor,c,bOut);
					return c;
				}
				return c;
			}
		ENDCG
		}
	}
}



圆角头像效果


核心思路


根据圆相关的知识,将正方形图分成?#30446;?#35937;限区域然后每个象限一个最大的半径为0.5的圆,计算像素是否在圆角之内是关键核?#27169;?#39318;先计算四个圆心中间的像素,然后在根据像素距离圆心的长度是否交于半径,小于则在圆角之内,否则舍弃。

代码
[AppleScript] ?#35838;?#26412;查看 复制代码
//-----------------------------------------------【Shader说明】--------------------------------------------------------
//     Shader功能:   2D圆角头像	
//	   核心思路:根据圆相关的知识,将正方形图分成?#30446;?#35937;限区域然后每个象限一个最大的半径为0.5的圆,计算像素是否在圆角
//     之内是关键核?#27169;?#39318;先计算四个圆心中间的像素,然后在根据像素距离圆心的长度是否交于半径,小于则在圆角之内,否则舍弃
//     使用语言:   Shaderlab
//     开发所用IDE版本:Unity2018.3.6 、Visual Studio 2017
//     2016年9月16日  Created by Aladdin(阿拉丁)   
//     更多内容或交流请访问我的博客:http://blog.csdn.net/s10141303/article/category/6670402
//---------------------------------------------------------------------------------------------------------------------

Shader "阿拉丁Shader编程/4-3.2D圆角头像" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_RADIUSBUCE("Radius(圆?#21069;?#24452;)",Range(0,0.5))= 0.2   //圆?#21069;?#24452;
	}
	SubShader
	{
		pass
		{
			CGPROGRAM
			#pragma exclude_renderers gles
			#pragma vertex vert
			#pragma fragment frag
			#include "unitycg.cginc"
			float _RADIUSBUCE;
			sampler2D _MainTex;

			struct v2f
			{
				float4 pos : SV_POSITION;
				float2 ModeUV: TEXCOORD0;
				float2 RadiusBuceVU : TEXCOORD1;
			};
			v2f vert(appdata_base v)
			{
				v2f o;
				o.pos=UnityObjectToClipPos(v.vertex); //v.vertex;
				o.ModeUV=v.texcoord;
				o.RadiusBuceVU=v.texcoord-float2(0.5,0.5);       //将模型UV坐标原点置为?#34892;?#21407;点,为了方便计算  原本坐标原点在左下角
				return o;
			}


			fixed4 frag(v2f i):COLOR
			{
				fixed4 col;
				col=(0,1,1,0);

				if(abs(i.RadiusBuceVU.x)<0.5-_RADIUSBUCE||abs(i.RadiusBuceVU.y)<0.5-_RADIUSBUCE)   //像素点坐标在中间一块	不在四个角落	渲染原本的图元颜色
				{
					col=tex2D(_MainTex,i.ModeUV);
				}
				else //如果在四个角落
				{
					if(length(abs(i.RadiusBuceVU)-float2(0.5-_RADIUSBUCE,0.5-_RADIUSBUCE)) <_RADIUSBUCE)  //在圆角的内的像素 坐标到圆心的距离是否小于半径 小于则在圆角之内
					{
						col=tex2D(_MainTex,i.ModeUV);
					}
					else
					{
						discard;  //舍弃图元 相当于clip
					}		
				}
				return col;		
			}
			ENDCG
		}
	}
}



待添?#21360;!!?/strong>

工程地址

游客,如果您要查看本帖隐藏内容请回复






回复

使用道具 举报

2初来乍到
143/150

0

主题

24

帖子

143

积分

Rank: 2Rank: 2

UID
309624
好友
1
蛮牛币
230
威望
0
注册时间
2018-12-25
在线时间
119 小时
最后登录
2019-8-23
沙发
2019-4-11 19:10:31 只看该作者
给力给力
回复

使用道具 举报

6蛮牛粉丝
1318/1500
排名
3287
昨日变化

22

主题

133

帖子

1318

积分

Rank: 6Rank: 6Rank: 6

UID
123454
好友
0
蛮牛币
1216
威望
0
注册时间
2015-9-22
在线时间
709 小时
最后登录
2019-8-16
板凳
2019-4-11 21:23:34 只看该作者
?#34892;?#27004;主分享
回复

使用道具 举报

排名
1516
昨日变化

0

主题

272

帖子

1636

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
151586
好友
0
蛮牛币
1920
威望
0
注册时间
2016-6-11
在线时间
526 小时
最后登录
2019-8-23
QQ
地板
2019-4-12 10:13:29 只看该作者
66666666666666666666666666666
回复 支持 反对

使用道具 举报

排名
39862
昨日变化

0

主题

116

帖子

268

积分

Rank: 3Rank: 3Rank: 3

UID
207933
好友
0
蛮牛币
53
威望
0
注册时间
2017-3-8
在线时间
146 小时
最后登录
2019-8-22
5#
2019-4-12 14:54:53 只看该作者
66666666666666666666666666666
回复 支持 反对

使用道具 举报

5熟悉之中
820/1000
排名
3264
昨日变化

0

主题

25

帖子

820

积分

Rank: 5Rank: 5

UID
13439
好友
1
蛮牛币
1590
威望
0
注册时间
2014-1-27
在线时间
339 小时
最后登录
2019-8-23
6#
2019-4-12 16:11:17 只看该作者
?#34892;?#20998;享,赞
回复

使用道具 举报

0

主题

62

帖子

153

积分

Rank: 3Rank: 3Rank: 3

UID
143781
好友
0
蛮牛币
188
威望
0
注册时间
2016-3-29
在线时间
91 小时
最后登录
2019-8-23
7#
2019-4-13 14:20:20 只看该作者
?#34892;?#20998;享,先看一看
回复 支持 反对

使用道具 举报

排名
479
昨日变化

2

主题

97

帖子

2390

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
69739
好友
0
蛮牛币
3056
威望
0
注册时间
2015-1-20
在线时间
749 小时
最后登录
2019-8-2
8#
2019-4-15 09:09:12 只看该作者
学习学习
回复

使用道具 举报

排名
18292
昨日变化

1

主题

26

帖子

205

积分

Rank: 3Rank: 3Rank: 3

UID
295537
好友
0
蛮牛币
334
威望
0
注册时间
2018-9-3
在线时间
144 小时
最后登录
2019-8-22
9#
2019-4-15 13:33:10 只看该作者
弱弱地问一句,对UI上图片使用圆角shader会影响合批吗?
回复 支持 反对

使用道具 举报

5熟悉之中
515/1000
排名
5983
昨日变化

0

主题

41

帖子

515

积分

Rank: 5Rank: 5

UID
242896
好友
0
蛮牛币
1031
威望
0
注册时间
2017-9-12
在线时间
242 小时
最后登录
2019-8-23
10#
2019-4-18 11:40:22 只看该作者
楼主给力 终于看到有真正价值的了
回复 支持 反对

使用道具 举报

4四处流浪
437/500
排名
9201
昨日变化

0

主题

43

帖子

437

积分

Rank: 4

UID
250135
好友
0
蛮牛币
440
威望
0
注册时间
2017-10-22
在线时间
268 小时
最后登录
2019-8-23
11#
2019-4-19 09:48:07 只看该作者
?#34892;?#20998;享
回复

使用道具 举报

5熟悉之中
800/1000
排名
3900
昨日变化

9

主题

129

帖子

800

积分

Rank: 5Rank: 5

UID
232340
好友
0
蛮牛币
132
威望
0
注册时间
2017-7-15
在线时间
278 小时
最后登录
2019-8-23
12#
2019-4-29 14:44:12 只看该作者
谢谢分享
回复

使用道具 举报

4四处流浪
427/500
排名
11086
昨日变化

1

主题

194

帖子

427

积分

Rank: 4

UID
205241
好友
0
蛮牛币
14
威望
0
注册时间
2017-2-6
在线时间
140 小时
最后登录
2019-7-19
13#
2019-5-10 10:26:45 只看该作者
很给力,10个字数限制...
回复 支持 反对

使用道具 举报

6蛮牛粉丝
1138/1500
排名
16956
昨日变化

1

主题

729

帖子

1138

积分

Rank: 6Rank: 6Rank: 6

UID
199204
好友
1
蛮牛币
1098
威望
0
注册时间
2017-1-5
在线时间
368 小时
最后登录
2019-8-22
14#
2019-5-22 17:22:28 只看该作者
谢谢分享
回复

使用道具 举报

6蛮牛粉丝
1138/1500
排名
16956
昨日变化

1

主题

729

帖子

1138

积分

Rank: 6Rank: 6Rank: 6

UID
199204
好友
1
蛮牛币
1098
威望
0
注册时间
2017-1-5
在线时间
368 小时
最后登录
2019-8-22
15#
2019-5-22 17:27:24 只看该作者
谢谢分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

香港6合总彩透码主论坛
北京pk拾开奖现场直播 安徽时时玩法 新时时任选 聚富视界vip安卓版下载 双色球网 uk大上海时时平台 快三大小单双稳赚买法一分钟 后二组选复式8码技巧 广东11选5计划软件apk 蛋蛋28稳赚不赔全包方法