Unity制作马赛克效果

  大家好,我是阿赵。
  之前在玩怒之铁拳4里面,看到了马赛克场景转换的效果,觉得很有趣,于是也来做一下。

一、2D版本的马赛克转场效果

  先看看视频效果:

马赛克转场

  这里我是直接写shader实现的,我这里是把shader直接挂在了面片网格上面。当然如果是需要挂在UGUI的Image上面,也是同理,只需要修改一下shader适应UI的裁剪就行,重点关注一下shader本身,这是我在ASE里面的连线:
在这里插入图片描述

  从原理上看就很简单了,分别计算一个正常的UV和一个马赛克的UV,把它们叠加起码成为一个UV来采样图片而已。
  那么重点就是这个马赛克的UV是要怎样计算了:
在这里插入图片描述

  关键的代码其实很简单,就是把原来的UV乘以一个mosaic值,然后再取整,最后再除以mosaic值,让在某个区域内的所有UV值变成采样同一个点的颜色而已。
在这里插入图片描述

  这就是最核心的代码了。至于为什么我要在这个基础上,又加又乘。是因为如果只是这样计算,在增大mosaic值的时候,会看到所有马赛克是以屏幕左下角为中心变大的。而我想达到的效果,是以整个屏幕的中心点为中心放大,所以就对UV做了一个中心点的偏移。
在这里插入图片描述

  然后转场怎么做?其实就是k一个动画,调节这个mosaic值,让画面变成马赛克,然后通过渐变显示另外一张也是用这个shader的图片,把马赛克从很大变成没有而已。

  给一下shader的源码,可以复制回ase去看看连线

