unity的圖像邊緣檢測以及簡單的模糊效果

首先,看下邊緣檢測的效果(其實這個邊緣檢測我是從cocos2dx的官方着色器裏面拿過來加以修改的)


給image添加一個材質,而材質上的shader是這樣的

Shader "Custom/Edge" {
	Properties {
		_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}//主相機的紋理
	}


	SubShader {
	Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
	LOD 100
	
	Cull Off
	Blend Off
	Pass {  
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

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

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata_t v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
				return o;
			}
			float lookup(fixed2 p, float dx, float dy)
			{
				fixed2 uv = p.xy + fixed2(dx , dy ) / fixed2(640, 640);
				fixed4 c = tex2D(_MainTex, uv.xy);
				return (c.r + c.g + c.b)/3;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed2 p = i.texcoord.xy;
				float gx = 0.0;
				gx += -1.0 * lookup(p, -1.0, -1.0);        //相當於右邊的像素灰度 - 左邊的像素灰度
				gx += -2.0 * lookup(p, -1.0,  0.0);
				gx += -1.0 * lookup(p, -1.0,  1.0);
				gx +=  1.0 * lookup(p,  1.0, -1.0);
				gx +=  2.0 * lookup(p,  1.0,  0.0);
				gx +=  1.0 * lookup(p,  1.0,  1.0);
				
				float gy = 0.0;							
				gy += -1.0 * lookup(p, -1.0, -1.0);			//相當於上邊的像素灰度 - 下邊的像素灰度
				gy += -2.0 * lookup(p,  0.0, -1.0);
				gy += -1.0 * lookup(p,  1.0, -1.0);
				gy +=  1.0 * lookup(p, -1.0,  1.0);
				gy +=  2.0 * lookup(p,  0.0,  1.0);
				gy +=  1.0 * lookup(p,  1.0,  1.0);

				float g = 1.0f - gx*gx - gy*gy;
				//g = floor(g + 0.1);
    
				fixed4 col = fixed4(g, g, g, 1.0f);

				//原色
				fixed4 c = tex2D(_MainTex, i.texcoord.xy);

				//將原色與邊界混合
				//col = c*col.r;




				return col;

			}
		ENDCG
	}
}
	FallBack "Diffuse"
}

把上面的shader丟給一個材質,再把材質給一個image就有了上面的效果,注意的是fixed2(640, 640);這是我寫死的本地圖片的尺寸,需要讀者自行改爲自適應

下面來看簡單模糊效果


它的實現是很簡單的,原理是,我們去紋理座標上對應的顏色值的時候,不去該點的顏色,而是取該點四周八個點的顏色的平均值,下面是shader代碼

Shader "Custom/Edge" {
	Properties {
		_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}//主相機的紋理
	}


	SubShader {
	Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
	LOD 100
	
	Cull Off
	Blend Off
	Pass {  
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"

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

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata_t v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				//八個方向顏色,(1,1)是當前像素

				
				fixed4 col0_0 = tex2D(_MainTex, half2(i.texcoord.x - 2.0f/640.0f, i.texcoord.y - 2.0f/640.0f));
				fixed4 col1_0 = tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y - 2.0f/640.0f));
				fixed4 col2_0 = tex2D(_MainTex, half2(i.texcoord.x + 2.0f/640.0f, i.texcoord.y - 2.0f/640.0f));
				fixed4 col0_1 = tex2D(_MainTex, half2(i.texcoord.x - 2.0f/640.0f, i.texcoord.y));
				fixed4 col1_1 = tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y));
				fixed4 col2_1 = tex2D(_MainTex, half2(i.texcoord.x + 2.0f/640.0f, i.texcoord.y));
				fixed4 col0_2 = tex2D(_MainTex, half2(i.texcoord.x - 2.0f/640.0f, i.texcoord.y + 2.0f/640.0f));
				fixed4 col1_2 = tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + 2.0f/640.0f));
				fixed4 col2_2 = tex2D(_MainTex, half2(i.texcoord.x + 2.0f/640.0f, i.texcoord.y + 2.0f/640.0f));

				fixed4 col = col0_0 + col1_0 + col2_0 + col0_1 + col2_1 + col0_2 + col1_2 + col2_2;
				col = col/8.0f;
				return col;
				//邊界查找

			}
		ENDCG
	}
}
	FallBack "Diffuse"
}

模糊的算法裏面比較知名的是高斯模糊,不過實現起來比較麻煩,它不是我上面那樣簡單的球顏色平均值,而是有權值的求顏色值,不過還好,那些權值已經有現成的了看以看看百度百科裏面有高斯模糊的每個顏色座標對應的權值(http://baike.baidu.com/link?url=SWIWKyy_W8BylfhwY9KBxGR71ABEroVzXC8Nt8U7DRkbSoXFWJb9DAPxKBbTldM949e4c87fGIgAStbtVSDrXq)
發佈了39 篇原創文章 · 獲贊 17 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章