使用opengl实现爆炸特效

原理是用点阵展示图片，将点阵传给glsl里面的噪音方法更改位置。

图像对象储存顶点数据

这里我设置了顶点数据和图片的顶点数据传入，因为顶点和图片的点阵不一样分开储存。

public class PointPicture {private  static  final int POSITION_COMPONENT_COUNT = 3;private  static  final int COLOR_COMPONENT_COUNT = 3;private  static  final int VECTOR_COMPONENT_COUNT = 3;private  static  final int PARTICLE_START_COMPONENT_COUNT = 1;private final ObjectBuilder.GeneratedData generatedData;private final ObjectBuilder.GeneratedData generatedData2;private final VertexArray vertexArray;private final VertexArray vertexArray2;public PointPicture() {generatedData= ObjectBuilder.createPicture(100,100);generatedData2= ObjectBuilder.createPicture2(100,100);Log.e( "Picture: ",generatedData.toString() +"");Log.e("Picture: ",generatedData2.toString()  +"");this.vertexArray = new VertexArray(generatedData.vertexData);this.vertexArray2 = new VertexArray(generatedData2.vertexData);}public  void bindData(PointPictureShaderProgram program){vertexArray.setVertexAttribPointer(0,program.getA_PositionLocation(),POSITION_COMPONENT_COUNT, 0);vertexArray2.setVertexAttribPointer(0,program.getA_TextureCoodinatesLocation(),2,0);}public void draw(){for (int i = 0; i < generatedData.drawCommands.size(); i++) {generatedData.drawCommands.get(i).draw();}}
}

生成顶点数据

  //图片顶点
