game design - OpenGL ES 2.0: Setting up 2D Projection

This article describes in general, how to draw sharp OpenGL 2D graphics, using fixed function pipeline.

Because OpenGL ES 2.0 has some ES 1.x functions not available (such as: glOrtho()), their functionality must be substituted in Fragment/Vertex shaders.

My question is, how to setup the following 2D projection in programmable function pipeline?

const XSize = 640, YSize = 480
glMatrixMode (GL_PROJECTION)
glLoadIdentity ();
glOrtho (0, XSize, YSize, 0, 0, 1)
glMatrixMode (GL_MODELVIEW)

How Fragment and Vertex shaders must be configured to fully substitute the above mentioned fixed function 2D projection setup?

Answer

In my OpenGL ES 2.X engine, i compute the MVP matrix (Model View Projection) on CPU Side and inject it in vertex shader.

The Orthogonal projection is a 4*4 matrix. When i have the MVP, i inject it in the vertex shader with:

 mMvpLoc = getUniformLocation("uMvp");
 glUniformMatrix4fv(mMvpLoc, 1, false, mMvp.pointer());

The mMvp is my matrix 4*4 on CPU side. The getUniformLocation can be done only one time after you have loaded the program shader.

An example of vertex shader:

uniform mat4    uMvp;
attribute vec3 aPosition;

varying vec4 vColor;

void main() {
   vec4 position = vec4(aPosition.xyz, 1.);
   gl_Position = uMvp * position;
}

The gl_Position is a special predefined variable. It must contain the position of the vertex.

An example of fragment shader. For each point to draw, the final color "gl_FragColor" must be computed:

#ifdef GL_ES

precision highp float;
#endif

void main(void)
{
   gl_FragColor = vColor;
}

This program draw a triangle with a smoothing of colors defined for each vertex.

For a better tutorial, look this wonderful document.