码迷,mamicode.com
首页 > 编程语言 > 详细

UnityShader实例11:屏幕特效之马赛克(Mosaic)材质

时间:2015-08-21 19:35:46      阅读:497      评论:0      收藏:0      [点我收藏+]

标签:unity   屏幕特效   马赛克   _maintex_texelsize   蜂巢   

马赛克(Mosaic)材质



概述


马赛克(Mosaic),估计是大伙平时很常见最讨厌的图片处理手段,嘿嘿,没错我说的就是"打码"。好了,正经点,马赛克指现行广为使用的一种图像(视频)处理手段,此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果,因为这种模糊看上去有一个个的小格子组成,便形象的称这种画面为马赛克。其目的通常是让图像大规模的降低图像()视频分辨率,而让图像(视频)的一些细节隐藏起来,使之无法辨认,一般用来保护隐私,或者隐藏某些不健康的画面。


原理



要实现马赛克的效果,需要把图片一个相当大小的正方形区域用同一个点的颜色来表示,相当于将连续的颜色离散化,因此我们可以想到用取整的方法来离散颜色,但是在我们的图片纹理坐标采样时在0到1的连续范围,因此我们需要将纹理坐标转换成实际大小的整数坐标,接下来要把图像这个坐标量化离散,比如对于一个分辨率为256X256像素的图片,马赛克块的大小为8X8像素,我们先得将纹理坐标乘以(256,256)使其映射到0到256的范围,相当于一个整数代表一个像素,再将纹理坐标取除以8之后取整,最后再将坐标乘以8,除以256.重新映射回0到1的范围,但是纹理坐标已经是离散的,而非连续的。


Shader代码实现


 


到代码实现部分了,如果被上面原理讲述绕晕的同学还是直接看代码吧(原谅我,理科生,作文从来没行过技术分享)。首先还是得在属性里声明一个马赛克大小的参数 

 


Properties {
	_MainTex ("Base (RGB)", 2D) = "white" {}
	_MosaicSize("MosaicSize", int)=5
}


然后声明一个内置四元数变量_MainTex_TexelSize,这个变量的从字面意思是主贴图_MainTex的像素尺寸大小,是一个四元数,它的值为 Vector4(1 / width, 1 / height, width, height);这个属于unity的黑魔法,不知道是在哪里定义的,官方文档并没有解释,有知道的网友可以在回复里告诉我。


half4 _MainTex_TexelSize;



因为马赛克是针对像素操作,所以关键代码也在Frag函数里面实现:


float2 uv = (i.texcoord*_MainTex_TexelSize.zw) ;//将纹理坐标映射到分辨率的大小
uv = floor(uv/_MosaicSize)*_MosaicSize;//根据马赛克块大小进行取整
i.texcoord =uv*_MainTex_TexelSize.xy;//把坐标重新映射回0,1的范围之内
fixed4 col = tex2D(_MainTex, i.texcoord);


Shader完整代码



VF版本代码01
Shader "PengLu/Unlit/MosaicVF" {
Properties {
	_MainTex ("Base (RGB)", 2D) = "white" {}
	_MosaicSize("MosaicSize", int)=5
}

SubShader {
	Tags { "RenderType"="Opaque" }
	LOD 100
	
	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;
			half4 _MainTex_TexelSize;
			int _MosaicSize;
			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
			{
				float2 uv = (i.texcoord*_MainTex_TexelSize.zw) ;
				uv = floor(uv/_MosaicSize)*_MosaicSize;
				i.texcoord =uv*_MainTex_TexelSize.xy;
				fixed4 col = tex2D(_MainTex, i.texcoord);
			
				UNITY_OPAQUE_ALPHA(col.a);
			
				return col;
			}
		ENDCG
	}
}

}

VF版本代码01效果:
技术分享技术分享


C#脚本代码


要做成屏幕特效,还需要脚本配合,这里不做过多解释,脚本里重要部分有注释,需要注意的是几个函数,具体用处可以看官方文档(这里这里

OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture)

Graphics.Blit(sourceTexture, destTexture,material)

Graphics.Blit(sourceTexture, destTexture);


完整C#脚本如下:


using UnityEngine;
using System.Collections;
using System;

