{"id":643,"date":"2011-10-06T21:37:00","date_gmt":"2011-10-06T21:37:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/android-game-development-opengl-texture-mapping.html"},"modified":"2012-10-21T20:31:36","modified_gmt":"2012-10-21T20:31:36","slug":"android-game-development-opengl-texture","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2011\/10\/android-game-development-opengl-texture.html","title":{"rendered":"Android Game Development \u2013 OpenGL Texture Mapping"},"content":{"rendered":"
In the previous two articles (article 1<\/a> and article 2<\/a>) I have tried to introduce OpenGL ES on android. Now let\u2019s take it further and build on them. In this article we will create a billboard (which is a square) and we will apply a texture onto it. A texture is nothing more than a bitmap image. When we work in 2D we set the Z coordinate to 0. We\u2019ll cover 3D later. This is very useful to use in 2D games and is the preferred way to display images using OpenGL. It is very fast indeed.<\/p>\n

In the previous articles we managed to display triangles. How to display a square then? A square is composed of 2 triangles.<\/p>\n

The following diagram shows you this:<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Square from Triangles<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

There is an interesting thing to note here. The square is ABDC<\/strong> instead of the usual ABCD<\/strong>. Why is that? Because of how OpenGL chains triangles together.<\/p>\n

What you see here is a triangle strip<\/a><\/em>. A triangle strip is a series of connected triangles, 2 triangles in our case.<\/p>\n

OpenGL draws the following triangle strip (which is a square) using the vertices in the following order:<\/p>\n

Triangle 1:<\/strong> V1 -> V2 -> V3<\/p>\n

Triangle 2:<\/strong> V3 -> V2 -> V4<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Triangle Strip<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

It draws the first triangle using the vertices in order, then it takes the last vertex from the previous triangle and uses the last side of the triangle as the basis for the new triangle.<\/p>\n

This also has benefits: we eliminate redundant data from the memory.<\/p>\n

Grab the project<\/a> from the previous article and create a new class called Square<\/strong>.<\/p>\n

If you compare the Square<\/strong> class with the Triangle<\/strong> class, you will notice just one<\/em> difference:<\/p>\n

package net.obviam.opengl;\r\n\r\nimport java.nio.ByteBuffer;\r\nimport java.nio.ByteOrder;\r\nimport java.nio.FloatBuffer;\r\n\r\nimport javax.microedition.khronos.opengles.GL10;\r\n\r\npublic class Square {\r\n\r\n\tprivate FloatBuffer vertexBuffer;\t\/\/ buffer holding the vertices\r\n\r\n\tprivate float vertices[] = {\r\n\t\t\t-1.0f, -1.0f,  0.0f,\t\t\/\/ V1 - bottom left\r\n\t\t\t-1.0f,  1.0f,  0.0f,\t\t\/\/ V2 - top left\r\n\t\t\t 1.0f, -1.0f,  0.0f,\t\t\/\/ V3 - bottom right\r\n\t\t\t 1.0f,  1.0f,  0.0f\t\t\t\/\/ V4 - top right\r\n\t};\r\n\r\n\tpublic Square() {\r\n\t\t\/\/ a float has 4 bytes so we allocate for each coordinate 4 bytes\r\n\t\tByteBuffer vertexByteBuffer = ByteBuffer.allocateDirect(vertices.length * 4);\r\n\t\tvertexByteBuffer.order(ByteOrder.nativeOrder());\r\n\r\n\t\t\/\/ allocates the memory from the byte buffer\r\n\t\tvertexBuffer = vertexByteBuffer.asFloatBuffer();\r\n\r\n\t\t\/\/ fill the vertexBuffer with the vertices\r\n\t\tvertexBuffer.put(vertices);\r\n\r\n\t\t\/\/ set the cursor position to the beginning of the buffer\r\n\t\tvertexBuffer.position(0);\r\n\t}\r\n\r\n\t\/** The draw method for the square with the GL context *\/\r\n\tpublic void draw(GL10 gl) {\r\n\t\tgl.glEnableClientState(GL10.GL_VERTEX_ARRAY);\r\n\r\n\t\t\/\/ set the colour for the square\r\n\t\tgl.glColor4f(0.0f, 1.0f, 0.0f, 0.5f);\r\n\r\n\t\t\/\/ Point to our vertex buffer\r\n\t\tgl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);\r\n\r\n\t\t\/\/ Draw the vertices as triangle strip\r\n\t\tgl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices.length \/ 3);\r\n\r\n\t\t\/\/Disable the client state before leaving\r\n\t\tgl.glDisableClientState(GL10.GL_VERTEX_ARRAY);\r\n\t}\r\n}\r\n<\/pre>\n
The difference is in the highlighted lines (13-18). That\u2019s right, we\u2019ve added one more vertex to the vertices<\/strong> array.<\/p>\n
Now change the GlRenderer<\/strong> so instead of a Triangle<\/strong> we use a Square<\/strong>.<\/p>\n
package net.obviam.opengl;\r\n\r\nimport javax.microedition.khronos.egl.EGLConfig;\r\nimport javax.microedition.khronos.opengles.GL10;\r\n\r\nimport android.opengl.GLU;\r\nimport android.opengl.GLSurfaceView.Renderer;\r\n\r\npublic class GlRenderer implements Renderer {\r\n\r\n\tprivate Square \t\tsquare;\t\t\/\/ the square\r\n\r\n\t\/** Constructor to set the handed over context *\/\r\n\tpublic GlRenderer() {\r\n\t\tthis.square\t\t= new Square();\r\n\t}\r\n\r\n\t@Override\r\n\tpublic void onDrawFrame(GL10 gl) {\r\n\t\t\/\/ clear Screen and Depth Buffer\r\n\t\tgl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);\r\n\r\n\t\t\/\/ Reset the Modelview Matrix\r\n\t\tgl.glLoadIdentity();\r\n\r\n\t\t\/\/ Drawing\r\n\t\tgl.glTranslatef(0.0f, 0.0f, -5.0f);\t\t\/\/ move 5 units INTO the screen\r\n\t\t\t\t\t\t\t\t\t\t\t\t\/\/ is the same as moving the camera 5 units away\r\n\t\tsquare.draw(gl);\t\t\t\t\t\t\/\/ Draw the triangle\r\n\r\n\t}\r\n\r\n\t@Override\r\n\tpublic void onSurfaceChanged(GL10 gl, int width, int height) {\r\n\t\tif(height == 0) { \t\t\t\t\t\t\/\/Prevent A Divide By Zero By\r\n\t\t\theight = 1; \t\t\t\t\t\t\/\/Making Height Equal One\r\n\t\t}\r\n\r\n\t\tgl.glViewport(0, 0, width, height); \t\/\/Reset The Current Viewport\r\n\t\tgl.glMatrixMode(GL10.GL_PROJECTION); \t\/\/Select The Projection Matrix\r\n\t\tgl.glLoadIdentity(); \t\t\t\t\t\/\/Reset The Projection Matrix\r\n\r\n\t\t\/\/Calculate The Aspect Ratio Of The Window\r\n\t\tGLU.gluPerspective(gl, 45.0f, (float)width \/ (float)height, 0.1f, 100.0f);\r\n\r\n\t\tgl.glMatrixMode(GL10.GL_MODELVIEW); \t\/\/Select The Modelview Matrix\r\n\t\tgl.glLoadIdentity(); \t\t\t\t\t\/\/Reset The Modelview Matrix\r\n\t}\r\n\r\n\t@Override\r\n\tpublic void onSurfaceCreated(GL10 gl, EGLConfig config) {\r\n\t}\r\n}\r\n<\/pre>\n
Running this will produce the following result:<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Triangle Strip forming a Square<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Examining this, the draw()<\/strong> method in the Square<\/strong> class should make sense now.<\/p>\n
\tpublic void draw(GL10 gl) {\r\n\t\tgl.glEnableClientState(GL10.GL_VERTEX_ARRAY);\r\n\r\n\t\t\/\/ set the colour for the square\r\n\t\tgl.glColor4f(0.0f, 1.0f, 0.0f, 0.5f);\r\n\r\n\t\t\/\/ Point to our vertex buffer\r\n\t\tgl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);\r\n\r\n\t\t\/\/ Draw the vertices as triangle strip\r\n\t\tgl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices.length \/ 3);\r\n\r\n\t\t\/\/Disable the client state before leaving\r\n\t\tgl.glDisableClientState(GL10.GL_VERTEX_ARRAY);\r\n\t}\r\n<\/pre>\n
First we enable OpenGL to use a vertex array for rendering. Our vertex array contains the vertices for our square.
 
<\/div> <\/div><\/p>\n
gl.glVertexPointer<\/strong> (line 5) tells the opengl renderer from where to take the vertices and of what type they are.<\/p>\n
The first parameter tells how many coordinates are used for a vertex. We use 3 (x,y,z). The second parameter tells that the values are of type float<\/strong>.<\/p>\n
The 3rd parameter is the offset between the vertices in the array. It is called the strife<\/em>. We have a tightly packed array so it is 0<\/em>.<\/p>\n
Finally the last parameter tells where the vertices are held. Of course it is our buffer  vertexBuffer<\/strong>.<\/p>\n
gl.glDrawArrays<\/strong> in line 11 tells OpenGL to draw the primitive. What kind of primitive? The one specified in the first parameter: GL10.GL_TRIANGLE_STRIP<\/strong>. It takes the vertices from the previously set vertex buffer and it follows the rules of the triangle strips described earlier.<\/p>\n
The second parameter specifies the starting index for the vertices in the array.<\/p>\n
The 3rd parameter tells OpenGL, how many vertices to use for the polygon, about to be rendered. Because in the previous statement (gl.glVertexPointer<\/strong>) we specified that 3 coordinates define a vertex, we will provide the length of our vertex array divided by 3. There are 9 elements in the array defining 3 vertices.<\/p>\n
glDisableClientState(GL10.GL_VERTEX_ARRAY)<\/strong> disables the state of rendering from an array containing the vertices.<\/p>\n
Think of glEnableClientState<\/strong> and glDisableClientState<\/strong> as begin … end<\/strong> statements in a program. We basically enter subroutines in the OpenGL renderer. Once we entered a routine, we set up variables (the vertex buffer, the colour, etc) and we execute other subroutines (draw vertices). After we\u2019re done, we exit the subroutine. We work in isolation inside the renderer.<\/p>\n
Make sure you run the application at this stage and understand what is going on.<\/p>\n
  Creating the Texture<\/h2>\n
Now the fun part. Let\u2019s load up an image and create a texture. A texture IS an image.<\/p>\n
To find out how you can load up images in your android app, check out this article<\/a>.<\/p>\n
We will be working with the Square<\/strong> class as we want to apply the texture to the square.<\/p>\n
We need to load up the image, tell the opengl renderer that we want to use it as a texture, and finally we will tell the renderer where exactly onto our primitive (square) to display it.<\/p>\n
Think of it as if you were putting a foil onto a window or a wall. I provide you with a foil containing an image of the size of the window and tell you to cover the window with it, so the top left corner of the foil will be on the top left corner of the window. That is it, let\u2019s get to work.<\/p>\n
OpenGL uses the vertices to work out where to put stuff. So we need to create an array for the image. But this time, this will be 2D as a bitmap is like a sheet of paper, a flat plane.<\/p>\n
Add the coordinate array for the texture.<\/p>\n
\tprivate FloatBuffer textureBuffer;\t\/\/ buffer holding the texture coordinates\r\n\tprivate float texture[] = {\r\n\t\t\t\/\/ Mapping coordinates for the vertices\r\n\t\t\t0.0f, 1.0f,\t\t\/\/ top left\t\t(V2)\r\n\t\t\t0.0f, 0.0f,\t\t\/\/ bottom left\t(V1)\r\n\t\t\t1.0f, 1.0f,\t\t\/\/ top right\t(V4)\r\n\t\t\t1.0f, 0.0f\t\t\/\/ bottom right\t(V3)\r\n\t};\r\n<\/pre>\n
We need to create the textureBuffer<\/strong> in a similar way to the vertexBuffer<\/strong>. This happens in the constructor and we\u2019ll just reuse the byteBuffer<\/strong>. Check the new constructor:<\/p>\n
\tpublic Square() {\r\n\t\tByteBuffer byteBuffer = ByteBuffer.allocateDirect(vertices.length * 4);\r\n\t\tbyteBuffer.order(ByteOrder.nativeOrder());\r\n\t\tvertexBuffer = byteBuffer.asFloatBuffer();\r\n\t\tvertexBuffer.put(vertices);\r\n\t\tvertexBuffer.position(0);\r\n\r\n\t\tbyteBuffer = ByteBuffer.allocateDirect(texture.length * 4);\r\n\t\tbyteBuffer.order(ByteOrder.nativeOrder());\r\n\t\ttextureBuffer = byteBuffer.asFloatBuffer();\r\n\t\ttextureBuffer.put(texture);\r\n\t\ttextureBuffer.position(0);\r\n\t}\r\n<\/pre>\n
We will add an important method to the Square<\/strong> class. The loadGLTexture<\/strong> method. This will be called from the renderer when it starts up. It happens in the onSurfaceCreated<\/strong> method. This will load up the image from the disk and bind it to a texture in the OpenGL repository. It will basically assign an internal ID for the processed image and will be used by the OpenGL API to identify it among other textures.<\/p>\n
\t\/** The texture pointer *\/\r\n\tprivate int[] textures = new int[1];\r\n\r\n\tpublic void loadGLTexture(GL10 gl, Context context) {\r\n\t\t\/\/ loading texture\r\n\t\tBitmap bitmap = BitmapFactory.decodeResource(context.getResources(),\r\n\t\t\t\tR.drawable.android);\r\n\r\n\t\t\/\/ generate one texture pointer\r\n\t\tgl.glGenTextures(1, textures, 0);\r\n\t\t\/\/ ...and bind it to our array\r\n\t\tgl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);\r\n\r\n\t\t\/\/ create nearest filtered texture\r\n\t\tgl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST);\r\n\t\tgl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);\r\n\r\n\t\t\/\/ Use Android GLUtils to specify a two-dimensional texture image from our bitmap\r\n\t\tGLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);\r\n\r\n\t\t\/\/ Clean up\r\n\t\tbitmap.recycle();\r\n\t}\r\n<\/pre>\n
We need a texture pointer array. This is where OpenGL will store the names of the textures we will use in our application. Because we have just one image, we will create an array of size 1. <\/p>\n
Line 06<\/strong> loads the android<\/em> bitmap which was previously copied into the \/res\/drawable-mdpi<\/strong> directory, so the ID is already generated.<\/p>\n
A note about this bitmap. It is encouraged to be square. It helps a lot with scaling. So make sure your bitmaps for textures are squares (6\u00d76, 12\u00d712, 128\u00d7128, etc.). If not square, make sure the width and height are powers of 2 (2, 4, 8, 16, 32, \u2026). You can have a bitmap 128\u00d7512 and it is perfectly usable and it is optimised.<\/p>\n
Line 10<\/strong> generates the names for the textures. In our case generates one name and stores it in the textures<\/strong> array. Even if it says name<\/em>, it actually generates an int<\/strong>. A bit confusing, but it is how it is.<\/p>\n
Line 12<\/strong> binds the texture with the newly generated name (texture[0]). What this means is, that anything using textures in this subroutine, will use the bound texture. It practically activates the texture. A bound texture is the active texture. If we would have had multiple textures and multiple squares to use them, we would have had to bind (activate) the appropriate textures for each square just before they were used to activate them.
\nLines 15<\/strong> and 16<\/strong> set some filters to be used with for texture. We have just told OpenGL what types of filters to use when it needs to shrink or expand the texture to cover the square. We have chosen some basic algorithms on how to scale the image. Don\u2019t have to worry about this now. <\/p>\n
In line 19<\/strong> we use Android\u2019s utilities to specify the 2D texture image for our bitmap. It creates the image (texture) internally in its native format based on our bitmap.<\/p>\n
in line 22<\/strong> we free up the memory. This you should not forget as memory on a device is very limited and images are big.<\/p>\n
Now let\u2019s see how the draw()<\/strong> method has been modified.<\/p>\n
\tpublic void draw(GL10 gl) {\r\n\t\t\/\/ bind the previously generated texture\r\n\t\tgl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);\r\n\r\n\t\t\/\/ Point to our buffers\r\n\t\tgl.glEnableClientState(GL10.GL_VERTEX_ARRAY);\r\n\t\tgl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);\r\n\r\n\t\t\/\/ Set the face rotation\r\n\t\tgl.glFrontFace(GL10.GL_CW);\r\n\r\n\t\t\/\/ Point to our vertex buffer\r\n\t\tgl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);\r\n\t\tgl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);\r\n\r\n\t\t\/\/ Draw the vertices as triangle strip\r\n\t\tgl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices.length \/ 3);\r\n\r\n\t\t\/\/Disable the client state before leaving\r\n\t\tgl.glDisableClientState(GL10.GL_VERTEX_ARRAY);\r\n\t\tgl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);\r\n\t}\r\n}\r\n<\/pre>\n
It\u2019s not a huge modification from the previous article. The additions are documented and do the following:<\/p>\n
Line 03<\/strong> binds (activates) the texture with the name (integer ID) stored in textures[0]<\/strong>.<\/p>\n
Line 07<\/strong> enables the texture mapping in the current OpenGL context.<\/p>\n
Line 14<\/strong> provides the OpenGL context with the texture coordinates.
\nAfter drawing the primitive with textures, we switch off the texture mapping along with the primitive rendering.<\/p>\n
  Important \u2013 UV Mapping<\/h3>\n
If you look carefully, the vertex order in the texture mapping coordinates array doesn\u2019t follow the order present in the square\u2019s vertex coordinates array.<\/p>\n
There is a very good explanation of texture mapping coordinates here: http:\/\/iphonedevelopment.blogspot.com\/2009\/05\/opengl-es-from-ground-up-part-6_25.html<\/a>.<\/p>\n
I will try to explain it quickly though. Examine the following diagram.<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Square and Texture Coordinates Ordering<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
The square is composed of 2 triangles and the vertices are in the following order.<\/p>\n
1 \u2013 bottom left<\/p>\n
2 \u2013 bottom right<\/p>\n
3 \u2013 top left<\/p>\n
4 \u2013 top right<\/p>\n
Notice the counter clockwise path.<\/p>\n
The texture coordinates will be in the order: 1 -> 3 -> 2 -> 4<\/p>\n
Just bear this mapping in mind and rotate it if you start your shape from a different corner. To read up on UV mapping check the wikipedia entry<\/a> or search the net for it.<\/p>\n
For the final part, to make this work, we need to provide the context to our renderer so we can load up the texture at startup.<\/p>\n
The onSurfaceCreated<\/strong> method will look like this. <\/p>\n
\tpublic void onSurfaceCreated(GL10 gl, EGLConfig config) {\r\n\t\t\/\/ Load the texture for the square\r\n\t\tsquare.loadGLTexture(gl, this.context);\r\n\r\n\t\tgl.glEnable(GL10.GL_TEXTURE_2D);\t\t\t\/\/Enable Texture Mapping ( NEW )\r\n\t\tgl.glShadeModel(GL10.GL_SMOOTH); \t\t\t\/\/Enable Smooth Shading\r\n\t\tgl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f); \t\/\/Black Background\r\n\t\tgl.glClearDepthf(1.0f); \t\t\t\t\t\/\/Depth Buffer Setup\r\n\t\tgl.glEnable(GL10.GL_DEPTH_TEST); \t\t\t\/\/Enables Depth Testing\r\n\t\tgl.glDepthFunc(GL10.GL_LEQUAL); \t\t\t\/\/The Type Of Depth Testing To Do\r\n\r\n\t\t\/\/Really Nice Perspective Calculations\r\n\t\tgl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);\r\n\t}\r\n<\/pre>\n
Line 03<\/strong> loads the texture. The rest of the lines just configure the renderer with some values. You don\u2019t have to worry about them now. <\/p>\n
You will need to provide the application context to the Square<\/strong> object, because the object itself loads the texture and needs to know the path to the bitmap.<\/p>\n
Just provide the context to the renderer in the Run<\/strong> activity\u2019s onCreate<\/strong> method (glSurfaceView.setRenderer(new GlRenderer(this));<\/strong>) and it\u2019s done.<\/p>\n
Make sure the renderer has the context declared and set via the constructor.<\/p>\n
Excerpt from the GlRendered<\/strong> class.<\/p>\n
\tprivate Square \t\tsquare;\t\t\/\/ the square\r\n\tprivate Context \tcontext;\r\n\r\n\t\/** Constructor to set the handed over context *\/\r\n\tpublic GlRenderer(Context context) {\r\n\t\tthis.context = context;\r\n\r\n\t\t\/\/ initialise the square\r\n\t\tthis.square = new Square();\r\n\t}\r\n<\/pre>\n
If you run the code you should see the square with a nice android laid on top of it.<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Square with Android Texture<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Download the source code and project here (obviam.opengl.p03.tgz).<\/a><\/p>\n
Reference:<\/strong> Texture Mapping \u2013 OpenGL Android (Displaying Images using OpenGL and Squares)<\/a> from our JCG<\/a> partner Tamas Jano from “Against The Grain<\/a>” blog.<\/p>\n
Do not forget to check out our new Android Game<\/i><\/strong> ArkDroid<\/a> (screenshots below)<\/span><\/span><\/i><\/strong>. You feedback will be more than helpful!<\/div>\n
<\/a><\/a><\/a><\/div>\n
Related Articles:<\/strong><\/div>\n