WebGL Isometric projection

Question

Alright- going nuts here. I\'m doing some WebGL and I\'m trying to make an isometric cube. I don\'t want to use Three.js. I want to first understand what is going wrong in m

Answer 1

All that the projection matrix does is map your scene's coordinate system to a [-1, 1] range on the X and Y axes, which is the space that is used when rendering fragments to your window. It is possible to construct your scene in such a way that it renders to that [-1, 1] space directly, in which case no projection matrix is needed (which may be what you were referring to with the examples leaving it out, but this is typically not the case.

When using a perspective matrix as your projection matrix, the X and Y coordinates are scaled by the Z value, giving them an appearance of depth. If that effect is undesirable, you can eliminate the depth scaling by using an orthographic matrix, like so:

mat4.ortho(left, right, bottom, top, 0.1, 100.0, pMatrix);

What left/right/top/bottom are is up to you, but typically these will correspond in some way with the dimensions of your WebGL viewport. For example, if your WebGL window was 640x480 you could do:

mat4.ortho(0, 640, 0, 480, 0.1, 100.0, pMatrix);

Which would cause any vertex placed at (0, 0) to render in the bottom left corner of the window, and any vertex placed at the (648, 480) to render in the top right. The z component of those vertices would have no effect. This is a popular technique to use for rendering GUI elements, sprites, or isometric graphics like you are attempting to do.

Hope that helps!