Minimal Vertex Shader

The following is a really simple vertex shader:

attribute vec4 vPosition;
void main()
{
   gl_Position = vPosition;
}

This takes a parameter called vPosition and assigns it to the variable gl_Position. Every vertex shader must assign a value to this variable. This shader is taking an input value for the location of the vertex and assigning the final location of that vertex to the same value.

The data type of gl_Position is a four-dimensional vector (x, y, z, w). The first three components are the (x, y, z) values of the vertex, while the fourth is typically set to 1.

The shader is not C code; it is not compiled by the application. It is passed as a string to the GPU and compiled at runtime by the GPU.

Minimal Fragment Shader

A fragment shader is responsible for setting a color on a pixel. A color is also a four-dimensional vector, of the form (red, green, blue, alpha), with all values between 0 and 1. The alpha value is the amount of “transparency,” where 1 means opaque and 0 means transparent.

A minimal fragment shader just sets the pixel to opaque red.

void main()
{
   gl_FragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 );
}

The variable gl_FragColor must be assigned a value.

This also is not compiled by the application but is passed as a string to the GPU, which compiles it at runtime.

Loading the Shaders

The shaders are given as source code strings to OpenGL ES. You have to create a shader object, tell it the source code, compile the shader, and check for errors. The code for this is as follows:

GLuint LoadShader ( GLenum type, const char *shaderSrc )
{
   GLuint shader;
   GLint compiled;

   // Create the shader object
   shader = glCreateShader ( type );

   if ( shader == 0 )
        return 0;

   // Load the shader source
   glShaderSource ( shader, 1, &shaderSrc, NULL );

   // Compile the shader
   glCompileShader ( shader );

   // Check the compile status
   glGetShaderiv ( shader, GL_COMPILE_STATUS, &compiled );

   if ( !compiled )
   {
      GLint infoLen = 0;

      glGetShaderiv ( shader, GL_INFO_LOG_LENGTH, &infoLen );

      if ( infoLen > 1 )
      {
         char* infoLog = malloc (sizeof(char) * infoLen );
         char* infoLog = malloc (sizeof(char) * infoLen );                                                                                                    

         glGetShaderInfoLog ( shader, infoLen, NULL, infoLog );
         esLogMessage ( "Error compiling shader:
%s
", infoLog );          

         free ( infoLog );
      }

      glDeleteShader ( shader );
      return 0;
   }

   return shader;

}

Varyings

You could do it by yourself, but fortunately OpenGL ES can do the work for you. It has the concept of varyings, which are variables with values interpolated from the vertex shader data. For the colored triangle, the interpolated values are calculated using the vertex colors, averaged out based on the distance from each vertex.

To use them, you define a variable to be varying in both the vertex and the fragment shader, with the same name. You set a value in each vertex using a new attribute and then can access the interpolated value in each fragment shader. The vertex shader is as follows:

attribute vec4 vPosition;
attribute vec4 vColour;

varying vFragmentColour;

void main()
{
   gl_Position = vPosition;
   vFragmentColour = vColour;
}    

The fragment shader is as follows:

varying vec4 vFragmentColour;

void main()
{
   gl_FragColor = vFragmentColour;
}

Passing Multiple Attributes to the Vertex Shader

In the simple triangle program, you passed a set of vertex values to the vertex shader by first setting the index of the attribute to 0 and then calling the vertex attribute pointer function. To add more attributes, the simplest way (but not the most efficient) is to set extra attributes to higher index values (one, two, and so on) and call the vertex attribute pointer function on these as well.

Here are the changes required to set colors for the color attribute:

   GLfloat vColours[] = {1.0f, 0.0f, 0.0f,
                         0.0f, 1.0f, 0.0f,
                         0.0f, 0.0f, 1.0f,};

   ...

   glVertexAttribPointer ( 1, 3, GL_FLOAT, GL_FALSE, 0, vColours );
   glEnableVertexAttribArray ( 1 );

Here are more changes:

   // Bind vColour to attribute 1
   glBindAttribLocation ( programObject, 1, "vColour" );                                                                                          

The program is Hello_TriangleColour.c. It isn’t worth including the full code here because only the previous lines differ from the Hello_Triangle.c program. It is run by Hello_TriangleColour.

Which to Choose?

The choice of triangles, strip, or fan will depend on the geometry of the shape and any semantic context it might have; for example, drawing a wall of rectangles would use a strip, while drawing circles would use a fan.

The choice of drawing arrays or elements usually comes down in favor of elements for efficiency.

TGA Files

There are many, many different file formats—some lossy, some lossless, some compressed, some not, some with metadata, some without. In this section, you will just use TGA ( www.fileformat.info/format/tga/egff.htm ), which is an uncompressed format with enough useful metadata that is simple to load.

TGA files can be created from, for example, JPEG files by using the convert utility from the Gimp drawing system. It is simple to convert a file from JPEG to TGA format. You just give the appropriate file extensions.

convert image.jpg image.tga

A TGA file has a header section that gives the width and height of the image from which its size can be calculated. The default format will be RGB, as in 24-bit pixels. Reading in such a file is just a matter of locating the dimensions, malloc’ing the right size buffer, skipping to the start of the image data, and reading it all in.

The esUtil.c file includes a function called esLoadTGAthat will read in an image, returning the image and its dimensions.

The default is for the origin of the image to be the top-left corner, with the y-axis growing down . OpenGL ES, on the other hand, has the origin in the bottom-left corner with the y-axis growing up. So, the image will be upside down relative to the OpenGL coordinates. This can be fixed by reading the data in differently or by using an OpenGL ES reflection. You will map the texture upside down to give the correct orientation.

Mipmaps

An application may need to render an image in fine detail or, say, if it is far away, in only coarse detail. To avoid GPU load, multiple images can be given for one texture at varying levels of detail. I won’t cover that here and will just set one image for all levels of detail.

Creating a Texture Object

Textures are stored in texture objects that have to be created using an image with a known format, dimensions, and pixel values. Assuming you have stored the width, height, and image in the userData field of an esContext, where the format is known to be RGB as unsigned bytes, the code is as follows:

GLuint CreateSimpleTexture2D(ESContext *esContext)
{
   // Texture object handle
   GLuint textureId;
   UserData *userData = esContext->userData;
   char *pixels = userData->image;

   // Use tightly packed data
   glPixelStorei ( GL_UNPACK_ALIGNMENT, 1 );

   // Generate a texture object
   glGenTextures ( 1, &textureId );

   // Bind the texture object
   glBindTexture ( GL_TEXTURE_2D, textureId );

   // Load the texture
   glTexImage2D ( GL_TEXTURE_2D, 0, GL_RGB,
                  userData->width, userData->height,
                  0, GL_RGB, GL_UNSIGNED_BYTE, pixels );

   // Set the filtering mode
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST );

   return textureId;

}

