{"id":653,"date":"2011-10-03T09:04:00","date_gmt":"2011-10-03T09:04:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/android-game-development-displaying-graphical-elements-primitives-with-opengl-es.html"},"modified":"2012-10-21T20:33:24","modified_gmt":"2012-10-21T20:33:24","slug":"android-game-development-displaying","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2011\/10\/android-game-development-displaying.html","title":{"rendered":"Android Game Development \u2013 Displaying Graphical Elements (Primitives) with OpenGL ES"},"content":{"rendered":"
This is part 2 of the android OpenGL ES series. In the previous<\/a> article we looked at how to set up the android project to use the provided OpenGL view with our renderer. You can use the project from that article as a template for this.<\/p>\n

Before we start displaying things, we must know a few basic concepts of 3D programming and also familiarise ourselves with the terminology. I\u2019s basic geometry really.<\/p>\n

3D graphics happens in the Cartesian Coordinate System<\/a>.<\/p>\n

That means that the coordinate system used has three dimensions. X<\/strong>, Y<\/strong> and Z<\/strong>.<\/p>\n

Traditionally X<\/strong> goes from left to right, Y<\/strong> from bottom to top, and Z<\/strong> from me into the screen so to speak.<\/p>\n

While we deal with objects to display (a robot for example or a car) OpenGL deals with components of these objects. Each object is created from primitives<\/strong> which in the case of OpenGL is a triangle<\/strong>. Every triangle<\/strong> has a face<\/strong> and a backface<\/strong>.<\/p>\n

A triangle is defined by 3 points in space. A point is called a vertex<\/strong> (vertices<\/strong> plural).<\/p>\n

The following diagram shows 2 vertices. A<\/strong> and B<\/strong>.<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Vertices<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

I drew this diagram to show how we will differentiate between 2D and 3D. A vertex is defined by its X, Y and Z coordinates. If we use 0 for the Z component all the time, we have 2D. You can see vertex A<\/strong> is part of the plane defined by X and Y. Vertex B<\/strong> is farther in on the Z coordinate. If you think of Z as a line being perpendicular to the screen, we wouldn\u2019t even see B<\/strong>.<\/p>\n

A triangle<\/strong> is called a primitive<\/strong>. A primitive is the simplest type OpenGL understands and is able to graphically represent.<\/p>\n

It is very simple. 3 vertices define a triangle. There are other primitives as well, like quads but we\u2019ll stick to the basics. Every shape can be broken down into triangles.<\/p>\n

We mentioned the face<\/strong> of the triangle before.<\/p>\n

Why is it important? In 3D you will have objects with parts facing towards you, the player and parts facing away from you. In order to make the drawing efficient, OpenGL will not draw the triangles facing away from you as it is not necessary because they will be hidden by the triangles facing towards you anyway. This is called backface culling<\/strong>.<\/p>\n

How does OpenGL determine this? This is determined by the order of the vertices when drawing the triangle. If the order is counter clockwise<\/em> then it is a face<\/em> (green triangle). Clockwise<\/em> order of the vertices means it is a backface<\/em> (the red triangle). This is the default setting but it can be changed of course. The following diagram illustrates just that.<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Backface Culling<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The red triangle won\u2019t be drawn.<\/p>\n

Creating and Drawing a Triangle<\/h2>\n

With all the theory understood, let\u2019s create a triangle and draw it.<\/p>\n

A triangle is defined by 3 vertices. The coordinates of the vertices is not measured in pixels. We will use float<\/strong> to represent the values and they will be relative to each other.<\/p>\n

If a side\u2019s length is 1.0f<\/strong> and an other side\u2019s length is 0.5f<\/strong>, then it means that the second side is half the length of the first side\u2019s length. How big it will be displayed depends on how the viewport is set up. Imagine the viewport as a camera. When we use 2D then it means that the camera is orthogonal to the screen. If the camera is very close, the triangle will appear big, if it\u2019s far, then the triangle will be small.<\/p>\n

Let\u2019s create the Triangle<\/strong> class.

<\/div> <\/div><\/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 Triangle {\r\n \r\n\tprivate FloatBuffer vertexBuffer;\t\/\/ buffer holding the vertices\r\n \r\n\tprivate float vertices[] = {\r\n\t\t\t-0.5f, -0.5f,  0.0f,\t\t\/\/ V1 - first vertex (x,y,z)\r\n\t\t\t 0.5f, -0.5f,  0.0f,\t\t\/\/ V2 - second vertex\r\n\t\t\t 0.0f,  0.5f,  0.0f\t\t\t\/\/ V3 - third vertex\r\n\t};\r\n \r\n\tpublic Triangle() {\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<\/pre>\n
Line 11<\/em> defines a FloatBuffer<\/strong> that will hold the vertices for our triangle. We need to use the java.nio package as it is very intensive input output.<\/p>\n
The vertices[]<\/strong> array holds the actual coordinates for the vertices.<\/p>\n
The triangle we will draw is represented in the following diagram. We calculate everything from the origin.<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Triangle<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
In the constructor we initialise the triangle from this vertices[]<\/strong> array.<\/p>\n
What we do is, we fill the vertexBuffer<\/strong> with the coordinates and set the cursor\u2019s position to the beginning of the buffer. We will be using this buffer in the OpenGL call to display triangle strips. We currently have just one.<\/p>\n
Let\u2019s take a look at the renderer. The GlRenderer<\/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 Triangle \ttriangle;\t\/\/ the triangle to be drawn\r\n \r\n\t\/** Constructor *\/\r\n\tpublic GlRenderer() {\r\n\t\tthis.triangle = new Triangle();\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\ttriangle.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
We create the triangle in the constructor.<\/p>\n
The onDrawFrame(GL10 gl)<\/strong> is of the most interest for us.<\/p>\n
OpenGL works with state variables. Every method we call on the OpenGL context changes its internal state.<\/p>\n
Following the  onDrawFrame<\/strong> method we see that every time a frame is drawn, the buffers get cleared, the ModelView matrix is reloaded (don\u2019t worry if you don\u2019t understand this at the moment), the camera is moved away 5 units (we\u2019re dealing with units here, not pixels) and the triangle\u2019s draw()<\/strong> method is called.<\/p>\n
The onSurfaceChanged<\/strong> on the other hand, transitions the OpenGL context between a few states. First it sets the viewport to the current width and height of the surface (so it works with the GL_PROJECTION<\/em> state), then it transitions the state to the GL_MODELVIEW<\/em> so we can work with our models \u2013 the triangle in our case. It will make sense later on, don\u2019t worry.<\/p>\n
Let\u2019s check out the draw<\/strong> method for the triangle:<\/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 triangle\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
Because we store the triangle\u2019s vertices\u2019 coordinates in a FloatBuffer<\/strong> we need to enable OpenGL to read from it and understand that is a triangle there. Line 02<\/em> does just that.<\/p>\n
Line 05<\/em> sets the colour for the entity (triangle in our case) that will be drawn. Note that the values of the rgb are floats and are between 0.0 and 1.0. <\/p>\n
gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);<\/strong> will tell OpenGL to use the vertexBuffer<\/strong> to extract the vertices from.<\/p>\n
The first parameter (value = 3) represents the number of vertices in the buffer. The second lets OpenGL know what type the data the buffer holds.<\/p>\n
The third parameter is the offset in the array used for the vertices. Because we don\u2019t store extra data, our vertices follow each other and there is no offset.<\/p>\n
Finally the last parameter is our buffer containing the vertices.<\/p>\n
gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices.length \/ 3);<\/strong> tells OpenGL to draw triangle strips found in the buffer provided earlier, starting with the first element. It also lets it know how many vertices there are. <\/p>\n
That is it. Run the project and you should be able to see your first accelerated triangle. Just like this:<\/p>\n
<\/a><\/div>\n
Download the source here (obviam.opengl.p02.tgz)<\/a>:<\/p>\n
I was inspired by code from the nehe android ports<\/a>. To learn the guts of OpenGL I warmly recommend the nehe tutorials<\/a>.<\/p>\n
Next we will see how we can create basic 3D objects and rotate them. We will also find out how we can use textures on elements.<\/p>\n
Reference:<\/strong> OpenGL ES Android \u2013 Displaying Graphical Elements (Primitives)<\/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