unityShader物體表面流光效果

阿新 • • 發佈：2019-01-15

本文轉載自http://blog.csdn.net/lyh916/article/details/51831720

參考連結：http://liweizhaolili.blog.163.com/blog/static/162307442012726111843408/

效果圖：

1.首先，匯入unity自帶的模型，如下圖，它使用的是StandardSpecular這個shader，具體的實現可以從unity官網中下載看看。它的實現比較複雜，這裡我們把它替換為我們自己寫的shader，方便我們去控制。對於法線貼圖，注意要設定Texture Type為Normal map。

下面這個shader是漫反射+高光+法線貼圖：

Shader "Custom/Light"
{
    Properties
    {
        _MainColor ("主顏色", Color) = (0.5, 0.5, 0.5, 1)
        _NormalTex ("法線貼圖", 2D) = "white" {}

        _Specular ("高光顏色", Color) = (1, 1, 1, 1)
        _Gloss ("高光係數", Range(8, 256)) = 20
    }
    SubShader
    {
        Tags { "LightMode" = "ForwardBase" }

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

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
            };

            struct v2f
            {           
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 lightDir : TEXCOORD1;
                float3 viewDir : TEXCOORD2;
            };

            fixed4 _MainColor;
            sampler2D _NormalTex;
            fixed4 _Specular;
            float _Gloss;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.uv;

                TANGENT_SPACE_ROTATION;

                //rotation是使模型空間轉為切線空間的矩陣
                o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
                o.viewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz;

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 tangentLightDir = normalize(i.lightDir);
                fixed3 tangentViewDir = normalize(i.viewDir);

                fixed4 packedNormal = tex2D(_NormalTex, i.uv);
                fixed3 tangentNormal = UnpackNormal(packedNormal);

                //漫反射
                fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb * saturate(dot(tangentNormal, tangentViewDir));
                //Blinn-Phong高光光照模型，相對於普通的Phong高光模型，會更加光
                fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
                fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(tangentNormal, halfDir)), _Gloss);

                return fixed4(diffuse + specular, 1);
            }
            ENDCG
        }
    }
}

兩個shader的對比，左邊是模型原本的shader，右邊是上面的shader。左邊的有一種泥瓦的質感，而右邊的有一種金屬的質感。

2.從效果圖中，我們可以發現有邊緣光的效果，因此先加上。

Shader "Custom/Light"
{
    Properties
    {
        _MainColor ("主顏色", Color) = (0.5, 0.5, 0.5, 1)
        _NormalTex ("法線貼圖", 2D) = "white" {}

        _Specular ("高光顏色", Color) = (1, 1, 1, 1)
        _Gloss ("高光係數", Range(8, 256)) = 20

        _RimColor ("邊緣顏色", Color) = (1, 0, 0, 1)
        _RimPower ("邊緣顏色強度", Range(0.1, 1)) = 1
    }
    SubShader
    {
        Tags { "LightMode" = "ForwardBase" }

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

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
            };

            struct v2f
            {           
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 lightDir : TEXCOORD1;
                float3 viewDir : TEXCOORD2;
            };

            fixed4 _MainColor;
            sampler2D _NormalTex;
            fixed4 _Specular;
            float _Gloss;
            fixed4 _RimColor;
            half _RimPower;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.uv;

                TANGENT_SPACE_ROTATION;

                //rotation是使模型空間轉為切線空間的矩陣
                o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
                o.viewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz;

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 tangentLightDir = normalize(i.lightDir);
                fixed3 tangentViewDir = normalize(i.viewDir);

                fixed4 packedNormal = tex2D(_NormalTex, i.uv);
                fixed3 tangentNormal = UnpackNormal(packedNormal);

                //漫反射
                fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb * saturate(dot(tangentNormal, tangentViewDir));
                //Blinn-Phong高光光照模型，相對於普通的Phong高光模型，會更加光
                fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
                fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(tangentNormal, halfDir)), _Gloss);

                //邊緣顏色，對於法線和觀察方向，只要在同一座標系下即可
                fixed dotProduct = 1 - saturate(dot(tangentNormal, tangentViewDir));
                fixed3 rim = _RimColor.rgb * pow(dotProduct, 1 / _RimPower);

                return fixed4(diffuse + specular + rim, 1);
            }
            ENDCG
        }
    }
}

