Friday, June 10, 2011

Multi-Texturing

Multi-Texturing is nothing but mixing multiple texture as per your requirement. here I’ll mix these two textures to get the resulting screen below. its up to coder to mix textures to get desired effect.
Texture1:
Texture2:
and mixing result:
Let’s look at the code below. First we will look at shaders because major change is in shaders only.
Vertex Shader:
String strVShader =
"attribute vec4 a_position;" +
"attribute vec2 a_texCoords;" +
"varying vec2 v_texCoords;" +
"void main()" +
"{" +
  "v_texCoords = a_texCoords;" +
  "gl_Position = a_position;" +
"}";
Nothing fancy here, simple shader that passes texture co-ordinates to Fragment shader and sets vertex position.
Fragment shader:
This is where we will make few changes to mix/blend textures.
String strFShader =
"precision mediump float;" +
"varying vec2 v_texCoords;" +
"uniform sampler2D u_texId1;" +
"uniform sampler2D u_texId2;" +
"void main()" +
"{" +
     "vec4 color1 = texture2D(u_texId1, v_texCoords);" +
     "vec4 color2 = texture2D(u_texId2, v_texCoords);" +
     "gl_FragColor = color2 * color1;" +
"}";
Here, get the color values from the texture at the co-ordinates and manipulate them as you like. here i just multiplied 2 color vectors.
There is no much changes in remaining renderer code. but, we will see draw function.
public void onDrawFrame(GL10 gl) {
  GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
  GLES20.glUseProgram(iProgId);
 
  GLES20.glVertexAttribPointer(iPosition, 3, GLES20.GL_FLOAT, false, 0, vertexBuffer);
  GLES20.glEnableVertexAttribArray(iPosition);
 
  GLES20.glVertexAttribPointer(iTexCoords1, 2, GLES20.GL_FLOAT, false, 0, texBuffer);
  GLES20.glEnableVertexAttribArray(iTexCoords1);
 
  GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
  GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, iTexIds[0]);
  GLES20.glUniform1i(iTex1, 0);
 
  GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
  GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, iTexIds[1]);
  GLES20.glUniform1i(iTex2, 1);
 
//  GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, 4);
  GLES20.glDrawElements(GLES20.GL_TRIANGLES, 6, GLES20.GL_UNSIGNED_SHORT, indecesBuffer);

 }

Apart from passing vertex positions and texture co-ordinates, we have activated 2 textures (GL_TEXTURE0 and GL_TEXTURE1) for passing texture ids to shaders. we can go upto 32 textures. and as usual draw triangles or triangle fan to draw quad.

Saturday, June 4, 2011

Texturing Cube: Different Textures on each face

Today after lot of struggle for at least for a day, i could able to get cube Map running (its not hard, its just my ignorance), here it is how it looks

Here is the procedure for achieving cube map. firstly, we have to create a cube map with series of texture2D maps.

public int CreateCubeTexture()
{
    ByteBuffer fcbuffer = null;
         
    int[] cubeTex = new int[1];
           
            GLES20.glGenTextures(1, cubeTex, 0);
            GLES20.glBindTexture(GLES20.GL_TEXTURE_CUBE_MAP,cubeTex[0]);
           
            Bitmap img = null;
            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick1);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
           
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            Log.d("alpha",""+img.hasAlpha());
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_POSITIVE_X, 0, GLES20.GL_RGBA,
                                img.getWidth(),img.getHeight() , 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();
           
            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick2);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_NEGATIVE_X, 0, GLES20.GL_RGBA,
                                img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();
           
            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick3);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_POSITIVE_Y, 0, GLES20.GL_RGBA,
                                img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();
           
           
            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick4);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, GLES20.GL_RGBA,
                                 img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();
           
            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick5);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_POSITIVE_Z, 0, GLES20.GL_RGBA,
                                img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();
           
            img = BitmapFactory.decodeResource(curView.getResources(), R.raw.brick6);
            fcbuffer = ByteBuffer.allocateDirect(img.getHeight() * img.getWidth() * 4);
            img.copyPixelsToBuffer(fcbuffer);
            fcbuffer.position(0);
            GLES20.glTexImage2D(GLES20.GL_TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, GLES20.GL_RGBA,
                                img.getWidth(),img.getHeight(), 0,GLES20.GL_RGBA ,GLES20.GL_UNSIGNED_BYTE, fcbuffer);
            fcbuffer = null;
            img.recycle();
           
            GLES20.glGenerateMipmap(GLES20.GL_TEXTURE_CUBE_MAP);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_CUBE_MAP, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
            return cubeTex[0];
    }