Texture Attributes and the Shaders

Two-dimensional textures will only need (x, y) values as coordinates, unlike vertex coordinates that are described by four coordinates (x, y, z, w). The vertices of the 2D texture will need to be fed into the vertex shaders in order that the texture can be properly located within the final rendering. This will need a parameter within the shader of type vec2. The texture coordinates are limited to the square with vertices (0, 0), (1, 0), (0, 1), and (1, 1).

The fragment shader will need a varying texture coordinate, which would be initialized by the vertex shader but then interpolated. This will need to be integrated with the image pixel values, and this is done by a fragment shader function texture2D.

The vertex shader program will typically look like this:

      attribute vec4 a_position;
      attribute vec2 a_texCoord;
      varying vec2 v_texCoord;
      void main()            
      {                      
         gl_Position = a_position;
         v_texCoord = a_texCoord;
      }                        

The fragment shader will be as follows:

      precision mediump float;  
      varying vec2 v_texCoord;  
      uniform sampler2D s_texture;
      void main()                
      {                            
        gl_FragColor = texture2D( s_texture, v_texCoord );
      }                                                

These are all combined into a revised Init function as follows :

int Init ( ESContext *esContext )
{
    UserData *userData = esContext->userData;
    GLbyte vShaderStr[] =
      "attribute vec4 a_position;   
"
      "attribute vec2 a_texCoord;   
"
      "varying vec2 v_texCoord;     
"
      "void main()                  
"
      "{                            
"
      "   gl_Position = a_position; 
"
      "   v_texCoord = a_texCoord;  
"
      "}                            
";

    GLbyte fShaderStr[] =
      "precision mediump float;                            
"
      "varying vec2 v_texCoord;                            
"
      "uniform sampler2D s_texture;                        
"
      "void main()                                         
"
      "{                                                   
"
      "  gl_FragColor = texture2D( s_texture, v_texCoord );
"
      "}                                                   
";

   // Load the shaders and get a linked program object                                                                  
   userData->programObject = esLoadProgram ( vShaderStr, fShaderStr );

   // Get the attribute locations
   userData->positionLoc = glGetAttribLocation ( userData->programObject, "a_position" );
   userData->texCoordLoc = glGetAttribLocation ( userData->programObject, "a_texCoord" );

   // Get the sampler location
   userData->samplerLoc = glGetUniformLocation ( userData->programObject, "s_texture" );

   // Load the texture
   userData->textureId = CreateSimpleTexture2D (esContext);

   glClearColor ( 0.0f, 0.0f, 0.0f, 0.0f );
   return GL_TRUE;
}