private void appendPicturePoint(int clums ,int rows){float perX= 2f/ ((float) clums);float perY= 2f/ ((float) rows);float Z = 0 ;final float size = clums*rows;//起点需要复用闭合for (int i = 0; i < size; i++) {//x上面的点vertexData[offset++] =  1- ((int) (i % clums))*perX;//yvertexData[offset++] =  2- ((int) (i / clums))*perY;//zvertexData[offset++] = Z;}drawCommands.add(new DrawCommand() {@Overridepublic void draw() {GLES20.glDrawArrays(GLES20.GL_POINTS,0, (int) size);}});}
//图片纹理顶点private void appendPicturePoint2(int clums ,int rows){float perX= 1f/ ((float) clums);float perY= 1f/ ((float) rows);Log.e( "appendPicturePoint2: ",perX+"m"+perY );final float size = clums*rows;//起点需要复用闭合for (int i = 0; i < size; i++) {//x上面的点vertexData[offset++] =   (float)((int) (i % clums))*perX;//yvertexData[offset++] =   (float)((int) (i / clums))*perY;//zLog.e( "appendPicturePoint2: ", "-------"+vertexData[offset-1]+"-------"+vertexData[offset-2]+"-------");Log.e( "appendPicturePoint2: ", size+"");}drawCommands.add(new DrawCommand() {@Overridepublic void draw() {GLES20.glDrawArrays(GLES20.GL_POINTS,0, (int) size);}});}

着色器程序

public class PointPictureShaderProgram extends ShaderProgram {private final int uProgressLoctaion;//UNIFORM LOCATIONSprivate int u_MatrixLocation;//attribute locationsprivate int a_PositionLocation;private int a_TextureCoodinatesLocation;private int a_ColorLocation;private int u_TextureUnitLocation;private int u_TimeLocation;public PointPictureShaderProgram(Context context, int resVertex, int resFrag) {super(context, resVertex, resFrag);u_MatrixLocation = GLES20.glGetUniformLocation(program, Constants.U_MATRIX);u_TextureUnitLocation = GLES20.glGetUniformLocation(program, Constants.U_TEXTUREUNIT);a_TextureCoodinatesLocation = GLES20.glGetAttribLocation(program, Constants.A_TEXTURECOODINATES);a_PositionLocation = GLES20.glGetAttribLocation(program, Constants.A_POSITION);a_ColorLocation = GLES20.glGetUniformLocation(program, Constants.U_COLOR);u_TimeLocation = GLES20.glGetUniformLocation(program, Constants.U_TIME);uProgressLoctaion = GLES20.glGetUniformLocation(program, "uProgress");}
//设置矩阵和贴图纹理public void setUniforms(float[]matrix ,int textureId){GLES20.glUniformMatrix4fv(u_MatrixLocation,1,false,matrix,0);
//        GLES20.glUniform4f(a_ColorLocation,1f,0f,0f,1f);GLES20.glActiveTexture(GLES20.GL_TEXTURE0);GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,textureId);GLES20.glUniform1i(u_TextureUnitLocation,0);}//设置uniform的float参数public void setUniformsUTime(float uTime,float uprogress){GLES20.glUniform1f(u_TimeLocation,uTime);GLES20.glUniform1f(uProgressLoctaion,uprogress);}

主要特效是实现粒子的动态效果，这个是我从一个webgl网站上找到修改的下面是链接

three.js 实现图片粒子爆炸特效 - 掘金

noise.glsl

precision  mediump float;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
uniform float uTime;
attribute vec3 a_Position;
attribute vec2 a_TextureCoodinates;
uniform float uProgress;
uniform mat4 u_Matrix;varying vec2 v_TextureCoodinates;vec4 permute(vec4 x){return mod(((x*34.)+1.)*x,289.);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-.85373472095314*r;}float snoise(vec3 v){const vec2 C=vec2(1./6.,1./3.);const vec4 D=vec4(0.,.5,1.,2.);// First cornervec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);// Other cornersvec3 g=step(x0.yzx,x0.xyz);vec3 l=1.-g;vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);//  x0 = x0 - 0. + 0.0 * Cvec3 x1=x0-i1+1.*C.xxx;vec3 x2=x0-i2+2.*C.xxx;vec3 x3=x0-1.+3.*C.xxx;// Permutationsi=mod(i,289.);vec4 p=permute(permute(permute(i.z+vec4(0.,i1.z,i2.z,1.))+i.y+vec4(0.,i1.y,i2.y,1.))+i.x+vec4(0.,i1.x,i2.x,1.));// Gradients// ( N*N points uniformly over a square, mapped onto an octahedron.)float n_=1./7.;// N=7vec3 ns=n_*D.wyz-D.xzx;vec4 j=p-49.*floor(p*ns.z*ns.z);//  mod(p,N*N)vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.*x_);// mod(j,N)vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.-abs(x)-abs(y);vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);vec4 s0=floor(b0)*2.+1.;vec4 s1=floor(b1)*2.+1.;vec4 sh=-step(h,vec4(0.));vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);//Normalise gradientsvec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;// Mix final noise valuevec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);m=m*m;return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
}vec3 snoiseVec3(vec3 x){return vec3(snoise(vec3(x)*2.-1.),snoise(vec3(x.y-19.1,x.z+33.4,x.x+47.2))*2.-1.,snoise(vec3(x.z+74.2,x.x-124.5,x.y+99.4)*2.-1.));
}vec3 curlNoise(vec3 p){const float e=.1;vec3 dx=vec3(e,0.,0.);vec3 dy=vec3(0.,e,0.);vec3 dz=vec3(0.,0.,e);vec3 p_x0=snoiseVec3(p-dx);vec3 p_x1=snoiseVec3(p+dx);vec3 p_y0=snoiseVec3(p-dy);vec3 p_y1=snoiseVec3(p+dy);vec3 p_z0=snoiseVec3(p-dz);vec3 p_z1=snoiseVec3(p+dz);float x=p_y1.z-p_y0.z-p_z1.y+p_z0.y;float y=p_z1.x-p_z0.x-p_x1.z+p_x0.z;float z=p_x1.y-p_x0.y-p_y1.x+p_y0.x;const float divisor=1./(2.*e);return normalize(vec3(x,y,z)*divisor);
}void main() {/* vec3 noise=curlNoise(vec3(position.x*.02,position.y*.008,uTime*.05));vec3 distortion=vec3(position.x*2.,position.y,1.)*noise*uProgress;vec3 newPos=position+distortion;vec4 modelPosition=modelMatrix*vec4(newPos,1.);vec4 viewPosition=viewMatrix*modelPosition;vec4 projectedPosition=projectionMatrix*viewPosition;*/float uTime2=uTime+10.;/*  vec4 modelPosition=modelMatrix*vec4(newPos,1.);vec4 viewPosition=viewMatrix*modelPosition;vec4 projectedPosition=projectionMatrix*viewPosition;gl_Position=projectedPosition;*/
//    gl_PointSize=2.;vec3 noise=curlNoise(vec3(a_Position.x*2.,a_Position.y*.8,uTime*.5));vec3 distortion=vec3(a_Position.x*2.,a_Position.y,1.)*noise*uProgress;vec3 newPos=a_Position+distortion;gl_Position=u_Matrix*vec4(newPos,1.);gl_PointSize= 8.5;v_TextureCoodinates=a_TextureCoodinates;}

设置视图矩阵

  //一个标准的定义GLES20.glViewport(0,0,width,height);MatrixHelper.perspectiveM(projectMatrix,45,(float)width/ ((float) height),1f,10f);Matrix.setIdentityM(viewMatrix,0);Matrix.translateM(viewMatrix,0,0f,-1.5f,-5f);Matrix.multiplyMM(viewProjectMatrix,0,projectMatrix,0,viewMatrix,0);

设置动态更改uprogress动画

@Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig config) {GLES20.glEnable(GLES20.GL_BLEND);GLES20.glBlendFunc(GLES20.GL_ONE,GLES20.GL_ONE);GLES20.glClearColor(0f,0f,0f,0f);pointPicture = new PointPicture();pointPictureShaderProgram = new PointPictureShaderProgram(context,R.raw.texture_noise_vertex_shader,R.raw.point_picture_fragment_shader);textureId = TextrueHelper.loadTextrue(context,R.drawable.bg4);ValueAnimator valueAnimator=new ValueAnimator();valueAnimator.setFloatValues(0f,1f,0f);valueAnimator.setDuration(1000*10);valueAnimator.setRepeatMode(RESTART);valueAnimator.setRepeatCount(INFINITE);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {//获取动态值uProgress  = (float) animation.getAnimatedValue();//设置动态值Log.e("onAnimationUpdate: ", uProgress+"");//重新绘制}});((Activity) context).runOnUiThread(new Runnable() {@Overridepublic void run() {valueAnimator.start();}});}

执行绘制

   int i=0;@Overridepublic void onDrawFrame(GL10 gl) {GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);pointPictureShaderProgram.useProgram();pointPictureShaderProgram.setUniforms(viewProjectMatrix,textureId);Log.e("onDrawFrame: ", i+"");pointPictureShaderProgram.setUniformsUTime(i++/300f,uProgress);pointPicture.bindData(pointPictureShaderProgram);pointPicture.draw();}

图形点是正方形的你可以添加以下方法优化其中注释的方法是将正方形变成圆

/*    float xDistance = 0.5- gl_PointCoord.x;float yDistance = 0.5- gl_PointCoord.y;float distanceFromCenter =sqrt(xDistance*xDistance+yDistance*yDistance);if(distanceFromCenter>0.5){discard;}else{gl_FragColor =vec4(v_Color/v_ElapsedTime,1.0);}*/
//点加载整个贴图方法gl_FragColor =texture2D(u_TextureUnit,vec2(gl_PointCoord.x,gl_PointCoord.y));

使用opengl实现爆炸特效相关推荐

three.js 实现图片粒子爆炸特效
大家好,这里是 CSS 魔法使--alphardex. 以下是最终实现的效果图撒,哈吉马路由! 准备工作笔者的three.js模板:点击右下角的fork即可复制一份世界同步在我的上一篇博文中, ...
Android粒子爆炸特效[可用于任意控件]
小米手机用户可以看到,小米手机在应用卸载时会有一个粒子爆炸的特效效果,对此类动画效果垂涎已久,奈何一直没有机会用.正好最近项目里需要用到粒子爆炸的特效,于是便抽时间自己也试着仿写了一个效果出来. 先看 ...
unity 点击UI显示3D爆炸特效
昨天改<降龙十八掌>项目反馈时经理要求我在项目中点击到手印时显示爆炸特效,昨天折腾了好一会没弄好就先弄其它项目反馈了,今天改完反馈后有时间来研究下这个功能. 昨天就简单的写了点代码进行测试 ...
html爆炸效果,HTML5 SVG炫酷文字爆炸特效
这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.不论是HTML还是CSS都没有能力将文字分割成小块,但是SVG可以实现这个效果. 制作SVG文字可以使用矢量图制作工具,如Ado ...
鼠标经过爆炸效果html,jquery鼠标滑过爆炸特效插件
sparkleHover.js是鼠标滑过HTML元素产生爆炸特效的jquery插件.通过该jquery插件,你可以在鼠标经过指定的HTML元素时,使用指定的图片来制作炫酷的爆炸效果. 使用方法在页面 ...
QT飞机大战五(碰撞爆炸特效类)
如图所示,在子弹碰到敌机时,同时产生爆炸特效,显得不那么突兀那么怎么做到的呢?? 其实也很简单,爆炸特效由一些图片组成,每当我们检测到子弹和敌机相交时就在这个位置播放一个爆炸特效,那么爆炸也可以封 ...
android 粒子爆炸特效
先上图: 这是一个高级UI特效,是个动画. 完成这个动画只要3步: 1.控件完成振动效果动画. 2.控件振动动画完成后消失,然后将控件转换成Bitmap. 3.Bitmap完成粒子爆炸特效. 其实完成 ...
Ureal：用ue4做出游戏中的爆炸特效真实感和力量感
//博主是一个热爱游戏的玩家,并不是专业游戏开发者,内容如有不足,还请各位多多包涵大家好!今天主要想聊一下:如何体现出游戏中的爆炸特效真实感和力量感包括Ue4中爆炸的蓝图代码实现的思路(如过需要代 ...
Android UI - 粒子爆炸特效
Android UI - 粒子爆炸特效效果实现分析关键代码源码效果实现分析首先动画效果需要在一个位于顶层的view上绘制,目的是不被其他控件遮挡. 添加点击事件,触发后给控件加一个抖 ...

使用opengl实现爆炸特效

使用opengl实现爆炸特效相关推荐

最新文章

热门文章