July 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Android OpenGL ES Tutorial, Page 2

  • May 15, 2012
  • By Chunyen Liu
  • Send Email »
  • More Articles »

Rendering Triangles with Colors in an Android OpenGL Project

The example on the previous page illustrates most of the basic pieces used in an OpenGL ES project. Let us modify the code further so that it will treat each face as a triangle instead of just drawing border lines. Each triangle contains 3 indices from vertex array. We then construct the mTriangleIndexBuffer byte buffer. This time we also introduce the color array for multiple colors assigned to all vertices. The color byte array is stored in mColorBuffer. While rendering these triangles, we use the GL10.GL_TRIANGLES primitive.

class MyRenderer implements Renderer { 
public void onDrawFrame(GL10 gl) {
...

// Draw all triangles
gl.glColorPointer(4, GL10.GL_FLOAT, 0, mColorBuffer);
gl.glDrawElements(GL10.GL_TRIANGLES, mNumOfTriangleIndices,
GL10.GL_UNSIGNED_SHORT, mTriangleIndexBuffer);
}

private void setAllBuffers(){
...

// Set triangle buffer with vertex indices
short trigindexlist[] = {
1, 3, 0, 2, 0, 3, 4, 0, 2, 4, 2, 3, 4, 3, 1, 4, 1, 0
};
mNumOfTriangleIndices = trigindexlist.length;
ByteBuffer ibb = ByteBuffer.allocateDirect(trigindexlist.length * 2);
ibb.order(ByteOrder.nativeOrder());
mTriangleIndexBuffer = ibb.asShortBuffer();
mTriangleIndexBuffer.put(trigindexlist);
mTriangleIndexBuffer.position(0);

// Set triangle color buffer
float trigcolorlist[] = {
1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f,
};
ByteBuffer cbb = ByteBuffer.allocateDirect(trigcolorlist.length * 4);
cbb.order(ByteOrder.nativeOrder());
mColorBuffer = cbb.asFloatBuffer();
mColorBuffer.put(trigcolorlist);
mColorBuffer.position(0);
}
}

Figure 2 shows the result.

Android OpenGL

Figure 2: Colored Triangles

Mapping Textures in an Android OpenGL Project

We have made the object more interesting by rendering triangles with colors. Another popular implementation is to map bitmap textures onto geometric objects. Surface vertices need to be mapped onto the texture space. We have our pyramid base composed of 2 triangles as in Figure 3.

Android OpenGL

Figure 3: Texture Coordinates

The green text represents the 2D texture space (U, V) while the white text represents the vertex indices. We also need to generate the texture byte buffer as in mTextureBuffer. Additionally, we need to generate the texture object (gl.glGenTextures), bind it (gl.glBindTexture), and refer it to a 2-D bitmap (GLUtils.texImage2D). The result is shown in Figure 4.

class MyRenderer3 implements Renderer { 
private FloatBuffer mTextureBuffer = null;
private int [] mTextureList = null;

public void onDrawFrame(GL10 gl) {
...

// Draw all textured triangles
gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, mTextureBuffer);
gl.glDrawElements(GL10.GL_TRIANGLES, mNumOfTriangleIndices,
GL10.GL_UNSIGNED_SHORT, mTriangleIndexBuffer);
}

public void onSurfaceCreated(GL10 gl, EGLConfig config) {
...

// Set texture-related stuff
Bitmap b = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.t);
gl.glEnable(GL10.GL_TEXTURE_2D);

mTextureList = new int[1];
gl.glGenTextures(1, mTextureList, 0);
gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureList[0]);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
gl.glTexEnvf(GL10.GL_TEXTURE_ENV, GL10.GL_TEXTURE_ENV_MODE, GL10.GL_MODULATE);
gl.glClientActiveTexture(GL10.GL_TEXTURE0);
gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, b, 0);
b.recycle();

// Get all the buffers ready
setAllBuffers();
}

private void setAllBuffers(){
...

// Set texture buffer
float texturecoords[] = {0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.5f, 0.5f};
ByteBuffer tbb = ByteBuffer.allocateDirect(texturecoords.length * 4);
tbb.order(ByteOrder.nativeOrder());
mTextureBuffer = tbb.asFloatBuffer();
mTextureBuffer.put(texturecoords);
mTextureBuffer.position(0);
}
}

Android OpenGL

Figure 4: Textured Pyramid

Conclusion

This tutorial is intended to introduce the basics you need to start developing OpenGL ES applications in Android. OpenGL itself is a comprehensive graphics library used broadly in commercial software in various platforms, so there is no way I could cover all its details in a short tutorial like this. But here are some helpful pointers:

  • For performance consideration, you can use GLSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
  • You can easily add gesture control in Android to manipulate objects for better user interaction.
  • For more OpenGL tutorials, I found these references very useful:

References

  1. You can get yourself started in Android by finding the comprehensive suite of Android development tools, plug-ins, sample projects, and documentation at Google's site for developers.
  2. The entire OpenGL project for Android -- Download and import into Eclipse by selecting "Creating project from existing source."
  3. Android OpenGL
  4. Android Developers
  5. Androidlet

About the Author

Chunyen Liu has been a software professional for many years. Some of his applications were among winners at programming contests administered by Sun, ACM, and IBM. He has co-authored software patents, written 25+ articles, reviewed books, and also created numerous hobby apps at Androidlet and The J Maker. He holds advanced degrees in Computer Science with knowledge from 20+ graduate-level courses. On the non-technical side, he is a tournament-ranked table tennis player, certified umpire, and certified coach of USA Table Tennis.


Tags: OpenGL, Android App development



Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel