拖尾、刀光、剑光、尾焰效果的开发（OpenGL ES）

说在开始

最近模拟了切水果里面的拖尾效果，其可以应用在许多的场景里面，例如，武器的刀光，飞机的尾焰效果等等。我开发的这个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上找到。

public class StreakDataConstant {
    public static Object lock=new Object(); //资源锁
    public static float Stroke=0.06f;//条带的宽度
    public static int StreakNum=30*2;//拖尾的最大长度(必须是2的倍数)
    public static int threadTime=10;//拖尾的消失时间(手指离开后线程休息时间)
    public static float[] lineColor={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值，因为这里的线条颜色是我自己自定义的，不是从纹理冲采样出的颜色，纹理只提供“形状”，这里需要注意。

最后

本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。