Drawing the Texture

To draw, you need to pass in the vertex coordinates. You will draw a square for the vertices. For the texture coordinates, you also need to specify their four coordinates. This could be done using two arrays as follows:

   GLfloat vVertices[] = { -0.5f,  0.5f, 0.0f,  // Position 0
                           -0.5f, -0.5f, 0.0f,  // Position 1
                            0.5f, -0.5f, 0.0f,  // Position 2
                            0.5f,  0.5f, 0.0f,  // Position 3
                         };
    GLfloat tVertices[] = {
                            0.0f,  1.0f,        // TexCoord 0
                            0.0f,  0.0f,        // TexCoord 1
                            1.0f,  0.0f,        // TexCoord 2
                            1.0f,  1.0f         // TexCoord 3
                         };

More commonly, these arrays would be interleaved as follows:

    GLfloat vVertices[] = { -0.5f,  0.5f, 0.0f,  // Position 0
                            0.0f,  1.0f,        // TexCoord 0
                           -0.5f, -0.5f, 0.0f,  // Position 1
                            0.0f,  0.0f,        // TexCoord 1
                            0.5f, -0.5f, 0.0f,  // Position 2
                            1.0f,  0.0f,        // TexCoord 2
                            0.5f,  0.5f, 0.0f,  // Position 3
                            1.0f,  1.0f         // TexCoord 3
                         };

(Note that you are rendering the texture upside down to compensate for it being upside down relative to OpenGL ES coordinates.)

The question then is how to get—separately—the two sets of vertices. This is where the stride parameter comes into play in the call to glVertexAttribPointer. Basically, you want to say the following:

Each vertex co-ordinate occurs in a set of three in every five values,
   starting at index zero
Each texture co-ordinate occurs in a set of two in every five values,
   starting at index three

The code for this is as follows:

   // Load the vertex position
   glVertexAttribPointer ( userData->positionLoc, 3, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), &vVertices[0] );
   // Load the texture coordinate
   glVertexAttribPointer ( userData-gt;texCoordLoc, 2, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), &vVertices[3] );

The drawing code is then as follows:

void Draw ( ESContext *esContext )
{
   UserData *userData = esContext->userData;
   GLfloat vVertices[] = { -0.5f,  0.5f, 0.0f,  // Position 0
                            0.0f,  1.0f,        // TexCoord 0
                           -0.5f, -0.5f, 0.0f,  // Position 1
                            0.0f,  0.0f,        // TexCoord 1
                            0.5f, -0.5f, 0.0f,  // Position 2
                            1.0f,  0.0f,        // TexCoord 2
                            0.5f,  0.5f, 0.0f,  // Position 3
                            1.0f,  1.0f         // TexCoord 3
                         };
   GLushort indices[] = { 0, 1, 2, 0, 2, 3 };

   // Set the viewport
   glViewport ( 0, 0, esContext->width, esContext->height );

   // Clear the color buffer
   glClear ( GL_COLOR_BUFFER_BIT );

   // Use the program object
   glUseProgram ( userData->programObject );

   // Load the vertex position
   glVertexAttribPointer ( userData->positionLoc, 3, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), vVertices );
   // Load the texture coordinate
   glVertexAttribPointer ( userData->texCoordLoc, 2, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), &vVertices[3] );

   glEnableVertexAttribArray ( userData->positionLoc );                                                                                                    
   glEnableVertexAttribArray ( userData->texCoordLoc );

   // Bind the texture
   glActiveTexture ( GL_TEXTURE0 );
   glBindTexture ( GL_TEXTURE_2D, userData->textureId );

   // Set the sampler texture unit to 0
   glUniform1i ( userData->samplerLoc, 0 );

   glDrawElements ( GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices );

}