in the above function, we have created a texture with glGenTexture and bind it to GL_TEXTURE_CUBE_MAP to tell opengl that this is a cube map.

next, I’m loading image from resource with Bitmap.

we have to define texture for each side/face of cube. that we can do with series of 2D Textures. Since we are using texture2D, we have to mention which side this texture belongs to. that can be done by specifying GL_TEXTURE_CUBE_MAP_POSITIVE_X, GL_TEXTURE_CUBE_MAP_NEGATIVE_X, GL_TEXTURE_CUBE_MAP_POSITIVE_Y, GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, GL_TEXTURE_CUBE_MAP_POSITIVE_Z and GL_TEXTURE_CUBE_MAP_NEGATIVE_Z.

Now Let’s look at shaders

Vertex Shader

String strVShader = "attribute vec4 a_position;" +
        "uniform mat4 u_VPMatrix;" +
        "varying vec3 v_texCoords;" +
        "attribute vec3 a_texCoords;" +
        "void main()" +
        "{" +
//          "v_texCoords = a_position.xyz;" +
          "v_texCoords = a_texCoords;" +
          "gl_Position = u_VPMatrix * a_position;" +
        "}";

Nothing great in vertex shader, we are just assigning texture co-ordinates to varying variable for using in fragment shader. and as usual calculating vertex position by multiplying view projection matrix with vertex position.

Fragment Shader

String strFShader = "precision mediump float;" +
        "uniform samplerCube u_texId;" +
        "varying vec3 v_texCoords;" +
        "void main()" +
        "{" +
          "gl_FragColor = textureCube(u_texId, v_texCoords);" +
        "}";

Here comes the main part in Fragment shader, till now we declared sampler2D variable for texture handle, but here we have declared new type samplerCube. so that we can use cube map that we have created for texturing our cube.

There is one more important change in Fragment shader i.e., textureCube function. texturecube function expects 3D texture co-ordinates for locating fragment color in cube map.

Finally Let’s take look at drawing functionality also

public void onDrawFrame(GL10 arg0) {
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
    GLES20.glUseProgram(iProgId);
   
    cubeBuffer.position(0);
    GLES20.glVertexAttribPointer(iPosition, 3, GLES20.GL_FLOAT, false, 0, cubeBuffer);
    GLES20.glEnableVertexAttribArray(iPosition);
   
    texBuffer.position(0);
    GLES20.glVertexAttribPointer(iTexCoords, 3, GLES20.GL_FLOAT, false, 0, texBuffer);
    GLES20.glEnableVertexAttribArray(iTexCoords);
   
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_CUBE_MAP, iTexId);
    GLES20.glUniform1i(iTexLoc, 0);
   
    Matrix.setIdentityM(m_fIdentity, 0);
    Matrix.rotateM(m_fIdentity, 0, -xAngle, 0, 1, 0);
    Matrix.rotateM(m_fIdentity, 0, -yAngle, 1, 0, 0);
    Matrix.multiplyMM(m_fVPMatrix, 0, m_fViewMatrix, 0, m_fIdentity, 0);
    Matrix.multiplyMM(m_fVPMatrix, 0, m_fProjMatrix, 0, m_fVPMatrix, 0);
    GLES20.glUniformMatrix4fv(iVPMatrix, 1, false, m_fVPMatrix, 0);
   
    GLES20.glDrawElements(GLES20.GL_TRIANGLES, 36, GLES20.GL_UNSIGNED_SHORT, indexBuffer);
  }

Just have a look at the highlighted code above and you will be able to figure out what is change compared to previous post. Yes, we are binding the texture as cube map. that’s the magic word here to get it running.


Texturing Cube : Applying (Same) Texture on All Faces of Cube

I became over-enthusiastic and tried to leap too far before covering my ground, soon i found myself facing ground.

I tried to go for cube map directly before applying texture with texture2D on cube. then i realised my mistake and here we are applying same texture to cube faces.

Screen shot:

there are changes in cube definition compared to previous post. Now, all the face are drawn Counter Clock Wise and back face culling. following is the cube definition.

  1: float[] cube = {
  2:     2,2,2, -2,2,2, -2,-2,2, 2,-2,2, //0-1-2-3 front
  3:     2,2,2, 2,-2,2,  2,-2,-2, 2,2,-2,//0-3-4-5 right
  4:     2,-2,-2, -2,-2,-2, -2,2,-2, 2,2,-2,//4-7-6-5 back
  5:     -2,2,2, -2,2,-2, -2,-2,-2, -2,-2,2,//1-6-7-2 left
  6:     2,2,2, 2,2,-2, -2,2,-2, -2,2,2, //top
  7:     2,-2,2, -2,-2,2, -2,-2,-2, 2,-2,-2,//bottom
  8:   };

