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?


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;

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.

  • \$\begingroup\$ Hello Ellis, this is excellent and complete answer. Thank you very much. Regards. \$\endgroup\$ Oct 6 '10 at 11:11
  • \$\begingroup\$ In your first code snippet, did you mean mMvpLoc.pointer()? \$\endgroup\$ Oct 28 '20 at 3:05

From the glOrtho doc, with values substituted:

    ------------       0              0             -1
        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.

  • \$\begingroup\$ Dear Bahbar, Thank you for the answer. So basically, there is nothing else different in ES2.0, just manually creating glOrtho() matrix replacement. \$\endgroup\$ Oct 6 '10 at 11:10
  • \$\begingroup\$ @Bunkai.Satori: Well, there is a little bit more in that typically, GL uploads a composite of modelview and projection to a uniform. \$\endgroup\$
    – Bahbar
    Oct 6 '10 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.