天天看點

unity 全息和xRay shaderunity 全息和xRay shader

unity 全息和xRay shader

這個是網上的效果,科幻的感覺是不是很強烈。

unity 全息和xRay shaderunity 全息和xRay shader

下面是我們去實作的效果。

先看下效果圖,左邊的是Xray的效果,右邊是全息的效果。都有着異曲同工的妙處。

unity 全息和xRay shaderunity 全息和xRay shader

全息的效果

全息特效隻顯示物體的輪廓,必然會有用到類似于邊緣光照的效果。

void surf(Input IN, inout SurfaceOutput o) {
            float4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;

            float border =  - (abs(dot(IN.viewDir, IN.worldNormal)));
            float alpha = (border * ( - _DotProduct) + _DotProduct);
            o.Alpha = c.a * alpha;
        }
           

這個裡面用了類似邊緣光照的算法。

float rim = 1 - max(0, dot(worldViewDir, worldNormal));

這裡把float border = 1 - (abs(dot(IN.viewDir, IN.worldNormal)));

在邊緣光照裡面,當worldViewDir和worldNormal大于90度的時候,就會将其置于1,就是說模型背面的部分全部置為1,是以不是透明的。但是在全息特效裡面,用了abs函數,不管是正面還是背面都是給其減去了,是以,隻會顯示出邊緣光照,中間就會呈現出镂空的效果。

同時,在後面的代碼對其alpha值進行線性插值。

紋理中的初始alpha值與新的系數進行插值去完成的。

下面看下全部的shader代碼:

Shader "CookbookShaders/Chapter02/Silhouette" {
    Properties{
        _Color("Color", Color) = (,,,)
        _MainTex("Albedo (RGB)", D) = "white" {}

        _DotProduct("Rim effect", Range(-,)) = 
    }
    SubShader{
        Tags{
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }
        LOD 

        Cull Off

        CGPROGRAM
        //#pragma surface surf Lambert alpha:fade nolighting
        #pragma surface surf Lambert alpha

        sampler2D _MainTex;
        fixed4 _Color;

        float _DotProduct;

        struct Input {
            float2 uv_MainTex;
            float3 worldNormal;
            float3 viewDir;
        };

        //void surf(Input IN, inout SurfaceOutputStandard o) {
        void surf(Input IN, inout SurfaceOutput o) {
            float4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;

            float border =  - (abs(dot(IN.viewDir, IN.worldNormal)));
            float alpha = (border * ( - _DotProduct) + _DotProduct);
            o.Alpha = c.a * alpha;
        }
        ENDCG
    }
    FallBack "Diffuse"
}
           

XRay特效

我們看下xRay的代碼,其實效果和全息的有着很大的相似度。

v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                float3 viewDir = normalize(ObjSpaceViewDir(v.vertex));//計算出頂點到相機的向量
                float val =  - saturate(dot(v.normal, viewDir));//計算點乘值


                o.color = _RimColor * val * ( + _RimIntensity);//計算強度
                return o;
            }

            fixed4 frag (v2f i) : COLOR
            {
                return i.color;
            }
           

這裡的最後的顔色用了_RimColor 和上面的val相乘,val和上面的全息特效相似,都是在邊緣時較大,在模型的中間比較小。後面,又給乘了個強度。

下面給出全部代碼:

Shader "Xray"
{
    Properties
    {
        _RimColor("RimColor", Color) = (, , , )
        _RimIntensity("Intensity", Range(, )) = 
    }
    SubShader
    {
        Tags {"Queue"="Transparent" "RenderType"="Opaque" }

        LOD 
        Pass
        {
            //Blend SrcAlpha One//打開混合模式
            Blend SrcAlpha  One
            ZWrite off
            Lighting off

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal:Normal;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                fixed4 color:COLOR;
            };

            fixed4 _RimColor;
            float _RimIntensity;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                float3 viewDir = normalize(ObjSpaceViewDir(v.vertex));//計算出頂點到相機的向量
                float val =  - saturate(dot(v.normal, viewDir));//計算點乘值


                o.color = _RimColor * val * ( + _RimIntensity);//計算強度
                return o;
            }

            fixed4 frag (v2f i) : COLOR
            {
                return i.color;
            }
            ENDCG
        }
    }
}
           

另一種全息

同樣是上面的模型,下面來展示另一種全息,是把模型的全身變為很多的點,然後繞成一圈圈的。然後調制顔色為淡藍色,成為下面的樣子。

unity 全息和xRay shaderunity 全息和xRay shader

在頂點函數裡面,我們使用了o.worldPos = mul(unity_ObjectToWorld, v.vertex);獲得物體本身的坐标,之後,在片元着色器裡面進行處理。

col = _Color * max(0, cos(i.worldPos.y * _ScanningFrequency + _Time.x * _ScanningSpeed) + _Bias);

col = 1 - max(0, cos(i.worldPos.x _ScanningFrequency + _Time.x * _ScanningSpeed) +0.9);

col = 1 - max(0, cos(i.worldPos.z _ScanningFrequency + _Time.x * _ScanningSpeed) +0.9);

這個是片元裡面的代碼,分别對其 X,Y,Z坐标進行處理。首先對Y坐标進行處理,就是高度,使用cos函數,對其進行處理,将cos函數小于0的部分全部置為0,後面進行乘上顔色,使之為透明。

同樣的道理,對X,Z進行切割,使用1-max(**) 省略公式了,就是把cos的數值為1的部分進行透明。在X,Z坐标上很少的一部分為透明。

下面看下全部的shader代碼吧

代碼來源World of Zero,shader的第一行就有的,在此引用了。

Shader "World of Zero/Hologram"
{
    Properties
    {
        _MainTex ("Texture", D) = "white" {}
        _Color ("Color", Color) = (, , , )
        _Bias("Bias", range(-,)) = 
        _ScanningFrequency ("Scanning Frequency", Float) = 
        _ScanningSpeed ("Scanning Speed", Float) = 
    }
    SubShader
    {
        Tags { "Queue" = "Transparent" "RenderType" = "Transparent" }
        LOD 
        ZWrite Off
        Blend SrcAlpha One
        Cull Off

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS()
                float4 vertex : SV_POSITION;
                float4 worldPos : TEXCOORD1;
            };

            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _Bias;
            float _ScanningFrequency;
            float _ScanningSpeed;

            v2f vert (appdata v)
            {
                v2f o;
                o.worldPos = mul(unity_ObjectToWorld, v.vertex);
                o.vertex= UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                col = _Color * max(, cos(i.worldPos.y * _ScanningFrequency + _Time.x * _ScanningSpeed) + _Bias);
                col *=  - max(, cos(i.worldPos.x * _ScanningFrequency + _Time.x * _ScanningSpeed) +);
                col *=  - max(, cos(i.worldPos.z * _ScanningFrequency + _Time.x * _ScanningSpeed) +);
                return col;
            }
            ENDCG
        }
    }
}
           

繼續閱讀