香港6合总彩透码主论坛
 找回密碼
 注冊帳號

掃一掃,訪問微社區

蓬萊仙羽 【Aladdin-Unity3D-Shader編程】之八-2D圖常用的Shader效果

21
回復
2553
查看
打印 上一主題 下一主題
[ 復制鏈接 ]
排名
916
昨日變化

38

主題

524

帖子

2790

積分

Rank: 9Rank: 9Rank: 9

UID
1261
好友
38
蠻牛幣
1926
威望
0
注冊時間
2013-7-31
在線時間
674 小時
最后登錄
2019-10-14

專欄作家認證開發者

馬上注冊,結交更多好友,享用更多功能,讓你輕松玩轉社區。

您需要 登錄 才可以下載或查看,沒有帳號?注冊帳號

x
前言
Shader效果常用于3D模型,但2D圖也有不少常用的效果,例如:圓角頭像,圖片灰態,邊緣著色等等,下面我就依次做一個介紹。

圖片灰態
效果


核心思路
在片元著色器里面對每個圖元進行采樣,將圖元的顏色x,y,z分別乘上灰度系數然后賦值給片源顏色,就將彩色變成了灰色了。

代碼
[AppleScript] 純文本查看 復制代碼
//-----------------------------------------------【Shader說明】--------------------------------------------------------
//     Shader功能:   2D圖片變灰  核心思路: 采樣之后的圖元xyz分別各自乘以灰度系數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);  //乘以一個灰度系數
					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跟閥值進行對比就能找到邊緣

代碼
[AppleScript] 純文本查看 復制代碼
//-----------------------------------------------【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
		}
	}
}



圓角頭像效果


核心思路


根據圓相關的知識,將正方形圖分成四塊象限區域然后每個象限一個最大的半徑為0.5的圓,計算像素是否在圓角之內是關鍵核心,首先計算四個圓心中間的像素,然后在根據像素距離圓心的長度是否交于半徑,小于則在圓角之內,否則舍棄。

代碼
[AppleScript] 純文本查看 復制代碼
//-----------------------------------------------【Shader說明】--------------------------------------------------------
//     Shader功能:   2D圓角頭像	
//	   核心思路:根據圓相關的知識,將正方形圖分成四塊象限區域然后每個象限一個最大的半徑為0.5的圓,計算像素是否在圓角
//     之內是關鍵核心,首先計算四個圓心中間的像素,然后在根據像素距離圓心的長度是否交于半徑,小于則在圓角之內,否則舍棄
//     使用語言:   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(圓角半徑)",Range(0,0.5))= 0.2   //圓角半徑
	}
	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坐標原點置為中心原點,為了方便計算  原本坐標原點在左下角
				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
		}
	}
}



待添加。。。

工程地址

游客,如果您要查看本帖隱藏內容請回復






回復

使用道具 舉報

3偶爾光臨
247/300

0

主題

36

帖子

247

積分

Rank: 3Rank: 3Rank: 3

UID
309624
好友
1
蠻牛幣
217
威望
0
注冊時間
2018-12-25
在線時間
211 小時
最后登錄
2020-1-21
沙發
2019-4-11 19:10:31 只看該作者
給力給力
回復

使用道具 舉報

6蠻牛粉絲
1444/1500
排名
3288
昨日變化

24

主題

141

帖子

1444

積分

Rank: 6Rank: 6Rank: 6

UID
123454
好友
0
蠻牛幣
2738
威望
0
注冊時間
2015-9-22
在線時間
825 小時
最后登錄
2020-2-16
板凳
2019-4-11 21:23:34 只看該作者
感謝樓主分享
回復

使用道具 舉報

7日久生情
1823/5000
排名
1516
昨日變化

1

主題

357

帖子

1823

積分

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

UID
151586
好友
0
蠻牛幣
1826
威望
0
注冊時間
2016-6-11
在線時間
626 小時
最后登錄
2020-1-21
QQ
地板
2019-4-12 10:13:29 只看該作者
66666666666666666666666666666
回復 支持 反對

使用道具 舉報

3偶爾光臨
277/300
排名
39864
昨日變化

0

主題

119

帖子

277

積分

Rank: 3Rank: 3Rank: 3

UID
207933
好友
0
蠻牛幣
58
威望
0
注冊時間
2017-3-8
在線時間
152 小時
最后登錄
2019-11-15
5#
2019-4-12 14:54:53 只看該作者
66666666666666666666666666666
回復 支持 反對

使用道具 舉報