Complete Code for Drawing an Image

The final code is Simple_Image.c. There appears to be a minor bug in the function esLoadTGA in the Common/esUtil.c file. It gets the colors of the image a little wrong.

// Authors:   Aaftab Munshi, Dan Ginsburg, Dave Shreiner
// Copyright: the authors and Jan Newmarch

// Simple_Image.c
//
//    This is a simple example that draws an image with a 2D
//    texture image.
//
#include <stdlib.h>
#include <stdio.h>
#include "esUtil.h"

typedef struct
{
   // Handle to a program object
   GLuint programObject;

   // Attribute locations
   GLint  positionLoc;
   GLint  texCoordLoc;

   // Sampler location
   GLint samplerLoc;

   // Texture handle
   GLuint textureId;

   GLubyte *image;                                                                                                    
    int width, height;
} UserData;

///
// Create a simple 2x2 texture image with four different colors
//
GLuint CreateSimpleTexture2D(ESContext *esContext)
{
   // Texture object handle
   GLuint textureId;
   UserData *userData = esContext->userData;

   GLubyte *pixels = userData->image;
   userData->width = esContext->width;
   userData->height = esContext->height;

   // Use tightly packed data
   glPixelStorei ( GL_UNPACK_ALIGNMENT, 1 );

   // Generate a texture object
   glGenTextures ( 1, &textureId );

   // Bind the texture object
   glBindTexture ( GL_TEXTURE_2D, textureId );

   // Load the texture
   glTexImage2D ( GL_TEXTURE_2D, 0, GL_RGB,
                  userData->width, userData->height,
                  0, GL_RGB, GL_UNSIGNED_BYTE, pixels );

   // Set the filtering mode
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST );

   return textureId;

}

///
// Initialize the shader and program object
//
int Init ( ESContext *esContext )
{
    UserData *userData = esContext->userData;                                                                                                    
    GLbyte vShaderStr[] =
      "attribute vec4 a_position;   
"
      "attribute vec2 a_texCoord;   
"
      "varying vec2 v_texCoord;     
"
      "void main()                  
"
      "{                            
"
      "   gl_Position = a_position; 
"
      "   v_texCoord = a_texCoord;  
"
      "}                            
";

    GLbyte fShaderStr[] =
      "precision mediump float;                            
"
      "varying vec2 v_texCoord;                            
"
      "uniform sampler2D s_texture;                        
"
      "void main()                                         
"
      "{                                                   
"
      "  gl_FragColor = texture2D( s_texture, v_texCoord );
"
      "}                                                   
";

   // Load the shaders and get a linked program object
   userData->programObject = esLoadProgram ( vShaderStr, fShaderStr );

   // Get the attribute locations
   userData->positionLoc = glGetAttribLocation ( userData->programObject, "a_position" );
   userData->texCoordLoc = glGetAttribLocation ( userData->programObject, "a_texCoord" );
   http://www.netmanners.com/e-mail-etiquette-tips/
   // Get the sampler location
   userData->samplerLoc = glGetUniformLocation ( userData->programObject, "s_texture" );

   // Load the texture
   userData->textureId = CreateSimpleTexture2D (esContext);

   glClearColor ( 0.0f, 0.0f, 0.0f, 0.0f );
   return GL_TRUE;
}