// Made with Amplify Shader Editor
// Available at the Unity Asset Store - http://u3d.as/y3X 
Shader "msk"
{Properties{_MainTex("MainTex", 2D) = "white" {}_mosaic("mosaic", Range( 0 , 64)) = 1}SubShader{Tags { "RenderType"="Opaque" }LOD 100CGINCLUDE#pragma target 3.0ENDCGBlend OffAlphaToMask OffCull BackColorMask RGBAZWrite OnZTest LEqualOffset 0 , 0Pass{Name "Unlit"Tags { "LightMode"="ForwardBase" }CGPROGRAM#ifndef UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX//only defining to not throw compilation error over Unity 5.5#define UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX(input)#endif#pragma vertex vert#pragma fragment frag#pragma multi_compile_instancing#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float4 color : COLOR;float4 ase_texcoord : TEXCOORD0;UNITY_VERTEX_INPUT_INSTANCE_ID};struct v2f{float4 vertex : SV_POSITION;#ifdef ASE_NEEDS_FRAG_WORLD_POSITIONfloat3 worldPos : TEXCOORD0;#endiffloat4 ase_texcoord1 : TEXCOORD1;UNITY_VERTEX_INPUT_INSTANCE_IDUNITY_VERTEX_OUTPUT_STEREO};uniform sampler2D _MainTex;uniform float4 _MainTex_ST;uniform float _mosaic;v2f vert ( appdata v ){v2f o;UNITY_SETUP_INSTANCE_ID(v);UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);UNITY_TRANSFER_INSTANCE_ID(v, o);o.ase_texcoord1.xy = v.ase_texcoord.xy;//setting value to unused interpolator channels and avoid initialization warningso.ase_texcoord1.zw = 0;float3 vertexValue = float3(0, 0, 0);#if ASE_ABSOLUTE_VERTEX_POSvertexValue = v.vertex.xyz;#endifvertexValue = vertexValue;#if ASE_ABSOLUTE_VERTEX_POSv.vertex.xyz = vertexValue;#elsev.vertex.xyz += vertexValue;#endifo.vertex = UnityObjectToClipPos(v.vertex);#ifdef ASE_NEEDS_FRAG_WORLD_POSITIONo.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;#endifreturn o;}fixed4 frag (v2f i ) : SV_Target{UNITY_SETUP_INSTANCE_ID(i);UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX(i);fixed4 finalColor;#ifdef ASE_NEEDS_FRAG_WORLD_POSITIONfloat3 WorldPosition = i.worldPos;#endiffloat2 uv_MainTex = i.ase_texcoord1.xy * _MainTex_ST.xy + _MainTex_ST.zw;float2 mainUV38 = uv_MainTex;float mosaic31 = _mosaic;float mosaicStep35 = step( 0.01 , mosaic31 );float2 commonUV41 = ( mainUV38 * ( 1.0 - mosaicStep35 ) );float temp_output_13_0 = ( 256.0 / mosaic31 );float2 mosaicUV43 = saturate( ( ( floor( ( ( mainUV38 + ( mosaic31 / 510.0 ) ) * temp_output_13_0 ) ) / temp_output_13_0 ) * mosaicStep35 ) );finalColor = tex2D( _MainTex, ( commonUV41 + mosaicUV43 ) );return finalColor;}ENDCG}}CustomEditor "ASEMaterialInspector"}
/*ASEBEGIN
Version=18500
1920;0;1920;1019;2563.494;945.7002;1.585708;True;True
Node;AmplifyShaderEditor.CommentaryNode;47;-2642.936,-59.26529;Inherit;False;577.1555;177.5091;mosaic;2;5;31;mosaic;1,1,1,1;0;0
Node;AmplifyShaderEditor.RangedFloatNode;5;-2592.936,-9.265312;Inherit;False;Property;_mosaic;mosaic;1;0;Create;True;0;0;False;0;False;1;36.14118;0;64;0;1;FLOAT;0
Node;AmplifyShaderEditor.CommentaryNode;45;-2622.422,-886.6477;Inherit;False;530.7781;357;mainUV;2;3;38;mainUV;1,1,1,1;0;0
Node;AmplifyShaderEditor.RegisterLocalVarNode;31;-2289.78,2.243812;Inherit;False;mosaic;-1;True;1;0;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.TextureCoordinatesNode;3;-2572.422,-836.6476;Inherit;True;0;1;2;3;2;SAMPLER2D;;False;0;FLOAT2;1,1;False;1;FLOAT2;0,0;False;5;FLOAT2;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.CommentaryNode;49;-1945.846,-218.7495;Inherit;False;1420.37;674.8312;CommentmosaicUV;13;40;17;14;33;43;30;26;12;37;11;10;13;34;mosaicUV;1,1,1,1;0;0
Node;AmplifyShaderEditor.RegisterLocalVarNode;38;-2315.644,-787.2075;Inherit;False;mainUV;-1;True;1;0;FLOAT2;0,0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.GetLocalVarNode;33;-1895.846,-10.44408;Inherit;False;31;mosaic;1;0;OBJECT;;False;1;FLOAT;0
Node;AmplifyShaderEditor.GetLocalVarNode;34;-1862.571,187.9045;Inherit;False;31;mosaic;1;0;OBJECT;;False;1;FLOAT;0
Node;AmplifyShaderEditor.GetLocalVarNode;40;-1877.545,-151.7495;Inherit;False;38;mainUV;1;0;OBJECT;;False;1;FLOAT2;0
Node;AmplifyShaderEditor.SimpleDivideOpNode;17;-1734.671,-76.62849;Inherit;True;2;0;FLOAT;0;False;1;FLOAT;510;False;1;FLOAT;0
Node;AmplifyShaderEditor.CommentaryNode;46;-2670.603,-490.6985;Inherit;False;694.2064;304;mosaicStep;3;32;28;35;mosaicStep;1,1,1,1;0;0
Node;AmplifyShaderEditor.SimpleAddOpNode;14;-1546.357,-106.6868;Inherit;False;2;2;0;FLOAT2;0,0;False;1;FLOAT;0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.SimpleDivideOpNode;13;-1668.911,176.7558;Inherit;True;2;0;FLOAT;256;False;1;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.GetLocalVarNode;32;-2620.603,-417.2126;Inherit;False;31;mosaic;1;0;OBJECT;;False;1;FLOAT;0
Node;AmplifyShaderEditor.StepOpNode;28;-2417.488,-440.6985;Inherit;True;2;0;FLOAT;0.01;False;1;FLOAT;0.01;False;1;FLOAT;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;10;-1384.497,-50.64218;Inherit;False;2;2;0;FLOAT2;0,0;False;1;FLOAT;0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.CommentaryNode;48;-1858.511,-680.6942;Inherit;False;998.7271;391.8005;commonUV;5;25;39;24;36;41;commonUV;1,1,1,1;0;0
Node;AmplifyShaderEditor.FloorOpNode;11;-1252.421,-27.28818;Inherit;False;1;0;FLOAT2;0,0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.RegisterLocalVarNode;35;-2200.396,-368.6219;Inherit;False;mosaicStep;-1;True;1;0;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.GetLocalVarNode;37;-1439.824,247.6174;Inherit;False;35;mosaicStep;1;0;OBJECT;;False;1;FLOAT;0
Node;AmplifyShaderEditor.SimpleDivideOpNode;12;-1304.3,115.7625;Inherit;False;2;0;FLOAT2;0,0;False;1;FLOAT;0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.GetLocalVarNode;36;-1808.511,-404.8937;Inherit;False;35;mosaicStep;1;0;OBJECT;;False;1;FLOAT;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;26;-1153.535,104.2957;Inherit;True;2;2;0;FLOAT2;0,0;False;1;FLOAT;0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.OneMinusNode;25;-1605.699,-462.2919;Inherit;False;1;0;FLOAT;0;False;1;FLOAT;0
Node;AmplifyShaderEditor.GetLocalVarNode;39;-1665.845,-630.6942;Inherit;False;38;mainUV;1;0;OBJECT;;False;1;FLOAT2;0
Node;AmplifyShaderEditor.SaturateNode;30;-942.7899,106.7188;Inherit;False;1;0;FLOAT2;0,0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;24;-1432.036,-557.4781;Inherit;True;2;2;0;FLOAT2;0,0;False;1;FLOAT;0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.RegisterLocalVarNode;41;-1083.784,-522.0004;Inherit;False;commonUV;-1;True;1;0;FLOAT2;0,0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.RegisterLocalVarNode;43;-782.6457,90.67676;Inherit;False;mosaicUV;-1;True;1;0;FLOAT2;0,0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.GetLocalVarNode;44;-517.429,-397.5422;Inherit;False;43;mosaicUV;1;0;OBJECT;;False;1;FLOAT2;0
Node;AmplifyShaderEditor.GetLocalVarNode;42;-549.429,-557.5424;Inherit;False;41;commonUV;1;0;OBJECT;;False;1;FLOAT2;0
Node;AmplifyShaderEditor.SimpleAddOpNode;29;-277.429,-557.5424;Inherit;True;2;2;0;FLOAT2;0,0;False;1;FLOAT2;0,0;False;1;FLOAT2;0
Node;AmplifyShaderEditor.TexturePropertyNode;1;-453.429,-797.5424;Inherit;True;Property;_MainTex;MainTex;0;0;Create;True;0;0;False;0;False;None;bf7546efface0f7418e69d9340cb7ffe;False;white;Auto;Texture2D;-1;0;2;SAMPLER2D;0;SAMPLERSTATE;1
Node;AmplifyShaderEditor.SamplerNode;2;-37.42896,-749.5424;Inherit;True;Property;_TextureSample0;Texture Sample 0;1;0;Create;True;0;0;False;0;False;-1;None;None;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.TemplateMultiPassMasterNode;20;410.571,-733.5424;Float;False;True;-1;2;ASEMaterialInspector;100;1;msk;0770190933193b94aaa3065e307002fa;True;Unlit;0;0;Unlit;2;True;0;1;False;-1;0;False;-1;0;1;False;-1;0;False;-1;True;0;False;-1;0;False;-1;False;False;False;False;False;False;True;0;False;-1;True;0;False;-1;True;True;True;True;True;0;False;-1;False;False;False;True;False;255;False;-1;255;False;-1;255;False;-1;7;False;-1;1;False;-1;1;False;-1;1;False;-1;7;False;-1;1;False;-1;1;False;-1;1;False;-1;True;1;False;-1;True;3;False;-1;True;True;0;False;-1;0;False;-1;True;1;RenderType=Opaque=RenderType;True;2;0;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;True;1;LightMode=ForwardBase;False;0;;0;0;Standard;1;Vertex Position,InvertActionOnDeselection;1;0;1;True;False;;False;0
WireConnection;31;0;5;0
WireConnection;38;0;3;0
WireConnection;17;0;33;0
WireConnection;14;0;40;0
WireConnection;14;1;17;0
WireConnection;13;1;34;0
WireConnection;28;1;32;0
WireConnection;10;0;14;0
WireConnection;10;1;13;0
WireConnection;11;0;10;0
WireConnection;35;0;28;0
WireConnection;12;0;11;0
WireConnection;12;1;13;0
WireConnection;26;0;12;0
WireConnection;26;1;37;0
WireConnection;25;0;36;0
WireConnection;30;0;26;0
WireConnection;24;0;39;0
WireConnection;24;1;25;0
WireConnection;41;0;24;0
WireConnection;43;0;30;0
WireConnection;29;0;42;0
WireConnection;29;1;44;0
WireConnection;2;0;1;0
WireConnection;2;1;29;0
WireConnection;20;0;2;0
ASEEND*/
//CHKSM=798A82A66ABBD12CB9AD89632DE1513DF1F1324E

二、3D版本的马赛克效果

  怒之铁拳里面还有一种马赛克效果,它不是转场,而是整个画面保持在马赛克的状态,然后玩家可以在马赛克的画面中正常游戏。我思考了一下,用一个3D的场景来简单模拟一下:

钢铁侠马赛克

很明显,如果要整个画面变成马赛克,那么把刚才的材质球,通过屏幕后处理的方式来绘制就可以了。
在这里插入图片描述

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class MSKScreen : MonoBehaviour
{private Material colorMat;[Range(0.1f, 2)]public float val = 0.1f;// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}private void OnRenderImage(RenderTexture source, RenderTexture destination){Mosaic(source, destination);}private void Mosaic(RenderTexture source, RenderTexture destination){if (colorMat == null){colorMat = new Material(Shader.Find("msk"));}if (colorMat == null || colorMat.shader == null || colorMat.shader.isSupported == false){return;}colorMat.SetFloat("_mosaic", val);Graphics.Blit(source, destination, colorMat, 0);return;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/275283.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2024-03-12】设计模式之模板模式的理解

实际应用场景:制作月饼 过程描述: 一开始,由人工制作月饼, 第一个:根据脑子里面月饼的形状,先涅出月饼的形状,然后放入面粉和馅料把开口合并起来。 第二个:根据脑子里面月饼的形状&…

Ajax (1)

什么是Ajax&#xff1a; 浏览器与服务器进行数据通讯的技术&#xff0c;动态数据交互 axios库地址&#xff1a; <script src"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 如何使用呢&#xff1f; 我们现有个感性的认识 <scr…

GSEA -- 学习记录

文章目录 brief统计学原理部分其他注意事项转录组部分单细胞部分 brief 上一篇学习记录写了ORA&#xff0c;其中ORA方法只关心差异表达基因而不关心其上调、下调的方向&#xff0c;也许同一条通路里既有显著高表达的基因&#xff0c;也有显著低表达的基因&#xff0c;因此最后…

基于LSTM实现春联上联对下联

按照阿光的项目做出了学习笔记&#xff0c;pytorch深度学习实战项目100例 基于LSTM实现春联上联对下联 基于LSTM&#xff08;长短期记忆网络&#xff09;实现春联上联对下联是一种有趣且具有挑战性的任务&#xff0c;它涉及到自然语言处理&#xff08;NLP&#xff09;中的序列…

Stable diffusion(一)

Stable diffusion 原理解读 名词解释 正向扩散&#xff08;Fixed Forward Diffusion Process&#xff09;&#xff1a;反向扩散&#xff08;Generative Reverse Denoising Process&#xff09; VAE&#xff08;Variational AutoEncoder&#xff09;&#xff1a;一个用于压缩图…

Mysql/Redis缓存一致性

如何保证MySQL和Redis的缓存一致。从理论到实战。总结6种来感受一下。 理论知识 不好的方案 1.先写MySQL&#xff0c;再写Redis 图解说明: 这是一幅时序图&#xff0c;描述请求的先后调用顺序&#xff1b; 黄色的线是请求A&#xff0c;黑色的线是请求B&#xff1b; 黄色的…

智慧城市与绿色出行:共同迈向低碳未来

随着城市化进程的加速&#xff0c;交通拥堵、空气污染、能源消耗等问题日益凸显&#xff0c;智慧城市与绿色出行成为了解决这些问题的关键途径。智慧城市利用信息技术手段&#xff0c;实现城市各领域的智能化管理和服务&#xff0c;而绿色出行则强调低碳、环保的出行方式&#…

LInux系统架构----Nginx模块rewrite的规则与应用场景

LInux系统架构----Nginx模块rewrite的规则与应用场景 一.rewrite跳转实现 Nginx实现跳转通过ngx_http_rewrite_module模块支持URL重写、支持if条件判断&#xff0c;但是不支持else跳转时&#xff0c;循环最多可以执行10次&#xff0c;超过后nginx将返回500错误注&#xff1a;…

STM32 | STM32F407ZE中断、按键、灯(续第三天)

上节回顾 STM32 | 库函数与寄存器开发区别及LED等和按键源码(第三天)一、 中断 中断概念 中断是指计算机运行过程中,出现某些意外情况需主机干预时,机器能自动停止正在运行的程序并转入处理新情况的程序,处理完毕后又返回原被暂停的程序继续运行(面试题)。 STM32外部中断…

【设计模式】设计原则和常见的23种经典设计模式

设计模式 1. 设计原则&#xff08;记忆口诀&#xff1a;SOLID&#xff09;【记忆口诀&#xff1a;单开里依接迪合&#xff08;单开礼仪接地和&#xff09;】 &#xff08;1&#xff09;单一职责原则&#xff08;Single Responsibility Principle, SRP&#xff09; &#xff…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的常见手势识别系统(深度学习模型+UI界面代码+训练数据集)

摘要&#xff1a;开发手势识别系统对于增强人机交互和智能家居控制领域的体验非常关键。本博客详尽阐述了通过深度学习技术构建手势识别系统的过程&#xff0c;并附上了全套实施代码。系统采用了先进的YOLOv8算法&#xff0c;并通过与YOLOv7、YOLOv6、YOLOv5的性能对比&#xf…

Kafka 面试题及答案整理,最新面试题

Kafka中的Producer API是如何工作的&#xff1f; Kafka中的Producer API允许应用程序发布一流的数据到一个或多个Kafka主题。它的工作原理包括&#xff1a; 1、创建Producer实例&#xff1a; 通过配置Producer的各种属性&#xff08;如服务器地址、序列化方式等&#xff09;来…

个人博客系统(测试报告)

一、项目背景 一个Web网站程序&#xff0c;你可以观看到其他用户博客也可以登录自己的账号发布博客&#xff0c;通过使用Selenium定位web元素、操作测试对象等方法来对个人博客系统的进行测试&#xff0c;测试的核心内容有用户登录、博客列表及博客数量的展示、查看全文、写博客…

liteIDE 解决go root报错 go: cannot find GOROOT directory: c:\go

liteIDE环境配置 我使用的liteIDE为 x36 5.9.5版本 。在查看–>选项 中可以看到 LiteEnv&#xff0c;双击LiteEnv &#xff0c;在右侧选择对应系统的env文件&#xff0c;我的是win64系统&#xff0c;所以文件名为win64.env 再双击 win64.env &#xff0c;关闭当前窗口&…

Linux内核编译(版本6.0以及版本v0.01)并用qemu驱动

系统环境&#xff1a; ubuntu-22.04.1-desktop-amd64 目标平台: x86 i386 内核版本: linux-6.0.1 linux-0.0.1 环境配置 修改root密码 sudo passwd 修改软件源&#xff08;非必要&#xff09; vmtools安装&#xff08;实现win-linux软件互传&#xff09; 安装一些必须的软件&…

DevOps本地搭建笔记(个人开发适用)

需求和背景 win11 wsl2 armbian(玩客云矿渣&#xff09;&#xff0c;构建个人cicd流水线&#xff0c;提高迭代效率。 具体步骤 基础设施准备 硬件准备&#xff1a;一台笔记本&#xff0c;用于开发和构建部署&#xff0c;一台服务器&#xff0c;用于日常服务运行。 笔记本…

Celery知识

celery介绍 # celery 的概念&#xff1a; * 翻译过来是芹菜 * 官网&#xff1a;https://docs.celeryq.dev/en/stable/ # 是分布式的异步任务框架&#xff1a; 分布式&#xff1a;一个任务&#xff0c;拆成多个任务在不同机器上做 异步任务&#xff1a;后台执行…

【Greenhills】MULTIIDE集成第三方的编辑器进行源文件编辑工作

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 在使用GHS进行工作的时候&#xff0c;可以集成第三方的编辑器进行源文件编辑工作 2、 问题场景 用于解决在GHS中进行项目开发时&#xff0c;对于GHS的编辑器使用不习惯&#xff0c;想要切换到其他第三方的编辑…

漏洞发现-漏扫项目篇武装BURP浏览器插件信息收集分析辅助

知识点 1、插件类-武装BurpSuite-漏洞检测&分析辅助 2、插件类-武装谷歌浏览器-信息收集&情报辅助 章节点&#xff1a; 漏洞发现-Web&框架组件&中间件&APP&小程序&系统 扫描项目-综合漏扫&特征漏扫&被动漏扫&联动漏扫 Poc开发-Ymal语…

Qt QDateTime类使用

一.Qt datetime 介绍 Qt中的QDateTime类是用于处理日期和时间的组合的类&#xff0c;它提供了丰富的功能来操作和格式化日期时间数据。以下是其主要特点和用法&#xff1a; 构造函数&#xff1a;QDateTime可以通过组合QDate&#xff08;日期&#xff09;和QTime&#xff08;时…