Unity3D-Shader-热扭曲效果

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 李嘉的博客 阅读( ...) 评论( ...) 编辑 收藏
要实现图像扭曲过场效果,可以使用Unity3D中的Shader。具体实现步骤如下: 1. 创建一个新的Shader,并将其属性设置为Unlit/Texture。 2. 在Shader中添加一个名为“Distortion”的属性,类型为2D纹理,用于存储扭曲图像。 3. 在Shader中添加一个名为“DistortionStrength”的属性,类型为Range,用于控制扭曲强度。 4. 在Shader的片段着色器中,使用tex2D函数获取原始纹理的颜色,并使用uv坐标对扭曲图像进行采样。 5. 将扭曲图像的采样值与“DistortionStrength”属性相乘,并将结果添加到原始颜色中。 6. 最后,将新的颜色值输出到屏幕。 下面是一个简单的Shader示例: ``` Shader "Custom/DistortionTransition" { Properties { _MainTex ("Texture", 2D) = "white" {} _Distortion ("Distortion", 2D) = "white" {} _DistortionStrength ("Distortion Strength", Range(0.0, 1.0)) = 0.5 } SubShader { Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; sampler2D _Distortion; float _DistortionStrength; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag (v2f i) : SV_Target { // Get the original color fixed4 texColor = tex2D(_MainTex, i.uv); // Get the distortion value float4 distortion = tex2D(_Distortion, i.uv); // Calculate the distortion offset float2 offset = (distortion.rg * 2.0 - 1.0) * _DistortionStrength; // Apply the distortion to the UV coordinates float2 distortedUV = i.uv + offset; // Get the color from the distorted UV coordinates fixed4 distortedColor = tex2D(_MainTex, distortedUV); // Add the distortion to the original color return texColor + (distortedColor - texColor); } ENDCG } } FallBack "Diffuse" } ``` 在使用这个Shader时,可以将原始纹理作为“_MainTex”属性的值,将扭曲图像作为“_Distortion”属性的值,然后通过修改“_DistortionStrength”属性的值来控制扭曲强度。 希望这个示例能够帮助你实现所需的效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值