How to achieve glOrthof in OpenGL ES 2.0

Question

I am trying to convert my OpenGL ES 1 application to a OpenGL ES 2 application to be able to use Shaders. Now I use the glOrthof function to have a "real sized viewport" so I can place the vertices at the "actual" pixel in the OpenGL View.

glOrthof(0, _frame.size.width, _frame.size.height, 0, -1, 1);

I am having trouble finding out how to achieve this in OpenGL ES 2, is there anyone who can show me how to do this?

If not, does anyone have a link to a good OpenGL ES 1 to OpenGL ES 2 tutorial/explanation?

Answer 1

The glOrtho method does nothing else than create a new matrix and multiply the current projection matrix by this matrix. With OpenGL ES 2.0 you have to manage matrices yourself. In order to replicate the glOrtho behaviour you need a uniform for the projection matrix in your vertex shader, which you then multiply your vertices with. Usually you also have a model and a view matrix (or a combined modelview matrix, like in OpenGL ES 1) which you transform your vertices with before the projection transform:

uniform mat4 projection;
uniform mat4 modelview;

attribute vec4 vertex;

void main()
{
    gl_Position = projection * (modelview * vertex);
}

The specific projection matrix that glOrtho constructs can be found here.

Answer 2

As Christian describes, all of the matrix math for processing your vertices is up to you, so you have to replicate the matrix that glOrthof() creates. In my answer here, I provided the following Objective-C method for generating such an orthographic projection matrix:

- (void)loadOrthoMatrix:(GLfloat *)matrix left:(GLfloat)left right:(GLfloat)right bottom:(GLfloat)bottom top:(GLfloat)top near:(GLfloat)near far:(GLfloat)far;
{
    GLfloat r_l = right - left;
    GLfloat t_b = top - bottom;
    GLfloat f_n = far - near;
    GLfloat tx = - (right + left) / (right - left);
    GLfloat ty = - (top + bottom) / (top - bottom);
    GLfloat tz = - (far + near) / (far - near);

    matrix[0] = 2.0f / r_l;
    matrix[1] = 0.0f;
    matrix[2] = 0.0f;
    matrix[3] = tx;

    matrix[4] = 0.0f;
    matrix[5] = 2.0f / t_b;
    matrix[6] = 0.0f;
    matrix[7] = ty;

    matrix[8] = 0.0f;
    matrix[9] = 0.0f;
    matrix[10] = 2.0f / f_n;
    matrix[11] = tz;

    matrix[12] = 0.0f;
    matrix[13] = 0.0f;
    matrix[14] = 0.0f;
    matrix[15] = 1.0f;
}

The matrix used here is defined as

GLfloat orthographicMatrix[16];

I then apply the matrix within my vertex shader using something like the following:

gl_Position = modelViewProjMatrix * position * orthographicMatrix;

My multiplication order differs from Christian's, so I may be doing something a little backward here, but this is what I've used to handle this within an OpenGL ES 2.0 application of mine (the source code of which can be found here).