# Perspective Projection

This section introduces the purpose and implementation of perspective projection. We describe how to prepare and upload a perspective projection matrix.

We previously discussed the controller's calls to `getProgram()` and `getShader()`. Next the controller calls `getProgramVariables()`. First `getProgramVariables()` prepares and uploads a perspective projection matrix. Later `getProgramVariables()` accesses and processes shader variables.

## Perspective Projection Overview

Perspective projection provides the illusion of depth and volume. Mesh elements in the distance appear smaller and closer together. Lines converge toward one point, as they appear to extend into the distance. The book uses a 4 x 4 matrix to accomplish perspective projection.

## The Book's Perspective Projection Matrix

The book prepares one JavaScript 4 x 4 matrix for perspective projection, then uploads the matrix to the vertex shader's uniform named `um4_pmatrix`. The vertex shader then multiplies every vertex in a mesh by the matrix.

When the matrix modifies the location of every vertex, then the appearance of the entire mesh changes. The following line from the vertex shader, demonstrates how to multiply each vertex by the perspective projection uniform named `um4_pmatrix`. The attribute `a_position` contains coordinates for one vertex at a time. The uniform `um4_matrix` represents rotation around the Y axis and translation along the Z axis. When the vertex shader completes processing every vertex in a mesh, then the mesh appears rotated and in perspective.

`gl_Position = um4_pmatrix * um4_matrix * a_position;`

### Listing 46: Perspective Projection in the Vertex Shader

The book's perspective projection matrix applies operations to each vertex in a mesh, based on one point called the center of projection. The center of projection is similar to the artistic concept of a vanishing point. The center of projection represents a point far in the distance, where objects appear so small they seem to vanish.

Our perspective projection matrix generates a center of projection at the exact mid point of the canvas. The farther a vertex is from the viewport along the Z axis, the closer the vertex appears to the center of the canvas.

The following illustration demonstrates the center of projection with a cube. The vertices which outline the back of the cube, appear closer to the center of projection, than those vertices which outline the front face of the cube. The back face of the cube is smaller and farther right, than the front face of the cube. The top edge of the cube's right face angles downward toward the center of projection. The bottom edge of the cube's right face angles upward toward the center of projection.