///
// Draw a triangle using the shader pair created in Init()
//
void Draw ( ESContext *esContext )
{
   UserData *userData = esContext->userData;
   GLfloat vVertices[] = { -0.5f,  0.5f, 0.0f,  // Position 0
                            0.0f,  1.0f,        // TexCoord 0
                           -0.5f, -0.5f, 0.0f,  // Position 1
                            0.0f,  0.0f,        // TexCoord 1
                            0.5f, -0.5f, 0.0f,  // Position 2
                            1.0f,  0.0f,        // TexCoord 2
                            0.5f,  0.5f, 0.0f,  // Position 3http://www.netmanners.com/e-mail-etiquette-tips/
                            1.0f,  1.0f         // TexCoord 3
                         };
   GLushort indices[] = { 0, 1, 2, 0, 2, 3 };

   // Set the viewport                                                                  
   glViewport ( 0, 0, esContext->width, esContext->height );

   // Clear the color buffer
   glClear ( GL_COLOR_BUFFER_BIT );

   // Use the program object
   glUseProgram ( userData->programObject );

   // Load the vertex position
   glVertexAttribPointer ( userData->positionLoc, 3, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), vVertices );
   // Load the texture coordinate
   glVertexAttribPointer ( userData->texCoordLoc, 2, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), &vVertices[3] );

   glEnableVertexAttribArray ( userData->positionLoc );
   glEnableVertexAttribArray ( userData->texCoordLoc );

   // Bind the texture
   glActiveTexture ( GL_TEXTURE0 );
   glBindTexture ( GL_TEXTURE_2D, userData->textureId );

   // Set the sampler texture unit to 0
   glUniform1i ( userData->samplerLoc, 0 );

   glDrawElements ( GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices );

}

///
// Cleanup
//
void ShutDown ( ESContext *esContext )
{
   UserData *userData = esContext->userData;

   // Delete texture object
   glDeleteTextures ( 1, &userData->textureId );

   // Delete program object
   glDeleteProgram ( userData->programObject );

   free(esContext->userData);
}