5熟悉之中
907/1000
排名
3265
昨日變化

0

主題

25

帖子

907

積分

Rank: 5Rank: 5

UID
13439
好友
1
蠻牛幣
1925
威望
0
注冊時間
2014-1-27
在線時間
426 小時
最后登錄
2020-1-21
6#
2019-4-12 16:11:17 只看該作者
感謝分享,贊
回復

使用道具 舉報

3偶爾光臨
245/300

0

主題

97

帖子

245

積分

Rank: 3Rank: 3Rank: 3

UID
143781
好友
0
蠻牛幣
298
威望
0
注冊時間
2016-3-29
在線時間
148 小時
最后登錄
2020-1-14
7#
2019-4-13 14:20:20 只看該作者
感謝分享,先看一看
回復 支持 反對

使用道具 舉報

7日久生情
2406/5000
排名
480
昨日變化

2

主題

104

帖子

2406

積分

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

UID
69739
好友
0
蠻牛幣
3132
威望
0
注冊時間
2015-1-20
在線時間
758 小時
最后登錄
2020-2-13
8#
2019-4-15 09:09:12 只看該作者
學習學習
回復

使用道具 舉報

3偶爾光臨
248/300
排名
18294
昨日變化

1

主題

34

帖子

248

積分

Rank: 3Rank: 3Rank: 3

UID
295537
好友
0
蠻牛幣
406
威望
0
注冊時間
2018-9-3
在線時間
179 小時
最后登錄
2020-2-12
9#
2019-4-15 13:33:10 只看該作者
弱弱地問一句,對UI上圖片使用圓角shader會影響合批嗎?
回復 支持 反對

使用道具 舉報

5熟悉之中
608/1000
排名
5983
昨日變化

0

主題

47

帖子

608

積分

Rank: 5Rank: 5

UID
242896
好友
0
蠻牛幣
1251
威望
0
注冊時間
2017-9-12
在線時間
329 小時
最后登錄
2020-1-21
10#
2019-4-18 11:40:22 只看該作者
樓主給力 終于看到有真正價值的了
回復 支持 反對

使用道具 舉報

4四處流浪
456/500
排名
9202
昨日變化

0

主題

45

帖子

456

積分

Rank: 4

UID
250135
好友
0
蠻牛幣
433
威望
0
注冊時間
2017-10-22
在線時間
287 小時
最后登錄
2020-1-3
11#
2019-4-19 09:48:07 只看該作者
感謝分享
回復

使用道具 舉報

5熟悉之中
887/1000
排名
3902
昨日變化

9

主題

143

帖子

887

積分

Rank: 5Rank: 5

UID
232340
好友
0
蠻牛幣
103
威望
0
注冊時間
2017-7-15
在線時間
351 小時
最后登錄
2020-2-14
12#
2019-4-29 14:44:12 只看該作者
謝謝分享
回復

使用道具 舉報

4四處流浪
468/500
排名
11088
昨日變化

1

主題

219

帖子

468

積分

Rank: 4

UID
205241
好友
0
蠻牛幣
18
威望
0
注冊時間
2017-2-6
在線時間
157 小時
最后登錄
2019-12-1
13#
2019-5-10 10:26:45 只看該作者
很給力,10個字數限制...
回復 支持 反對

使用道具 舉報

6蠻牛粉絲
1284/1500
排名
16957
昨日變化

4

主題

775

帖子

1284

積分

Rank: 6Rank: 6Rank: 6

UID
199204
好友
2
蠻牛幣
2612
威望
0
注冊時間
2017-1-5
在線時間
465 小時
最后登錄
2020-1-17
14#
2019-5-22 17:22:28 只看該作者
謝謝分享
回復

使用道具 舉報

6蠻牛粉絲
1284/1500
排名
16957
昨日變化

4

主題

775

帖子

1284

積分

Rank: 6Rank: 6Rank: 6

UID
199204
好友
2
蠻牛幣
2612
威望
0
注冊時間
2017-1-5
在線時間
465 小時
最后登錄
2020-1-17
15#
2019-5-22 17:27:24 只看該作者
謝謝分享
回復

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 注冊帳號

本版積分規則

香港6合总彩透码主论坛
幸运飞艇两期必中计划 在五大连池开疗养院赚钱吗 北京赛车pk10 澳门生肖时时彩软件手机版 dd彩票群 南粤36选7彩票开奖 山东11选5遗漏一定牛 澳洲幸运5 安徽快3开奖结累 海南环岛赛直播