15
\$\begingroup\$

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?

\$\endgroup\$
12
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\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
9
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .