Unity中LineRenderer與TrailRenderer有什么用

這篇文章將為大家詳細(xì)講解有關(guān)Unity中LineRenderer與TrailRenderer有什么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

LineRender和TrailRender是兩個(gè)好東西，很多Unity拖尾特效都會(huì)使用到它們。一些簡(jiǎn)單的介紹可以參見(jiàn)官方的API文檔。
在這里探討一下它們具體的渲染方式，而后給出一些Shader以便更好地控制它們。

最終我們可以實(shí)現(xiàn)類似這樣的一個(gè)效果：

接下來(lái)，我們先了解LineRenderer。稍后的TailRenderer情況類似。

創(chuàng)建LineRender

LineRender是一個(gè)以頂點(diǎn)去控制渲染尺寸和位置的條帶，頂點(diǎn)個(gè)數(shù)和具體坐標(biāo)我們自己可以完全操控。
首先我們需要建立了一個(gè)GameObject，然后添加LineRenderer組件，然后填入一下參數(shù)：

其實(shí)就是一個(gè)沿著X方向延展的一組頂點(diǎn)。然后新建一個(gè)材質(zhì)，并把它拖入Materials。
由于當(dāng)前你使用的是默認(rèn)材質(zhì)，所以目前只能獲得以下的樣子：

就是一個(gè)矩形而已。

修改LineRenderer

首先，我們需要一張資源圖片，大概是這樣：

這個(gè)圖片使用PSD制作一下，里面白色部分代表將來(lái)要在條帶中顯露出來(lái)的部分，黑色則是透明的部分。只有黑白兩種顏色即可。注意要加入通道，即把這個(gè)黑白圖片在PSD中新建一層透明通道，并且粘貼進(jìn)去。最后讓你的通道看起來(lái)是這樣：

為什么只要黑白圖，不需要顏色？解釋一下：
我們用這個(gè)素材來(lái)構(gòu)成條帶的主要輪廓，而顯示的色彩由其它參數(shù)控制，所以這里只需要黑白圖就可以了。

開始寫Shader

屬性部分，就是一張貼圖就可以了。

    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }

Tags部分，我們需要設(shè)定處于半透明渲染隊(duì)列，并且設(shè)定Alpha混合的模式，就是用最常見(jiàn)的Alpha混合的模式即可。

        Tags { "RenderType"="Transparent"  "IgnoreProjector"="True"  "Queue"="Transparent"}
        LOD 200
        Blend SrcAlpha OneMinusSrcAlpha

由于我們不需要光照，也不希望受到光照的影響，所以我們寫一個(gè)直接返回原色的光照方程來(lái)避免默認(rèn)的光照處理。同時(shí)，為了避免產(chǎn)生光照部分的Pass，添加noforwardadd參數(shù)，這樣我們的渲染就只需要一個(gè)Pass。

CGPROGRAM        #pragma surface surf NoLight vertex:vert alpha noforwardadd

        //光照方程，名字為L(zhǎng)ighting接#pragma suface后的光照方程名稱 
        //lightDir :頂點(diǎn)到光源的單位向量
        //viewDir  :頂點(diǎn)到攝像機(jī)的單位向量   
        //atten    :關(guān)照的衰減系數(shù) 
        float4 LightingNoLight(SurfaceOutput s, float3 lightDir,half3 viewDir, half atten) 
        { 
            float4 c ; 
            c.rgb =  s.Albedo;
            c.a = s.Alpha; 
            return c; 
        }

接下來(lái)是頂點(diǎn)著色器代碼，我們只要將系統(tǒng)傳遞過(guò)來(lái)頂點(diǎn)顏色和UV坐標(biāo)存儲(chǔ)下來(lái)，以便于輸入到表面著色器就可。

        sampler2D _MainTex;
        fixed4 _SelfCol;        struct Input 
        {
            float2 uv_MainTex;
            float4 vertColor;
        };        void vert(inout appdata_full v, out Input o)
        {
            o.vertColor = v.color;
            o.uv_MainTex = v.texcoord;
        }

最后就是最重要的部分，表面著色器代碼：

        void surf (Input IN, inout SurfaceOutput o) 
        {
            half4 c = tex2D (_MainTex, IN.uv_MainTex);
            o.Alpha = c.a * IN.vertColor.a;
            o.Albedo = IN.vertColor.rgb;
        }


        ENDCG

其實(shí)也很簡(jiǎn)單：
這里我們只是提取了貼圖上的 【像素顏色透明度】 X 【頂點(diǎn)顏色透明度】 作為最終透明度。這樣做的目的就是為了提取貼圖上的輪廓，同時(shí)透明度也會(huì)受到頂點(diǎn)顏色的影響。
使用【頂點(diǎn)顏色】作為最終顏色。
這樣我們就可以通過(guò)LineRenderer的StartColor和EndColor來(lái)設(shè)定整個(gè)條帶的顏色和透明度了。

使用之前的貼圖和這個(gè)Shader，修改之前的材質(zhì)。最終這個(gè)條帶變成這樣：