[ExecuteInEditMode]
[AddComponentMenu ("PengLu/ImageEffect/Mosaic")]
public class ImageEffect_Mosaic : MonoBehaviour {
	#region Variables
	public Shader MosaicShader = null;
	private Material MosaicMaterial = null;	
	public int MosaicSize = 8;

	#endregion


//创建材质和shader
	Material material
	{
		get
		{
			if(MosaicMaterial == null)
			{
				MosaicMaterial = new Material(MosaicShader);
				MosaicMaterial.hideFlags = HideFlags.HideAndDontSave;	
			}
			return MosaicMaterial;
		}
	}

	// Use this for initialization
	void Start () {

		MosaicShader = Shader.Find("PengLu/Unlit/MosaicVF");
		
		// Disable if we don't support image effects
		if (!SystemInfo.supportsImageEffects)
        {
            enabled = false;
            return;
        }

        // Disable the image effect if the shader can't
        // run on the users graphics card
        if (!MosaicShader || !MosaicShader.isSupported)
            enabled = false;
            return;
	
	}



	void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture)
	{	
		if(MosaicSize > 0 && MosaicShader != null){

	        material.SetInt("_MosaicSize", MosaicSize);//将马赛克尺寸传递给shader
		    
                Graphics.Blit(sourceTexture, destTexture,material);//将抓取的图像传递给gpu并用shader处理后,传回来

  
		}

		else{
			Graphics.Blit(sourceTexture, destTexture);
			
		}
		
		
	}
	
	// Update is called once per frame
	void Update () {
		#if UNITY_EDITOR
		if (Application.isPlaying!=true)
		{
			MosaicShader = Shader.Find("PengLu/Unlit/MosaicVF");

		}
		#endif
	
	}

	 public void OnDisable () {
        if (MosaicMaterial)
            DestroyImmediate (MosaicMaterial);
    }
}



马赛克效果变种



在网上查资料的过程中,也看到一些很有意思的马赛克算法变种,这里我只将它们的关键代码以及实现效果放上来,大家可以自己理解制作。

圆形马赛克


关键代码:

float2 intUV = (i.texcoord*_MainTex_TexelSize.zw) ;
float2 xyUV = floor(intUV/_MosaicSize)*_MosaicSize+0.5*_MosaicSize;
float disSample = length(xyUV-intUV);
float2 mosaicUV = xyUV*_MainTex_TexelSize.xy;
fixed4 col = tex2D(_MainTex, i.texcoord);
if(disSample<0.5*_MosaicSize)
	col = tex2D(_MainTex,mosaicUV);


代码效果:

技术分享



正六边形(蜂巢)马赛克

算法原理参考这里这里,我稍微做了些简化,减少了些数学运算使之能支持tanget 2.0,算法不难理解,但是自己想出来却还是蛮难的,所以很佩服原作者,由此可见数学在shader编程中还是相当重要的;

关键代码:

const float TR = 0.866025f;//TR=√3
float2 xyUV = (i.texcoord*_MainTex_TexelSize.zw);
int wx = int (xyUV.x/1.5f/_MosaicSize);
int wy = int (xyUV.y/TR/_MosaicSize);

float2 v1,v2;
float2 wxy =float2(wx,wy);
if(wx/2*2==wx){
	if(wy/2*2==wy){
		v1 = wxy;
		v2 = wxy+1;
	}
	else{
		v1 = wxy+float2(0,1);
		v2 = wxy+float2(1,0);
	}	
}
else{
	if(wy/2*2 == wy){
		v1 = wxy+float2(0,1);
		v2 = wxy+float2(1,0);
	}
	else{
		v1 = wxy;
		v2 = wxy+1;
	}
}
v1 *= float2(_MosaicSize*1.5f,_MosaicSize*TR);
v2 *= float2(_MosaicSize*1.5f,_MosaicSize*TR);

float s1 = length(v1.xy-xyUV.xy);
float s2 = length(v2.xy-xyUV.xy);
fixed4 col = tex2D(_MainTex,v2*_MainTex_TexelSize.xy);
if(s1 < s2)  
	col = tex2D(_MainTex,v1*_MainTex_TexelSize.xy);  



代码效果:

技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

UnityShader实例11:屏幕特效之马赛克(Mosaic)材质

标签:unity   屏幕特效   马赛克   _maintex_texelsize   蜂巢   

原文地址:http://blog.csdn.net/u011047171/article/details/47782801

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!