【旧博客转移 - 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. GRPC在NET上的实践(记录篇)

    GRPC是什么? GRPC是一个开源RPC框架,于2015年3月开源,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于Protobuf 3.0(Protocol Buffer ...

  2. slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...

  3. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  4. [HDU1001] Sum Problem

    Problem Description Hey, welcome to HDOJ(Hangzhou Dianzi University Online Judge). In this problem, ...

  5. storm定时任务【tick】

    一. 简介      storm作为流计算,处理数据通常以数据驱动.即只有当spout发射数据才会进行计算.那么如果想要做定时任务如何处理哪,例如有的bolt需要输出一段时间统计的结果,这里一段时间可 ...

  6. android Activity Application Context 的区别

    用了这么久的Context,对于Context究竟是个什么玩意一直不是很明白.看了网上十几篇文章的介绍 加上自己的理解总结一下.(自己想法,不对勿喷,不想照搬网上一些文字说法来糊弄自己,自己理解的就这 ...

  7. html 获取宽高

    jquery获取元素宽高的方法如下 1.元素自身高度 $("#div").height(); 2.元素自身高度 + padding $("#div").inne ...

  8. 如何按内容筛选dom

    有时候我们需要按照dom的text内容去筛选,那么可以用jQuery的contains筛选 写法 $("div:contains(aaa)") 筛选出内容包含aaa的div 另外 ...

  9. nodeJs中npm详解

    npm 是 Node.js 的模块依赖管理工具.作为开发者使用的工具,主要解决开发 node.js 时会遇到的问题.如同 RubyGems 对于 Ruby 开发者和 Maven 对于 Java 开发者 ...

  10. 如何用VS进行程序调试

    VS是一个强大的IDE,如果你现在只会简单地用它查看一下执行效果,那就太大材小用了. 1. CRT函数报错 首先来说说最常见的一个编译错误.微信里常常收到这个错误的截图提问. CRT(C Runtim ...