How to rewrite 2D OpenGL application for OpenGL ES?

Question

I am working on a 2D OpenGL game with sprite graphics. I was recently informed that I should use OpenGL ES calls, as this is a subset of OpenGL and will make it easier for me to port it to mobile platforms. Most of the code is just calls to the draw_image function, which is defined like this:

void draw_img(float x, float y, float w, float h, GLuint tex,float r=1,float g=1, float b=1) { glColor3f(r,g,b); glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, tex); glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f( x, y); glTexCoord2f(1.0f, 0.0f); glVertex2f(w+x, y); glTexCoord2f(1.0f, 1.0f); glVertex2f( w+x, h+y); glTexCoord2f(0.0f, 1.0f); glVertex2f( x, h+y); glEnd(); } 

What do I need to change to be compatible with OpenGL ES? Also, the reason I use a fixed function rather than shaders is because I am developing on a machine that does not support GLSL.

Answer 1

In OpenGL ES 1.1, use the functions glVertexPointer() , glColorPointer() , glTexCoordPointer() and glDrawArrays() to draw a quadrant. Unlike your OpenGL implementation, you will need to describe the structures (vectors, colors, texture coordinates) that your quad is in, instead of using the built-in glTexCoord2f , glVertex2f and glColor3f .

Here is an example of code that should do what you want. (I used the argument names that you used in the function definition, so it should just be transferring your code from the example.)

First you need to define a structure for one vertex of your quadrant. This will contain the positions of the vertices of the quadrangles, color and texture.

 // Define a simple 2D vector typedef struct Vec2 { float x,y; } Vec2; // Define a simple 4-byte color typedef struct Color4B { GLbyte r,g,b,a; }; // Define a suitable quad vertex with a color and tex coords. typedef struct QuadVertex { Vec2 vect; // 8 bytes Color4B color; // 4 bytes Vec2 texCoords; // 8 bytes } QuadVertex; 

Then you must define a structure that describes the entire square, consisting of four vertices:

 // Define a quad structure typedef struct Quad { QuadVertex tl; QuadVertex bl; QuadVertex tr; QuadVertex br; } Quad; 

Now create your quad and assign information about the four vertices (position, color, texture coordinates):

 Quad quad; quad.bl.vect = (Vec2){x,y}; quad.br.vect = (Vec2){w+x,y}; quad.tr.vect = (Vec2){w+x,h+y}; quad.tl.vect = (Vec2){x,h+y}; quad.tl.color = quad.tr.color = quad.bl.color = quad.br.color = (Color4B){r,g,b,255}; quad.tl.texCoords = (Vec2){0,0}; quad.tr.texCoords = (Vec2){1,0}; quad.br.texCoords = (Vec2){1,1}; quad.bl.texCoords = (Vec2){0,1}; 

Now tell OpenGL how to draw a quad. The gl...Pointer calls provide OpenGL with the correct offsets and sizes up to the vertex structure values, so they can subsequently use this information to draw a quadrant.

 // "Explain" the quad structure to OpenGL ES #define kQuadSize sizeof(quad.bl) long offset = (long)&quad; // vertex int diff = offsetof(QuadVertex, vect); glVertexPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff)); // color diff = offsetof(QuadVertex, color); glColorPointer(4, GL_UNSIGNED_BYTE, kQuadSize, (void*)(offset + diff)); // texCoods diff = offsetof(QuadVertex, texCoords); glTexCoordPointer(2, GL_FLOAT, kQuadSize, (void*)(offset + diff)); 

Finally, assign a texture and draw a quad. glDrawArrays tells OpenGL to use the previously defined offsets along with the values ​​contained in your Quad object to draw the shape defined by vertices 4 .

 glBindTexture(GL_TEXTURE_2D, tex); // Draw the quad glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); glBindTexture(GL_TEXTURE_2D, 0); 

Also note that using OpenGL ES 1 is great if you don't need shaders. The main difference between ES1 and ES2 is that there is no fixed pipeline in ES2, so you will need to implement a matrix stack plus shaders for main rendering. If you are fine with the functionality offered by the fixed pipeline, just use OpenGL ES 1.