OpenGL ES3.0实现简单粒子火焰效果

通过粒子系统来实现火焰效果，基本思想是把一团火焰看成是由一颗颗有其生命期的粒子组成，粒子在不停的产生直至消亡从而产生升腾的火焰效果。通过生成每个粒子的坐标，每颗火焰粒子是一个矩形，而这个矩形由两个三角形构成，包含6个顶点，把坐标传入渲染管线进行GPU的渲染生成最终效果。本文章效果是修改自《OpenGL ES 3.x游戏开发》中的火焰效果。

最终的效果

1、火焰产生的基本原理

1.1、每个粒子本质上是一个矩形，通过矩形图案中的不透明区域来确定粒子的形状。这里实现效果使用的是不透明区域为圆形的矩形。

1.2、产生火焰效果的粒子的位置不是固定的，是在一定区域内随机产生的，通过控制粒子的运动方向和生命周期产生火焰的形状。

粒子生命周期中的运动区域

1.3、粒子运动过程中还需要动态改变颜色值，着色器接收渲染管线传入的起始颜色、终止颜色、总衰减因子。然后根据当前片元距离粒子纹理矩形中心点的距离、总衰减因子、片元纹理采样颜色的透明度通道值、起始/终止颜色计算出当前片元的颜色，结合矩形中的透明度展示最后的颜色。

粒子中片元颜色值的计算策略

2、具体的实现

2.1、Java层主要的构成对象

Java层总体结构

2.1.1 CustomGLSurfaceView：继承自GLSurfaceView，专门负责OpenGL ES3.0的渲染和触摸事件的处理；
2.1.2 SceneRender：CustomGLSurfaceView的内部类，实现GLSurfaceView.Renderer，CustomGLSurfaceView的渲染就是通过其实现的；
2.1.3 ParticleSystem：火焰粒子系统的总控制类 ParticleSystem，实现了对所有粒子位置的计算以及该位置所对应的 6 个顶点坐标值的计算，同时还实现了定时更新粒子位置以及根据摄像机位置计算火焰朝向等；
2.1.4 ParticleForDraw：实现粒子的绘制；
2.1.5 ParticleDataConstant：常量类，封装了四个火焰效果的位置，颜色，生命周期等信息；
2.1.6 MatrixState：工具类，实现矩阵变换；
2.1.7 LoadUtil：工具类，用于3D模型文件加载，因为本案例没有使用到obj格式的3D模型，所以是没有实现的；
2.1.8 ShaderUtil：工具类，用于加载顶点着色器和片元着色器(OpenGL ES 2.0之后已经摈弃固定管线，现今是通过着色语言实现可编程管线功能)；
2.1.9 TextureUtil：工具类，用于加载图片资源转化为纹理供渲染管线使用；

2.2、渲染管线着色器的构成

从下图中可以看出顶点着色器和片元着色器所处的位置。

OpenGL ES 3.0 可编程渲染管线

在这个效果实现中也得必须实现这两个这色器。

着色器

着色器是使用着色语言编写的，在GPU中实现，是可编程管线中的重要组成部分，主要分为顶点着色器和片元着色器。

2.2.1 vertex.sh：顶点着色器，是一个可编程的处理单元，其功能是执行顶点的变换、光照、材质的应用与计算等顶点的相关操作，每顶点执行一次。

#version 300 es
uniform mat4 uMVPMatrix; //总变换矩阵
uniform float maxLifeSpan;//最大允许生命期
in vec4 aPosition;  //从渲染管线接收的顶点位置属性
in vec2 aTexCoor;    //从渲染管线接收的纹理坐标
out vec2 vTextureCoord;  //用于传递给片元着色器的纹理坐标

out vec4 vPosition;//用于传递给片元着色器的顶点位置属性
out float sjFactor;//用于传递给片元着色器的总衰减因子
void main()
{ //主函数
   gl_Position = uMVPMatrix * vec4(aPosition.x,aPosition.y,0.0,1); //根据总变换矩阵计算此次绘制此顶点位置
   vTextureCoord = aTexCoor;//将接收的纹理坐标传递给片元着色器
   vPosition=vec4(aPosition.x,aPosition.y,0.0,aPosition.w);//计算顶点位置属性，并将其传递给片元着色器
   sjFactor=(maxLifeSpan-aPosition.w)/maxLifeSpan;//计算总衰减因子，并将其传递给片元着色器
}

2.2.2 frag.sh：片元着色器是用于处理片元值及其相关数据的可编程单元，其可以执行纹理的采样、颜色的汇总、计算雾颜色等操作，每片元执行一次。

#version 300 es
precision mediump float;//给出默认浮点精度
uniform vec4 startColor;//起始颜色
uniform vec4 endColor;//终止颜色
uniform float bj;//纹理矩形半径
uniform sampler2D sTexture;//纹理内容数据

in vec2 vTextureCoord; //接收从顶点着色器传过来的纹理坐标
in vec4 vPosition;//接收从顶点着色器传过来的片元位置属性
in float sjFactor;//接收从顶点着色器传过来的总衰减因子

out vec4 fragColor; //输出到的片元颜色
void main()
{ //主函数
    if(vPosition.w==10.0)
    {//该片元的生命期为10.0时，处于未激活状态，不绘制
        fragColor=vec4(0.0,0.0,0.0,0.0);//舍弃此片元
    }else
    {//该片元的生命期不为10.0时，处于活跃状态，绘制
        vec4 colorTL = texture(sTexture, vTextureCoord);//进行纹理采样
        vec4 colorT;//颜色变量
        float disT=distance(vPosition.xyz,vec3(0.0,0.0,0.0));//计算当前片元与中心点的距离
        float tampFactor=(1.0-disT/bj)*sjFactor;//计算片元颜色插值因子
        vec4 factor4=vec4(tampFactor,tampFactor,tampFactor,tampFactor);
        colorT=clamp(factor4,endColor,startColor);//进行颜色插值
        colorT=colorT*colorTL.a;  //结合采样出的透明度计算最终颜色
        fragColor=colorT; //将计算出来的片元颜色传给渲染管线
    }
}

3、总结

效果看起来挺简单，但是需要的知识点特别多，示例中有一些地方我理解得也还不是很充分，因为其实现过程比较繁琐，粒子的顶点需要一个个绘制，幸亏是原有的示例，只是在其基础上进行一些简化和修改，添加了一些注释，示例源码可以拿来学习一下ParticleFireProject，在项目中是不能直接使用，因为其还有很多优化点。