# Why does everything appear backwards when using orthographic projection?

I may not be calculating my orthographic projection matrix properly. What can I do to ensure that my scene renders correctly when using orthographic projection?

The rendering order appears to be backwards too (note the grid and how it appears half ontop, as if the z-buffer from the correct direction was being used). Disabling culling fixes things, but the view is still backwards.

Perspective:

Orthographic:

Matrix code for reference:

    Matrix4.createFrustum = function(left, right, bottom, top, near, far, result) {
if (typeof result === 'undefined') {
result = new Matrix4();
}

var re = result.elements;
var x = 2 * near / (right - left);
var y = 2 * near / (top - bottom);

var a = (right + left) / (right - left);
var b = (top + bottom) / (top - bottom);
var c = - (far + near) / (far - near);
var d = - 2 * far * near / (far - near);

re[0] = x; re[4] = 0; re[8]  = a; re[12] = 0;
re[1] = 0; re[5] = y; re[9]  = b; re[13] = 0;
re[2] = 0; re[6] = 0; re[10] = c; re[14] = d;
re[3] = 0; re[7] = 0; re[11] =-1; re[15] = 0;

return result;
};

Matrix4.createPerspective = function(fov, aspect, near, far, result) {
if (typeof result === 'undefined') {
result = new Matrix4();
}

var ymax = near * Math.tan(fov * Math.PI / 360);
var ymin = - ymax;
var xmin = ymin * aspect;
var xmax = ymax * aspect;

Matrix4.createFrustum(xmin, xmax, ymin, ymax, near, far, /*out*/ result);

return result;
};

Matrix4.createOrthographic = function(left, right, top, bottom, near, far, result) {
if (typeof result === 'undefined') {
result = new Matrix4();
}

var re = result.elements;
var w = right - left;
var h = top - bottom;
var p = far - near;

var x = ( right + left ) / w;
var y = ( top + bottom ) / h;
var z = ( far + near ) / p;

re[0] =2/w;  re[4] = 0;   re[8]  = 0;   re[12] =-x;
re[1] = 0;   re[5] =2/h;  re[9]  = 0;   re[13] =-y;
re[2] = 0;   re[6] = 0;   re[10] =-2/p; re[14] =-z;
re[3] = 0;   re[7] = 0;   re[11] = 0;   re[15] = 1;

return result;
};


Just a guess but if looks like you are using a Left-handed coordinate system and a Right-Handed Coordinate system together.... If you have an option to Matrix4.createOrthographicLH or Matrix4.createOrthographicRH or something like that try it and see what happens.

You could also try flipping the values in Matrix4.createOrthographic for top & bottom.

Those are all guesses, to do more I would need to see how you are calculating the values for left, right, top & bottom as well as how you are generating the Perspective View matrix?

-------- Edit -----------

Looking at it I think you need to do this: var h = bottom - top;

top - bottom is going to give you a negative number.

• I have added the perspective matrix functions as well Commented Jan 31, 2014 at 23:54
• Switching the order on h totally did the trick! Thanks! Commented Jan 31, 2014 at 23:57