重要

為了方便大家共同交流學習，我對模組進行了升級，現在為Version 2。Version 2版本按照Google C++程式設計規範修改了部分註釋和變數名稱，建議大家去我的GitHub去檢視，本文章的演算法部分還是可以借鑑的。改動具體如下。
1、新增詳細類註釋，概括類的功能。
2、修改了部分變數名稱。
3、 升級專案環境為Android Studio 3.2，原版本為2.2，已經淘汰。

說在開始

最近模擬了切水果裡面的拖尾效果，其可以應用在許多的場景裡面，例如，武器的刀光，飛機的尾焰效果等等。我開發的這個Demo是基於OpenGL ES的，開發環境（IDE）使用的Android Studio。如果想讓案例使用在其他平臺，還需要借鑑本節的演算法自己開發，如果是OpenGL或者OpenGL ES的話，直接就可以使用。（當然也需要適當的修改的）。

程式碼位置

我把我的Demo都放在我的github上，如果對您有幫助還希望您能幫我點一個star。https://github.com/ModestBean/MyStreak 謝謝。本人的知識有限，如果本節內容有錯誤和不合理之處，還請朋友們多多指出，我會虛心接受每一個建議。
##執行效果

當然我觸控的方法都是基於Android的觸控寫的。

原理部分

其演算法與cocos的的MotionStreak類似。
OpenGL ES中有三種基本的圖元，點線和三角形。點主要用在粒子系統，最常用的就是三角形，我們看到的做工精美的3D模型就是很多三角形組成的，三角形的數量也就決定了模型的精細程度，因為在我們的需求裡用三角形就措措有餘了。
思路大體如下：
其實繪製的就是一個三角形帶。在平常的程式中，經常使用的繪製方式是GL_TRIANGLES，此繪製方式就是以三角形進行繪製。但是這裡使用的繪製方式是GL_TRIANGLE_STRIP，此繪製方式就是使用三角帶形式進行繪製。
其實可以發現，不管這種特效是跟著武器走還是跟著手指滑動走，都是動態改變的，這就說明我們需要動態去更新這個三角帶，不斷的向三角形帶中加入或者移除頂點。
頂點的移除有兩種方式：

• 第一種是每個頂點都有個生存週期，過了生命週期的時間就會被移除
• 第二種是規定一個頂點個數的上限，超過頂點個數就會被移除

如何生成三角形帶的頂點位置？

需要注意的是，我們不能直接將武器的軌道頂點或者手指滑動的位置直接拿過來使用，是需要去計算三角形帶頂點位置的。
演算法如下：

• 取上一個頂點的位置，和當前頂點的位置形成一個二維向量V1，然後得到V1的垂直向量V2，三角形帶是有寬度width的，根據寬度width得到V2方向上的兩個頂點，將得到的頂點儲存起來。
  
• 當然只有頂點是不夠的，還需要一幅紋理圖和對應紋理座標。紋理座標就很簡單了，t的值不是1就是0，而s的值需要切割成不同的段數。
  紋理圖如下
  
  
  紋理座標如下所示：
  
  當然頂點資料和紋理座標都是需要動態更新的，然後使用OpenGL ES的紋理就可以畫出來了。

程式碼部分

程式碼較長，我就簡單貼一下儲存控制引數的類吧。完整的Demo可以在我github上找到。

/**
 * Simple to Introduction
 * @Author          [蘇伊 [email protected]]
 * @Date            [2018-10-18]
 * @Description     [拖尾引數常量類]
 * @version         [2.0]
 */
public class StreakDataConstant {
    public static Object lock=new Object(); //資源鎖
    public static float STREAK_WIDTH=0.06f;//條帶的寬度
    public static int STREAK_MAX_NUMBER=30*2;//拖尾的最大長度(必須是2的倍數)
    public static int THREAD_DISAPPEAR_TIME=10;//拖尾的消失時間(手指離開後執行緒休息時間)
    public static float[] LINE_COLOR={1.0f,1.0f,0.0f,1.0f};//拖尾的顏色

    public static final float MAX_LIFE_SPAN= 1.5f; //最大生命週期
    public static final float LIFE_SPAN_STEP= 0.05f;//生命週期步進

    public static int SRC_BLEND= GLES30.GL_SRC_ALPHA;//源混合因子
    public static int DST_BLEND= GLES30.GL_ONE;//目標混合因子(得到背景全部顏色)
    public static int BLEND_FUNC= GLES30.GL_FUNC_ADD;//混合方式
}

註釋中說明的很清楚了就不多介紹了。
頂點著色器部分：

#version 300 es
uniform mat4 uMVPMatrix; //總變換矩陣
uniform float maxLifeSpan;//最大生命期
layout (location = 0) in vec3 aPosition;//頂點位置
in vec2 aTexCoor;//頂點紋理座標
out vec3 vPosition;//傳遞給片元著色器頂點位置和週期
out float sjFactor;//用於傳遞給片元著色器的總衰減因子
out vec2 vTextureCoord;//用於傳遞給片元著色器的變數
void main()
{
   gl_Position = uMVPMatrix * vec4(aPosition.xy,0,1); //根據總變換矩陣計算此次繪製此頂點位置
   vPosition=aPosition;//x,y,0,週期
   sjFactor=aPosition.z/maxLifeSpan;//計算總衰減因子，並將其傳遞給片元著色器
   vTextureCoord=aTexCoor;//將紋理座標傳給片元著色器
}

總衰減因子=當前生命週期/最大生命週期。當衰減因子達到極限值的時候，對應片元就會消失，這樣就實現了根據生命週期衰減的目的了。
片元著色器：

#version 300 es
precision mediump float;
uniform sampler2D sTexture;//紋理內容資料
uniform vec4 lineColor;//紋理內容資料

in vec3 vPosition;//接收x，y，0，週期
in float sjFactor;//接收衰減因子
in vec2 vTextureCoord;//用於傳遞給片元著色器的變數
out vec4 fragColor;//輸出到的片元顏色
void main()
{
   vec4 stColor=texture(sTexture, vTextureCoord);//取樣出紋理顏色
   fragColor=lineColor*sjFactor*stColor.a;//給此片元顏色值(線條顏色*衰減因子*Alpha值)
}

最終片元顏色需要乘以取樣出的紋理顏色的Alpha值，因為這裡的線條顏色是我自己自定義的，不是從紋理衝取樣出的顏色，紋理只提供“形狀”，這裡需要注意。

最後

本人的知識有限，如果本節內容有錯誤和不合理之處，還請朋友們多多指出，我會虛心接受每一個建議。