【旧博客转移 - 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. Linux系统下安装Mysql5.7.18教程收集分享

    本人最近服务器新手入门,需要搭建一个在linux虚拟机上的服务器 第一天再装虚拟机,选的linux系统CentOS,一切顺利. 第二天,要给虚拟机装Mysql,但是需要用到命令行进行安装/操作等,我是 ...

  2. Ubuntu上配置SQL Server Always On Availability Group(Configure Always On Availability Group for SQL Server on Ubuntu)

    下面简单介绍一下如何在Ubuntu上一步一步创建一个SQL Server AG(Always On Availability Group),以及配置过程中遇到的坑的填充方法. 目前在Linux上可以搭 ...

  3. 深入理解C#中的String

    关于C#中的类型 在C#中类型分为值类型和引用类型,引用类型和值类型都继承自System.Object类,几乎所有的引用类型都直接从System.Object继承,而值类型具体一点则继承System. ...

  4. Linux常用命令-jdk和Tomcat

    一.JDK的安装和配置 1.下载jdk文件 去官方网站下载Linux 64位  jdk-8u131-linux-x64.tar.gz 2.使用Ftp工具上传到/usr/local 下. 使用命令:ta ...

  5. js实现选项卡切换的效果

    效果图: css 代码: <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .demo ...

  6. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...

  7. python 创建mysql数据库

    昨天用shell脚本创建数据库,涉及java调用,比较折腾,改用python直接创建数据库,比较方便,好了,直接上代码,相关注释也添加了 # _*_encoding:UTF-8_*_import My ...

  8. Android React Native 开发环境搭建---windows下

    环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...

  9. 利用Border画三角形

    边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...

  10. 几个常用的linux命令(操作服务器时会用到)

    目录 tmux 背景 安装 使用 启动一个tmux session 暂时离开当前session 回到之前的session 重命名session 创建window 创建pane ps scp 参考 tm ...