重要

为了方便大家共同交流学习，我对项目进行了升级，建议大家去我的GitHub去查看，本文章的算法部分还是可以借鉴的。改动具体如下。
1、添加详细类注释，概括类的功能。
2、修改了部分变量名称。
3、升级项目环境为Android Studio 3.2，原版本为2.2，已经淘汰。

1 说在开始

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

2 代码位置

作者：尹豆（憨豆酒），联系我yindou97@163.com，熟悉图形学，图像处理领域，本章代码： https://github.com/douysu/computer-graphics-notes

我的知乎
个人主页

3 运行效果

当然我触控的方法都是基于Android的触控写的。

4 原理部分

其算法与cocos的的MotionStreak类似。
OpenGL ES中有三种基本的图元，点线和三角形。点主要用在粒子系统，最常用的就是三角形，我们看到的做工精美的3D模型就是很多三角形组成的，三角形的数量也就决定了模型的精细程度，因为在我们的需求里用三角形就措措有余了。
思路大体如下：
其实绘制的就是一个三角形带。在平常的程序中，经常使用的绘制方式是GL_TRIANGLES，此绘制方式就是以三角形进行绘制。但是这里使用的绘制方式是GL_TRIANGLE_STRIP，此绘制方式就是使用三角带形式进行绘制。
其实可以发现，不管这种特效是跟着武器走还是跟着手指滑动走，都是动态改变的，这就说明我们需要动态去更新这个三角带，不断的向三角形带中加入或者移除顶点。
顶点的移除有两种方式：

第一种是每个顶点都有个生存周期，过了生命周期的时间就会被移除
第二种是规定一个顶点个数的上限，超过顶点个数就会被移除

4.1 如何生成三角形带的顶点位置？

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

取上一个顶点的位置，和当前顶点的位置形成一个二维向量V1，然后得到V1的垂直向量V2，三角形带是有宽度width的，根据宽度width得到V2方向上的两个顶点，将得到的顶点存储起来。
当然只有顶点是不够的，还需要一幅纹理图和对应纹理坐标。纹理坐标就很简单了，t的值不是1就是0，而s的值需要切割成不同的段数。
纹理图如下

纹理坐标如下所示：

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

5 代码部分

代码较长，我就简单贴一下存储控制参数的类吧。完整的Demo可以在我github上找到。

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

6 最后

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

【OpenGL编程】拖尾、刀光、剑光、尾焰效果的开发相关推荐

shader拖尾_【OpenGL编程】拖尾、刀光、剑光、尾焰效果的开发
1 说在开始最近模拟了切水果里面的拖尾效果,其可以应用在许多的场景里面,例如,武器的刀光,飞机的尾焰效果等等.我开发的这个Demo是基于OpenGL ES的,开发环境(IDE)使用的Android ...
【天下有春】剑气纵横三万里，一剑光寒十九洲
少年高高提起的双手之间,有缕缕春风欢快萦绕双袖,如一尾尾青色蛟龙在云海游曳. 陈平安轻声问道:"齐先生?" 一个温暖醇厚的嗓音在陈平安身旁响起,"在的." 慢慢 ...
Win32 OpenGL 编程
Win32 OpenGL 编程(1)Win32下的OpenGL编程必须步骤一. 前言人生在于折腾,继续折腾吧. OpenGL 编程的红宝书< OpenGL Programming Gu ...
OpenGL编程入门学习
OpenGL编程入门学习非常详细的教程,很适合初学者本文转自:http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html === ...
QT openGL 编程笔记
据说QT牛,特地花了一个晚上来研究研究.其实我也不想把自己搞得熊猫眼,只是碰到问题了精力就特好,想睡觉都不行.第一次尝试在LINUX下用OpenGL编程,实在是很兴奋,只是感觉碰了不少灰.一个问题从1 ...
刀与剑-COM返回数组
COM明明是一种编程思想,是一门绝世武功.可时代忽然迈入火器,无数人抛弃掉这晦涩难懂的绝世武功,转身投入速成的技艺时代. "很多不懂 com 的C++程序员会自行发明一个 com 的子集,而 ...
Win32 OpenGL编程 5 顶点数组详细介绍
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Win3 ...
OpenGl编程指南例2.4大白话分析
OpenGl编程指南例2.4分析即上一篇文章搭建了opengl的环境后,继续学习Opengl,被第二章的各种gen,bind,buffer搞得晕头转向,在还没有消化完全的时候,又被一计重击打到--为 ...
基于结构光测量技术和3D物体识别技术开发的机器人3D视觉引导系统
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|新机器视觉基于结构光测量技术和3D物体识别技术开发的机器 ...

【OpenGL编程】拖尾、刀光、剑光、尾焰效果的开发

重要