int main ( int argc, char *argv[] )                                                                                                    
{
   ESContext esContext;
   UserData  userData;

   int width, height;
   GLubyte *image;

   image = esLoadTGA("jan.tga", &width, &height);
   if (image == NULL) {
       fprintf(stderr, "No such image
");
       exit(1);
   }
   printf("Width %d height %d
", width, height);

   userData.image = image;
   userData.width = width;
   userData.height = height;

   esInitContext ( &esContext );
   esContext.userData = &userData;

   esCreateWindow ( &esContext, "Simple Texture 2D", width, height, ES_WINDOW_RGB );

   if ( !Init ( &esContext ) )
      return 0;

   esRegisterDrawFunc ( &esContext, Draw );

   esMainLoop ( &esContext );

   ShutDown ( &esContext );
}

Run this by Simple_Image. The image used is of me since that is possibly more interesting than a wall tile.

Matrices

I cut my teeth on matrices years ago writing programs in Algol 60 to solve simultaneous linear equations. Now it is easier, with libraries to manage most calculations. You will use various ES functions from the Munshi et al. book to simplify things.

There are several primary operations you can carry out on graphic images to fit them into scenes: you can rotate them, move them nearer or further, apply perspective views so that the “parallel lines meet at the horizon,” or do any other effects you may choose.

The operations are carried out on vectors such as the (x, y, z, w) coordinates of a vertex. The operations are represented by matrices that are square (or rectangular) arrays of numbers. The main operation is to multiply a vector by a matrix. Any book on linear algebra will give details on how to do this.

esUtil

These are the principal functions supplied by the esUtil package:

• Create an identity matrix with esMatrixLoadIdentity

• Multiply two matrices with esMatrixMultiply

• Translate a vector from one point to another with esTranslate

• Rotate a matrix through an angle around an axis with esRotate

• Scale a matrix by a factor with esScale

• Multiply a matrix by a perspective matrix with esPerspective

These may remove the need to explicitly specify actual matrices.

Invoking Animation

You already have a Draw function. You add to this an Update function to make the changes needed for the next Draw:

  esRegisterDrawFunc ( &esContext, Draw );
  esRegisterUpdateFunc ( &esContext, Update );

The Update function for a simple rotation can be as follows:

void Update ( ESContext *esContext, float deltaTime )
{
   UserData *userData = (UserData*) esContext->userData;

   // Compute a rotation angle based on time to rotate the cube
   userData->angle += ( deltaTime * 40.0f );
   if( userData->angle >= 360.0f )
      userData->angle -= 360.0f;

   // Generate an identity matrix before rotating the square
   esMatrixLoadIdentity(  &userData->rotateMx );

   // Rotate the square about the (1, 0, 1) axis
   esRotate(  &userData->rotateMx, userData->angle, 1.0, 0.0, 1.0 );
}

This uses a current rotation angle stored in userData and applies it to an identity matrix about a vector specified here as (x, y, z) = (1.0, 0.0, 1.0).

Uniform Parameters: The Rotation Matrix

If you are rotating an entire image, the rotation has to be applied to every pixel in the drawn image, and it is the same rotation matrix in each case. So, this matrix needs to be constant over all the vertex and fragment shaders. Such a matrix is a uniform parameter and is specified as such in both the vertex and fragment shaders.

Working out the value of a uniform parameter is something that needs to be done once in each drawing iteration; so, it is done in the application’s Update C code, not in the shaders. It is then passed in as a parameter on each draw call by glUniformMatrix4fv.

Extra fields are added to UserData for the rotation angle and rotation matrix. Apart from that and the earlier changes, the standard program structure holds. The program to rotate an image loaded from a TGA file is Rotate_Image.c.

        //
// Book:      OpenGL(R) ES 2.0 Programming Guide
// Authors:   Aaftab Munshi, Dan Ginsburg, Dave Shreiner
// ISBN-10:   0321502795
// ISBN-13:   9780321502797
// Publisher: Addison-Wesley Professional
// URLs:      http://safari.informit.com/9780321563835
//            http://www.opengles-book.com
//

// Simple_Texture2D.c                                                                  
//
//    This is a simple example that draws a quad with a 2D
//    texture image. The purpose of this example is to demonstrate
//    the basics of 2D texturing
//
#include <stdlib.h>
#include <stdio.h>
#include "esUtil.h"

typedef struct
{
   // Handle to a program object
   GLuint programObject;

   // Attribute locations
   GLint  positionLoc;
   GLint  texCoordLoc;

   // Uniform locations
   GLint  rotateLoc;

   // Sampler location
   GLint samplerLoc;

   // Texture handle
   GLuint textureId;

   GLubyte *image;
    int width, height;

   // Rotation angle
   GLfloat   angle;

   // rotate matrix
   ESMatrix  rotateMx;
} UserData;

///
// Create a simple 2x2 texture image with four different colors
//
GLuint CreateSimpleTexture2D(ESContext *esContext)
{
   // Texture object handle
   GLuint textureId;
   UserData *userData = esContext->userData;

#if 0
   // 2x2 Image, 3 bytes per pixel (R, G, B)
   GLubyte pixels[4 * 3] =
   {
      255,   0,   0, // Red
        0, 255,   0, // Green
        0,   0, 255, // Blue
      255, 255,   0  // Yellow
   };
   userData->width = 2;
   userData->height = 2;
#else
   GLubyte *pixels = userData->image;
   userData->width = esContext->width;
   userData->height = esContext->height;                                                                                                    
#endif
   // Use tightly packed data
   glPixelStorei ( GL_UNPACK_ALIGNMENT, 1 );

   // Generate a texture object
   glGenTextures ( 1, &textureId );

   // Bind the texture object
   glBindTexture ( GL_TEXTURE_2D, textureId );

   // Load the texture
   glTexImage2D ( GL_TEXTURE_2D, 0, GL_RGB,
                  userData->width, userData->height,
                  0, GL_RGB, GL_UNSIGNED_BYTE, pixels );

   // Set the filtering mode
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST );
   glTexParameteri ( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST );

   return textureId;

}

///
// Initialize the shader and program object
//
int Init ( ESContext *esContext )
{
    UserData *userData = esContext->userData;
    GLbyte vShaderStr[] =
      "uniform mat4 u_rotateMx;                  
"
      "attribute vec4 a_position;                
"
      "attribute vec2 a_texCoord;                
"
      "varying vec2 v_texCoord;                  
"
      "void main()                               
"
      "{                                         
"
      "   gl_Position = u_rotateMx * a_position; 
"
      "   v_texCoord = a_texCoord;               
"
      "}                                         
";

    GLbyte fShaderStr[] =
      "precision mediump float;                            
"
      "varying vec2 v_texCoord;                            
"
      "uniform sampler2D s_texture;                        
"
      "void main()                                         
"
      "{                                                   
"
      "  gl_FragColor = texture2D( s_texture, v_texCoord );
"
      "}                                                   
";

   // Load the shaders and get a linked program object                                                                  
   userData->programObject = esLoadProgram ( vShaderStr, fShaderStr );

   // Get the attribute locations
   userData->positionLoc = glGetAttribLocation ( userData->programObject, "a_position" );
   userData->texCoordLoc = glGetAttribLocation ( userData->programObject, "a_texCoord" );
   userData->rotateLoc = glGetUniformLocation( userData->programObject, "u_rotateMx" );
   // Starting rotation angle for the square
   userData->angle = 0.0f;

   // Get the sampler location
   userData->samplerLoc = glGetUniformLocation ( userData->programObject, "s_texture" );

   // Load the texture
   userData->textureId = CreateSimpleTexture2D (esContext);

   glClearColor ( 0.0f, 0.0f, 0.0f, 0.0f );  

   return GL_TRUE;
}

///
// Update rotate matrix based on time
//
void Update ( ESContext *esContext, float deltaTime )
{
   UserData *userData = (UserData*) esContext->userData;

   // Compute a rotation angle based on time to rotate the cube
   userData->angle += ( deltaTime * 40.0f );
   if( userData->angle >= 360.0f )
      userData->angle -= 360.0f;

   // Generate an identity matrix before rotating the square
   esMatrixLoadIdentity(  &userData->rotateMx );

   // Rotate the square
   esRotate(  &userData->rotateMx, userData->angle, 1.0, 0.0, 1.0 );
}

///
// Draw a triangle using the shader pair created in Init()
//
void Draw ( ESContext *esContext )
{
   UserData *userData = esContext->userData;                                                                                                    
   GLfloat vVertices[] = { -0.5f,  0.5f, 0.0f,  // Position 0
                            0.0f,  1.0f,        // TexCoord 0
                           -0.5f, -0.5f, 0.0f,  // Position 1
                            0.0f,  0.0f,        // TexCoord 1
                            0.5f, -0.5f, 0.0f,  // Position 2
                            1.0f,  0.0f,        // TexCoord 2
                            0.5f,  0.5f, 0.0f,  // Position 3
                            1.0f,  1.0f         // TexCoord 3
                         };
   GLushort indices[] = { 0, 1, 2, 0, 2, 3 };

   // Set the viewport
   glViewport ( 0, 0, esContext->width, esContext->height );

   // Clear the color buffer
   glClear ( GL_COLOR_BUFFER_BIT );

   // Use the program object
   glUseProgram ( userData->programObject );

   // Load the vertex position
   glVertexAttribPointer ( userData->positionLoc, 3, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), vVertices );
   // Load the texture coordinate
   glVertexAttribPointer ( userData->texCoordLoc, 2, GL_FLOAT,
                           GL_FALSE, 5 * sizeof(GLfloat), &vVertices[3] );

   glEnableVertexAttribArray ( userData->positionLoc );
   glEnableVertexAttribArray ( userData->texCoordLoc );

   // Load the rotate matrix
   glUniformMatrix4fv( userData->rotateLoc, // userData->mvpLoc,
                       1, GL_FALSE, (GLfloat*) &userData->rotateMx.m[0][0] );

   // Bind the texture
   glActiveTexture ( GL_TEXTURE0 );
   glBindTexture ( GL_TEXTURE_2D, userData->textureId );

   // Set the sampler texture unit to 0
   glUniform1i ( userData->samplerLoc, 0 );

   glDrawElements ( GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices );

}

///
// Cleanup
//
void ShutDown ( ESContext *esContext )
{
   UserData *userData = esContext->userData;

   // Delete texture object
   glDeleteTextures ( 1, &userData->textureId );                                                                                                    

   // Delete program object
   glDeleteProgram ( userData->programObject );

   free(esContext->userData);
}

int main ( int argc, char *argv[] )
{
   ESContext esContext;
   UserData  userData;

   int width, height;
   GLubyte *image;

   image = esLoadTGA("jan.tga", &width, &height);
   if (image == NULL) {
       fprintf(stderr, "No such image
");
       exit(1);
   }
   printf("Width %d height %d
", width, height);

   userData.image = image;
   userData.width = width;
   userData.height = height;

   esInitContext ( &esContext );
   esContext.userData = &userData;

   esCreateWindow ( &esContext, "Simple Texture 2D", width, height, ES_WINDOW_RGB );

   if ( !Init ( &esContext ) )
      return 0;

   esRegisterDrawFunc ( &esContext, Draw );
   esRegisterUpdateFunc ( &esContext, Update );

   esMainLoop ( &esContext );

   ShutDown ( &esContext );
}

Run this by Rotate_Image. It shows the picture of me in a rotating square.