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
        }
    }
}

 

posted @ 2017-05-16 15:14  李嘉的博客  阅读(8565)  评论(1编辑  收藏  举报