【旧博客转移 - 2016年1月13日 13:18 】

前面的话:

本来我是想写一个水的原理的,但是发现涉及的知识太多,还有好多不懂的,所以就先一步一步来
最近呢,我在网上捡到了一本《热扭曲秘籍》,修炼数日,甚觉精妙
这次分享一个很简单的热扭曲原理
 

先看效果:

1.这是原图
 
2.加了特效之后~显得很亮,很柔..

3.这个神秘的图,才是效果的关键

 

扰动图:

扰动图其实是把offset信息写入到R,G通道中的图片
下面我们拿一个“照妖镜”随便找一个像素看一下它的真面目
 
可以看到像素值为#946A00, R通道94,G通道6A,而B通道没有值,是00,因为这里暂时用不到B
float4 disTex = tex2D(_DistortionMap, i.uv);
float2 offsetUV = float2(disTex.r, disTex.g);
通过tex2D采样,就可以取出扰动偏移量了
 
但是呢,颜色值是【0到1】,而扰动向量的值是【-1到1】
所以还需要转换一下
offsetUV = (offsetUV-0.5)*;

改变原图

float4 bgTex = tex2D(_Background, i.uv + offsetUV);
直接加上uv偏移量就行了
 

总结

看到这里,你已经掌握了扭曲图片的基本原理,没错就是这么简单~
偏移uv坐标,把偏移信息生成到一张图片中,就叫扰动图
 
热扭曲秘籍:链接:http://pan.baidu.com/s/1jH1nMqq 密码:zxfb

本文源码

Shader "lijia/Refractor1" {

    Properties {
_Background ("Background", 2D) = "" {} //背景纹理
_BackgroundScrollX ("X Offset", float) = //背景偏移
_BackgroundScrollY ("Y Offset", float) =
_BackgroundScaleX ("X Scale", float) = 1.0 //背景缩放
_BackgroundScaleY ("Y Scale", float) = 1.0
_Refraction ("Refraction", float) = 1.0 //折射值
_DistortionMap ("Distortion Map", 2D) = "" {} //扭曲
_DistortionScrollX ("X Offset", float) =
_DistortionScrollY ("Y Offset", float) =
_DistortionScaleX ("X Scale", float) = 1.0
_DistortionScaleY ("Y Scale", float) = 1.0
_DistortionPower ("Distortion Power", float) = 0.08
} SubShader {
Tags {"Queue" = "Geometry" "RenderType" = "Opaque"} Pass { Cull Off
ZTest LEqual
ZWrite On
AlphaTest Off
Lighting Off
ColorMask RGBA
Blend Off CGPROGRAM
#pragma target 2.0
#pragma fragment frag
#pragma vertex vert
#include "UnityCG.cginc" uniform sampler2D _Background;
uniform sampler2D _DistortionMap;
uniform float _BackgroundScrollX;
uniform float _BackgroundScrollY;
uniform float _DistortionScrollX;
uniform float _DistortionScrollY;
uniform float _DistortionPower;
uniform float _BackgroundScaleX;
uniform float _BackgroundScaleY;
uniform float _DistortionScaleX;
uniform float _DistortionScaleY;
uniform float _Refraction; struct AppData {
float4 vertex : POSITION;
half2 texcoord : TEXCOORD0;
}; struct VertexToFragment {
float4 pos : POSITION;
half2 uv : TEXCOORD0;
}; VertexToFragment vert(AppData v) {
VertexToFragment o;
o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
o.uv = v.texcoord.xy;
return o;
} fixed4 frag(VertexToFragment i) : COLOR {
float2 bgOffset = float2(_BackgroundScrollX,_BackgroundScrollY);
float2 disOffset = float2(_DistortionScrollX,_DistortionScrollY);
float2 disScale = float2(_DistortionScaleX,_DistortionScaleY);
float2 bgScale = float2(_BackgroundScaleX,_BackgroundScaleY); float4 disTex = tex2D(_DistortionMap, disScale * i.uv+disOffset); float2 offsetUV = (-_Refraction*(disTex * _DistortionPower - (_DistortionPower*0.5))); return tex2D(_Background, bgScale * i.uv + bgOffset + offsetUV);
} ENDCG
}
}
}

