Unity3D-Shader-热扭曲效果

【旧博客转移 - 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)*2;

改变原图

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) = 0        //背景偏移
        _BackgroundScrollY ("Y Offset", float) = 0
        _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) = 0    
        _DistortionScrollY ("Y Offset", float) = 0    
        _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
        }
    }
}