## WebGL Textures & Vertices

## Beginner's Guide

### Page Fifty Three

# 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.