Unity制作马赛克效果

news/2024/5/26 19:44:09/文章来源:https://blog.csdn.net/liweizhao/article/details/136666546

  大家好,我是阿赵。
  之前在玩怒之铁拳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.luyixian.cn/news_show_1005813.aspx

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

相关文章

C++STL【list链表】

list 1. list介绍 list文档(非官方) 官方文档list是双向带头循环链表,它可以在常数范围内的任意位置进行插入和删除操作。list的迭代器是双向迭代器(bidirectional iterator),它可以前后双向迭代。 由容器的底层结构决定&#xf…

添加路障-蓝桥杯-DFS

自己另辟蹊径想的新思路 果然好像还是不太行呀 import java.util.Scanner;public class Main {static int T;//样例组数static int n;//矩阵大小static int[] X {0,1,0,-1};static int[] Y {1,0,-1,0};static int[] X1 {1,0,-1,0};static int[] Y1 {0,-1,0,1};static int …

STM32FreeRTOS-事件组1(STM32Cube高效开发教程)

文章目录 一、事件组的原理和功能1、事件组与队列信号量特点2、事件组存储结构3、事件组运行原理 二、事件组部分函数1、xEventGroupCreate()创建事件组函数2、xEventGroupSetBits()事件组置位函数3、xEventGroupSetBitsFromISR()…

React进阶(Redux,RTK,dispatch,devtools)

1、初识Redux 是React最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行 作用:通过集中管理的方式管理应用的状态 案例-实现一个计数器 实现步骤: Redux管理数据的流程: state:一个对象&…

国科大网络行为学导论代码作业--更新中

一、Xray安装 参考自:Xray的安装与使用(超详细)_xray使用教程-CSDN博客 下载网址:Releases chaitin/xray GitHub 解压 双击安装 生成证书 cd到xray目录,生成证书 复制链接 然后cd到xray目录 .\xray_windows_amd6…

qt 格式化打印 日志 QMessagePattern 格式词法语法及设置

一、qt源码格式化日志 关键内部类 QMessagePattern qt为 格式化打印日志 提供了一个简易的 pattern(模式/格式) 词法解析的简易的内部类QMessagePattern,作用是获取和解析自定义的日志格式信息。 该类在qt的专门精心日志操作的源码文件Src\qtbase\src\corelib\global\qloggi…

代码学习记录13

随想录日记part13 t i m e : time: time: 2024.03.06 主要内容:今天的主要内容是二叉树的第二部分哦,主要有层序遍历;翻转二叉树;对称二叉树。 102.二叉树的层序遍历226.翻转二叉树101. 对称二叉…

生存预后不显著?最佳阈值来帮你!| 附完整代码 + 注释

大家在进行生存预后分析时发现结果不显著,是不是当头一棒!两眼一黑!难不成这就代表我们的研究没意义吗?NONONO!别慌!说不定还有救!快来看看最佳阈值能不能捞你一把! 对生存分析感兴趣…

docker容器镜像管理+compose容器编排(持续更新中)

目录 一、 Docker的基本组成 二、 容器和镜像的关系 2.1 面向对象角度 2.2 从镜像容器角度 三、 容器命令 3.1 使用Ubuntu 3.1.1 下载镜像 3.1.2 新建和启动容器 run 3.1.3交互式 compose编排与部署 1. docker-compose部署 2. docker-compose.yml模板 …

数学建模理论与实践国防科大版

目录 1.数学建模概论 2.生活中的数学建模 2.1.行走步长问题 2.2.雨中行走问题 2.3.抽奖策略 2.4.《非诚勿扰》女生的“最优选择” 3.集体决策模型 3.1.简单多数规则 3.2.Borda数规则 3.3.群体决策模型公理和阿罗定理 1.数学建模概论 1.数学模型的概念 2.数学建模的概…

win11家庭版docker和milvus

docker 1、官网下载docker文件Get Started | Docker,选择download for windows下载。 2、双击打开下载好的文件Docker Desktop Installer.exe,add shortcut to desktop选择√代表同意添加快捷键到桌面,如果不勾选就说明不创建快捷键&#x…

[HackMyVM]靶场 Run

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…

51单片机系列-单片机定时器

🌈个人主页:会编辑的果子君 💫个人格言:“成为自己未来的主人~” 软件延时的缺点 延时过程中,CPU时间被占用,无法进行其他任务,导致系统效率降低,延时时间越长,该缺点就越明显&…

详解Linux例行性工作

例行性工作(计划任务) 场景: 生活中,我们有太多场景需要使用到闹钟,比如早上7点起床,下午4点开会,晚上8点购物,等等。再Linux系统里,我们同样也有类似的需求。比如我们…

ChatGPT 串接到 Discord - 团队协作好助理

ChatGPT 串接到 Discord - 团队协作好助理 ChatGPT 是由 OpenAI 开发的一个强大的语言模型,本篇文章教你如何串接 Discord Bot ,协助团队在工作上更加高效并促进沟通与协作。使 ChatGPT 发挥出最大的功效,进一步提升工作效率和团队协作能力。…

短视频解析接口分发系统,附带系统搭建教程

搭建教程 宝塔面板:Nginx系统 php7.2 Mysql 5.6-5.7 伪静态Thinkphp 上传文件直接访问域名安装即可 解析接口推荐:ce.qsy.mobi 源码免费下载地址抄笔记

SpringAMQP创建交换机和队列

SpringAMQP提供的Exchange接口 一基于bean注解: 一.Fanout交换机 package com.itheima.consumer.config;import org.springframework.amqp.core.Binding; import org.springframework.amqp.core.BindingBuilder; import org.springframework.amqp.core.FanoutExchang…

汇编课设——秒表2

1. 设计要求 基于 51 开发板,利用键盘作为按键输入,将数码管作为显示输出,实现电子秒表。 功能要求: (1)计时精度达到百分之一秒; (2)能按键记录下5次时间并通过按键回看 (3)设置时间,实现倒计时,时间到,数码管闪烁 10 次,并激发蜂鸣器,可通过按键解除。 2. 设计思…

基于恒功率PQ控制的三电平并网逆变器MATLAB仿真模型

微❤关注“电气仔推送”获得资料(专享优惠) 模型简介 三相 T 型三电平逆变器电路如图所示,逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV,直流侧中点电位 O 设为零电位,交流侧输出侧是三相三线制连…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Select)

提供下拉选择菜单&#xff0c;可以让用户在多个选项之间选择。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Select(options: Array<SelectOption>) 参数&#xff1a;…