WebGL Textures & Vertices: Beginner's Guide (2015)
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.
Diagram 17: Center of Projection
Upload a Perspective Projection Matrix to the Shader
The controller's constructor calls method getProgramVariables() which prepares shader variables, including the perspective projection matrix. The method getProgramVariables() follows three steps to upload a perspective projection matrix to the shader.
1. Obtain the location of um4_pmatrix from the vertex shader with WebGL method getUniformLocation.
2. Generate a 4 x 4 JavaScript matrix with values for perspective projection.
3. Upload the JavaScript matrix to um4_pmatrix with WebGL method uniformMatrix4fv().