完整的Shader

Shader "AndrewBox/LineRenderer" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Tags { "RenderType"="Transparent"  "IgnoreProjector"="True"  "Queue"="Transparent"}
        LOD 200
        Blend SrcAlpha OneMinusSrcAlpha
        CGPROGRAM        #pragma surface surf NoLight vertex:vert alpha noforwardadd

        //光照方程，名字為L(zhǎng)ighting接#pragma suface后的光照方程名稱 
        //lightDir :頂點(diǎn)到光源的單位向量
        //viewDir  :頂點(diǎn)到攝像機(jī)的單位向量   
        //atten    :關(guān)照的衰減系數(shù) 
        float4 LightingNoLight(SurfaceOutput s, float3 lightDir,half3 viewDir, half atten) 
        { 
            float4 c ; 
            c.rgb =  s.Albedo;
            c.a = s.Alpha; 
            return c; 
        }

        sampler2D _MainTex;
        fixed4 _SelfCol;

        struct Input 
        {
            float2 uv_MainTex;
            float4 vertColor;
        };

        void vert(inout appdata_full v, out Input o)
        {
            o.vertColor = v.color;
            o.uv_MainTex = v.texcoord;
        }

        void surf (Input IN, inout SurfaceOutput o) 
        {
            half4 c = tex2D (_MainTex, IN.uv_MainTex);
            o.Alpha = c.a * IN.vertColor.a;
            o.Albedo = IN.vertColor.rgb;
        }


        ENDCG
    } 
    FallBack "Diffuse"}

TrailRenderer

TrailRenderer與LineRenderer很相似，又有些不同。不同之處在于：
首先，它的頂點(diǎn)構(gòu)成是動(dòng)態(tài)的，每幀你需要將產(chǎn)生TrailRenderer的GameObject移動(dòng)到不同的位置，這樣它會(huì)自動(dòng)連接成一個(gè)軌跡。
其次，它由五個(gè)顏色值來(lái)進(jìn)行控制整個(gè)條帶的顏色變化，但是不像LineRenderer，在運(yùn)行時(shí)你并不能修改這些顏色值，因?yàn)樗腁PI中沒(méi)有訪問(wèn)這五個(gè)顏色的方法，但是我們?nèi)匀豢梢酝ㄟ^(guò)Shader來(lái)進(jìn)行改變。
記住最重要的一點(diǎn)就是，它和LineRenderer一樣，都是把一組顏色值寫入了頂點(diǎn)顏色，我們只要讀取頂點(diǎn)顏色即可。
為了整體控制尾跡的顏色顯示，我們?cè)黾右粋€(gè)主控制顏色，修改上面那個(gè)Shader。

    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _MainCol ("Self Color Value", Color) = (1,1,1,1)
    }

最后，在表面著色器中進(jìn)行相應(yīng)的修改

        void surf (Input IN, inout SurfaceOutput o) 
        {
            half4 c = tex2D (_MainTex, IN.uv_MainTex);
            //c.a為貼圖上的透明度，使用它構(gòu)成條帶的圖形輪廓
            //_MainCol.a為主顏色的透明度，用于對(duì)整個(gè)條帶透明度控制
            //IN.vertColor.a由頂點(diǎn)顏色獲得，由Colors數(shù)組設(shè)置，用于控制條帶不同位置的透明度度變化
            o.Alpha = c.a * _MainCol.a* IN.vertColor.a;
            //_MainCol.rgb為主顏色的顏色值，用于顯示主顏色部分
            //IN.vertColor.rgb為頂點(diǎn)顏色的顏色值，由Colors數(shù)組設(shè)置，用于控制條帶不同位置的顏色變化
            o.Albedo = _MainCol.rgb*IN.vertColor.rgb;
        }

這樣，我們可以通過(guò)主控制顏色的變化來(lái)控制整體尾跡隨著時(shí)間的顏色變化。而條帶上顏色不同位置的變化，則由那五個(gè)顏色值進(jìn)行控制。當(dāng)我們只需要顯示一個(gè)純色條帶時(shí)，將五個(gè)顏色都設(shè)置為白色和變化的透明度即可。
最后，TrailRender的顯示效果如下：

當(dāng)然你需要一個(gè)腳本來(lái)控制TrailRender所在的GameObject的旋轉(zhuǎn)，代碼相對(duì)簡(jiǎn)單。(BaseBehavior類的實(shí)現(xiàn)可以參見(jiàn)我的其它文章)

public class TrailRendererGen : BaseBehavior 
{
    [SerializeField][Tooltip("旋轉(zhuǎn)角速度")]    protected float m_angle=360;    protected override void OnInitFirst()
    {
    }    protected override void OnInitSecond()
    {
    }    protected override void OnUpdate()
    {
        m_transform.Rotate(Vector3.forward, m_angle*Time.deltaTime);
    }
}

關(guān)于“Unity中LineRenderer與TrailRenderer有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。