OpenGL ES 2.0: Setting up 2D Projection

Question

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

• http://basic4gl.wikispaces.com/2D+Drawing+in+OpenGL

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 1

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.

Answer 2

From the glOrtho doc, with values substituted:

         2
    ------------       0              0             -1
       XSize
                       2
        0         ------------        0              1
                   - Ysize
        0              0              -2            -1
        0              0              0              1

Store this matrix in a uniform, and you can then apply it (ie do the M . v product) to your incoming vertex positions.