1 说在开始

最近模拟了切水果里面的拖尾效果，其可以应用在许多的场景里面，例如，武器的刀光，飞机的尾焰效果等等。我开发的这个Demo是基于OpenGL ES的，开发环境(IDE)使用的Android Studio。如果想让案例使用在其他平台，还需要借鉴本节的算法自己开发，如果是OpenGL或者OpenGL ES的话，直接就可以使用。(当然也需要适当的修改的)。

2 代码位置douysu/person-summary​github.com

3 运行效果运行结果

4 原理部分

需要注意的是，我们不能直接将武器的轨道顶点或者手指滑动的位置直接拿过来使用，是需要去计算三角形带顶点位置的。

算法如下：

- 取上一个顶点的位置，和当前顶点的位置形成一个二维向量V1，然后得到V1的垂直向量V2，三角形带是有宽度width的，根据宽度width得到V2方向上的两个顶点，将得到的顶点存储起来。

当然只有顶点是不够的，还需要一幅纹理图和对应纹理坐标。纹理坐标就很简单了，t的值不是1就是0，而s的值需要切割成不同的段数。

纹理图如下：

纹理坐标如下所示：

当然顶点数据和纹理坐标都是需要动态更新的，然后使用OpenGL ES的纹理就可以画出来了。

5 代码

代码较长，我就简单贴一下存储控制参数的类吧。完整源码在：

* Simple to Introduction

* @Author [憨豆酒 yindou97@163.com]

* @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值，因为这里的线条颜色是我自己自定义的，不是从纹理冲采样出的颜色，纹理只提供“形状”，这里需要注意。

0 更新

效果是本人在大二时编写的，代码有可能有不符合规范的地方。可以根据算法自己实现。