9.2 - Orthographic Projections¶

The createOrthographic() function¶

The function createOrthographic() in the GlMatrix4x4.js file creates an orthographic projection transformation matrix. The function requires 6 parameters as shown in its function prototype below.

/** -----------------------------------------------------------------
 * Create an orthographic projection matrix.
 * @param left   {Number} Farthest left on the x-axis
 * @param right  {Number} Farthest right on the x-axis
 * @param bottom {Number} Farthest down on the y-axis
 * @param top    {Number} Farthest up on the y-axis
 * @param near   {Number} Distance to the near clipping plane along the -Z axis
 * @param far    {Number} Distance to the far clipping plane along the -Z axis
 * @return {Float32Array} The orthographic transformation matrix
 */
self.createOrthographic = function (left, right, bottom, top, near, far)

The six parameters form a rectangular cuboid that defines the visible area of a rendering. Experiment with the example below which allows you to change the parameters to a createOrthographic function call and see the resulting rendering in the second canvas window to the right. You can click and drag in the left canvas to modify your view of the virtual world.

Remember that the camera transform has already moved the world in front of a stationary camera which is at the origin looking down the -Z axis, as shown in the WebGL program below.

As you experiment with the orthographic parameters, please verify that you understand the following ideas:

• Geometric primitives (points, lines, or triangles) outside the viewing volume are clipped from view. (Geometric primitives can be partially visible if they intersect one of the viewing volume boundaries.)
• There are three renderings of the same model but each is located a different distance from the camera. Notice that all of the models are rendered the same size.
• Notice that parallel lines in the models are parallel in the rendering.
• If the aspect ratio of the projection’s width and height is different than the aspect ratio of the canvas’ width and height, the rendering is distorted. It is the programmer’s job to make sure the aspect ratios are consistent.
• Values for left and right are positions along the x-axis.
• Values for bottom and top are positions along the y-axis.
• Values for near and far are distances from the origin along the -Z axis.
• If near is negative, models behind the camera are rendered! (Strange but true!)
• If the value of left is greater than the value of right, the world is mirrored about the Y-Z plane. If the value of bottom is greater than the value of top, the world is mirror about the X-Z plane. If the value of near is greater than the value of far, the world is mirror about the X-Y plane.
• The viewing window is the front side of the viewing volume. It is defined in the lower-left corner by the point (left, bottom, near) and in the upper-right corner by the point (right, top, near).

The Orthographic Projection Matrix¶

As we discussed in the previous lesson, a projection matrix must transform the vertices in a scene into the clipping volume, which is a 2 unit wide cube as shown in the image to the right. This is easily done with three transformations:

1. Translate the volume defined by the createOrthographic parameters so that it is centered at the origin, then
2. Scale the volume to be a 2 unit wide cube using an appropriate scale factor for each axis, and then
3. Flip the z axis to match the clipping space’s coordinate system.

Let’s discuss the details of each step.

mid_x = (1-0.5)*left + (0.5)*right;  // t = 0.5

mid_x = (left + right) / 2;  // t = 0.5

mid_x = (left + right) / 2;
mid_y = (bottom + up) / 2;
mid_z = (-near + -far) / 2;

scale_x = 2.0 / (right - left);
scale_y = 2.0 / (up - bottom);
scale_z = 2.0 / (far - near);

Summary¶

If you want to understand complex transformations, break them down into their elementary steps.

An orthographic projection does not modify the relative relationships between vertices and therefore an object’s size does not change as it moves closer to (or farther away from) the camera.

An orthographic projection prepares vertices for clipping, which is the next stage of the graphics pipeline.

Glossary¶

orthographic projection

Transform the vertices of a 3D model into normalized device coordinates in preparation for clipping. A rendering maintains parallel lines and all models retain their size.