here we are defining all the faces of cube, and we use indexes to define the triangles for drawing. and texture co-ordinates for each face.

  1: short[] indeces = {
  2:       0,1,2, 0,2,3,
  3:       4,5,6, 4,6,7,
  4:       8,9,10, 8,10,11,
  5:       12,13,14, 12,14,15,
  6:       16,17,18, 16,18,19,
  7:       20,21,22, 20,22,23,
  8:      
  9:       };
 10:  
 11:   float[] tex = {
 12:       1,0, 0,0, 0,1, 1,1,
 13:       0,0, 0,1, 1,1, 1,0,
 14:       1,1, 0,1, 0,0, 1,0,
 15:       0,0, 1,0, 1,1, 0,1,
 16:       0,1, 0,0, 1,0, 1,1,
 17:       0,0, 1,0, 1,1, 0,1,
 18:      
 19:       };

In constructor, added code to load texture co-ordinates into a buffer.

  1: public ViewPortRenderer(ES2SurfaceView view)
  2:   {
  3:     curView = view;
  4:     cubeBuffer = ByteBuffer.allocateDirect(cube.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
  5:     cubeBuffer.put(cube).position(0);
  6:    
  7:     colorBuffer = ByteBuffer.allocateDirect(colors.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
  8:     colorBuffer.put(colors).position(0);
  9:    
 10:     indexBuffer = ByteBuffer.allocateDirect(indeces.length * 4).order(ByteOrder.nativeOrder()).asShortBuffer();
 11:     indexBuffer.put(indeces).position(0);
 12:    
 13:     texBuffer = ByteBuffer.allocateDirect(tex.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
 14:     texBuffer.put(tex).position(0);
 15:   }

Let’s have a look at changes in shaders.

Vertex Shader:

  1: String strVShader = "attribute vec4 a_position;" +
  2:         "uniform mat4 u_VPMatrix;" +
  3:         "attribute vec2 a_texCoords;" +
  4:         "varying vec2 v_texCoords;" +
  5:         "void main()" +
  6:         "{" +
  7:           "v_texCoords = a_texCoords;" +
  8:           "gl_Position = u_VPMatrix * a_position;" +
  9:         "}";

instead of color we are taking texture co-ordinates.

Fragment Shader:

  1: String strFShader = "precision mediump float;" +
  2:         "varying vec4 v_color;" +
  3:         "uniform sampler2D u_texId;" +
  4:         "varying vec2 v_texCoords;" +
  5:         "void main()" +
  6:         "{" +
  7:           "gl_FragColor = texture2D(u_texId, v_texCoords);" +
  8:         "}";

here we took texture in a sampler2D, since we are loading texture as GL_TEXTURE_2D.

texture2D function gives the fragment color at texture position in loaded texture.

changes in onSurfaceCreated

  1: GLES20.glFrontFace(GLES20.GL_CCW);
  2: GLES20.glEnable(GLES20.GL_CULL_FACE);
  3: GLES20.glCullFace(GLES20.GL_BACK);

here we telling opengl that all the triangles are drawn in counter clock wise and enable cull face.

Changes in onDrawFrame

  1: texBuffer.position(0);
  2: GLES20.glVertexAttribPointer(iTexCoords, 2, GLES20.GL_FLOAT, false, 0, texBuffer);
  3: GLES20.glEnableVertexAttribArray(iTexCoords);
  4:    
  5: GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
  6: GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, iTexId);
  7: GLES20.glUniform1i(iTexLoc, 0);

Just here we are activating texture0 and binding the loaded texture to it. passing the texture index to shader with glUniform1i.

Wednesday, June 1, 2011

Setting Projection (Perspective Projection)

Till now we did not set view port. today, we will setup Perspective projection.

There are few changes in ES 2.0 compared to ES 1.1 like there is no Matrix Stock and co-ordinate transformation. i.e., we no longer have function like glMatrixMode, glRotate, glTranslate.

Hey, No worries. android is providing a class Matrix(android.opengl.Matrix) to do these missing functionalities like setting projection, rotating, translating, scaling etc., in ES 2.0.

Screen Shot of we are about to do:

New APIs that we are going to see are

  1. Matrix.setIdentityM
  2. Matrix.rotateM
  3. Matrix.multiplyMM
  4. Matrix.setLookAtM
  5. Matrix.frustumM

Lets look into code,

//cube co-ordinated
float[] cube = {
  -2, -2, -2,2, -2, -2,
         2,  2, -2,-2, 2, -2,
        -2, -2,  2,2, -2,  2,
         2,  2,  2,-2,  2,  2
  };
  //colors for each vertices
  float[] colors = {1,0,0, 0,1,0, 0,0,1, 1,1,0,
                    1,0,1, 0,1,1, 1,1,1, 0,0,0
  };
  //indeces for drawing the vertices in specified order
  short[] indeces = {
      0, 4, 5,0, 5, 1,
            1, 5, 6,1, 6, 2,
            2, 6, 7,2, 7, 3,
            3, 7, 4, 3, 4, 0,
            4, 7, 6,4, 6, 5,
            3, 0, 1,3, 1, 2};
 
  FloatBuffer cubeBuffer = null;
  FloatBuffer colorBuffer = null;
  ShortBuffer indexBuffer = null;

we have declared vertice, colors and indeces for drawing cube.


Vertex Shader:

String strVShader = "attribute vec4 a_position;" +
        "attribute vec4 a_color;" +
        "uniform mat4 u_VPMatrix;" +
        "varying vec4 v_color;" +
        "void main()" +
        "{" +
          "v_color = a_color;" +
          "gl_Position = u_VPMatrix * a_position;" +
        "}";

we have added new mat4 variable which holds the view port projection matrix. with viewport projection matrix we can determine the position of vertex.


Fragment Shader:

String strFShader = "precision mediump float;" +
        "varying vec4 v_color;" +
        "void main()" +
        "{" +
          "gl_FragColor = v_color;" +
        "}";


Fragment shader has nothing greate, it just sets the color.

public void onSurfaceCreated(GL10 arg0, EGLConfig arg1) {
    GLES20.glClearColor(0, 0, 0, 1);
    GLES20.glEnable(GLES20.GL_DEPTH_TEST);
    GLES20.glDepthFunc(GLES20.GL_LEQUAL);
   
    Matrix.setLookAtM(m_fViewMatrix, 0, 0, 0, -5, 0, 0, 0, 0, 1, 0);
.......
........
}

Just we have enabled Depth test. but here is the important part i.e., Matrix.setLookAtM, you may remember in OpenGL we have glLookAt function. functionality of setLookAtM is same as glLookAt function. setLookAtM gives us matrix with view position.

public void onSurfaceChanged(GL10 arg0, int width, int height) {
    GLES20.glViewport(0, 0, width, height);
    Matrix.frustumM(m_fProjMatrix, 0, -2, 2, -2, 2, 1, 10);
  }


in onSurfaceChanged function apart from setting viewport size, this time we also specifying frustum of the viewport.


Now Comes the drawing part



   1: public void onDrawFrame(GL10 arg0) {
   2:         GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
   3:         //let's multiply projection and view matrices
   4:         Matrix.multiplyMM(m_fVPMatrix, 0, m_fProjMatrix, 0, m_fViewMatrix, 0);
   5:         
   6:         GLES20.glUseProgram(iProgId);
   7:         cubeBuffer.position(0);
   8:         GLES20.glVertexAttribPointer(iPosition, 3, GLES20.GL_FLOAT, false, 0, cubeBuffer);
   9:         GLES20.glEnableVertexAttribArray(iPosition);
  10:         
  11:         colorBuffer.position(0);
  12:         GLES20.glVertexAttribPointer(iColor, 3, GLES20.GL_FLOAT, false, 0, colorBuffer);
  13:         GLES20.glEnableVertexAttribArray(iColor);
  14:         
  15:         Matrix.setIdentityM(m_fModelM, 0);
  16:         Matrix.rotateM(m_fModelM, 0, xAngle, 1, 0, 0);
  17:         Matrix.rotateM(m_fModelM, 0, -yAngle, 0, 1, 0);
  18:         //multiply model matrix with view-projection matrix
  19:         Matrix.multiplyMM(m_fMVPMatrix, 0, m_fVPMatrix, 0, m_fModelM, 0);
  20:         
  21:         GLES20.glUniformMatrix4fv(iVPMatrix, 1, false, m_fMVPMatrix, 0);

same as we do in normal OpenGL drawing, like load identity matrix.


since i’m rotating cube with touch event, so the angles in x,y axis.


use rotateM function to rotate the identity matrix, here it is a in-place rotation of identity matrix.


we first multiply view matrix and projection matrix.


we multiply the view-projection matrix (m_fVPMatrix) with our rotated model matrix and the result will be stored in model-view-projection m_fMVPMatrix.


then we multiply the above result with projection matrix. this result we will pass to vertex shader where we use this to determine the position of vertex in the viewport with projection matrix.


Rotating Cube


for rotating cube with touch, we have to add onTouchEvent in view class.

  1: public boolean onTouchEvent(MotionEvent event)
  2:   {
  3:     if (event.getAction() == MotionEvent.ACTION_DOWN)
  4:     {
  5:       touchedX = event.getX();
  6:       touchedY = event.getY();
  7:     } else if (event.getAction() == MotionEvent.ACTION_MOVE)
  8:     {
  9:       renderer.xAngle += (touchedX - event.getX())/2f;
 10:       renderer.yAngle += (touchedY - event.getY())/2f;
 11:      
 12:       touchedX = event.getX();
 13:       touchedY = event.getY();
 14:     }
 15:     return true;
 16:    
 17:   }


what we are doing here, store X and Y co-ordinates when touched the screen. find the difference whenever there is a movement. use this difference as angle for rotating cube.


Sunday, May 29, 2011

Particle System with Point Sprites–Part II

After struggle for a day (though it’s a simple logic), i got the desired particle effect…

Effect i was looking for is “Particles continuously flow from the centre”, this effect i could achieve without Shaders, but i wanted to do the same with Shaders.

code changes from the previous post are as below…

Changes in Draw function of ParticleManger class are highlighted below.

public void draw(int iPosition, int iMove, int iTimes, int iColor, int iLife, int iAge)
  {
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
  
    vertexBuffer.position(0);
    GLES20.glVertexAttribPointer(iPosition, 3, GLES20.GL_FLOAT, false, PARTICLE_SIZE * 4, vertexBuffer);
    GLES20.glEnableVertexAttribArray(iPosition);
  
    vertexBuffer.position(3);
    GLES20.glVertexAttribPointer(iColor, 3, GLES20.GL_FLOAT, false, PARTICLE_SIZE * 4, vertexBuffer);
    GLES20.glEnableVertexAttribArray(iColor);
  
    vertexBuffer.position(6);
    GLES20.glVertexAttribPointer(iMove, 3, GLES20.GL_FLOAT, false, PARTICLE_SIZE * 4, vertexBuffer);
    GLES20.glEnableVertexAttribArray(iMove);
  
    vertexBuffer.position(9);
    GLES20.glVertexAttribPointer(iLife, 1, GLES20.GL_FLOAT, false, PARTICLE_SIZE * 4, vertexBuffer);
    GLES20.glEnableVertexAttribArray(iLife);
  
    vertexBuffer.position(10);
    GLES20.glVertexAttribPointer(iAge, 1, GLES20.GL_FLOAT, false, PARTICLE_SIZE * 4, vertexBuffer);
    GLES20.glEnableVertexAttribArray(iAge);
  
    GLES20.glUniform1f(iTimes, nTimeCounter);
  
    GLES20.glDrawArrays(GLES20.GL_POINTS, 0, NUM_PARTICLES);
  }

I'm passing life and age attribute values for each particle to Vertex Shader.

Changes in Vertex Shader are highlighted below (need to optimize interms of operation steps though).

String strVShader =
            "precision mediump float;" +
            "attribute vec4 a_Position;" +
            "attribute vec4 a_move;" +
            "uniform float a_time;" +
            "attribute vec4 a_color;" +
            "varying vec4 v_color;" +
            "attribute float a_life;" +
            "attribute float a_age;" +
            "varying float alpha;" +
            "float time;" +
            "void main()" +
            "{" +
                "alpha = a_life - (a_time * 10.0 * a_age);" +
                "time = a_time;" +
                "if (alpha < 0.0)" +
                "{" +
                    "float td = a_life/a_age;" +
                    "td /= 10.0;" +
                    "float df = a_time/td;" +
                    "int div = int(df);" +
                    "df = float(div);" +
                    "td *= df;" +
                    "time = a_time - td;" +
                    "alpha = a_life - (time * 10.0 * a_age);" +
                "}" +
                "gl_PointSize = 5.0;" +
                "v_color = a_color;" +
                "gl_Position = a_Position;" +              
                "gl_Position += (time * a_move * 0.5);" +
                "gl_Position.w = 1.0;" +
            "}";

here calculation logic is as follows:

  1. if particle run out of life (i.e., alpha calculated is less than zero), then
  2. Calculate the time (td), when particle has possibly died.
  3. find the modulo of current time and the calculated time in above step. thats is stored in time variable.
  4. calculate the alpha value based on the new calculated time.
  5. use calculated time to set the vertex position.

Fragment Shader do not have any changes.

Code for this post can be found at Google Code