3.接著就需要用到遮罩效果，這裡我用到了下面這張遮罩圖。分析一下我們的效果圖，它的邊緣光是流動的，對於某一個位置的邊緣光，隨著時間的變化，它是在有光與無光這兩個狀態不斷變化的，而看一下我們的遮罩圖，以y軸方向來說，它也是黑白兩種狀態的切換，通過對遮罩圖的取樣，就能對邊緣光進行控制了。再說一點，如果我們把遮罩圖改為全白的，那麼就是我們上方那種效果了，不會發生流動。

Shader "Custom/Light"
{
    Properties
    {
        _MainColor ("主顏色", Color) = (0.5, 0.5, 0.5, 1)
        _NormalTex ("法線貼圖", 2D) = "white" {}

        _Specular ("高光顏色", Color) = (1, 1, 1, 1)
        _Gloss ("高光係數", Range(8, 256)) = 20

        _RimColor ("邊緣顏色", Color) = (1, 0, 0, 1)
        _RimPower ("邊緣顏色強度", Range(0.1, 1)) = 1

        _MaskTex ("光遮罩圖", 2D) = "white" {}
        _MoveDir ("邊緣光移動方向", Range(-1, 1)) = 1
    }
    SubShader
    {
        Tags { "LightMode" = "ForwardBase" }

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

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
            };

            struct v2f
            {           
                float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 lightDir : TEXCOORD1;
                float3 viewDir : TEXCOORD2;
            };

            fixed4 _MainColor;
            sampler2D _NormalTex;

            fixed4 _Specular;
            float _Gloss;

            fixed4 _RimColor;
            half _RimPower;

            sampler2D _MaskTex;
            fixed _MoveDir;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.uv;

                TANGENT_SPACE_ROTATION;

                //rotation是使模型空間轉為切線空間的矩陣
                o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;
                o.viewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz;

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed3 tangentLightDir = normalize(i.lightDir);
                fixed3 tangentViewDir = normalize(i.viewDir);

                fixed4 packedNormal = tex2D(_NormalTex, i.uv);
                fixed3 tangentNormal = UnpackNormal(packedNormal);

                //漫反射
                fixed3 diffuse = _LightColor0.rgb * _MainColor.rgb * saturate(dot(tangentNormal, tangentViewDir));
                //Blinn-Phong高光光照模型，相對於普通的Phong高光模型，會更加光
                fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
                fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(tangentNormal, halfDir)), _Gloss);

                //邊緣顏色，對於法線和觀察方向，只要在同一座標系下即可
                fixed dotProduct = 1 - saturate(dot(tangentNormal, tangentViewDir));
                fixed3 rim = _RimColor.rgb * pow(dotProduct, 1 / _RimPower);

                fixed4 maskCol = tex2D(_MaskTex, i.uv + float2(0, _Time.y * _MoveDir));

                return fixed4(diffuse + specular + rim * maskCol.rgb, 1);
            }
            ENDCG
        }
    }
}

這是unitypackage：

http://pan.baidu.com/s/1mh9T1l2

unityShader物體表面流光效果

unityShader物體表面流光效果

Unity Shader 模型流光效果

文字流光效果

Unity Shader-邊緣檢測效果（基於顏色，基於深度法線，邊緣流光效果，轉場效果）

【複習筆記】 cocos2d-x 2.x 渲染特效實現八流光效果

shader 流光效果

NGUI相關----UITexture圖片邊緣流光效果

Unity3D開發（九）：Unity3d流光效果

2D流光效果

Unity LOGO流光效果

unity--滑鼠放上顯示物體資訊和物體高光效果

使用流光法實現物體跟蹤

css實現滑鼠懸浮字型流光背景模糊效果

流光shader 和流光+扭曲shader

讓文字發出炫酷的光效果

【unity實用技能】unity在遊戲中更換角色的shader，比如加個流光

text-stroke實現文字描邊（鏤空）、text-fill-color實現文字填充&漸變（+animation實現流光字體）

Shader_ShaderForge_NGUI_流光&波紋&消融

android 自定義TextView 流光字，彩色text

光流 | 光流參考文獻

unityShader物體表面流光效果

相關推薦