Unity3D-Shader-热扭曲效果的更多相关文章

  1. Unity3D Shader图像扭曲过场效果

    把脚本挂在摄像机上 using UnityEngine; using System.Collections; [RequireComponent(typeof(Camera))] public cla ...

  2. Unity3D Shader 空气扭动效果

    //预览图 //原理 一个摄像机CullingMask设置只可见"Distortion"的Layer(需要自己手动加),输入到一张RenderTexture,其实就是用于确定哪里要 ...

  3. unity shader 热扭曲 (屏幕后处理)

      效果: c# using System; using System.Collections; using System.Collections.Generic; using UnityEngine ...

  4. Unity3D Shader 马赛克后期效果

    //效果图 //Shader代码 Shader "Hidden/Mosaic" { Properties { _MainTex ("Texture", 2D) ...

  5. Unity3D Shader 模型流光效果

    Shader "Custom/FlowColor" { Properties { _MainTex ("Base (RGB)", 2D) = "whi ...

  6. (转)热空气扭曲效果shader

    转自:http://blog.sina.com.cn/s/blog_89d90b7c0102vaqy.html 热空气扭曲在大自然中形成是比较复杂的,这里只是通过取屏幕纹理和移动UV来模拟热扭曲效果. ...

  7. unity3D 涂涂乐使用shader实现上色效果

    unity3D 涂涂乐使用shader实现上色效果 之前我博文里面发过一个简单的通过截图方式来实现的模型上色方法,但是那个方法不合适商用,因为你需要对的很准确才可以把贴图完美截取下来,只要你手抖了一下 ...

  8. 【译】Unity3D Shader 新手教程(1/6)

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 刚开始接触Unity3D Shader编程时,你会发现有关shader的文档相当散,这也造成初学者对Unity3D ...

  9. Shader实例:扭曲,漩涡

    效果: 案例:新仙剑,王者之剑. 在切换场景的时候,就会有这样的全屏扭曲效果. 思路: 1.用GrabPass抓屏到一张纹理中. 2.进行扭曲,绘制到UGUI的Image上. 准备: 去官网下载Uni ...

随机推荐

  1. Unity应用架构设计(10)——绕不开的协程和多线程(Part 2)

    在上一回合谈到,客户端应用程序的所有操作都在主线程上进行,所以一些比较耗时的操作可以在异步线程上去进行,充分利用CPU的性能来达到程序的最佳性能.对于Unity而言,又提供了另外一种『异步』的概念,就 ...

  2. R语言:利用caret包中的dummyVars函数进行虚拟变量处理

    dummyVars函数:dummyVars creates a full set of dummy variables (i.e. less than full rank parameterizati ...

  3. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

  4. mysql之 binlog维护详细解析(开启、binlog相关参数作用、mysqlbinlog解读、binlog删除)

    binary log 作用:主要实现三个重要的功能:用于复制,用于恢复,用于审计.binary log 相关参数:log_bin设置此参数表示启用binlog功能,并指定路径名称log_bin_ind ...

  5. 设置Intellij IDEA 提示出未保存的*星号

    IDEA实乃是java开发的神器,然而从eclipse或者MyEclipse转过来的开发每写完一行代码总是习惯的按下ctrl+s,然而IDEA代码编辑器的上方并没有提示未保存的*星号,提示星星,所以觉 ...

  6. Javascript事件模型(二):Javascript事件的父元素和子元素

    DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...

  7. cef3和duilib简单仿有道词典学习

    由于最近换工作的原因,也没啥事,就简单学习了一下cef3和duilib,楼主之前是做MFC框架下的windows开发的,对界面库和新的客户端开发模式也有所了解,现在的大部分客户端都是基本的客户端框架下 ...

  8. 使用jedis实现Redis消息队列(MQ)的发布(publish)和消息监听(subscribe)

    前言: 本文基于jedis 2.9.0.jar.commons-pool2-2.4.2.jar以及json-20160810.jar 其中jedis连接池需要依赖commons-pool2包,json ...

  9. Spring学习(19)--- Schema-based AOP(基于配置的AOP实现) --- 配置切面aspect

    Spring所有的切面和通知器都必须放在一个<aop:config>内(可以配置包含多个<aop:config>元素),每个<aop:config>包含pointc ...

  10. JS中函数参数值传递和引用传递

    也许大家对于函数的参数都不会太在意,简单来说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.深入研究,你会发现其实没那么简单,这个传参是要分俩种情况(其实这是个错误的说法 ...