unityShader热空气扭曲效果
本文转载自http://blog.csdn.net/puppet_master/article/details/70199330?locationNum=2&fps=1
简介
实现原理
GrabPass
//Grabpass shader
//by: puppet_master
//2017.4.23
Shader "ApcShader/GrabPass"
{SubShader{ZWrite Off//GrabPassGrabPass{//此处给出一个抓屏贴图的名称,抓屏的贴图就可以通过这张贴图来获取,而且每一帧不管有多个物体使用了该shader,只会有一个进行抓屏操作//如果此处为空,则默认抓屏到_GrabTexture中,但是据说每个用了这个shader的都会进行一次抓屏!"_GrabTempTex"}Pass{Tags{ "RenderType" = "Transparent""Queue" = "Transparent+1"}CGPROGRAMsampler2D _GrabTempTex;float4 _GrabTempTex_ST;#include "UnityCG.cginc"struct v2f{float4 pos : SV_POSITION;float4 grabPos : TEXCOORD0;};v2f vert(appdata_base v){v2f o;o.pos = mul(UNITY_MATRIX_MVP, v.vertex);//计算抓屏的位置,其中主要是将坐标从(-1,1)转化到(0,1)空间并处理DX和GL纹理反向的问题o.grabPos = ComputeGrabScreenPos(o.pos);return o;}fixed4 frag(v2f i) : SV_Target{//根据抓屏位置采样Grab贴图,tex2Dproj等同于tex2D(grabPos.xy / grabPos.w)fixed4 color = tex2Dproj(_GrabTempTex, i.grabPos);return 1 - color;}#pragma vertex vert#pragma fragment fragENDCG}}
}
我们找个面片,附上这个shader的材质。为了更方便的看一下效果,我们就参照官网的写法,直接将最终输出的颜色反向,也就是1-原颜色作为输出(这个颜色不禁让我想起了宇智波鼬的月读……..)
inline float4 ComputeGrabScreenPos (float4 pos) { #if UNITY_UV_STARTS_AT_TOP float scale = -1.0; #else float scale = 1.0; #endif float4 o = pos * 0.5f; o.xy = float2(o.x, o.y*scale) + o.w;
#ifdef UNITY_SINGLE_PASS_STEREO o.xy = TransformStereoScreenSpaceTex(o.xy, pos.w); #endif o.zw = pos.zw; return o; }我们传递进来的参数是经过mvp变换后的顶点坐标,传入之后这个函数主要做了两件事情,第一个是处理DX和OpenGL纹理坐标差异导致的问题,这个 之前的文章有记录过。第二件事主要就是将转化到标准裁剪空间(-1,1)区间的顶点转化到(0,1)区间。按照Unity的写法,本人推测,这个GrabPass获取的屏幕贴图应该是基于视空间的,而在这个信息传递到fragment shader后,用了tex2Dproj函数进行采样,tex2Dproj(i.xy)应该等同于tex2D(i.xy/i.w),也就是说这个采样点坐标进行了一次投影变换。
扭曲效果的实现
fixed4 frag(v2f i) : SV_Target{i.grabPos.x += _DistortStrength * sin(_Time.y * 10);i.grabPos.y += _DistortStrength * sin(_Time.y);fixed4 color = tex2Dproj(_GrabTempTex, i.grabPos);return 1 - color;}
那么所有的顶点就都会按照一致的方向进行偏移:
//Distort shader
//by: puppet_master
//2017.4.24
Shader "ApcShader/Distort"
{Properties{_DistortStrength("DistortStrength", Range(0,1)) = 0.2_DistortTimeFactor("DistortTimeFactor", Range(0,1)) = 1_NoiseTex("NoiseTexture", 2D) = "white" {}}SubShader{ZWrite OffCull Off//GrabPassGrabPass{//此处给出一个抓屏贴图的名称,抓屏的贴图就可以通过这张贴图来获取,而且每一帧不管有多个物体使用了该shader,只会有一个进行抓屏操作//如果此处为空,则默认抓屏到_GrabTexture中,但是据说每个用了这个shader的都会进行一次抓屏!"_GrabTempTex"}Pass{Tags{ "RenderType" = "Transparent""Queue" = "Transparent + 100"}CGPROGRAMsampler2D _GrabTempTex;float4 _GrabTempTex_ST;sampler2D _NoiseTex;float4 _NoiseTex_ST;float _DistortStrength;float _DistortTimeFactor;#include "UnityCG.cginc"struct v2f{float4 pos : SV_POSITION;float2 uv : TEXCOORD0;float4 grabPos : TEXCOORD1;};v2f vert(appdata_base v){v2f o;o.pos = mul(UNITY_MATRIX_MVP, v.vertex);o.grabPos = ComputeGrabScreenPos(o.pos);o.uv = TRANSFORM_TEX(v.texcoord, _NoiseTex);return o;}fixed4 frag(v2f i) : SV_Target{//首先采样噪声图,采样的uv值随着时间连续变换,而输出一个噪声图中的随机值,乘以一个扭曲快慢系数float4 offset = tex2D(_NoiseTex, i.uv - _Time.xy * _DistortTimeFactor);//用采样的噪声图输出作为下次采样Grab图的偏移值,此处乘以一个扭曲力度的系数i.grabPos.xy -= offset.xy * _DistortStrength;//uv偏移后去采样贴图即可得到扭曲的效果fixed4 color = tex2Dproj(_GrabTempTex, i.grabPos);return color;}#pragma vertex vert#pragma fragment fragENDCG}}
}
基于后处理的优化效果
/********************************************************************FileName: DistortEffect.csDescription: 屏幕扭曲效果Created: 2017/04/27by: puppet_master
*********************************************************************/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class DistortEffect : PostEffectBase {//扭曲的时间系数[Range(0.0f, 1.0f)]public float DistortTimeFactor = 0.15f;//扭曲的强度[Range(0.0f, 0.2f)]public float DistortStrength = 0.01f;//噪声图public Texture NoiseTexture = null;public void OnRenderImage(RenderTexture source, RenderTexture destination){if (_Material){_Material.SetTexture("_NoiseTex", NoiseTexture);_Material.SetFloat("_DistortTimeFactor", DistortTimeFactor);_Material.SetFloat("_DistortStrength", DistortStrength);Graphics.Blit(source, destination, _Material);}else{Graphics.Blit(source, destination);}}
}
然后shader部分,扭曲的原理与上面一样,只是处理的对象变了一下,直接处理OnRenderImage传来的MainTex即可:
//全屏幕扭曲Shader
//by:puppet_master
//2017.4.28Shader "Custom/DistortPostEffect"
{Properties{_MainTex("Base (RGB)", 2D) = "white" {}_NoiseTex("Base (RGB)", 2D) = "black" {}//默认给黑色,也就是不会偏移}CGINCLUDE#include "UnityCG.cginc"uniform sampler2D _MainTex;uniform sampler2D _NoiseTex;uniform float _DistortTimeFactor;uniform float _DistortStrength;fixed4 frag(v2f_img i) : SV_Target{//根据时间改变采样噪声图获得随机的输出float4 noise = tex2D(_NoiseTex, i.uv - _Time.xy * _DistortTimeFactor);//以随机的输出*控制系数得到偏移值float2 offset = noise.xy * _DistortStrength;//像素采样时偏移offsetfloat2 uv = offset + i.uv;return tex2D(_MainTex, uv);}ENDCGSubShader{Pass{ZTest AlwaysCull OffZWrite OffFog{ Mode off }CGPROGRAM#pragma vertex vert_img#pragma fragment frag#pragma fragmentoption ARB_precision_hint_fastest ENDCG}}Fallback off
}
//Mask图生成shader
//by:puppet_master
//2017.5.3Shader "ApcShader/MaskObjPrepass"
{//子着色器 SubShader{Pass{ Cull OffCGPROGRAM#include "UnityCG.cginc"struct v2f{float4 pos : SV_POSITION;};v2f vert(appdata_full v){v2f o;o.pos = mul(UNITY_MATRIX_MVP, v.vertex);return o;}fixed4 frag(v2f i) : SV_Target{//这个Pass直接输出颜色return fixed4(1,1,1,1);}//使用vert函数和frag函数#pragma vertex vert#pragma fragment fragENDCG}}
}
/********************************************************************FileName: DistortEffect.csDescription: 屏幕扭曲效果Created: 2017/04/27by: puppet_master
*********************************************************************/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class DistortEffect : PostEffectBase {//扭曲的时间系数[Range(0.0f, 1.0f)]public float DistortTimeFactor = 0.15f;//扭曲的强度[Range(0.0f, 0.2f)]public float DistortStrength = 0.01f;//噪声图public Texture NoiseTexture = null;//渲染Mask图所用的shaderpublic Shader maskObjShader = null;//降采样系数public int downSample = 4;private Camera mainCam = null;private Camera additionalCam = null;private RenderTexture renderTexture = null;public void OnRenderImage(RenderTexture source, RenderTexture destination){if (_Material){_Material.SetTexture("_NoiseTex", NoiseTexture);_Material.SetFloat("_DistortTimeFactor", DistortTimeFactor);_Material.SetFloat("_DistortStrength", DistortStrength);_Material.SetTexture("_MaskTex", renderTexture);Graphics.Blit(source, destination, _Material);}else{Graphics.Blit(source, destination);}}void Awake(){//创建一个和当前相机一致的相机InitAdditionalCam();}private void InitAdditionalCam(){mainCam = GetComponent<Camera>();if (mainCam == null)return;Transform addCamTransform = transform.FindChild("additionalDistortCam");if (addCamTransform != null)DestroyImmediate(addCamTransform.gameObject);GameObject additionalCamObj = new GameObject("additionalDistortCam");additionalCam = additionalCamObj.AddComponent<Camera>();SetAdditionalCam();}private void SetAdditionalCam(){if (additionalCam){additionalCam.transform.parent = mainCam.transform;additionalCam.transform.localPosition = Vector3.zero;additionalCam.transform.localRotation = Quaternion.identity;additionalCam.transform.localScale = Vector3.one;additionalCam.farClipPlane = mainCam.farClipPlane;additionalCam.nearClipPlane = mainCam.nearClipPlane;additionalCam.fieldOfView = mainCam.fieldOfView;additionalCam.backgroundColor = Color.clear;additionalCam.clearFlags = CameraClearFlags.Color;additionalCam.cullingMask = 1 << LayerMask.NameToLayer("Distort");additionalCam.depth = -999;//分辨率可以低一些if (renderTexture == null)renderTexture = RenderTexture.GetTemporary(Screen.width >> downSample, Screen.height >> downSample, 0);}}void OnEnable(){SetAdditionalCam();additionalCam.enabled = true;}void OnDisable(){additionalCam.enabled = false;}void OnDestroy(){if (renderTexture){RenderTexture.ReleaseTemporary(renderTexture);}DestroyImmediate(additionalCam.gameObject);}//在真正渲染前的回调,此处渲染Mask遮罩图void OnPreRender(){//maskObjShader进行渲染if (additionalCam.enabled){additionalCam.targetTexture = renderTexture;additionalCam.RenderWithShader(maskObjShader, "");}}
}
还是上面的测试场景,我们将面片改为Distort层级,然后可以直接给这个面片设置一个透明的材质,比如最简单的粒子的shader,让它正常渲染不可见即可:
//全屏幕扭曲Shader
//by:puppet_master
//2017.5.3Shader "Custom/DistortPostEffect"
{Properties{_MainTex("Base (RGB)", 2D) = "white" {}_NoiseTex("Noise", 2D) = "black" {}//默认给黑色,也就是不会偏移_MaskTex("Mask", 2D) = "black" {}//默认给黑色,权重为0}CGINCLUDE#include "UnityCG.cginc"uniform sampler2D _MainTex;uniform sampler2D _NoiseTex;uniform sampler2D _MaskTex;uniform float _DistortTimeFactor;uniform float _DistortStrength;fixed4 frag(v2f_img i) : SV_Target{//根据时间改变采样噪声图获得随机的输出float4 noise = tex2D(_NoiseTex, i.uv - _Time.xy * _DistortTimeFactor);//以随机的输出*控制系数得到偏移值float2 offset = noise.xy * _DistortStrength;//采样Mask图获得权重信息fixed4 factor = tex2D(_MaskTex, i.uv);//像素采样时偏移offset,用Mask权重进行修改float2 uv = offset * factor.r + i.uv;return tex2D(_MainTex, uv);}ENDCGSubShader{Pass{ZTest AlwaysCull OffZWrite OffFog{ Mode off }CGPROGRAM#pragma vertex vert_img#pragma fragment frag#pragma fragmentoption ARB_precision_hint_fastest ENDCG}}Fallback off
}
扭曲效果动态图如下:
unityShader热空气扭曲效果相关推荐
- 10.热空气扭曲效果
Shader "Study/10_Distortion" {Properties{_NoiseTex("絮乱图", 2D) = "white" ...
- Unity Shader-热空气扭曲效果(多种实现方案,包括移动平台)
原文地址:https://blog.csdn.net/puppet_master/article/details/70199330 简介 千等万等终于等到了<耻辱2>打折,本以为可以爽一发 ...
- [UnityShader3]热扭曲效果
参考链接:http://blog.sina.com.cn/s/blog_89d90b7c0102vaqy.html 1.首先回顾一下透明度混合的实现.在片段着色器输出源颜色后,经过Blend后与目标颜 ...
- Python实现PS滤镜Fish lens图像扭曲效果示例
Python实现PS滤镜Fish lens图像扭曲效果 这篇文章主要介绍了Python实现PS滤镜Fish lens图像扭曲效果,结合实例形式分析了Python实现PS滤镜的图像扭曲效果相关操作技巧 ...
- android 下拉窗帘,Android 窗帘(Curtain)效果二之波浪式动态扭曲效果
上一篇文章已经实现了如何把一张图片扭曲成波浪效果,那么这一篇文章我们介绍如何动态调整系数,去改变波浪图片的皱褶成度.我们自一次观察下图morning routine的效果: 仔细观察我们发现,当往右滑 ...
- python 艺术照片滤镜_Python实现PS滤镜Fish lens图像扭曲效果示例
本文实例讲述了Python实现PS滤镜Fish lens图像扭曲效果.分享给大家供大家参考,具体如下: 这里实现 PS 滤镜中的一种几何变换– Fish lens, 对图像做扭曲,感觉就像通过一个凸镜 ...
- psql屏幕输出全部结果_CommandBuffer实现Distort屏幕扭曲效果
现在的游戏中很多特效都喜欢用到扭曲效果,常见的实现方案都是在Shader中使用GrabPass,来获取屏幕的画面然后去做计算.关于获取屏幕画面的几种方案的性能分析可以参考我上篇文章. idleworm ...
- 扭曲效果 效率优化 GrapPass,CommandBuffer对比
屏幕图像捕捉: Shader的GrabPass GrabPass可以很方便地捕获当前渲染时刻的FrameBuffer中的图像. 其原理就是从当前FrameBuffer中copy一份纹理,通过SetTe ...
- python 画三角形matli_Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
本文实例讲述了Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果.分享给大家供大家参考,具体如下: 这里用 Python 实现 PS 滤镜特效,Marble Filter, 这种滤 ...
最新文章
- MVP模式在Android实际项目中的应用和优化
- 如何做618数据复盘?你需要掌握这8大思路
- tensowflow 训练 远程提交_深度解析AutoML工具——NNI:带上超参一起训练
- 【树莓派】树莓派SD卡系统镜像系统备份方法
- 【Spring】Spring第一天 - 环境搭建、IoC 详解、DI 详解等
- MySQL查询数据字典_存储过程_函数_视图元数据_表元数据_触发器
- 如何使用Elasticsearch,Logstash和Kibana实时可视化Python中的日志
- 国外著名java技术资料网站
- Aspose.Cells Smart markers 基于模板导出Excel
- 英特尔预计第12代酷睿H系列处理器将有超过100款设备采用
- 在JAVA中把JSON数据格式化输出到控制台
- 中国开源激荡 20 年:IT 江湖,谁主沉浮?
- leetcode(二)—— Add Two Numbers(Python/C++)
- 20135337——信息安全设计基础第十四周学习笔记
- Cap01_信息化和信息系统
- 吴恩达机器学习课程笔记
- 皮克公式(格点多边形内点的个数)
- 海栎创原厂HAA9806和HAA9806-R连续10W输出功率的单声道音频功率放大器
- Android eclipse常见错误开发总结
- Vivado使用技巧(1):综合策略与设置的选择
热门文章
- 大漠沙盘sandboxie游戏多开易语言大漠后台绑定的实现
- Alcohol 120%刻录教程:制作镜像文件
- 论VI设计的基础部分和应用部分
- 斌酱归档---C语言实现Linux cp命令
- python科学计算库numpy和绘图库PIL的结合,素描图片(原创)
- mysql 无限层级传销_直销几个层级是传销
- 淘宝店铺如何找关键词、如何筛选关键词
- 看懂数据分析图表的十个基本方法(上)
- Springboot项目自动打包部署插件 (wagon-maven-plugin)
- vue路由无痕浏览nodeJS环境搭建ElementUI简介