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.mzph.cn/news/740363.shtml

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

相关文章

spring boot使用mybatisplus访问mysql的配置流程

网上教程大多教人新建一个带对应组件的项目,本文记录如何在一个已有springboot2.x项目中,配置使用mybatisplus来访问mysql。包括使用wrapper和自己写mapper.xml的自定义函数两种和数据库交互的方式。 关于项目的创建,参考创建springboot 2.x…

Shell正则表达式

目录 正则表达式的分类 基本组成部分 POSIX字符类 元字符 正则表达式的分类 基本的正则表达式(Basic Regular Expression 又叫Basic RegEx 简称BREs)扩展的正则表达式(Extended Regular Expression 又叫Extended RegEx 简称EREs&#xf…

【QT+QGIS跨平台编译】之七十二:【QGIS_Analysis跨平台编译】—【qgis_analysis.h生成】

文章目录 一、qgis_analysis.h介绍二、信息分析三、qgis_analysis.h生成一、qgis_analysis.h介绍 qgis_analysis.h 是 QGIS(Quantum GIS)软件中的一个头文件,主要用于服务于QGIS_Analysis库的编译,包含导入、导出宏信息的定义。 二、信息分析 在qgis\src\analysis目录,CM…

pytest生成allure的报告

首先要下载安装配置allure allure serve ./outputs/allure_report 可以生成html的文件自动在默认浏览器中打开

Oceanbase使用BenchmarkSQL 进行tpcc测试及执行计划查询

Oceanbase使用BenchmarkSQL 进行tpcc测试及执行计划查询 文章目录 Oceanbase使用BenchmarkSQL 进行tpcc测试及执行计划查询环境介绍配置BenchmarkSQL开始BenchmarkSQL测试查看执行计划查询top sql查看执行计划 总结参考文档 环境介绍 操作系统:redhat7.9 内核版本…

unity3d Animal Controller的动物组件使用明天继续

控制器介绍 动物脚本负责控制动物的所有运动逻辑.它管理所有的动画师和刚体参数,以及所有的状态和模式,动物可以做。 动物控制器 是一个动画框架控制器,根动或到位,为任何生物或人形。它利用刚体与物理世界的互动和动画师的玩动画。 States States 是不互相重叠的动画。例如…

牛角表情生成器微信小程序版

1.纯前端输出,无需后台,无需域名,速度杠杠快! 2.完美支持微信端和抖音端; 3.双端均支持配置开启流量主广告,包括:激励视频广告、插屏广告、banner广告、原生广告、封面广告等; 4.…

Codeforces Round 933 (Div. 3) A~D

比赛链接 : codeforces.com/contest/1941 A . Rudolf and the Ticket 直接暴力即可 ; #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \n #define lowbit(x) (x&(-x)) #define sz(a) (int)a.size() #define p…

最好用的流程编辑器bpmn-js系列之基本使用

BPMN&#xff08;Business Process Modeling Notation&#xff09;是由业务流程管理倡议组织BPMI&#xff08;The Business Process Management Initiative&#xff09;开发的一套标准的业务流程建模符号规范。其目的是为用户提供一套容易理解的标准符号&#xff0c;这些符号作…

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

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

前端之用html做一个用户登陆界面

用户登陆界面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>用户注册页面</title></head> <body><form action"https://www.baidu.com" method"post">…

关于Node 中间件教程

在Node.js中&#xff0c;中间件是一种非常重要的概念&#xff0c;用于处理HTTP请求。中间件允许您在请求到达目标路由之前或之后执行某些功能。本教程旨在帮助您理解和使用Node.js中的中间件。 什么是中间件&#xff1f; 中间件是一个函数&#xff0c;可访问请求对象&#xf…

2023年全国职业院校技能大赛信息安全管理与评估

信息安全管理与评估三阶段理论 【注意事项】 1.理论测试前请仔细阅读测试系统使用说明文档&#xff0c;按提供的账号和密码登录测试系统进行测试&#xff0c;账号只限1人登录。 2.该部分答题时长包含在第三阶段比赛时长内&#xff0c;请在临近竞赛结束前提交。 3.参赛团队可…

数据库系统概念(第二周 第一堂)

前言 本文的所有知识点、图片均来自《数据库系统概念》&#xff08;黑宝书&#xff09;、山东大学李晖老师PPT。不可用于商业用途转发。 回顾 上周最后一个知识点说到数据库三级模式结构&#xff0c;在这个结构里面我们设立了模式/内模式映像、内模式/外模式映像&#xff0c;主…

闲聊Swift的枚举关联值

闲聊Swift的枚举关联值 枚举&#xff0c;字面上理解&#xff0c;就是把东西一件件列出来。 在许多计算机语言中&#xff0c;枚举都是一种重要的数据结构。使用枚举可以使代码更简洁&#xff0c;语义性更强&#xff0c;更加健壮。 Swift语言也不例外。但和其他语言相比&#xf…

docker搭建upload-labs

Upload-labs 是一个专门设计用于学习和练习文件上传安全的开源工具。它提供了各种场景的文件上传漏洞&#xff0c;供用户通过实践来学习如何发现和利用这些漏洞&#xff0c;同时也能学习到防御措施。使用 Docker 来搭建 upload-labs 环境是一种快速、简便的方法&#xff0c;它可…

[Django 0-1] Core.Cache模块

Caching 源码分析 Django 的 cache 缓存机制&#xff0c;包含了一些代理设计模式(代理了但没完全代理&#xff0c;多此一举)。 通过实现一个CacheHandler的manager类&#xff0c;来实现多缓存后端的统一管理和调用&#xff0c;避免到处实例使用。 缓存的目的 缓存的目的就是…

大华智慧园区综合管理平台 getNewStaypointDetailQuery SQL注入漏洞复现

0x01 产品简介 “大华智慧园区综合管理平台”是一款综合管理平台,具备园区运营、资源调配和智能服务等功能。平台意在协助优化园区资源分配,满足多元化的管理需求,同时通过提供智能服务,增强使用体验。 0x02 漏洞概述 由于大华智慧园区综合管理平台getNewStaypointDetai…

服务器被大流量攻击怎么办?如何防御攻击?

随着网络的发展&#xff0c;我们所遇到的安全挑战也越来越多。尤其是近年来&#xff0c;网络攻击频发&#xff0c;许多互联网企业深受其扰。为了不影响自身业务的稳定运行&#xff0c;许多企业都在想方设法的寻求解决方案&#xff0c;防止服务器被攻击而影响业务发展。下面我们…

开源模型应用落地-安全合规篇(二)

一、前言 在前面的“业务优化篇系列文章”的学习中,我们学会了如何使用线程池、Redis和向量数据库等工具。现在,我们要加快学习的速度。一方面,我们会继续改进AI服务的性能瓶颈,另一方面,我们还要学习如何进行合规操作。 接下来,我们将学习如何使用腾讯云的内容安全审核来…