0

UPDATE: this code actually works. My bug was a stray call to glViewport; that seems to be browser-window anchored and not canvas-relative in webGL and it was pushing everything off-screen. So the code in this question shows how to create a correct orthogonal projection for WebGL:

webGL doesn't have gluOrtho2D. I have copied - and transposed, as OpenGL matrices should be - from glOrtho:

function createOrtho2D(left,right,bottom,top) {
    var near = -1, far = 1, rl = right-left, tb = top-bottom, fn = far-near;
    return [        2/rl,                0,              0,  0,
                       0,             2/tb,              0,  0,
                       0,                0,          -2/fn,  0,
        -(right+left)/rl, -(top+bottom)/tb, -(far+near)/fn,  1];
}

I then set my projection uniform using createOrtho2D(0,canvas.offsetWidth,canvas.offsetHeight,0).

For example, createOrtho2D(0,1024,768,0) =

[ 0.001953125,                      0,  0,  0, 
            0, -0.0026041666666666665,  0,  0, 
            0,                      0, -1,  0, 
           -1,                      1,  0,  1]

I upload this with gl.uniformMatrix4fv(this.program.mvp,false,mvp); and in the vertex shader apply it with gl_Position = mvp * vec4(vertex,z,1.0);.

However, this isn't working:

  • The point 10,10 is not visible on the screen
  • The point 10,100 is just about at the top of the screen

What have I got wrong?

Will
  • 73,905
  • 40
  • 169
  • 246
  • I think there must be some other error somewhere. If I multiply (10,10,0,1) by your ortho matrix shown, I get (-0.98, 0.974, 0, 1), which should be right at the top left corner of the screen in NDC. Perhaps there is something else in your uniform creation/upload code, or shader that is causing the problem. – Tim Aug 07 '12 at 21:14
  • Your matrix looks ok, if I'm not missing something it's the same I use for my projection matrix. – Roest Aug 07 '12 at 21:19
  • 1
    Btw I recommend using https://github.com/toji/gl-matrix there's no reason to reinvent the wheel – Roest Aug 07 '12 at 21:21

0 Answers0