Unity3D教程宝典之Shader篇：第二十六讲ImageEffects_Twirl

转载自风宇冲Unity3D教程学院

Twirl是一个全屏画面扭曲的效果，新仙剑的战斗切换有用到这个效果。

主要有三个设置:

center  扭曲的中心点

radius 扭曲的范围

angle 扭曲的角度

用到了如下函数

Matrix4x4.TRS(Vector3 pos, Quaternion rotate,Vector3 scale)

创建一个包括位移，旋转，缩放的矩阵

Matrix4x4 rotationMatrix = Matrix4x4.TRS(Vector3.zero, Quaternion.Euler(0, 0, angle),Vector3.one);

然后通过material的以下函数向shader里传参数

material.SetMatrix("name",value)   对应Shader里的 float4x4

material.SetVector("name",value)  对应Shader里的 float4

float2 MultiplyUV (float4x4 mat, float2 inUV) {

　　float4 temp = float4 (inUV.x, inUV.y, 0, 0);

　　temp = mul (mat, temp);

　　return temp.xy;

}

步骤:

脚本

(1) 通过Angle得到旋转矩阵

Matrix4x4 rotationMatrix = Matrix4x4.TRS(Vector3.zero, Quaternion.Euler(0 , 0 , angle),Vector3.one);

(2) 将矩阵和 旋转中点 及 半径传入shader.

Shader

(1) 将坐标系从左下角的坐标系 转到 以旋转中点为 原点的坐标系

vert里 o.uv = v.texcoord - _CenterRadius.xy;

(2) 将旋转坐标系 里的uv乘以 旋转矩阵。

(3) 将uv除以 半径， 再取长度。长度超过1则为 旋转区域外，小于则在区域内

(4) 如果在区域外，则为默认offset, 在内则是旋转后的offset

脚本

using UnityEngine;
using System.Collections;
public class TwirlEffectMe : MonoBehaviour {
    public Shader shader;
    private Material mat;
    public Vector2  radius = new Vector2(0.3F,0.3F);
    public float    angle = 50;
    public Vector2  center = new Vector2 (0.5F, 0.5F);

    void Start()
    {
        mat = new Material(shader);
    }

    void OnRenderImage (RenderTexture source, RenderTexture destination) {
        RenderDistortion (mat, source, destination, angle, center, radius);
    }

    public static void RenderDistortion(Material material, RenderTexture source, RenderTexturedestination, float angle, Vector2 center, Vector2 radius)
    {
        Matrix4x4 rotationMatrix = Matrix4x4.TRS(Vector3.zero, Quaternion.Euler(0 , 0 , angle), Vector3.one);
        material.SetMatrix("_RotationMatrix", rotationMatrix);
        material.SetVector("_CenterRadius", new Vector4(center.x, center.y, radius.x, radius.y));
        Graphics.Blit(source, destination, material);
    }
}

Shader脚本

Shader "Custom/TwirlEffectMe" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Pass {
            ZTest Always Cull Off ZWrite Off
            Fog { Mode off }

            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            uniform sampler2D _MainTex;
            uniform float4 _MainTex_TexelSize;
            uniform float4 _CenterRadius;
            uniform float4x4 _RotationMatrix;

            struct v2f {
                float4 pos : POSITION;
                float2 uv : TEXCOORD0;
            } ;

            v2f vert( appdata_img v )
            {
                v2f o;
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.texcoord - _CenterRadius.xy;
                return o;
            }

            float4 frag (v2f i) : COLOR
            {
                float2 offset = i.uv;
                float2 distortedOffset = MultiplyUV (_RotationMatrix, offset.xy);
                float2 tmp = offset / _CenterRadius.zw;
                float2 finalUV;
                float len = length(tmp);
                // out of twirl
                if( len >1)
                {
                    finalUV = offset;
                }
                else
                {
                    finalUV = distortedOffset;
                }
                // back to normal uv coordinate
                finalUV += _CenterRadius.xy;
                return tex2D(_MainTex, finalUV);
            }
            ENDCG
        }
    }
    Fallback off
}

但是运行后，发现仅仅是简单旋转。需要再加上模糊。

分析一下，发现是由内向外从distortedOffset 渐渐向 正常offset过度的过程

于是将43行的finalUV = distortedOffset;改为

finalUV = lerp(distortedOffset, offset, len );

整体代码如下：

Shader "Custom/TwirlEffectMe" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Pass {
            ZTest Always Cull Off ZWrite Off
            Fog { Mode off }
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            uniform sampler2D _MainTex;
            uniform float4 _MainTex_TexelSize;
            uniform float4 _CenterRadius;
            uniform float4x4 _RotationMatrix;

            struct v2f {
                float4 pos : POSITION;
                float2 uv : TEXCOORD0;
            } ;

            v2f vert( appdata_img v )
            {
                v2f o;
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.texcoord - _CenterRadius.xy;
                return o;
            }
            float4 frag (v2f i) : COLOR
            {
                float2 offset = i.uv;
                float2 distortedOffset = MultiplyUV (_RotationMatrix, offset.xy);
                float2 tmp = offset / _CenterRadius.zw;
                float2 finalUV;
                float len = length(tmp);
                // out of twirl
                if( len >1)
                {
                    finalUV = offset;
                }
                else
                {
                    finalUV = lerp(distortedOffset, offset, len );
                }
                // back to normal uv coordinate
                finalUV += _CenterRadius.xy;
                return tex2D(_MainTex, finalUV);
            }
            ENDCG
        }
    }
    Fallback off
}

点击运行，效果对了。