Updated to be Android 2.0.1 compatible.

You are new to this series? Please start with the first part.

The fourth part of this series will show you how to add some colors to you triangle.

In the last part we created a second static triangle to prove the rotation of the triangle and not the entire scene. We will now get rid of this static triangle by removing the function initStaticTriangle(), removing both buffers, _indexBufferStatic and _vertexBufferStatic, used for it. We also have to remove the last 4 lines of code of our onDrawFrame() where we initialized the static triangle.
The “new” onDrawFrame() method should now look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@Override
public void onDrawFrame(GL10 gl) {
    // define the color we want to be displayed as the "clipping wall"
    gl.glClearColor(_red, _green, _blue, 1.0f);
 
    // reset the matrix - good to fix the rotation to a static angle
    gl.glLoadIdentity();
 
    // clear the color buffer to show the ClearColor we called above...
    gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
 
    // set rotation for the non-static triangle
    gl.glRotatef(_angle, 0f, 1f, 0f);
 
    gl.glColor4f(0.5f, 0f, 0f, 0.5f);
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, _vertexBuffer);
    gl.glDrawElements(GL10.GL_TRIANGLES, _nrOfVertices, GL10.GL_UNSIGNED_SHORT, _indexBuffer);
}

Now we can create a new buffer which will keep the color informations. The _colorBuffer will be a object variable, but w need to define the colors and fill the buffer where we initialize the other buffers, in our initTriangle() method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// code snipped
 
// a raw buffer to hold the colors
private FloatBuffer _colorBuffer;
 
// code snipped
private void initTriangle() {
    // float has 4 bytes
    ByteBuffer vbb = ByteBuffer.allocateDirect(_nrOfVertices * 3 * 4);
    vbb.order(ByteOrder.nativeOrder());
    _vertexBuffer = vbb.asFloatBuffer();
 
    // short has 4 bytes
    ByteBuffer ibb = ByteBuffer.allocateDirect(_nrOfVertices * 2);
    ibb.order(ByteOrder.nativeOrder());
    _indexBuffer = ibb.asShortBuffer();
 
    // float has 4 bytes, 4 colors (RGBA) * number of vertices * 4 bytes
    ByteBuffer cbb = ByteBuffer.allocateDirect(4 * _nrOfVertices * 4);
    cbb.order(ByteOrder.nativeOrder());
    _colorBuffer = cbb.asFloatBuffer();
 
    float[] coords = {
        -0.5f, -0.5f, 0f, // (x1, y1, z1)
        0.5f, -0.5f, 0f, // (x2, y2, z2)
        0.5f, 0.5f, 0f // (x3, y3, z3)
    };
 
    float[] colors = {
        1f, 0f, 0f, 1f, // point 1
        0f, 1f, 0f, 1f, // point 2
        0f, 0f, 1f, 1f, // point 3
    };
 
    _vertexBuffer.put(coords);
    _indexBuffer.put(_indicesArray);
    _colorBuffer.put(colors);
 
    _vertexBuffer.position(0);
    _indexBuffer.position(0);
    _colorBuffer.position(0);
}

We create the object variable _colorBuffer of type FloatBuffer (line 4). In the method initTriangle() we allocate enough memory for the new color buffer (line 19-21). The we create a float array (line 23-27) with 4 values for each vertex. The structure is for RGBA (red, green, blue, alpha) so the first vertex will have the color red, the second green and the third is blue. The last two steps are equal to the _vertexBuffer. We put the color array into the buffer and set the position of the buffer to 0.

With the preparation done, we can start to tell OpenGL ES to use color arrays too. This will be done by the method glEnableClientState() and, similar to the vertexBuffer, by calling glColorPointer().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
    // preparation
    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
    initTriangle();
}
 
// code snipped
 
@Override
public void onDrawFrame(GL10 gl) {
    // code snipped
 
    // gl.glColor4f(0.5f, 0f, 0f, 0.5f);
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, _vertexBuffer);
    gl.glColorPointer(4, GL10.GL_FLOAT, 0, _colorBuffer);
    gl.glDrawElements(GL10.GL_TRIANGLES, _nrOfVertices, GL10.GL_UNSIGNED_SHORT, _indexBuffer);
}

On line 5 we enabled the color mode. On line 17 we set the color pointer. The parameter 4 stands for the RGBA (which are 4 values) and the rest should be familiar.
As you may notice, we commented the line 15, because when we use the color mode, we don’t need glColor4f. It will be overridden, so we can comment it out or just delete it.

Source as Eclipse project: Vortex Part IV

3d-part-four-triangle13d-part-four-triangle

Go to Android 3D game tutorial – Part V

  • Share/Bookmark