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

2024-05-28 23:32

本文主要是介绍UnityShader实例12:屏幕特效之马赛克(Mosaic)材质,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

马赛克(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 100Pass {  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 Variablespublic Shader MosaicShader = null;private Material MosaicMaterial = null;	public int MosaicSize = 8;#endregion//创建材质和shaderMaterial material{get{if(MosaicMaterial == null){MosaicMaterial = new Material(MosaicShader);MosaicMaterial.hideFlags = HideFlags.HideAndDontSave;	}return MosaicMaterial;}}// Use this for initializationvoid Start () {MosaicShader = Shader.Find("PengLu/Unlit/MosaicVF");// Disable if we don't support image effectsif (!SystemInfo.supportsImageEffects){enabled = false;return;}// Disable the image effect if the shader can't// run on the users graphics cardif (!MosaicShader || !MosaicShader.isSupported)enabled = false;return;}void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture){	if(MosaicSize > 0 && MosaicShader != null){material.SetInt("_MosaicSize", MosaicSize);//将马赛克尺寸传递给shaderGraphics.Blit(sourceTexture, destTexture,material);//将抓取的图像传递给gpu并用shader处理后,传回来}else{Graphics.Blit(sourceTexture, destTexture);}}// Update is called once per framevoid Update () {#if UNITY_EDITORif (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实例12:屏幕特效之马赛克(Mosaic)材质的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1012000

相关文章

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》:本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

Spring 中使用反射创建 Bean 实例的几种方式

《Spring中使用反射创建Bean实例的几种方式》文章介绍了在Spring框架中如何使用反射来创建Bean实例,包括使用Class.newInstance()、Constructor.newI... 目录1. 使用 Class.newInstance() (仅限无参构造函数):2. 使用 Construc

MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析

《MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析》本文将详细讲解MyBatis-Plus中的lambdaUpdate用法,并提供丰富的案例来帮助读者更好地理解和应... 目录深入探索MyBATis-Plus中Service接口的lambdaUpdate用法及示例案例背景

MyBatis-Plus中静态工具Db的多种用法及实例分析

《MyBatis-Plus中静态工具Db的多种用法及实例分析》本文将详细讲解MyBatis-Plus中静态工具Db的各种用法,并结合具体案例进行演示和说明,具有很好的参考价值,希望对大家有所帮助,如有... 目录MyBATis-Plus中静态工具Db的多种用法及实例案例背景使用静态工具Db进行数据库操作插入

Spring中@Lazy注解的使用技巧与实例解析

《Spring中@Lazy注解的使用技巧与实例解析》@Lazy注解在Spring框架中用于延迟Bean的初始化,优化应用启动性能,它不仅适用于@Bean和@Component,还可以用于注入点,通过将... 目录一、@Lazy注解的作用(一)延迟Bean的初始化(二)与@Autowired结合使用二、实例解