流光shader 和 流光+扭曲shader

Posted 2020-09-19 Tearix

我认为这种shader能通过简单的方式呈现出不错的效果。

1.流光shader:

Shader "Unlit/StreamShader"
{
    //流光shader
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _StreamTex("StreamTexture", 2D) = "white" {}
        _StreamColor("StreamColor", Color) = (1,1,1,1)
        _StreamStrength("StreamStrength", Float) = 1
        _StreamSpeed("StreamSpeed", Range(0,1)) = 0.5
        _EnvTex("EnvTex (CubeMap)", Cube) = "_SkyBox" {}
        _EnvStrength("EnvStrength", Range(0,1)) = 0.8

    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float4 normal : NORMAL;
                float2 uv0 : TEXCOORD0;
                float2 uv1 : TEXCOORD1;
            };

            struct v2f
            {
                float2 uv0 : TEXCOORD0;
                float2 uv1 : TEXCOORD1;
                float4 vertex : SV_POSITION;
                float3 RefDir : TEXCOORD2;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _StreamTex;
            float4 _StreamTex_ST;
            half4 _StreamColor;
            float _StreamStrength;
            float _StreamSpeed;
            samplerCUBE _EnvTex;
            half _EnvStrength;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv0 = TRANSFORM_TEX(v.uv0, _MainTex);
                o.uv1 = v.uv1;

                float3 worldN = UnityObjectToWorldNormal(v.normal);
                o.RefDir = reflect(-WorldSpaceViewDir(v.vertex), worldN);
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv0);
                //流光
                float2 streamUV = i.uv1 + _Time.y * float2(_StreamSpeed, 0);//缩放时间控制速度
                fixed4 steamCol = tex2D(_StreamTex, TRANSFORM_TEX(streamUV, _StreamTex));
                float3 steam = _StreamColor * steamCol.r * _StreamStrength;
                //环境贴图反射
                float3 reflection = texCUBE(_EnvTex, i.RefDir).rgb * _EnvStrength;
                float3 o = col.rgb + steam + reflection;
                return fixed4(o, 1);
            }
            ENDCG
        }
    }
}

效果：

2.流光+扭曲shader：

Shader "Unlit/SteamAndWrapShader"
{
    //流光+纹理扭曲shader
    Properties
    {
        _MainTex("Texture", 2D) = "white" {}
        _StreamTex("StreamTexture", 2D) = "white" {}
        _StreamColor("StreamColor", Color) = (1,1,1,1)
        _StreamStrength("StreamStrength", Float) = 1
        _StreamSpeed("StreamSpeed", Range(0,1)) = 0.5
        _EnvTex("EnvTex (CubeMap)", Cube) = "_SkyBox" {}
        _EnvStrength("EnvStrength", Range(0,1)) = 0.8
        _WrapSpeed("WrapSpeed", Float) = 1
        _WrapStrength("WrapStrength", Float) = 1
    }
    SubShader
    {
        Tags{ "RenderType" = "Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float2 uv0 : TEXCOORD0;
                float2 uv1 : TEXCOORD1;
            };

            struct v2f
            {
                float2 uv0 : TEXCOORD0;
                float2 uv1 : TEXCOORD1;
                float4 vertex : SV_POSITION;
                float3 RefDir : TEXCOORD2;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _StreamTex;
            float4 _StreamTex_ST;
            half4 _StreamColor;
            float _StreamStrength;
            float _StreamSpeed;
            samplerCUBE _EnvTex;
            half _EnvStrength;
            half _WrapSpeed;
            half _WrapStrength;

            v2f vert(appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv0 = TRANSFORM_TEX(v.uv0, _MainTex);
                o.uv1 = v.uv1;

                float3 worldN = UnityObjectToWorldNormal(v.normal);
                o.RefDir = reflect(-WorldSpaceViewDir(v.vertex), worldN);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv0);
                //流光
                float2 streamUV = i.uv1 + _Time.y * float2(_StreamSpeed, 0);//缩放时间控制速度
                fixed4 steamCol = tex2D(_StreamTex, TRANSFORM_TEX(streamUV, _StreamTex));
                float3 steam = _StreamColor * steamCol.r * _StreamStrength;

                //扭曲，是在主tex上呈现扭曲，所以用uv0，但扭曲所用的纹理是_SteamTex，所以采样_SteamTex
                float2 wrapUV = i.uv0 + _Time.y * float2(-_WrapSpeed, _WrapSpeed);//缩放时间控制速度并扭曲uv
                fixed4 wrapCol = tex2D(_StreamTex, TRANSFORM_TEX(wrapUV, _StreamTex));
                float3 wrap = _StreamColor * wrapCol.r * _WrapStrength;

                //环境贴图反射
                float3 reflection = texCUBE(_EnvTex, i.RefDir).rgb * _EnvStrength;
                float3 o = col.rgb + steam + wrap + reflection;
                return fixed4(o,1);
            }
            ENDCG
        }
    }
}

效果：

总结：因为图片是我自己网上找的，所以流光和扭曲效果不好看，如果能针对性的做一些流光底图，会好看很多，结合扭曲就有流光溢彩之效了。